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 })),
}));