diff --git a/src/App.tsx b/src/App.tsx index ef2c5f4..610e4da 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import EventManager from "./core/StateManagers/EventManager"; import { useSceneStore } from "./store"; import GateScene from "./scenes/GateScene"; import BootScene from "./scenes/BootScene"; +import SSknScene from "./scenes/SSknScene"; const App = () => { const currentScene = useSceneStore((state) => state.currentScene); @@ -26,6 +27,7 @@ const App = () => { media: , gate: , boot: , + sskn: , }; }, []); diff --git a/src/components/MediaScene/MediaLoadingBar.tsx b/src/components/MediaScene/MediaLoadingBar.tsx index 937fd26..f1c47cf 100644 --- a/src/components/MediaScene/MediaLoadingBar.tsx +++ b/src/components/MediaScene/MediaLoadingBar.tsx @@ -1,12 +1,12 @@ import React, { useMemo, useRef } from "react"; import { useMediaStore } from "../../store"; -import mediaLoadingBarContainer from "../../static/sprite/media_loading_bar_container.png"; -import mediaLoadingBar from "../../static/sprite/media_loading_bar.png"; -import mediaLoadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png"; -import mediaLoadingBar20Perc from "../../static/sprite/media_loading_bar_20perc.png"; -import mediaLoadingBar30Perc from "../../static/sprite/media_loading_bar_30perc.png"; -import mediaLoadingBar40Perc from "../../static/sprite/media_loading_bar_40perc.png"; -import mediaLoadingBar50Perc from "../../static/sprite/media_loading_bar_50perc.png"; +import loadingBarContainer from "../../static/sprite/media_loading_bar_container.png"; +import loadingBar from "../../static/sprite/media_loading_bar.png"; +import loadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png"; +import loadingBar20Perc from "../../static/sprite/media_loading_bar_20perc.png"; +import loadingBar30Perc from "../../static/sprite/media_loading_bar_30perc.png"; +import loadingBar40Perc from "../../static/sprite/media_loading_bar_40perc.png"; +import loadingBar50Perc from "../../static/sprite/media_loading_bar_50perc.png"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; @@ -15,127 +15,112 @@ const MediaLoadingBar = () => { const mediaPercentageElapsed = useMediaStore( (state) => state.mediaPercentageElapsed ); - const mediaLoadingBarContainerTex = useLoader( + const loadingBarContainerTex = useLoader( THREE.TextureLoader, - mediaLoadingBarContainer - ); - const mediaLoadingBarTex = useLoader(THREE.TextureLoader, mediaLoadingBar); - const mediaLoadingBar10PercTex = useLoader( - THREE.TextureLoader, - mediaLoadingBar10Perc - ); - const mediaLoadingBar20PercTex = useLoader( - THREE.TextureLoader, - mediaLoadingBar20Perc - ); - const mediaLoadingBar30PercTex = useLoader( - THREE.TextureLoader, - mediaLoadingBar30Perc - ); - const mediaLoadingBar40PercTex = useLoader( - THREE.TextureLoader, - mediaLoadingBar40Perc - ); - const mediaLoadingBar50PercTex = useLoader( - THREE.TextureLoader, - mediaLoadingBar50Perc + loadingBarContainer ); + const loadingBarTex = useLoader(THREE.TextureLoader, loadingBar); + const loadingBar10PercTex = useLoader(THREE.TextureLoader, loadingBar10Perc); + const loadingBar20PercTex = useLoader(THREE.TextureLoader, loadingBar20Perc); + const loadingBar30PercTex = useLoader(THREE.TextureLoader, loadingBar30Perc); + const loadingBar40PercTex = useLoader(THREE.TextureLoader, loadingBar40Perc); + const loadingBar50PercTex = useLoader(THREE.TextureLoader, loadingBar50Perc); // the additions here are very linear, but just +ing the values wouldn't work // since in case the video were to get rewinded the bar wouldn't react properly // doing it declaratively like this fixes that concern - const mediaLoadingBarState = useMemo(() => { + const loadingBarState = useMemo(() => { const mediaPercentageDispatch = { 5: { scaleX: 0.25, - texture: mediaLoadingBar10PercTex, + texture: loadingBar10PercTex, offsetX: 0, }, - 10: { scaleX: 0.5, texture: mediaLoadingBar20PercTex, offsetX: 0.145 }, - 15: { scaleX: 0.75, texture: mediaLoadingBar30PercTex, offsetX: 0.25 }, + 10: { scaleX: 0.5, texture: loadingBar20PercTex, offsetX: 0.145 }, + 15: { scaleX: 0.75, texture: loadingBar30PercTex, offsetX: 0.25 }, 20: { scaleX: 1, - texture: mediaLoadingBar40PercTex, + texture: loadingBar40PercTex, offsetX: 0.4, }, 25: { scaleX: 1.25, - texture: mediaLoadingBar50PercTex, + texture: loadingBar50PercTex, offsetX: 0.55, }, 30: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 0.8, }, 35: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 1.05, }, 40: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 1.3, }, 45: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 1.55, }, 50: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 1.8, }, 55: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 2.05, }, 60: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 2.3, }, 65: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 2.55, }, 70: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 2.8, }, 75: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 3.05, }, 80: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 3.3, }, 85: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 3.55, }, 90: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 3.65, }, 95: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 3.85, }, 100: { scaleX: 1.5, - texture: mediaLoadingBarTex, + texture: loadingBarTex, offsetX: 3.95, }, }; @@ -143,12 +128,12 @@ const MediaLoadingBar = () => { mediaPercentageElapsed as keyof typeof mediaPercentageDispatch ]; }, [ - mediaLoadingBar10PercTex, - mediaLoadingBar20PercTex, - mediaLoadingBar30PercTex, - mediaLoadingBar40PercTex, - mediaLoadingBar50PercTex, - mediaLoadingBarTex, + loadingBar10PercTex, + loadingBar20PercTex, + loadingBar30PercTex, + loadingBar40PercTex, + loadingBar50PercTex, + loadingBarTex, mediaPercentageElapsed, ]); @@ -162,16 +147,12 @@ const MediaLoadingBar = () => { return ( <> - + { ref={loadingBarMatRef} attach="material" transparent={true} - map={mediaLoadingBarState ? mediaLoadingBarState.texture : null} + map={loadingBarState ? loadingBarState.texture : null} /> diff --git a/src/components/SSknScene/SSknBackground.tsx b/src/components/SSknScene/SSknBackground.tsx new file mode 100644 index 0000000..f50122a --- /dev/null +++ b/src/components/SSknScene/SSknBackground.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import ssknBackground from "../../static/sprite/sskn_background.png"; +import ssknBackgroundText from "../../static/sprite/sskn_background_text.png"; +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import ssknTopLabel from "../../static/sprite/sskn_top_label.png"; +import ssknDango from "../../static/sprite/sskn_dango.png"; + +const SSknBackground = () => { + const ssknBackgroundTex = useLoader(THREE.TextureLoader, ssknBackground); + const ssknBackgroundTextTex = useLoader( + THREE.TextureLoader, + ssknBackgroundText + ); + const ssknTopLabelTex = useLoader(THREE.TextureLoader, ssknTopLabel); + const ssknDangoTex = useLoader(THREE.TextureLoader, ssknDango); + + return ( + <> + + + + + + + + + + + + + + + ); +}; + +export default SSknBackground; diff --git a/src/components/SSknScene/SSknHUD.tsx b/src/components/SSknScene/SSknHUD.tsx new file mode 100644 index 0000000..daa8409 --- /dev/null +++ b/src/components/SSknScene/SSknHUD.tsx @@ -0,0 +1,107 @@ +import React from "react"; +import ssknOk from "../../static/sprite/sskn_ok.png"; +import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png"; +import ssknCancel from "../../static/sprite/sskn_cancel.png"; +import ssknCancelInactive from "../../static/sprite/sskn_cancel_inactive.png"; +import ssknUpgrade from "../../static/sprite/sskn_upgrade.png"; +import ssknArrow from "../../static/sprite/sskn_arrow.png"; +import ssknTextWrapper from "../../static/sprite/sskn_text_wrapper.png"; +import ssknTextWrapperInactive from "../../static/sprite/sskn_text_wrapper_inactive.png"; +import ssknLine from "../../static/sprite/sskn_line.png"; +import ssknLoadingBar from "../../static/sprite/SSkn_loading_bar.png"; +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import SSknLoadingBar from "./SSknLoadingBar"; + +type SSknHUDProps = { + activeSSknComponent: string; + loading: boolean; +}; + +const SSknHUD = (props: SSknHUDProps) => { + const ssknOkTex = useLoader(THREE.TextureLoader, ssknOk); + const ssknOkInactiveTex = useLoader(THREE.TextureLoader, ssknOkInactive); + const ssknCancelTex = useLoader(THREE.TextureLoader, ssknCancel); + const ssknCancelInactiveTex = useLoader( + THREE.TextureLoader, + ssknCancelInactive + ); + const ssknUpgradeTex = useLoader(THREE.TextureLoader, ssknUpgrade); + const ssknArrowTex = useLoader(THREE.TextureLoader, ssknArrow); + const ssknTextWrapperTex = useLoader(THREE.TextureLoader, ssknTextWrapper); + const ssknTextWrapperInactiveTex = useLoader( + THREE.TextureLoader, + ssknTextWrapperInactive + ); + const ssknLineTex = useLoader(THREE.TextureLoader, ssknLine); + + return ( + <> + {props.loading ? ( + + ) : ( + + + + + + + + + + + + + + + + + + + + + )} + + + + + ); +}; + +export default SSknHUD; diff --git a/src/components/SSknScene/SSknIcon.tsx b/src/components/SSknScene/SSknIcon.tsx new file mode 100644 index 0000000..c88a8e4 --- /dev/null +++ b/src/components/SSknScene/SSknIcon.tsx @@ -0,0 +1,54 @@ +import React, { useRef } from "react"; +import ssknIcon from "../../static/sprite/SSkn_icon.png"; +import { useFrame, useLoader } from "react-three-fiber"; +import * as THREE from "three"; + +const SSknIcon = () => { + const ssknIconTex = useLoader(THREE.TextureLoader, ssknIcon); + const ssknIconRef = useRef(); + const ssknIconShadowRef = useRef(); + + useFrame(() => { + if (ssknIconRef.current && ssknIconShadowRef.current) { + ssknIconRef.current.rotation.y += 0.03; + ssknIconShadowRef.current.rotation.y += 0.03; + } + }); + return ( + <> + + + + + + + + + + ); +}; + +export default SSknIcon; diff --git a/src/components/SSknScene/SSknLoadingBar.tsx b/src/components/SSknScene/SSknLoadingBar.tsx new file mode 100644 index 0000000..db3ecca --- /dev/null +++ b/src/components/SSknScene/SSknLoadingBar.tsx @@ -0,0 +1,95 @@ +import React, { useRef } from "react"; +import { useFrame, useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import ssknLoadingBarContainer from "../../static/sprite/SSkn_loading_bar.png"; +import loadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png"; +import loadingBar20Perc from "../../static/sprite/media_loading_bar_20perc.png"; +import loadingBar30Perc from "../../static/sprite/media_loading_bar_30perc.png"; +import loadingBar40Perc from "../../static/sprite/media_loading_bar_40perc.png"; +import loadingBar50Perc from "../../static/sprite/media_loading_bar_50perc.png"; +import loadingBar from "../../static/sprite/media_loading_bar.png"; + +const SSknLoadingBar = () => { + const ssknLoadingBarContainerTex = useLoader( + THREE.TextureLoader, + ssknLoadingBarContainer + ); + + const loadingBarTex = useLoader(THREE.TextureLoader, loadingBar); + const loadingBar10PercTex = useLoader(THREE.TextureLoader, loadingBar10Perc); + const loadingBar20PercTex = useLoader(THREE.TextureLoader, loadingBar20Perc); + const loadingBar30PercTex = useLoader(THREE.TextureLoader, loadingBar30Perc); + const loadingBar40PercTex = useLoader(THREE.TextureLoader, loadingBar40Perc); + const loadingBar50PercTex = useLoader(THREE.TextureLoader, loadingBar50Perc); + + const loadingBarRef = useRef(); + const loadingBarMatRef = useRef(); + const percentageElapsed = useRef(0); + const last = useRef(0); + + useFrame(() => { + const now = Date.now(); + + if ( + now > last.current + 200 && + loadingBarRef.current && + loadingBarMatRef.current + ) { + percentageElapsed.current += 5; + switch (percentageElapsed.current) { + case 5: + loadingBarRef.current.scale.x = 0.25; + loadingBarMatRef.current.map = loadingBar10PercTex; + break; + case 10: + loadingBarRef.current.scale.x += 0.25; + loadingBarRef.current.position.x += 0.1; + loadingBarMatRef.current.map = loadingBar20PercTex; + break; + case 15: + loadingBarRef.current.scale.x += 0.25; + loadingBarRef.current.position.x += 0.1; + loadingBarMatRef.current.map = loadingBar30PercTex; + break; + case 20: + loadingBarRef.current.scale.x += 0.25; + loadingBarRef.current.position.x += 0.1; + loadingBarMatRef.current.map = loadingBar40PercTex; + break; + case 25: + loadingBarRef.current.scale.x += 0.25; + loadingBarRef.current.position.x += 0.1; + loadingBarMatRef.current.map = loadingBar50PercTex; + break; + default: + if (loadingBarRef.current.position.x < 4.1) { + loadingBarMatRef.current.map = loadingBarTex; + loadingBarRef.current.position.x += 0.2; + } + } + last.current = now; + } + }); + return ( + <> + + + + + + + + ); +}; + +export default SSknLoadingBar; diff --git a/src/core/StateManagers/EventManager.tsx b/src/core/StateManagers/EventManager.tsx index b7b4e30..a6ca67a 100644 --- a/src/core/StateManagers/EventManager.tsx +++ b/src/core/StateManagers/EventManager.tsx @@ -12,11 +12,11 @@ import { useSceneStore, useSiteStore, useSubsceneStore, + useSSknStore, } from "../../store"; import GreenTextManager from "./GreenTextManager"; import MediaComponentManager from "./MediaComponentManager"; import MediaWordManager from "./MediaWordManager"; -import MediaElementManager from "./MediaElementManager"; import SceneManager from "./SceneManager"; import YellowTextManager from "./YellowTextManager"; import MediaImageManager from "./MediaImageManager"; @@ -24,6 +24,7 @@ import computeAction from "../computeAction"; import LevelManager from "./LevelManager"; import BootManager from "./BootManager"; import SubSceneManager from "./SubSceneManager"; +import SSknComponentManager from "./SSknComponentManager"; const getKeyCodeAssociation = (keyCode: number): string => { const keyCodeAssocs = { @@ -59,6 +60,7 @@ export type GameContext = { siteRotIdx: string; activeMediaComponent: string; activeBootElement: string; + activeSSknComponent: string; }; const EventManager = () => { @@ -87,7 +89,16 @@ const EventManager = () => { ) ); - console.log(activeMediaComponent) + // sskn scene + + const ssknComponentMatrixIdx = useSSknStore( + (state) => state.componentMatrixIdx + ); + const activeSSknComponent = useSSknStore( + useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [ + ssknComponentMatrixIdx, + ]) + ); // boot scene const activeBootElement = useBootStore((state) => state.activeBootElement); @@ -105,15 +116,17 @@ const EventManager = () => { currentLevel: currentLevel, activeMediaComponent: activeMediaComponent, activeBootElement: activeBootElement, + activeSSknComponent: activeSSknComponent, }), [ - activeBootElement, - activeMediaComponent, - nodeMatrixIndices, - currentLevel, currentScene, currentSubscene, siteRotIdx, + nodeMatrixIndices, + currentLevel, + activeMediaComponent, + activeBootElement, + activeSSknComponent, ] ); @@ -150,13 +163,13 @@ const EventManager = () => { - + ); }; diff --git a/src/core/StateManagers/LevelManager.tsx b/src/core/StateManagers/LevelManager.tsx index af88d96..e3e658d 100644 --- a/src/core/StateManagers/LevelManager.tsx +++ b/src/core/StateManagers/LevelManager.tsx @@ -22,18 +22,14 @@ const LevelManager = (props: StateManagerProps) => { ); const dispatchObject = useCallback( (event: string, newLevel: string) => { - const dispatcherObjects = { - move_up: { - action: updateLevel, - value: newLevel, - }, - move_down: { - action: updateLevel, - value: newLevel, - }, - }; - - return dispatcherObjects[event as keyof typeof dispatcherObjects]; + switch (event) { + case "move_up": + case "move_down": + return { + action: updateLevel, + value: newLevel, + }; + } }, [updateLevel] ); diff --git a/src/core/StateManagers/MediaComponentManager.tsx b/src/core/StateManagers/MediaComponentManager.tsx index bb68781..f3652e4 100644 --- a/src/core/StateManagers/MediaComponentManager.tsx +++ b/src/core/StateManagers/MediaComponentManager.tsx @@ -15,6 +15,11 @@ const MediaComponentManager = (props: StateManagerProps) => { (state) => state.resetComponentMatrixIndices ); + const playMedia = useCallback(() => { + const mediaElement = document.getElementById("media") as HTMLMediaElement; + if (mediaElement) mediaElement.play().then((r) => console.log(r)); + }, []); + const dispatchObject = useCallback( (event: string) => { switch (event) { @@ -49,10 +54,13 @@ const MediaComponentManager = (props: StateManagerProps) => { return { action: resetComponentMatrixIndices, }; + case "play_select": + return { action: playMedia }; } }, [ addToRightComponentMatrixIdx, + playMedia, resetComponentMatrixIndices, toggleLeftComponent, toggleSide, diff --git a/src/core/StateManagers/MediaElementManager.tsx b/src/core/StateManagers/MediaElementManager.tsx deleted file mode 100644 index a8f4d80..0000000 --- a/src/core/StateManagers/MediaElementManager.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { useCallback, useEffect } from "react"; - -import { StateManagerProps } from "./EventManager"; - -const MediaComponentManager = (props: StateManagerProps) => { - const playMedia = useCallback(() => { - const mediaElement = document.getElementById("media") as HTMLMediaElement; - if (mediaElement) mediaElement.play().then((r) => console.log(r)); - }, []); - - const dispatchObject = useCallback( - (event: string) => { - const dispatcherObjects = { - play_select: { action: playMedia }, - }; - - return dispatcherObjects[event as keyof typeof dispatcherObjects]; - }, - [playMedia] - ); - - useEffect(() => { - if (props.eventState) { - const eventAction = props.eventState.event; - - const dispatchedObject = dispatchObject(eventAction); - - if (dispatchedObject) { - dispatchedObject.action(); - } - } - }, [props.eventState, dispatchObject]); - - return null; -}; - -export default MediaComponentManager; diff --git a/src/core/StateManagers/SSknComponentManager.tsx b/src/core/StateManagers/SSknComponentManager.tsx new file mode 100644 index 0000000..b65641a --- /dev/null +++ b/src/core/StateManagers/SSknComponentManager.tsx @@ -0,0 +1,46 @@ +import { useCallback, useEffect } from "react"; +import { StateManagerProps } from "./EventManager"; +import { useMediaStore, useSSknStore } from "../../store"; + +const SSknComponentManager = (props: StateManagerProps) => { + const toggleComponentMatrixIdx = useSSknStore( + (state) => state.toggleComponentMatrixIdx + ); + const resetComponentMatrixIdx = useSSknStore( + (state) => state.resetComponentMatrixIdx + ); + const toggleLoading = useSSknStore((state) => state.toggleLoading); + + const dispatchObject = useCallback( + (event: string) => { + switch (event) { + case "sskn_ok_down": + case "sskn_cancel_up": + return { + action: toggleComponentMatrixIdx, + }; + case "sskn_ok_select": + return { + action: toggleLoading, + }; + } + }, + [toggleComponentMatrixIdx, toggleLoading] + ); + + useEffect(() => { + if (props.eventState) { + const eventAction = props.eventState.event; + + const dispatchedObject = dispatchObject(eventAction); + + if (dispatchedObject) { + dispatchedObject.action(); + } + } + }, [props.eventState, dispatchObject]); + + return null; +}; + +export default SSknComponentManager; diff --git a/src/core/computeAction.ts b/src/core/computeAction.ts index 10c560a..5fc171e 100644 --- a/src/core/computeAction.ts +++ b/src/core/computeAction.ts @@ -3,6 +3,7 @@ import handleMainSceneEvent from "./mainSceneEventHandler"; import handleMediaSceneEvent from "./mediaSceneEventHandler"; import handleBootMainMenuEvent from "./bootEventHandler"; import handleGateSceneEvent from "./gateSceneEventHandler"; +import handleSSknSceneEvent from "./ssknSceneEventHandler"; const computeAction = (gameContext: GameContext) => { switch (gameContext.scene) { @@ -14,6 +15,8 @@ const computeAction = (gameContext: GameContext) => { return handleBootMainMenuEvent(gameContext); case "gate": return handleGateSceneEvent(); + case "sskn": + return handleSSknSceneEvent(gameContext); } }; diff --git a/src/core/gateSceneEventHandler.ts b/src/core/gateSceneEventHandler.ts index 24ca57c..1ba7483 100644 --- a/src/core/gateSceneEventHandler.ts +++ b/src/core/gateSceneEventHandler.ts @@ -1,5 +1,3 @@ -import { GameContext } from "./StateManagers/EventManager"; - const handleGateSceneEvent = () => ({ event: "exit_gate" }); export default handleGateSceneEvent; diff --git a/src/core/ssknSceneEventHandler.ts b/src/core/ssknSceneEventHandler.ts new file mode 100644 index 0000000..0267199 --- /dev/null +++ b/src/core/ssknSceneEventHandler.ts @@ -0,0 +1,9 @@ +import { GameContext } from "./StateManagers/EventManager"; + +const handleSSknSceneEvent = (gameContext: GameContext) => { + const keyPress = gameContext.keyPress; + const activeSSknComponent = gameContext.activeSSknComponent; + return { event: `${activeSSknComponent}_${keyPress}` }; +}; + +export default handleSSknSceneEvent; diff --git a/src/scenes/SSknScene.tsx b/src/scenes/SSknScene.tsx new file mode 100644 index 0000000..ca0850f --- /dev/null +++ b/src/scenes/SSknScene.tsx @@ -0,0 +1,28 @@ +import React, { useCallback } from "react"; +import SSknIcon from "../components/SSknScene/SSknIcon"; +import SSknBackground from "../components/SSknScene/SSknBackground"; +import SSknHUD from "../components/SSknScene/SSknHUD"; +import { useMediaStore, useSSknStore } from "../store"; + +const SSknScene = () => { + const ssknComponentMatrixIdx = useSSknStore( + (state) => state.componentMatrixIdx + ); + const activeSSknComponent = useSSknStore( + useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [ + ssknComponentMatrixIdx, + ]) + ); + + const loading = useSSknStore((state) => state.loading); + + return ( + <> + + + + + ); +}; + +export default SSknScene; diff --git a/src/store.ts b/src/store.ts index 86e00b2..ef5b373 100644 --- a/src/store.ts +++ b/src/store.ts @@ -173,6 +173,15 @@ type GateState = { incrementGateLvl: () => void; }; +type SSknState = { + componentMatrix: string[]; + componentMatrixIdx: number; + toggleComponentMatrixIdx: () => void; + resetComponentMatrixIdx: () => void; + loading: boolean; + toggleLoading: () => void; +}; + export const useTextRendererStore = create((set) => ({ // yellow text yellowText: "Play", @@ -439,8 +448,18 @@ export const useMediaWordStore = create((set) => ({ set(() => ({ wordPositionDataStructIdx: 0 })), })); +export const useSSknStore = create((set) => ({ + componentMatrix: ["sskn_ok", "sskn_cancel"], + componentMatrixIdx: 0, + loading: false, + toggleComponentMatrixIdx: () => + set((state) => ({ componentMatrixIdx: Number(!state.componentMatrixIdx) })), + resetComponentMatrixIdx: () => set(() => ({ componentMatrixIdx: 0 })), + toggleLoading: () => set(() => ({ loading: true })), +})); + export const useSceneStore = create((set) => ({ - currentScene: "media", + currentScene: "sskn", setScene: (to) => set(() => ({ currentScene: to })), }));