Merge pull request #17 from esc-chula/neen/mute-button

Mute Button
esc-chula · Sep 4, 2024 · c1154d3 · c1154d3
2 parents 749e86e + fe811be
commit c1154d3
Show file tree

Hide file tree

Showing 55 changed files with 556 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/story/scene-3/01.webp b/src/assets/story/scene-3/01.webp
diff --git a/src/assets/story/scene-3/02.webp b/src/assets/story/scene-3/02.webp
diff --git a/src/assets/story/scene-3/03.webp b/src/assets/story/scene-3/03.webp
diff --git a/src/assets/story/scene-3/04.webp b/src/assets/story/scene-3/04.webp
diff --git a/src/assets/story/scene-3/05.webp b/src/assets/story/scene-3/05.webp
diff --git a/src/assets/story/scene-3/06.webp b/src/assets/story/scene-3/06.webp
diff --git a/src/assets/story/scene-3/07.webp b/src/assets/story/scene-3/07.webp
diff --git a/src/assets/story/scene-3/08.webp b/src/assets/story/scene-3/08.webp
diff --git a/src/assets/story/scene-3/09.webp b/src/assets/story/scene-3/09.webp
diff --git a/src/assets/story/scene-3/10.webp b/src/assets/story/scene-3/10.webp
diff --git a/src/assets/story/scene-3/11.webp b/src/assets/story/scene-3/11.webp
diff --git a/src/assets/story/scene-3/12.webp b/src/assets/story/scene-3/12.webp
diff --git a/src/assets/story/scene-3/13.webp b/src/assets/story/scene-3/13.webp
diff --git a/src/assets/story/scene-3/14.webp b/src/assets/story/scene-3/14.webp
diff --git a/src/assets/story/scene-3/15.webp b/src/assets/story/scene-3/15.webp
diff --git a/src/assets/story/scene-3/16.webp b/src/assets/story/scene-3/16.webp
diff --git a/src/assets/story/scene-3/17.webp b/src/assets/story/scene-3/17.webp
diff --git a/src/assets/ui/muteIcon.png b/src/assets/ui/muteIcon.png
diff --git a/src/assets/ui/unmuteIcon.png b/src/assets/ui/unmuteIcon.png
diff --git a/src/components/MuteButton.tsx b/src/components/MuteButton.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+import { settings } from "@/stores/settingsStores";
+
+import MuteImage from "@/assets/ui/muteIcon.png";
+import UnmuteImage from "@/assets/ui/unmuteIcon.png";
+
+const MuteButton = () => {
+  const [mute, setMute] = useState<string>("false");
+
+  useEffect(() => {
+    setMute(settings.get().mute);
+  }, []);
+
+  const handleClick = () => {
+    settings.setKey("mute", settings.get().mute === "true" ? "false" : "true");
+    setMute(settings.get().mute);
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      className="absolute right-5 top-5 z-[999] cursor-pointer select-none"
+    >
+      {mute === "true" ? (
+        <img className="h-10 w-10" src={UnmuteImage.src} alt="unmute" />
+      ) : (
+        <img className="h-10 w-10" src={MuteImage.src} alt="mute" />
+      )}
+    </div>
+  );
+};
+
+export default MuteButton;
diff --git a/src/components/StartingScene.tsx b/src/components/StartingScene.tsx
@@ -40,7 +40,7 @@ const StartingScene = () => {
         }}
         className="absolute z-0"
       />
-      {lastImage && <Tap delay={0.5} redirectUrl="/story/0-03" />}
+      {lastImage && <Tap delay={0.5} redirectUrl="/story/0-02" />}
     </>
   );
 };

diff --git a/src/components/inputs/AnswerButton.tsx b/src/components/inputs/AnswerButton.tsx
@@ -10,9 +10,6 @@ const AnswerButton = ({
   redirectUrl: string;
 }) => {
   const handleClick = () => {
-    // TODO: Implement stores
-    console.log(`You clicked the ${attribute} button!`);
-
     const currentScoreStr = userAnswer.get()[attribute] || "0";
     const currentScore = parseInt(currentScoreStr, 10);
     userAnswer.setKey(attribute, (currentScore + 1).toString());

diff --git a/src/components/start/ResetScores.tsx b/src/components/start/ResetScores.tsx
@@ -1,10 +1,8 @@
-import { useStore } from "@nanostores/react";
-
-import { userAnswer } from "@/stores/userAnswerStores";
+import { settings } from "@/stores/settingsStores";
 
 const ResetScores = () => {
-  const answers = useStore(userAnswer);
-  // TODO: RESET SCORE
+  settings.setKey("mute", "false");
+  // TODO: RESET SCORES
   return null;
 };
 

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -7,6 +7,8 @@ import "@fontsource/chakra-petch/700.css";
 
 import { ViewTransitions } from "astro:transitions";
 
+import MuteButton from "@/components/MuteButton";
+
 interface Props {
   title?: string;
 }
@@ -26,8 +28,8 @@ const { title = "Astro APP" } = Astro.props;
   </head>
   <body>
     <main
-      class="absolute left-1/2 -z-50 flex min-h-dvh w-full max-w-md -translate-x-1/2 overflow-hidden bg-gray-100"
-    >
+      class="absolute left-1/2 -z-50 flex min-h-dvh w-full max-w-md -translate-x-1/2 overflow-hidden bg-gray-100">
+      <MuteButton client:load />
       <slot />
     </main>
   </body>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,6 +2,7 @@
 import BaseLayout from "@/layouts/BaseLayout.astro";
 
 import TextBubble from "@/components/TextBubble";
+
 ---
 
 <BaseLayout>

diff --git a/src/pages/story/0-02.astro b/src/pages/story/0-02.astro
@@ -1,13 +1,11 @@
 ---
 import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
 
+import Tap from "@/components/Tap";
+
 import BackgroundImage from "@/assets/story/scene-0/07.webp";
 ---
 
 <ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
-  <a
-    href="/story/0-03"
-    class="absolute bottom-1/4 right-8 z-50 rounded-full bg-yellow-100 bg-opacity-70 p-12 text-black hover:cursor-pointer"
-    >Tap</a
-  >
+  <Tap delay={0.5} redirectUrl="/story/0-03" client:load />
 </ImagePageLayout>
diff --git a/src/pages/story/0-03.astro b/src/pages/story/0-03.astro
@@ -10,7 +10,6 @@ import BackgroundLowRes from "@/assets/story/scene-0/08-low.webp";
 <ImagePageLayout
   backgroundColor="bg-[#303030]"
   image={BackgroundImage}
-  imageLowRes={BackgroundLowRes}
->
+  imageLowRes={BackgroundLowRes}>
   <Tap delay={0.5} redirectUrl="/story/0-04" client:load />
 </ImagePageLayout>
diff --git a/src/pages/story/0-07.astro b/src/pages/story/0-07.astro
@@ -15,5 +15,5 @@ import BackgroundImage from "@/assets/story/scene-0/12.webp";
       className="bg-chathai"
     />
   </div>
-  <NameInput redirectUrl="/story/0-08" client:only />
+  <NameInput redirectUrl="/story/0-08" client:load />
 </ImagePageLayout>
diff --git a/src/pages/story/3-01.astro b/src/pages/story/3-01.astro
@@ -0,0 +1,18 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+
+import BackgroundImage from "@/assets/story/scene-3/01.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <div class="h-fit w-80 select-none rounded-xl border-4 bg-white border-white">
+        <div class="mb-2.5 ml-2.5 mt-2.5 break-words text-center font-semibold text-sm">
+            <p>"ศูนย์ปฏิบัติการแห่งอนาคต"</p>
+      </div>
+    </div>
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-02" client:load />
+</ImagePageLayout>
diff --git a/src/pages/story/3-02.astro b/src/pages/story/3-02.astro
@@ -0,0 +1,19 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/02.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="ชาไทย"
+      text={"นั่น ลองเข้าไปขอความช่วยเหลือเรื่องสัญญาณจาก “Engine” ผู้ดูแลศูนย์ปฏิบัติการแห่งนี้ กันดีกว่า"}
+      className="bg-chathai"
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-03" client:load />
+</ImagePageLayout>
diff --git a/src/pages/story/3-03.astro b/src/pages/story/3-03.astro
@@ -0,0 +1,19 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/03.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="%USERNAME%"
+      text={"ช่วยด้วย เกิดปัญหาใหญ่ขึ้นแล้ว!"}
+      className="bg-user"
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-04" client:load />
+</ImagePageLayout>
diff --git a/src/pages/story/3-04.astro b/src/pages/story/3-04.astro
@@ -0,0 +1,11 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+
+import BackgroundImage from "@/assets/story/scene-3/04.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <Tap delay={0.5} redirectUrl="/story/3-05" client:load />
+</ImagePageLayout>
diff --git a/src/pages/story/3-05.astro b/src/pages/story/3-05.astro
@@ -0,0 +1,20 @@
+---
+import ImagePageLayout from "@/layouts/ImagePageLayout.astro";
+
+import Tap from "@/components/Tap";
+import TextBubble from "@/components/TextBubble";
+
+import BackgroundImage from "@/assets/story/scene-3/05.webp";
+---
+
+<ImagePageLayout backgroundColor="bg-[#303030]" image={BackgroundImage}>
+  <div class="absolute top-20 flex w-full justify-center">
+    <TextBubble
+      name="%USERNAME%"
+      text={"ตอนนี้ที่โรงงานสัญญาณขาดหายไป เธอสามารถแก้ไขได้ไหม"}
+      className="bg-user"
+      client:only
+    />
+  </div>
+  <Tap delay={0.5} redirectUrl="/story/3-06" client:load />
+</ImagePageLayout>
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,7 @@ const StartingScene = () => { @@
             }}
             className="absolute z-0"
           />
-          {lastImage && <Tap delay={0.5} redirectUrl="/story/0-03" />}
+          {lastImage && <Tap delay={0.5} redirectUrl="/story/0-02" />}
         </>
       );
     };
@@ Expand Down @@