Add testimonials + social media cards

aryanpingle · aryanpingle · commit 2201582cce52 · 2024-09-24T21:27:21.000+05:30
diff --git a/dist/images/boss.jpg b/dist/images/boss.jpg
diff --git a/dist/images/librarian.jpg b/dist/images/librarian.jpg
diff --git a/dist/index.html b/dist/index.html
@@ -79,6 +79,14 @@ <h2>Runic Playground</h2>
                 <div class="runic-playground-container"></div>
             </article>
 
+            <article>
+                <section>
+                    <h2>Testimonials</h2>
+                    <p>See what fans are saying about this site!</p>
+                </section>
+                <div class="testimonials-container"></div>
+            </article>
+
             <article>
                 <section>
                     <p>Made by Aryan Pingle.</p>
diff --git a/src/components/SocialMediaCard/index.css b/src/components/SocialMediaCard/index.css
@@ -0,0 +1,78 @@
+.sm-card {
+    --sm-card--color-dark: black;
+    --sm-card--color-light: rgb(83, 100, 113);
+
+    color: var(--sm-card--color-dark);
+
+    font-size: 0.75em;
+    padding: 0.5em 1em;
+    background-color: white;
+    border-radius: 1em;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr auto;
+    column-gap: 0.5em;
+    height: 15em;
+    max-width: 60ch;
+    width: 100%;
+}
+
+.sm-card__pfp {
+    grid-row: span 3;
+    width: 2em;
+    height: 2em;
+    background-color: red;
+    border-radius: 100%;
+
+    overflow: hidden;
+}
+
+.sm-card__pfp > img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.sm-card__header {
+}
+
+.sm-card__display-name {
+    font-weight: 700;
+    margin-right: 0.5em;
+    display: inline-block;
+}
+
+.sm-card__handle {
+    color: var(--sm-card--color-light);
+    display: inline-block;
+}
+
+.sm-card__content {
+    flex: 1 0 0;
+    overflow: hidden;
+}
+
+.sm-card__content > svg {
+    /* height: 100%; */
+}
+
+.sm-card__interactions {
+    padding-top: 0.5em;
+    flex: 0 0 auto;
+    color: var(--sm-card--color-light);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.sm-card__interactions > span {
+    overflow: hidden;
+}
+
+.sm-card__interactions svg {
+    width: 1em;
+    height: 1em;
+    vertical-align: text-top;
+    margin-right: 0.5em;
+}
diff --git a/src/components/SocialMediaCard/index.tsx b/src/components/SocialMediaCard/index.tsx
@@ -0,0 +1,63 @@
+import { SocialMediaCommentIcon, SocialMediaHeartIcon, SocialMediaRepostIcon, SocialMediaViewsIcon } from "components/icons";
+import "./index.css";
+
+import { RuneSVG } from "components/RuneSVG";
+import { h, Component, VNode } from "preact";
+import { translateSentence } from "../../ipa";
+
+export interface SocialMediaCardProps {
+    pfp: VNode<HTMLImageElement>;
+    displayName: string;
+    handle: string;
+    phoneticText: string;
+    likes: number;
+    comments: number;
+    reposts: number;
+    views: number;
+}
+
+interface State {}
+
+export class SocialMediaCard extends Component<SocialMediaCardProps, State> {
+    render(props: SocialMediaCardProps, state: State) {
+        return (
+            <div class="sm-card">
+                <div className="sm-card__pfp">{props.pfp}</div>
+                <div className="sm-card__header">
+                    <span className="sm-card__display-name">
+                        {props.displayName}
+                    </span>
+                    <span className="sm-card__handle">
+                        @{props.handle} · Sep 23
+                    </span>
+                </div>
+                <div className="sm-card__content">
+                    <RuneSVG
+                        phoneticText={props.phoneticText}
+                        displayPhonemes={false}
+                        interactive={false}
+                        runeColor="black"
+                    />
+                </div>
+                <div className="sm-card__interactions">
+                    <span>
+                        <SocialMediaCommentIcon />
+                        {props.comments.toLocaleString()}
+                    </span>
+                    <span>
+                        <SocialMediaRepostIcon />
+                        {props.reposts.toLocaleString()}
+                    </span>
+                    <span>
+                        <SocialMediaHeartIcon />
+                        {props.likes.toLocaleString()}
+                    </span>
+                    <span>
+                        <SocialMediaViewsIcon />
+                        {props.likes.toLocaleString()}
+                    </span>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/components/Testimonials/index.css b/src/components/Testimonials/index.css
@@ -0,0 +1,20 @@
+.testimonials {
+    display: grid;
+    width: 100%;
+    gap: 0.5em;
+    justify-items: center;
+}
+
+/* Mobile - Vertical only */
+
+.testimonials {
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+}
+
+@media (min-width: 1024px) {
+    .testimonials {
+        grid-template-columns: 1fr 1fr;
+        grid-auto-rows: auto;
+    }
+}
diff --git a/src/components/Testimonials/index.tsx b/src/components/Testimonials/index.tsx
@@ -0,0 +1,53 @@
+import "./index.css";
+import { h, Component } from "preact";
+import {
+    SocialMediaCard,
+    SocialMediaCardProps,
+} from "components/SocialMediaCard";
+
+interface Props {}
+
+interface State {}
+
+const holyCrossPhonetic = `
+nɔɹ wɛ is         is
+saʊ   is   saʊ saʊ   nɔɹ
+saʊ   wɛ nɔɹ is nɔɹ   saʊ
+O         wɛ is wɛ
+`.trim();
+
+const testimonialsInfo: SocialMediaCardProps[] = [
+    {
+        pfp: <img src="./images/boss.jpg" alt="Boss Scavenger" />,
+        displayName: "ScavQueen 🌸",
+        handle: "boss.scavenger642",
+        phoneticText: "ðɪs ɪz ɑsəm!\n@#runic@",
+        comments: 300,
+        likes: 1000,
+        reposts: 1010,
+        views: 50000,
+    },
+    {
+        pfp: <img src="./images/librarian.jpg" alt="The Librarian" />,
+        displayName: "Holy Cross 🐐",
+        handle: "the.librarian",
+        phoneticText:
+            `bɔɹɪŋ. ɛniweɪ.\n\n${holyCrossPhonetic}\n@#runic@`,
+        comments: 300,
+        likes: 1000,
+        reposts: 1010,
+        views: 50000,
+    },
+];
+
+export class Testimonials extends Component<Props, State> {
+    render(props: Props, state: State) {
+        return (
+            <div className="testimonials">
+                {...testimonialsInfo.map((info) => (
+                    <SocialMediaCard {...info} />
+                ))}
+            </div>
+        );
+    }
+}
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -116,3 +116,47 @@ export const RightAlignIcon = (props: preact.JSX.HTMLAttributes) => (
         />
     </svg>
 );
+
+export const SocialMediaHeartIcon = (props: preact.JSX.HTMLAttributes) => (
+    // @ts-ignore - HTML attributes are valid for SVG
+    <svg viewBox="0 0 24 24" {...props}>
+        <path
+            d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
+            fill="currentColor"
+            stroke="currentColor"
+        ></path>
+    </svg>
+);
+
+export const SocialMediaCommentIcon = (props: preact.JSX.HTMLAttributes) => (
+    // @ts-ignore - HTML attributes are valid for SVG
+    <svg viewBox="0 0 24 24" {...props}>
+        <path
+            d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"
+            fill="currentColor"
+            stroke="currentColor"
+        ></path>
+    </svg>
+);
+
+export const SocialMediaViewsIcon = (props: preact.JSX.HTMLAttributes) => (
+    // @ts-ignore - HTML attributes are valid for SVG
+    <svg viewBox="0 0 24 24" {...props}>
+        <path
+            d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"
+            fill="currentColor"
+            stroke="currentColor"
+        ></path>
+    </svg>
+);
+
+export const SocialMediaRepostIcon = (props: preact.JSX.HTMLAttributes) => (
+    // @ts-ignore - HTML attributes are valid for SVG
+    <svg viewBox="0 0 24 24" {...props}>
+        <path
+            d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
+            fill="currentColor"
+            stroke="currentColor"
+        ></path>
+    </svg>
+);
diff --git a/src/holyCross.ts b/src/holyCross.ts
@@ -0,0 +1,59 @@
+// prettier-ignore
+const goldenPathDirections = ["South", "South", "North", "West", "East", "East", "West", "North", "East", "South", "South", "North", "West", "East", "West", "South", "North", "East"];
+
+// For debugging
+// const goldenPathDirections = ["North", "South", "West", "East"];
+
+const keyToDirection = {
+    ArrowUp: "North",
+    ArrowDown: "South",
+    ArrowLeft: "West",
+    ArrowRight: "East",
+};
+
+let goldenPathIndex = 0;
+let goldenPathComplete = false;
+
+function onKeyDown(event: KeyboardEvent) {
+    const key = event.key;
+
+    // Check if an arrow key was pressed
+    if (!(key in keyToDirection)) {
+        // Arrow key was not pressed
+        goldenPathIndex = 0;
+        return;
+    } else {
+        // Arrow key was pressed
+
+        // Prevent multiple golden path rewards
+        if (goldenPathComplete) return;
+
+        const directionPressed = keyToDirection[key];
+
+        // Check if the correct key was pressed
+        if (goldenPathDirections[goldenPathIndex] !== directionPressed) {
+            // Wrong key was pressed
+            console.log("WRONG");
+            goldenPathIndex = 0;
+            return;
+        } else {
+            // Correct arrow key pressed
+            ++goldenPathIndex;
+
+            if (goldenPathIndex === goldenPathDirections.length) {
+                // Golden path has been travelled!
+                goldenPathComplete = true;
+                onGoldenPathTravelled();
+            }
+        }
+    }
+}
+
+function onGoldenPathTravelled() {
+    // TODO: Do something cool
+    console.log("GOLDEN PATH TRAVELLED!");
+}
+
+export function addGoldenPathListener() {
+    document.addEventListener("keydown", onKeyDown);
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -6,6 +6,8 @@ import "./index.css";
 import { RuneReferenceTable } from "components/RuneReference";
 import { consonantDataTable, vowelDataTable } from "./runeDataset";
 import { RunicPlayground } from "components/RunicPlayground";
+import { Testimonials } from "components/Testimonials";
+import { addGoldenPathListener } from "./holyCross";
 
 async function setup() {
     await loadIPADict();
@@ -16,12 +18,6 @@ async function setup() {
         document.querySelector(".runic-editor-container"),
     );
 
-    // Runic Playground
-    render(
-        <RunicPlayground />,
-        document.querySelector(".runic-playground-container"),
-    );
-
     // Vowel Table
     render(
         <RuneReferenceTable table={vowelDataTable}></RuneReferenceTable>,
@@ -33,5 +29,19 @@ async function setup() {
         <RuneReferenceTable table={consonantDataTable}></RuneReferenceTable>,
         document.querySelector("#rune-consonant-table"),
     );
+
+    // Runic Playground
+    render(
+        <RunicPlayground />,
+        document.querySelector(".runic-playground-container"),
+    );
+
+    // Testimonials Section
+    render(
+        <Testimonials />,
+        document.querySelector(".testimonials-container")
+    );
+
+    addGoldenPathListener();
 }
 setup();
