add buttons

Koraus · Oct 18, 2023 · ee00acf · ee00acf
1 parent cf874ca
commit ee00acf
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 183 deletions.
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -6,17 +6,13 @@ import audioUrl from "../assetsx/put-figure.wav";
 import { OverlayGui as _OverlayGui } from "./overlay-gui";
 import { memo } from "react";
 import { Forest } from "./level/forest";
-import { MenuWindow as _MenuWindow } from "./menu-window";
-import { useState } from "react";
 
 const PlayingField = memo(_PlayingField);
 const GameFiguresArea = memo(_GameFiguresArea);
 const OverlayGui = memo(_OverlayGui);
-const MenuWindow = memo(_MenuWindow);
 
 
 export default function App() {
-    const [isMenuOpen, setIsmenueOpen] = useState(false);
     return (
         <div css={{
             position: "fixed",
@@ -43,8 +39,7 @@ export default function App() {
                 padding: "2em",
                 pointerEvents: "none",
             }}>
-                <MenuWindow isOpen={isMenuOpen} setIsOpen={setIsmenueOpen} />
-                <OverlayGui isMenuOpen={isMenuOpen} setIsmenueOpen={setIsmenueOpen} />
+                <OverlayGui />
             </div>
         </div >
     );

diff --git a/src/app/level/undo-btn.tsx b/src/app/level/undo-btn.tsx
@@ -1,6 +1,6 @@
 import { useRecoilState } from "recoil";
-import { Undo } from "@emotion-icons/boxicons-regular/Undo";
 import { levelRecoil } from "./level-recoil";
+import undoIcon from "../../assets/undo-move.svg"
 
 export const UndoBtn = () => {
 
@@ -9,22 +9,43 @@ export const UndoBtn = () => {
     return (
         <button
             style={{
-                fontSize: "14px",
-                marginBottom: "0.3rem",
-                display: "flex",
-                alignItems: "center",
-                borderRadius: "0.3rem",
+                fontSize: "1rem",
+                boxSizing: "border-box",
+                borderRadius: "1.5vmax",
+                border: "0.3vmax solid #E4E4E4",
+                background: "linear-gradient(180deg, #2587E2 0%, #1A4C69 100%)",
+                padding: "0.5vmax",
+                width: "fit-content",
+                position: "fixed",
+                left: "2vmax",
+                bottom: "2vmax",
+                filter: !("prev" in level) ? "grayscale(80%)" : "none",
             }}
             disabled={!("prev" in level)}
             onClick={() => {
                 if (!("prev" in level)) { return; }
                 setLevel(level.prev);
-            }}
-        > Undo
-            <span style={{ display: "inline-block", height: "1.5em" }} >
-                <Undo height={"100%"} />
-            </span>
+            }} >
+            <div style={{
+                boxSizing: "border-box",
+                background: "linear-gradient(90deg, #49B5F7 0%, #2578CF 100%)",
+                borderRadius: "1vmax",
+                padding: "0.4vmax",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+
+            }} >
+                <img
+                    src={undoIcon}
+                    alt="icon"
+                    style={{
+                        display: "block",
+                        width: "4.5vmax",
 
-        </button >
+                    }}
+                />
+            </div>
+        </button>
     );
 };
diff --git a/src/app/menu-btn.tsx b/src/app/menu-btn.tsx
diff --git a/src/app/menu-window.tsx b/src/app/menu-window.tsx
diff --git a/src/app/music-switch-btn.tsx b/src/app/music-switch-btn.tsx
@@ -0,0 +1,49 @@
+import { useRecoilState, useRecoilValue } from "recoil";
+import soundOnIcon from "../assets/sound-on.svg"
+import soundOffIcon from "../assets/sound-off.svg"
+import { isSoundOnRecoil } from "./settings/is-sound-on-recoil";
+
+export const MusicSwitchBtn = () => {
+
+    const [isSound, setIsSound] = useRecoilState(isSoundOnRecoil);
+
+    return (
+        <button
+            style={{
+                fontSize: "1rem",
+                boxSizing: "border-box",
+                borderRadius: "1.5vmax",
+                border: "0.3vmax solid #E4E4E4",
+                background: "linear-gradient(180deg, #2587E2 0%, #1A4C69 100%)",
+                padding: "0.5vmax",
+                width: "fit-content",
+                position: "fixed",
+                right: "2vmax",
+                top: "2vmax",
+            }}
+            onClick={
+                () => setIsSound(!isSound)
+            }
+        >
+            <div style={{
+                boxSizing: "border-box",
+                background: "linear-gradient(90deg, #49B5F7 0%, #2578CF 100%)",
+                borderRadius: "1vmax",
+                padding: "0.4vmax",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            }} >
+                <img
+                    src={isSound ? soundOffIcon : soundOnIcon}
+                    alt="icon"
+                    style={{
+                        display: "block",
+                        width: "4.5vmax",
+
+                    }}
+                />
+            </div>
+        </button>
+    );
+};
diff --git a/src/app/next-lvl.tsx b/src/app/next-lvl.tsx
@@ -0,0 +1,45 @@
+import randomIcon from "../assets/random-level.svg"
+
+export const NextLvl = () => {
+
+    return (
+        <button
+            style={{
+                fontSize: "1rem",
+                boxSizing: "border-box",
+                borderRadius: "1.5vmax",
+                border: "0.3vmax solid #E4E4E4",
+                background: "linear-gradient(180deg, #2587E2 0%, #1A4C69 100%)",
+                padding: "0.5vmax",
+                width: "fit-content",
+                height: "fit-content",
+                position: "fixed",
+                inset: "50%",
+
+            }}
+            onClick={() => location.reload()}
+
+        >
+            <div style={{
+                boxSizing: "border-box",
+                background: "linear-gradient(90deg, #49B5F7 0%, #2578CF 100%)",
+                borderRadius: "1vmax",
+                padding: "0.4vmax",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+
+            }} >
+                <img
+                    src={randomIcon}
+                    alt="icon"
+                    style={{
+                        display: "block",
+                        width: "4.5vmax",
+
+                    }}
+                />
+            </div>
+        </button>
+    );
+};