gate scene done

src/components/GateScene/GateHUD.tsx

@@ -1,13 +1,12 @@
-import React from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import gateText from "../../static/sprite/gate_pass.png";
 import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
 import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
 import changeSiteEnable from "../../static/sprite/change_site_enable.png";
 import gateLeftThing from "../../static/sprite/left_gate_thing.png";
 import gateRightThing from "../../static/sprite/right_gate_thing.png";
-import { useLoader } from "react-three-fiber";
+import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import GateMiddleObject from "./GateMiddleObject";
 
 type GateMiddleProps = {
   intro: boolean;
@@ -15,6 +14,15 @@ type GateMiddleProps = {
 };
 
 const GateHUD = (props: GateMiddleProps) => {
+  const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
+  const config = useMemo(
+    () => ({
+      font: wordFont,
+      size: 1,
+    }),
+    [wordFont]
+  );
+
   const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
   const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
   const gateAccessPassTexture = useLoader(
@@ -29,6 +37,16 @@ const GateHUD = (props: GateMiddleProps) => {
   const gateLeftThingTexture = useLoader(THREE.TextureLoader, gateLeftThing);
   const gateRightThingTexture = useLoader(THREE.TextureLoader, gateRightThing);
 
+  const pressAnyRef = useRef<THREE.Object3D>();
+
+  useEffect(() => {
+    setInterval(() => {
+      if (pressAnyRef.current && !props.intro) {
+        pressAnyRef.current.visible = !pressAnyRef.current.visible;
+      }
+    }, 500);
+  }, [props.intro]);
+
   return (
     <>
       <sprite scale={[1.5, 0.24, 0]} position={[0, 1.1, 0.07]} renderOrder={3}>
@@ -110,6 +128,35 @@ const GateHUD = (props: GateMiddleProps) => {
           visible={!props.intro && props.gateLvl === 4}
         />
       </sprite>
+
+      <group ref={pressAnyRef} visible={false}>
+        <mesh
+          scale={[0.17, 0.14, 0]}
+          position={[-0.8, -1.3, 0]}
+          renderOrder={5}
+        >
+          <textGeometry attach="geometry" args={["press ANY button", config]} />
+          <meshBasicMaterial
+            attach="material"
+            color={0xdb9200}
+            transparent={true}
+            depthTest={false}
+          />
+        </mesh>
+        <mesh
+          scale={[0.17, 0.14, 0]}
+          position={[-0.793, -1.308, 0]}
+          renderOrder={4}
+        >
+          <textGeometry attach="geometry" args={["press ANY button", config]} />
+          <meshBasicMaterial
+            attach="material"
+            color={0xad7400}
+            transparent={true}
+            depthTest={false}
+          />
+        </mesh>
+      </group>
     </>
   );
 };

src/components/GateScene/GateMiddleObject/Mirror.tsx

@@ -36,7 +36,7 @@ const Mirror = (props: MirrorProps) => {
       mirrorGroupRef.current.rotation.y -= 0.03;
     }
     if (materialRef.current) {
-      tex.offset.y -= 0.01;
+      tex.offset.x -= 0.0025;
     }
   });
 

src/components/GateScene/GateSide.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import blueBinary from "../../static/sprite/blue_binary.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
@@ -15,11 +15,13 @@ const GateSide = () => {
     return blueBinaryTex;
   }, [blueBinaryTex]);
 
-  useFrame(() => {
+  useEffect(() => {
-    if (Date.now() % 2 === 0 && matRef.current) {
+    setInterval(() => {
+      if (matRef.current) {
         matRef.current.uniforms.offset.value += 0.5;
       }
-  });
+    }, 50);
+  }, []);
 
   const matRef = useRef<THREE.ShaderMaterial>();
 
@@ -48,11 +50,11 @@ const GateSide = () => {
     varying vec2 vUv;
     
     void main() {
-        float alpha = smoothstep(0.7, 1.0, vUv.x);
+        float alpha = smoothstep(0.9, 1.0, vUv.x);
 
         vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
         
-        gl_FragColor = mix(t1, vec4(0,0,0,0), alpha);
+        gl_FragColor = mix(t1, vec4(0,0,0,0), alpha) * 0.8;
     }
       `;
 
@@ -64,21 +66,21 @@ const GateSide = () => {
     varying vec2 vUv;
     
     void main() {
-        float alpha = smoothstep(0.3, 1.0, vUv.x);
+        float alpha = smoothstep(1.0, 0.9, vUv.x);
 
         vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
         
-        gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 1.4;
+        gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 0.8;
     }
       `;
 
   return (
     <>
-      <OrbitControls />
       <mesh
         rotation={[0, 0.2, 0]}
-        position={[-1.4, 0, 1.5]}
+        position={[-1.7, 0, 1.5]}
         scale={[3, 1.5, 0]}
+        renderOrder={1}
       >
         <planeBufferGeometry attach="geometry"></planeBufferGeometry>
         <shaderMaterial
@@ -92,8 +94,9 @@ const GateSide = () => {
       </mesh>
       <mesh
         rotation={[0, -0.2, 0]}
-        position={[0.05, 0, 1.3]}
+        position={[1.7, 0, 1.5]}
-        scale={[3, 1.5, 0]}
+        scale={[-3, 1.5, 0]}
+        renderOrder={1}
       >
         <planeBufferGeometry attach="geometry"></planeBufferGeometry>
         <shaderMaterial
@@ -103,6 +106,7 @@ const GateSide = () => {
           fragmentShader={fragmentShaderRight}
           transparent={true}
           ref={matRef}
+          side={THREE.DoubleSide}
         />
       </mesh>
     </>

src/core/StateManagers/MediaComponentManager.tsx

@@ -81,23 +81,23 @@ const MediaComponentManager = (props: StateManagerProps) => {
           action: setActiveMediaComponent,
           value: "play",
         },
-        switch_to_right_side_from_play: {
+        play_right: {
           action: switchToRightSide,
           value: "play",
         },
-        switch_to_right_side_from_exit: {
+        exit_right: {
           action: switchToRightSide,
           value: "exit",
         },
-        switch_to_left_side_from_fstWord: {
+        fstWord_left: {
           action: switchToLeftSide,
           value: "fstWord",
         },
-        switch_to_left_side_from_sndWord: {
+        sndWord_left: {
           action: switchToLeftSide,
           value: "sndWord",
         },
-        switch_to_left_side_from_thirdWord: {
+        thirdWord_left: {
           action: switchToLeftSide,
           value: "thirdWord",
         },

src/core/StateManagers/SceneManager.tsx

@@ -20,7 +20,12 @@ const SceneManager = (props: StateManagerProps) => {
         },
         exit_select: {
           action: setScene,
-          value: newScene,
+          value: "main",
+          delay: 0,
+        },
+        exit_gate: {
+          action: setScene,
+          value: "main",
           delay: 0,
         },
       };

src/core/computeAction.ts

@@ -2,6 +2,7 @@ import { GameContext } from "./StateManagers/EventManager";
 import handleMainSceneEvent from "./mainSceneEventHandler";
 import handleMediaSceneEvent from "./mediaSceneEventHandler";
 import handleBootMainMenuEvent from "./bootEventHandler";
+import handleGateSceneEvent from "./gateSceneEventHandler";
 
 const computeAction = (gameContext: GameContext) => {
   switch (gameContext.scene) {
@@ -11,6 +12,8 @@ const computeAction = (gameContext: GameContext) => {
       return handleMediaSceneEvent(gameContext);
     case "boot":
       return handleBootMainMenuEvent(gameContext);
+    case "gate":
+      return handleGateSceneEvent();
   }
 };
 

src/core/gateSceneEventHandler.ts

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

src/core/mediaSceneEventHandler.ts

@@ -2,16 +2,8 @@ import { GameContext } from "./StateManagers/EventManager";
 
 const handleMediaSceneEvent = (gameContext: GameContext) => {
   const keyPress = gameContext.keyPress;
-
   const activeMediaComponent = gameContext.activeMediaComponent;
-  switch (keyPress) {
+  return { event: `${activeMediaComponent}_${keyPress}` };
-    case "right":
-      return { event: `switch_to_right_side_from_${activeMediaComponent}` };
-    case "left":
-      return { event: `switch_to_left_side_from_${activeMediaComponent}` };
-    default:
-      return { event: `${activeMediaComponent}_${keyPress}`, newScene: "main" };
-  }
 };
 
 export default handleMediaSceneEvent;