diff --git a/src/components/MainScene/Lain.tsx b/src/components/MainScene/Lain.tsx index 3353fa3..a5492d1 100644 --- a/src/components/MainScene/Lain.tsx +++ b/src/components/MainScene/Lain.tsx @@ -9,6 +9,7 @@ import moveRightSpriteSheet from "../../static/sprite/move_right.png"; import standingSpriteSheet from "../../static/sprite/standing.png"; import introSpriteSheet from "../../static/sprite/intro.png"; import throwNodeSpriteSheet from "../../static/sprite/throw_node.png"; +import ripMiddleRingSpriteSheet from "../../static/sprite/rip_middle_ring.png"; import { useLainStore, useMainSceneStore } from "../../store"; type LainConstructorProps = { @@ -112,6 +113,17 @@ export const LainThrowNode = () => { ); }; +export const LainRipMiddleRing = () => { + return ( + + ); +}; + type LainProps = { shouldIntro: boolean; }; @@ -128,6 +140,7 @@ const Lain = (props: LainProps) => { select_level_down: , select_level_up: , throw_node: , + pause_game: , }; const [introFinished, setIntroFinished] = useState(false); diff --git a/src/components/MainScene/SyncedComponents/MiddleRing.tsx b/src/components/MainScene/SyncedComponents/MiddleRing.tsx index 472db57..95bbbaa 100644 --- a/src/components/MainScene/SyncedComponents/MiddleRing.tsx +++ b/src/components/MainScene/SyncedComponents/MiddleRing.tsx @@ -4,6 +4,7 @@ import middleRingTexture from "../../../static/sprite/middle_ring_tex.png"; import * as THREE from "three"; import { a, useSpring } from "@react-spring/three"; import { useMiddleRingStore } from "../../../store"; +import MiddleRingPart from "./MiddleRing/MiddleRingPart"; const MiddleRing = () => { const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture); @@ -41,6 +42,7 @@ const MiddleRing = () => { const middleRingMaterialRef = useRef(); const middleRingRef = useRef(); + const middleRingPartRef = useRef(); const vertexShader = ` varying vec2 vUv; @@ -193,8 +195,9 @@ const MiddleRing = () => { middleRingMaterialRef.current.needsUpdate = true; } - if (rotating) { + if (rotating && middleRingRef && middleRingPartRef) { middleRingRef.current!.rotation.y += 0.05; + middleRingPartRef.current!.rotation.y += 0.05; } }); @@ -221,6 +224,22 @@ const MiddleRing = () => { transparent={true} /> + + + {[...Array(30).keys()].map((i) => { + const angle = (i / 30) * 2 * Math.PI; + return ( + + ); + })} + ); }; diff --git a/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx b/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx new file mode 100644 index 0000000..d189045 --- /dev/null +++ b/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx @@ -0,0 +1,38 @@ +import React, { useMemo } from "react"; +import middleRingTexture from "../../../../static/sprite/middle_ring_tex.png"; +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import { a } from "@react-spring/three"; + +type MiddleRingPartProps = { + position: number[]; + rotation: number[]; +}; + +const MiddleRingPart = (props: MiddleRingPartProps) => { + const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture); + + const middleRingPartTex = useMemo(() => { + middleRingTex.repeat.set(0.4, 1); + return middleRingTex; + }, [middleRingTex]); + + return ( + + + + + + + ); +}; + +export default MiddleRingPart; diff --git a/src/components/Preloader.tsx b/src/components/Preloader.tsx index 35ef3a7..7fcc2e4 100644 --- a/src/components/Preloader.tsx +++ b/src/components/Preloader.tsx @@ -11,6 +11,7 @@ import longHudMirroredSpriteSheet from "../static/sprite/long_hud_mirrored.png"; import boringHudSpriteSheet from "../static/sprite/long_hud_boring.png"; import boringHudMirroredSpriteSheet from "../static/sprite/long_hud_boring_mirrored.png"; import throwNodeSpriteSheet from "../static/sprite/throw_node.png"; +import ripMiddleRingSpriteSheet from "../static/sprite/rip_middle_ring.png"; import * as THREE from "three"; import { useLoader, useThree } from "react-three-fiber"; @@ -41,6 +42,10 @@ const Preloader = () => { THREE.TextureLoader, boringHudMirroredSpriteSheet ); + const ripMiddleRing = useLoader( + THREE.TextureLoader, + ripMiddleRingSpriteSheet + ); const { gl } = useThree(); useLayoutEffect(() => { @@ -57,6 +62,7 @@ const Preloader = () => { gl.initTexture(boringHud); gl.initTexture(boringHudMirrored); gl.initTexture(throwNode); + gl.initTexture(ripMiddleRing); }, [ moveDown, moveUp, @@ -72,6 +78,7 @@ const Preloader = () => { longHudMirrored, intro, throwNode, + ripMiddleRing, ]); return null; }; diff --git a/src/core/StateManagers/EventManager.tsx b/src/core/StateManagers/EventManager.tsx index 85ae8dc..c2dd6ed 100644 --- a/src/core/StateManagers/EventManager.tsx +++ b/src/core/StateManagers/EventManager.tsx @@ -47,6 +47,7 @@ const getKeyCodeAssociation = (keyCode: number): string => { 90: "X", // z key 68: "TRIANGLE", // d key 69: "L2", // e key + 32: "SPACE", }; return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs]; }; diff --git a/src/core/StateManagers/MainSceneManagers/LainManager.tsx b/src/core/StateManagers/MainSceneManagers/LainManager.tsx index 23dae5e..1bdc634 100644 --- a/src/core/StateManagers/MainSceneManagers/LainManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/LainManager.tsx @@ -14,6 +14,7 @@ const LainManager = (props: StateManagerProps) => { case "site_right": case "select_level_up": case "select_level_down": + case "pause_game": return { action: setLainMoveState, value: eventState.event, @@ -28,6 +29,12 @@ const LainManager = (props: StateManagerProps) => { value: "throw_node", duration: 3900, }; + case "test": + return { + action: setLainMoveState, + value: "pause_game", + duration: 3900, + }; } }, [setLainMoveState] diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index a651af8..cbb9854 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/src/core/mainSceneEventHandler.ts @@ -101,6 +101,8 @@ const handleMainSceneEvent = (gameContext: any) => { return { event: "toggle_level_selection" }; case "TRIANGLE": return { event: "pause_game" }; + case "SPACE": + return { event: "test" }; } return { diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index b36c7e1..d6767bb 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -27,9 +27,9 @@ const MainScene = () => { - - - {/**/} + {/**/} + {/**/} + diff --git a/src/store.ts b/src/store.ts index 62c607e..caf5de1 100644 --- a/src/store.ts +++ b/src/store.ts @@ -353,7 +353,7 @@ export const useMiddleRingStore = create( { transformState: { wobbleStrength: 0, - noiseStrength: 0.03, + noiseStrength: 0, posY: -0.11, rotX: 0, rotZ: 0,