sskn scene done

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: <MediaScene />,
       gate: <GateScene />,
       boot: <BootScene />,
+      sskn: <SSknScene />,
     };
   }, []);
 

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 (
     <>
       <sprite scale={[5.2, 0.5, 1]} position={[2.15, 3.005, 0]}>
-        <spriteMaterial attach="material" map={mediaLoadingBarContainerTex} />
+        <spriteMaterial attach="material" map={loadingBarContainerTex} />
       </sprite>
       <mesh
-        scale={[
-          mediaLoadingBarState ? mediaLoadingBarState.scaleX : 0,
-          0.195,
-          1,
-        ]}
+        scale={[loadingBarState ? loadingBarState.scaleX : 0, 0.195, 1]}
         position={[
-          mediaLoadingBarState ? -0.2 + mediaLoadingBarState.offsetX : -0.2,
+          loadingBarState ? -0.2 + loadingBarState.offsetX : -0.2,
           2.945,
           0,
         ]}
@@ -181,7 +162,7 @@ const MediaLoadingBar = () => {
           ref={loadingBarMatRef}
           attach="material"
           transparent={true}
-          map={mediaLoadingBarState ? mediaLoadingBarState.texture : null}
+          map={loadingBarState ? loadingBarState.texture : null}
         />
       </mesh>
     </>

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 (
+    <>
+      <mesh scale={[5, 6.4, 0]} position={[-0.25, -0.5, 0]}>
+        <planeBufferGeometry attach="geometry" />
+        <meshBasicMaterial
+          attach="material"
+          map={ssknBackgroundTex}
+          transparent={true}
+        />
+      </mesh>
+      <sprite scale={[4.5, 2.5, 0]} position={[2.2, 0, 0]} renderOrder={3}>
+        <spriteMaterial
+          attach="material"
+          map={ssknBackgroundTextTex}
+          transparent={true}
+          opacity={0.5}
+        />
+      </sprite>
+      <sprite position={[-3, 3, 0]} scale={[3.5, 0.4, 0]} renderOrder={4}>
+        <spriteMaterial attach="material" map={ssknDangoTex} opacity={0.5} />
+      </sprite>
+      <sprite position={[3.5, 3, 0]} scale={[2, 0.5, 0]}>
+        <spriteMaterial attach="material" map={ssknTopLabelTex} />
+      </sprite>
+    </>
+  );
+};
+
+export default SSknBackground;

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 ? (
+        <SSknLoadingBar />
+      ) : (
+        <group>
+          <sprite position={[2.8, -2, 0]} scale={[1, 0.5, 0]}>
+            <spriteMaterial
+              attach="material"
+              map={
+                props.activeSSknComponent === "sskn_ok"
+                  ? ssknOkTex
+                  : ssknOkInactiveTex
+              }
+            />
+          </sprite>
+          <sprite position={[3.3, -3, 0]} scale={[2, 0.5, 0]}>
+            <spriteMaterial
+              attach="material"
+              map={
+                props.activeSSknComponent === "sskn_cancel"
+                  ? ssknCancelTex
+                  : ssknCancelInactiveTex
+              }
+            />
+          </sprite>
+          <sprite position={[3.3, -2.15, 0]} scale={[3, 0.4, 0]}>
+            <spriteMaterial
+              attach="material"
+              map={
+                props.activeSSknComponent === "sskn_ok"
+                  ? ssknTextWrapperTex
+                  : ssknTextWrapperInactiveTex
+              }
+            />
+          </sprite>
+          <sprite position={[3.3, -3.15, 0]} scale={[3, 0.4, 0]}>
+            <spriteMaterial
+              attach="material"
+              map={
+                props.activeSSknComponent === "sskn_cancel"
+                  ? ssknTextWrapperTex
+                  : ssknTextWrapperInactiveTex
+              }
+            />
+          </sprite>
+          <sprite
+            position={[0.2, -2.7, 0]}
+            scale={[2.2, 0.3, 0]}
+            renderOrder={4}
+          >
+            <spriteMaterial attach="material" map={ssknArrowTex} />
+          </sprite>
+          <sprite
+            position={[-4.65, -2.7, 0]}
+            scale={[1, 0.03, 0]}
+            renderOrder={4}
+          >
+            <spriteMaterial attach="material" map={ssknLineTex} />
+          </sprite>
+        </group>
+      )}
+      <sprite position={[-2.5, -2.7, 0]} scale={[2.9, 0.7, 0]} renderOrder={4}>
+        <spriteMaterial attach="material" map={ssknUpgradeTex} />
+      </sprite>
+    </>
+  );
+};
+
+export default SSknHUD;

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<THREE.Object3D>();
+  const ssknIconShadowRef = useRef<THREE.Object3D>();
+
+  useFrame(() => {
+    if (ssknIconRef.current && ssknIconShadowRef.current) {
+      ssknIconRef.current.rotation.y += 0.03;
+      ssknIconShadowRef.current.rotation.y += 0.03;
+    }
+  });
+  return (
+    <>
+      <mesh
+        scale={[2.5, 2.3, 0]}
+        position={[-1.5, 0.9, 0]}
+        ref={ssknIconRef}
+        renderOrder={4}
+      >
+        <planeBufferGeometry attach="geometry" />
+        <meshBasicMaterial
+          attach="material"
+          map={ssknIconTex}
+          transparent={true}
+          side={THREE.DoubleSide}
+          depthTest={false}
+        />
+      </mesh>
+      <mesh
+        scale={[4.5, 4.2, 0]}
+        position={[-1, -1, 0]}
+        renderOrder={2}
+        ref={ssknIconShadowRef}
+      >
+        <planeBufferGeometry attach="geometry" />
+        <meshBasicMaterial
+          attach="material"
+          map={ssknIconTex}
+          transparent={true}
+          side={THREE.DoubleSide}
+          depthTest={false}
+          color={0x000000}
+        />
+      </mesh>
+    </>
+  );
+};
+
+export default SSknIcon;

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<THREE.Object3D>();
+  const loadingBarMatRef = useRef<THREE.SpriteMaterial>();
+  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 (
+    <>
+      <sprite scale={[5.5, 0.3, 0]} position={[2, -2.7, 0]} renderOrder={4}>
+        <spriteMaterial attach="material" map={ssknLoadingBarContainerTex} />
+      </sprite>
+      <sprite
+        scale={[0.2, 0.15, 0]}
+        position={[-0.5, -2.68, 0]}
+        renderOrder={4}
+        ref={loadingBarRef}
+      >
+        <spriteMaterial
+          attach="material"
+          ref={loadingBarMatRef}
+          map={loadingBar10PercTex}
+          opacity={0.8}
+        />
+      </sprite>
+    </>
+  );
+};
+
+export default SSknLoadingBar;

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 = () => {
       <MiddleRingManager eventState={eventState!} />
       <MediaComponentManager eventState={eventState!} />
       <MediaWordManager eventState={eventState!} />
-      <MediaElementManager eventState={eventState!} />
       <SceneManager eventState={eventState!} />
       <YellowTextManager eventState={eventState!} />
       <MediaImageManager eventState={eventState!} />
       <LevelManager eventState={eventState!} />
       <BootManager eventState={eventState!} />
       <SubSceneManager eventState={eventState!} />
+      <SSknComponentManager eventState={eventState!} />
     </>
   );
 };

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]
   );

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,

src/core/StateManagers/MediaElementManager.tsx

@@ -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;

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;

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

src/core/gateSceneEventHandler.ts

@@ -1,5 +1,3 @@
-import { GameContext } from "./StateManagers/EventManager";
-
 const handleGateSceneEvent = () => ({ event: "exit_gate" });
 
 export default handleGateSceneEvent;

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;

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 (
+    <>
+      <SSknBackground />
+      <SSknIcon />
+      <SSknHUD activeSSknComponent={activeSSknComponent} loading={loading} />
+    </>
+  );
+};
+
+export default SSknScene;

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<TextRendererState>((set) => ({
   // yellow text
   yellowText: "Play",
@@ -439,8 +448,18 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
     set(() => ({ wordPositionDataStructIdx: 0 })),
 }));
 
+export const useSSknStore = create<SSknState>((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<SceneState>((set) => ({
-  currentScene: "media",
+  currentScene: "sskn",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));