Implement tutorial

clovercharms · Nov 19, 2023 · 847bd01 · 847bd01
1 parent 0a5fedb
commit 847bd01
Show file tree

Hide file tree

Showing 18 changed files with 475 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,11 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <link rel="icon" type="image/x-icon" href="/src/assets/fuyo.jpg" />
+        <link
+            rel="icon"
+            type="image/x-icon"
+            href="/src/assets/images/fuyo.jpg"
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Peach Colored Hair</title>
     </head>

diff --git a/src/assets/images/tutorial/clicker.png b/src/assets/images/tutorial/clicker.png
diff --git a/src/assets/images/tutorial/repro.png b/src/assets/images/tutorial/repro.png
diff --git a/src/assets/images/tutorial/shop.png b/src/assets/images/tutorial/shop.png
diff --git a/src/components/dialog/index.module.css b/src/components/dialog/index.module.css
@@ -20,15 +20,46 @@
 
     & h1,
     & h2,
-    & h3 {
+    & h3,
+    & p {
         color: white;
         font-weight: 400;
         -webkit-text-stroke: 1.5px black;
-        margin-bottom: 0.5rem;
+    }
+
+    & h2 {
+        -webkit-text-stroke: 1.3px black;
+    }
+
+    & h3,
+    & p {
+        -webkit-text-stroke: 1.2px black;
+    }
+
+    & p {
+        font-size: 1.5rem;
     }
 
     & hr {
         margin: 1rem -0.8rem;
         border-color: black;
     }
 }
+
+@-moz-document url-prefix() {
+    .dialog {
+        & h1,
+        & h2,
+        & h3 {
+            -webkit-text-stroke: 1.5px black;
+        }
+
+        & h2 {
+            -webkit-text-stroke: 1.1px black;
+        }
+
+        & h3 {
+            -webkit-text-stroke: 1.01px black;
+        }
+    }
+}
diff --git a/src/components/popups/slice.ts b/src/components/popups/slice.ts
@@ -5,7 +5,7 @@ import { produce } from "immer";
 import { resetters } from "../../stores/game/resetters";
 import { LaneType } from "../lanes/lane/data";
 
-import { Step } from "./tutorial";
+import { Step } from "./tutorial/steps";
 
 /**
  * Slice of the state of popups in the game.

diff --git a/src/components/popups/tutorial/index.module.css b/src/components/popups/tutorial/index.module.css
@@ -1,9 +1,86 @@
+@keyframes background-scroll {
+    0% {
+        background-position-y: 0rem;
+    }
+    100% {
+        background-position-y: 1.75rem;
+    }
+}
+
 .tutorial {
+    width: 35rem;
+
+    & h1 {
+        margin-bottom: 0.5rem;
+    }
+
     &.floating {
         margin: 0;
     }
 
+    & .border {
+        border-image: url("/src/assets/images/shop/upgrades/upgrades-frame.png")
+            30 24 stretch;
+        border-image-width: 0.8rem;
+        padding: 0.6rem 0.7rem 0.5rem 0.7rem;
+    }
+
+    & .container {
+        display: flex;
+        gap: 1rem;
+        align-items: flex-start;
+        margin-bottom: 1rem;
+    }
+
+    & .lime-text {
+        color: lime;
+    }
+
+    & .violet-text {
+        color: violet;
+    }
+
+    & .crimson-text {
+        color: crimson;
+        -webkit-text-stroke-color: white;
+    }
+
+    & .yellow-text {
+        color: yellow;
+    }
+
+    & .gold-text {
+        background-image: linear-gradient(
+            0deg,
+            yellow 25%,
+            white 50%,
+            yellow 75%
+        );
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+        animation: 2s background-scroll linear infinite forwards;
+    }
+
+    & .rainbow-text {
+        background-image: linear-gradient(
+            0deg,
+            #ff32d1,
+            #ff202d,
+            #ff7600,
+            #d5f300,
+            #00ff00,
+            #00b7f6,
+            #ff32d1
+        );
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+        animation: 5s background-scroll linear infinite forwards;
+    }
+
     & > .controls {
         display: flex;
+        justify-content: space-between;
     }
 }
diff --git a/src/components/popups/tutorial/index.tsx b/src/components/popups/tutorial/index.tsx
@@ -1,23 +1,20 @@
-/* eslint-disable react-refresh/only-export-components */
 import { useGameStore } from "@/stores/game";
 import { Button } from "@/components/button";
 import { Dialog } from "@/components/dialog";
-import { Placement, autoUpdate, useFloating } from "@floating-ui/react-dom";
+import {
+    Placement,
+    autoUpdate,
+    shift,
+    useFloating,
+} from "@floating-ui/react-dom";
 import { useEffect, useState } from "react";
 import cx from "classix";
 
 import { PopupsRefs } from "..";
 
+import { Step, meta } from "./steps";
 import classes from "./index.module.css";
 
-export enum Step {
-    START,
-    CLICKER,
-    REPRO,
-    SHOP,
-    END,
-}
-
 export interface TutorialProps {
     refs: PopupsRefs;
 }
@@ -32,32 +29,23 @@ export function Tutorial({ refs }: TutorialProps) {
         update,
     } = useFloating({
         placement: placement,
+        middleware: [shift()],
         whileElementsMounted: autoUpdate,
     });
 
     useEffect(() => {
-        switch (tutorial.step) {
-            case Step.CLICKER:
-                floatingRefs.setReference(refs.clicker.current);
-                setPlacement("right");
-                update();
-                break;
-            case Step.REPRO:
-                floatingRefs.setReference(refs.repro.current);
-                setPlacement("left");
-                break;
-            case Step.SHOP:
-                floatingRefs.setReference(refs.shop.current);
-                setPlacement("left");
-                break;
-            default:
-                floatingRefs.setReference(null);
-                break;
-        }
+        if (!meta[tutorial.step]?.position) return;
+        const position = meta[tutorial.step]!.position!;
+
+        floatingRefs.setReference(refs[position.reference].current);
+        setPlacement(position.placement);
+        update();
     }, [tutorial.step, refs, floatingRefs, update]);
 
     if (tutorial.step === Step.END) return;
 
+    const StepContent = meta[tutorial.step]?.component;
+
     return (
         <Dialog
             ref={floatingRefs.setFloating}
@@ -69,20 +57,21 @@ export function Tutorial({ refs }: TutorialProps) {
             open={true}
             closeable={false}
         >
-            <h1>Welcome to Fuyo Clicker! {tutorial.step}</h1>
-            <h3>Lorem ipsum</h3>
+            {StepContent && <StepContent />}
             <div className={classes.controls}>
-                <Button
-                    onClick={() =>
-                        tutorial.setStep(
-                            Math.max(Step.START, tutorial.step - 1)
-                        )
-                    }
-                >
-                    Prev
-                </Button>
+                {tutorial.step !== Step.START && (
+                    <Button
+                        onClick={() =>
+                            tutorial.setStep(
+                                Math.max(Step.START, tutorial.step - 1)
+                            )
+                        }
+                    >
+                        ◀ Prev
+                    </Button>
+                )}
                 <Button onClick={() => tutorial.setStep(tutorial.step + 1)}>
-                    Next
+                    {tutorial.step !== Step.SHOP ? "Next ▶" : "Finish ▶ 🏁"}
                 </Button>
             </div>
         </Dialog>

diff --git a/src/components/popups/tutorial/steps/clicker/index.module.css b/src/components/popups/tutorial/steps/clicker/index.module.css
@@ -0,0 +1,18 @@
+@keyframes background-scroll {
+    0% {
+        background-position-y: 0rem;
+    }
+    100% {
+        background-position-y: 1.75rem;
+    }
+}
+
+.clicker {
+    & .coin {
+        height: 384px;
+    }
+
+    & .spill {
+        height: 80px;
+    }
+}
diff --git a/src/components/popups/tutorial/steps/clicker/index.tsx b/src/components/popups/tutorial/steps/clicker/index.tsx
@@ -0,0 +1,40 @@
+import coin from "@/assets/images/tutorial/clicker.png";
+import spill from "@/assets/images/spill.png";
+
+import tutorialClasses from "../../index.module.css";
+
+import classes from "./index.module.css";
+
+export function Clicker() {
+    return (
+        <article className={classes.clicker}>
+            <h1>Fuyo Coin</h1>
+            <div className={tutorialClasses.container}>
+                <div className={tutorialClasses.border}>
+                    <img src={coin} className={classes.coin}></img>
+                </div>
+                <div>
+                    <h2>Collecting Coins</h2>
+                    <p>
+                        Click on the{" "}
+                        <span className={tutorialClasses["gold-text"]}>
+                            Fuyo Coin
+                        </span>{" "}
+                        repeatedly to steal coins. Depending on upgrades, this
+                        can be quite powerful!
+                    </p>
+                    <h2>Fuyonade</h2>
+                    <p>
+                        A{" "}
+                        <span className={tutorialClasses["rainbow-text"]}>
+                            certain liquid
+                        </span>{" "}
+                        will fill up over time, granting a short bonus to
+                        production. Whenever it fills up, be sure to spill it!
+                    </p>
+                    <img src={spill} className={classes.spill} />
+                </div>
+            </div>
+        </article>
+    );
+}
diff --git a/src/components/popups/tutorial/steps/index.ts b/src/components/popups/tutorial/steps/index.ts
@@ -0,0 +1,52 @@
+import { Placement } from "@floating-ui/dom";
+import { ComponentType } from "react";
+
+import { PopupsRefs } from "../..";
+
+import { Start } from "./start";
+import { Clicker } from "./clicker";
+import { Repro } from "./repro";
+import { Shop } from "./shop";
+
+export enum Step {
+    START,
+    CLICKER,
+    REPRO,
+    SHOP,
+    END,
+}
+
+export interface StepMeta {
+    component: ComponentType;
+    position?: {
+        reference: keyof PopupsRefs;
+        placement: Placement;
+    };
+}
+
+export const meta: Partial<Record<Step, StepMeta>> = {
+    [Step.START]: {
+        component: Start,
+    },
+    [Step.CLICKER]: {
+        component: Clicker,
+        position: {
+            reference: "clicker",
+            placement: "right",
+        },
+    },
+    [Step.REPRO]: {
+        component: Repro,
+        position: {
+            reference: "repro",
+            placement: "left",
+        },
+    },
+    [Step.SHOP]: {
+        component: Shop,
+        position: {
+            reference: "shop",
+            placement: "left",
+        },
+    },
+};