mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
merged popups, main scene events done moving on to media
This commit is contained in:
parent
93d1b442ea
commit
7620610097
32 changed files with 561 additions and 862 deletions
|
@ -1,12 +1,16 @@
|
||||||
import { useCallback, useEffect, useRef } from "react";
|
import { useCallback, useEffect, useRef } from "react";
|
||||||
import {
|
import {
|
||||||
|
BootSceneContext,
|
||||||
|
EndSceneContext,
|
||||||
getBootSceneContext,
|
getBootSceneContext,
|
||||||
getEndSceneContext,
|
getEndSceneContext,
|
||||||
getMainSceneContext,
|
getMainSceneContext,
|
||||||
getMediaSceneContext,
|
getMediaSceneContext,
|
||||||
getSsknSceneContext,
|
getSsknSceneContext,
|
||||||
MainSceneContext,
|
MainSceneContext,
|
||||||
|
MediaSceneContext,
|
||||||
playAudio,
|
playAudio,
|
||||||
|
SsknSceneContext,
|
||||||
useStore,
|
useStore,
|
||||||
} from "../store";
|
} from "../store";
|
||||||
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||||
|
@ -18,11 +22,11 @@ import { useFrame } from "react-three-fiber";
|
||||||
import { getRandomIdleLainAnim } from "../utils/idle-utils";
|
import { getRandomIdleLainAnim } from "../utils/idle-utils";
|
||||||
import * as audio from "../static/sfx";
|
import * as audio from "../static/sfx";
|
||||||
import handleEndSceneKeyPress from "../core/scene-keypress-handlers/handleEndSceneKeyPress";
|
import handleEndSceneKeyPress from "../core/scene-keypress-handlers/handleEndSceneKeyPress";
|
||||||
import handleMainSceneEvent from "../core/scene-event-handlers/handleMainSceneEvent";
|
|
||||||
import handleMediaSceneEvent from "../core/scene-event-handlers/handleMediaSceneEvent";
|
import handleMediaSceneEvent from "../core/scene-event-handlers/handleMediaSceneEvent";
|
||||||
import handleSsknSceneEvent from "../core/scene-event-handlers/handleSsknSceneEvent";
|
import handleSsknSceneEvent from "../core/scene-event-handlers/handleSsknSceneEvent";
|
||||||
import handleBootSceneEvent from "../core/scene-event-handlers/handleBootSceneEvent";
|
import handleBootSceneEvent from "../core/scene-event-handlers/handleBootSceneEvent";
|
||||||
import handleEndSceneEvent from "../core/scene-event-handlers/handleEndSceneEvent";
|
import handleEndSceneEvent from "../core/scene-event-handlers/handleEndSceneEvent";
|
||||||
|
import handleEvent from "../core/scene-event-handlers/handleEvent";
|
||||||
|
|
||||||
const KeyPressHandler = () => {
|
const KeyPressHandler = () => {
|
||||||
const scene = useStore((state) => state.currentScene);
|
const scene = useStore((state) => state.currentScene);
|
||||||
|
@ -79,66 +83,66 @@ const KeyPressHandler = () => {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
|
|
||||||
if (
|
if (
|
||||||
keyPress &&
|
keyPress
|
||||||
!inputCooldown &&
|
// !inputCooldown &&
|
||||||
now > timeSinceLastKeyPress.current + 1500
|
// now > timeSinceLastKeyPress.current + 1500
|
||||||
) {
|
) {
|
||||||
if (scene === "main") {
|
if (scene === "main") {
|
||||||
lainIdleCounter.current = now;
|
lainIdleCounter.current = now;
|
||||||
idleSceneCounter.current = now;
|
idleSceneCounter.current = now;
|
||||||
timeSinceLastKeyPress.current = now;
|
timeSinceLastKeyPress.current = now;
|
||||||
}
|
}
|
||||||
|
|
||||||
const sceneFns = (() => {
|
const sceneFns = (() => {
|
||||||
switch (scene) {
|
switch (scene) {
|
||||||
case "main":
|
case "main":
|
||||||
return {
|
return {
|
||||||
contextProvider: getMainSceneContext,
|
contextProvider: getMainSceneContext,
|
||||||
keyPressHandler: handleMainSceneKeyPress,
|
keyPressHandler: handleMainSceneKeyPress,
|
||||||
eventHandler: handleMainSceneEvent,
|
|
||||||
};
|
};
|
||||||
case "media":
|
case "media":
|
||||||
return {
|
return {
|
||||||
contextProvider: getMediaSceneContext,
|
contextProvider: getMediaSceneContext,
|
||||||
keyPressHandler: handleMediaSceneKeyPress,
|
keyPressHandler: handleMediaSceneKeyPress,
|
||||||
eventHandler: handleMediaSceneEvent,
|
|
||||||
};
|
};
|
||||||
case "sskn":
|
// case "sskn":
|
||||||
return {
|
// return {
|
||||||
contextProvider: getSsknSceneContext,
|
// contextProvider: getSsknSceneContext,
|
||||||
keyPressHandler: handleSsknSceneKeyPress,
|
// keyPressHandler: handleSsknSceneKeyPress,
|
||||||
eventHandler: handleSsknSceneEvent,
|
// eventHandler: handleSsknSceneEvent,
|
||||||
};
|
// };
|
||||||
case "boot":
|
// case "boot":
|
||||||
return {
|
// return {
|
||||||
contextProvider: getBootSceneContext,
|
// contextProvider: getBootSceneContext,
|
||||||
keyPressHandler: handleBootSceneKeyPress,
|
// keyPressHandler: handleBootSceneKeyPress,
|
||||||
eventHandler: handleBootSceneEvent,
|
// eventHandler: handleBootSceneEvent,
|
||||||
};
|
// };
|
||||||
case "end":
|
// case "end":
|
||||||
return {
|
// return {
|
||||||
contextProvider: getEndSceneContext,
|
// contextProvider: getEndSceneContext,
|
||||||
keyPressHandler: handleEndSceneKeyPress,
|
// keyPressHandler: handleEndSceneKeyPress,
|
||||||
eventHandler: handleEndSceneEvent,
|
// eventHandler: handleEndSceneEvent,
|
||||||
};
|
// };
|
||||||
case "gate":
|
// case "gate":
|
||||||
case "polytan":
|
// case "polytan":
|
||||||
useStore.setState({ currentScene: "main" });
|
// useStore.setState({ currentScene: "main" });
|
||||||
break;
|
// break;
|
||||||
case "idle_media":
|
// case "idle_media":
|
||||||
useStore.setState({
|
// useStore.setState({
|
||||||
currentScene: "main",
|
// currentScene: "main",
|
||||||
idleStarting: false,
|
// idleStarting: false,
|
||||||
});
|
// });
|
||||||
break;
|
// break;
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
if (sceneFns) {
|
if (sceneFns) {
|
||||||
const { contextProvider, keyPressHandler, eventHandler } = sceneFns;
|
const { contextProvider, keyPressHandler } = sceneFns;
|
||||||
|
|
||||||
const ctx = contextProvider(keyPress);
|
const ctx = contextProvider(keyPress);
|
||||||
const event = keyPressHandler(ctx);
|
const event = keyPressHandler(ctx as any) as any;
|
||||||
if (event) eventHandler(event);
|
if (event) handleEvent(event);
|
||||||
|
// if (event) eventHandler(event.event, event.mutations);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useMemo, useRef, memo } from "react";
|
import React, { useMemo, useRef, memo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import GrayPlane from "./GrayPlanes/GrayPlane";
|
import GrayPlane from "./GrayPlane";
|
||||||
|
|
||||||
const GrayPlanes = memo(() => {
|
const GrayPlanes = memo(() => {
|
||||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
|
@ -1,7 +1,7 @@
|
||||||
import React, {Suspense, useEffect, useMemo, useRef, useState} from "react";
|
import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import {useFrame, useLoader} from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import {PlainSingularAnimator} from "three-plain-animator/lib/plain-singular-animator";
|
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
||||||
import moveDownSpriteSheet from "../../static/sprite/jump_down.png";
|
import moveDownSpriteSheet from "../../static/sprite/jump_down.png";
|
||||||
import moveUpSpriteSheet from "../../static/sprite/jump_up.png";
|
import moveUpSpriteSheet from "../../static/sprite/jump_up.png";
|
||||||
import moveLeftSpriteSheet from "../../static/sprite/move_left.png";
|
import moveLeftSpriteSheet from "../../static/sprite/move_left.png";
|
||||||
|
@ -12,7 +12,7 @@ import throwNodeSpriteSheet from "../../static/sprite/throw_node.png";
|
||||||
import ripMiddleRingSpriteSheet from "../../static/sprite/rip_middle_ring.png";
|
import ripMiddleRingSpriteSheet from "../../static/sprite/rip_middle_ring.png";
|
||||||
import knockSpriteSheet from "../../static/sprite/knock.png";
|
import knockSpriteSheet from "../../static/sprite/knock.png";
|
||||||
import knockAndFallSpriteSheet from "../../static/sprite/knock_and_fall.png";
|
import knockAndFallSpriteSheet from "../../static/sprite/knock_and_fall.png";
|
||||||
import touchAndScareSpriteSheet from "../../static/sprite/touch_and_scare.png";
|
import touchAndScareSpriteSheet from "../../static/sprite/touch_node_and_get_scared.png";
|
||||||
import ripNodeSpriteSheet from "../../static/sprite/rip_node.png";
|
import ripNodeSpriteSheet from "../../static/sprite/rip_node.png";
|
||||||
import touchSleeveSpriteSheet from "../../static/sprite/touch_sleeve.png";
|
import touchSleeveSpriteSheet from "../../static/sprite/touch_sleeve.png";
|
||||||
import prayerSpriteSheet from "../../static/sprite/prayer.png";
|
import prayerSpriteSheet from "../../static/sprite/prayer.png";
|
||||||
|
@ -32,7 +32,7 @@ import leanRightSpriteSheet from "../../static/sprite/lean_right.png";
|
||||||
import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
|
import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
|
||||||
import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
|
import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
|
||||||
|
|
||||||
import {useStore} from "../../store";
|
import { useStore } from "../../store";
|
||||||
|
|
||||||
type LainConstructorProps = {
|
type LainConstructorProps = {
|
||||||
sprite: string;
|
sprite: string;
|
||||||
|
@ -368,17 +368,17 @@ const Lain = (props: LainProps) => {
|
||||||
const lainAnimationDispatch = useMemo(() => {
|
const lainAnimationDispatch = useMemo(() => {
|
||||||
const anims = {
|
const anims = {
|
||||||
standing: <LainStanding />,
|
standing: <LainStanding />,
|
||||||
site_left: <LainMoveLeft />,
|
move_left: <LainMoveLeft />,
|
||||||
site_right: <LainMoveRight />,
|
move_right: <LainMoveRight />,
|
||||||
site_up: <LainMoveUp />,
|
jump_up: <LainMoveUp />,
|
||||||
site_down: <LainMoveDown />,
|
jump_down: <LainMoveDown />,
|
||||||
knock_and_fall: <LainKnockAndFall />,
|
knock_and_fall: <LainKnockAndFall />,
|
||||||
touch_and_scare: <LainTouchAndScare />,
|
touch_node_and_get_scared: <LainTouchAndScare />,
|
||||||
knock: <LainKnock />,
|
knock: <LainKnock />,
|
||||||
select_level_down: <LainMoveDown />,
|
select_level_down: <LainMoveDown />,
|
||||||
select_level_up: <LainMoveUp />,
|
select_level_up: <LainMoveUp />,
|
||||||
throw_node: <LainThrowNode />,
|
throw_node: <LainThrowNode />,
|
||||||
pause_game: <LainRipMiddleRing />,
|
rip_middle_ring: <LainRipMiddleRing />,
|
||||||
rip_node: <LainRipNode />,
|
rip_node: <LainRipNode />,
|
||||||
prayer: <LainPrayer />,
|
prayer: <LainPrayer />,
|
||||||
scratch_head: <LainScratchHead />,
|
scratch_head: <LainScratchHead />,
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import middleRingTexture from "../../static/sprite/middle_ring_tex.png";
|
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useStore } from "../../store";
|
import { useStore } from "../../../store";
|
||||||
import MiddleRingPart from "./MiddleRing/MiddleRingPart";
|
import MiddleRingPart from "./MiddleRingPart";
|
||||||
import usePrevious from "../../hooks/usePrevious";
|
import usePrevious from "../../../hooks/usePrevious";
|
||||||
import lerp from "../../utils/lerp";
|
import lerp from "../../../utils/lerp";
|
||||||
import sleep from "../../utils/sleep";
|
import sleep from "../../../utils/sleep";
|
||||||
|
|
||||||
const MiddleRing = () => {
|
const MiddleRing = () => {
|
||||||
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
|
@ -1,48 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import notFound from "../../static/sprite/not_found.png";
|
|
||||||
import notFoundLof from "../../static/sprite/not_found_lof.png";
|
|
||||||
import { useLoader } from "react-three-fiber";
|
|
||||||
import * as THREE from "three";
|
|
||||||
|
|
||||||
type NotFoundProps = {
|
|
||||||
visible: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const NotFound = (props: NotFoundProps) => {
|
|
||||||
const notFoundTex = useLoader(THREE.TextureLoader, notFound);
|
|
||||||
const notFoundLofTex = useLoader(THREE.TextureLoader, notFoundLof);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{props.visible && (
|
|
||||||
<>
|
|
||||||
<sprite
|
|
||||||
scale={[1, 0.25, 0]}
|
|
||||||
renderOrder={106}
|
|
||||||
position={[-1, -0.05, 0]}
|
|
||||||
>
|
|
||||||
<spriteMaterial
|
|
||||||
attach="material"
|
|
||||||
map={notFoundLofTex}
|
|
||||||
depthTest={false}
|
|
||||||
/>
|
|
||||||
</sprite>
|
|
||||||
|
|
||||||
<sprite
|
|
||||||
scale={[4.1, 0.6, 0]}
|
|
||||||
renderOrder={105}
|
|
||||||
position={[0, -0.15, 0]}
|
|
||||||
>
|
|
||||||
<spriteMaterial
|
|
||||||
attach="material"
|
|
||||||
map={notFoundTex}
|
|
||||||
depthTest={false}
|
|
||||||
/>
|
|
||||||
</sprite>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NotFound;
|
|
|
@ -50,6 +50,8 @@ const Pause = () => {
|
||||||
|
|
||||||
const subscene = useStore((state) => state.mainSubscene);
|
const subscene = useStore((state) => state.mainSubscene);
|
||||||
|
|
||||||
|
const setInputCooldown = useStore((state) => state.setInputCooldown);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setAnimation(false);
|
setAnimation(false);
|
||||||
setIntro(true);
|
setIntro(true);
|
||||||
|
@ -62,10 +64,11 @@ const Pause = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setShowActiveComponent(true);
|
setShowActiveComponent(true);
|
||||||
setIntro(false);
|
setIntro(false);
|
||||||
|
setInputCooldown(false);
|
||||||
}, 3500);
|
}, 3500);
|
||||||
}, 3400);
|
}, 3400);
|
||||||
}
|
}
|
||||||
}, [subscene]);
|
}, [setInputCooldown, subscene]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
|
@ -1,42 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import About from "./About";
|
|
||||||
import Prompt from "../../Prompt";
|
|
||||||
import PermissionDenied from "./PermissionDenied";
|
|
||||||
import { useStore } from "../../../store";
|
|
||||||
import Status from "../../Status";
|
|
||||||
|
|
||||||
const PausePopUps = () => {
|
|
||||||
const subscene = useStore((state) => state.mainSubscene);
|
|
||||||
|
|
||||||
const showingAbout = useStore((state) => state.showingAbout);
|
|
||||||
const promptVisible = useStore((state) => state.promptVisible);
|
|
||||||
const permissionDenied = useStore((state) => state.permissionDenied);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<group
|
|
||||||
position={[-0.85, -0.7, 0]}
|
|
||||||
scale={[0.85, 0.85, 0]}
|
|
||||||
visible={subscene === "pause"}
|
|
||||||
>
|
|
||||||
{showingAbout && <About />}
|
|
||||||
<group
|
|
||||||
position={[1, 0.6, 0]}
|
|
||||||
scale={[1.2, 1.2, 0]}
|
|
||||||
visible={promptVisible}
|
|
||||||
>
|
|
||||||
<Prompt />
|
|
||||||
</group>
|
|
||||||
<group
|
|
||||||
position={[1, 0.6, 0]}
|
|
||||||
scale={[1.2, 1.2, 0]}
|
|
||||||
visible={permissionDenied}
|
|
||||||
>
|
|
||||||
<PermissionDenied />
|
|
||||||
</group>
|
|
||||||
|
|
||||||
<Status />
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PausePopUps;
|
|
|
@ -5,6 +5,7 @@ import * as THREE from "three";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../../store";
|
||||||
|
|
||||||
const About = () => {
|
const About = () => {
|
||||||
|
const showingAbout = useStore((state) => state.showingAbout);
|
||||||
const setShowingAbout = useStore((state) => state.setShowingAbout);
|
const setShowingAbout = useStore((state) => state.setShowingAbout);
|
||||||
const aboutBgTex = useLoader(THREE.TextureLoader, aboutBg);
|
const aboutBgTex = useLoader(THREE.TextureLoader, aboutBg);
|
||||||
|
|
||||||
|
@ -23,17 +24,29 @@ const About = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<sprite renderOrder={199} scale={[100, 100, 0]}>
|
{showingAbout && (
|
||||||
<spriteMaterial attach="material" color={0x000000} depthTest={false} />
|
<>
|
||||||
</sprite>
|
<sprite renderOrder={199} scale={[100, 100, 0]}>
|
||||||
<sprite
|
<spriteMaterial
|
||||||
ref={bgRef}
|
attach="material"
|
||||||
scale={[10.5 / 2.5, 52.8 / 2.5, 0]}
|
color={0x000000}
|
||||||
position={[1.1, -13, 0.1]}
|
depthTest={false}
|
||||||
renderOrder={200}
|
/>
|
||||||
>
|
</sprite>
|
||||||
<spriteMaterial attach="material" map={aboutBgTex} depthTest={false} />
|
<sprite
|
||||||
</sprite>
|
ref={bgRef}
|
||||||
|
scale={[10.5 / 2.5, 52.8 / 2.5, 0]}
|
||||||
|
position={[1.1, -13, 0.1]}
|
||||||
|
renderOrder={200}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={aboutBgTex}
|
||||||
|
depthTest={false}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
28
src/components/MainScene/Popups/NotFound.tsx
Normal file
28
src/components/MainScene/Popups/NotFound.tsx
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
import React, { memo } from "react";
|
||||||
|
import notFound from "../../../static/sprite/not_found.png";
|
||||||
|
import notFoundLof from "../../../static/sprite/not_found_lof.png";
|
||||||
|
import { useLoader } from "react-three-fiber";
|
||||||
|
import * as THREE from "three";
|
||||||
|
|
||||||
|
const NotFound = memo(() => {
|
||||||
|
const notFoundTex = useLoader(THREE.TextureLoader, notFound);
|
||||||
|
const notFoundLofTex = useLoader(THREE.TextureLoader, notFoundLof);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<group visible={false}>
|
||||||
|
<sprite scale={[1, 0.25, 0]} renderOrder={106} position={[-1, -0.05, 0]}>
|
||||||
|
<spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={notFoundLofTex}
|
||||||
|
depthTest={false}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite scale={[4.1, 0.6, 0]} renderOrder={105} position={[0, -0.15, 0]}>
|
||||||
|
<spriteMaterial attach="material" map={notFoundTex} depthTest={false} />
|
||||||
|
</sprite>
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default NotFound;
|
|
@ -3,13 +3,16 @@ import headerContainer from "../../../static/sprite/prompt_question_container.pn
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import StaticOrangeLetter from "../../TextRenderer/StaticOrangeLetter";
|
import StaticOrangeLetter from "../../TextRenderer/StaticOrangeLetter";
|
||||||
|
import { useStore } from "../../../store";
|
||||||
|
|
||||||
const PermissionDenied = memo(() => {
|
const PermissionDenied = memo(() => {
|
||||||
const headerContainerTex = useLoader(THREE.TextureLoader, headerContainer);
|
const headerContainerTex = useLoader(THREE.TextureLoader, headerContainer);
|
||||||
|
|
||||||
|
const permissionDenied = useStore((state) => state.permissionDenied);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<group position={[0, 0.5, 0]} visible={permissionDenied}>
|
||||||
<sprite scale={[4.1, 0.3, 0]} renderOrder={200} position={[0, 0.2, 0]}>
|
<sprite scale={[5, 0.36, 0]} renderOrder={200} position={[1, 0.2, 0]}>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
map={headerContainerTex}
|
map={headerContainerTex}
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -18,16 +21,12 @@ const PermissionDenied = memo(() => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</sprite>
|
||||||
<group scale={[0.08, 0.7, 0]} position={[-1, 0.19, 0]}>
|
<group scale={[0.08, 0.7, 0]} position={[0, 0.19, 0]}>
|
||||||
{"Permission denied".split("").map((letter, idx) => (
|
{"Permission denied".split("").map((letter, idx) => (
|
||||||
<StaticOrangeLetter
|
<StaticOrangeLetter letter={letter} letterIdx={idx} key={idx} />
|
||||||
letter={letter}
|
|
||||||
letterIdx={idx}
|
|
||||||
key={idx}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</group>
|
</group>
|
||||||
</>
|
</group>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
24
src/components/MainScene/Popups/Popups.tsx
Normal file
24
src/components/MainScene/Popups/Popups.tsx
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import React, { memo } from "react";
|
||||||
|
import About from "./About";
|
||||||
|
import Prompt from "../../Prompt";
|
||||||
|
import PermissionDenied from "./PermissionDenied";
|
||||||
|
import Status from "../../Status";
|
||||||
|
import NotFound from "./NotFound";
|
||||||
|
|
||||||
|
const Popups = memo(() => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
|
||||||
|
<group position={[1, 0.6, 0]} scale={[1.2, 1.2, 0]}>
|
||||||
|
<Prompt />
|
||||||
|
</group>
|
||||||
|
<About />
|
||||||
|
<PermissionDenied />
|
||||||
|
<Status />
|
||||||
|
</group>
|
||||||
|
<NotFound />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Popups;
|
|
@ -2,7 +2,7 @@ import React, { memo, useEffect, useState } from "react";
|
||||||
import Node from "./Node";
|
import Node from "./Node";
|
||||||
import node_positions from "../../../resources/node_positions.json";
|
import node_positions from "../../../resources/node_positions.json";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../../store";
|
||||||
import { NodeData, SiteData } from "../Site";
|
import { NodeData, SiteData } from "./Site";
|
||||||
import usePrevious from "../../../hooks/usePrevious";
|
import usePrevious from "../../../hooks/usePrevious";
|
||||||
|
|
||||||
type ActiveLevelNodesProps = {
|
type ActiveLevelNodesProps = {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { memo, useEffect, useState } from "react";
|
import React, { memo, useEffect, useState } from "react";
|
||||||
import node_positions from "../../../resources/node_positions.json";
|
import node_positions from "../../../resources/node_positions.json";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../../store";
|
||||||
import { SiteData } from "../Site";
|
import { SiteData } from "./Site";
|
||||||
import InactiveLevelNode from "./InactiveLevelNode";
|
import InactiveLevelNode from "./InactiveLevelNode";
|
||||||
import usePrevious from "../../../hooks/usePrevious";
|
import usePrevious from "../../../hooks/usePrevious";
|
||||||
import { generateInactiveNodes } from "../../../utils/node-utils";
|
import { generateInactiveNodes } from "../../../utils/node-utils";
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
import React, { Suspense, useEffect, useMemo } from "react";
|
import React, { Suspense, useEffect, useMemo } from "react";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useStore } from "../../store";
|
import { useStore } from "../../../store";
|
||||||
import ActiveLevelNodes from "./Site/ActiveLevelNodes";
|
import ActiveLevelNodes from "./ActiveLevelNodes";
|
||||||
import Rings from "./Site/Rings";
|
import Rings from "./Rings";
|
||||||
import NodeAnimations from "./Site/NodeAnimations";
|
import NodeAnimations from "./NodeAnimations";
|
||||||
import InactiveLevelNodes from "./Site/InactiveLevelNodes";
|
import InactiveLevelNodes from "./InactiveLevelNodes";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../../resources/site_a.json";
|
||||||
import site_b from "../../resources/site_b.json";
|
import site_b from "../../../resources/site_b.json";
|
||||||
import level_y_values from "../../resources/level_y_values.json";
|
import level_y_values from "../../../resources/level_y_values.json";
|
||||||
import { filterInvisibleNodes } from "../../utils/node-utils";
|
import { filterInvisibleNodes } from "../../../utils/node-utils";
|
||||||
import Loading from "../Loading";
|
import Loading from "../../Loading";
|
||||||
|
|
||||||
export type NodeData = {
|
export type NodeData = {
|
||||||
id: string;
|
id: string;
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { memo, useEffect, useMemo, useState } from "react";
|
import React, { memo, useEffect, useMemo, useState } from "react";
|
||||||
import Star from "./Starfield/Star";
|
import Star from "./Star";
|
||||||
|
|
||||||
type StarfieldProps = {
|
type StarfieldProps = {
|
||||||
shouldIntro: boolean;
|
shouldIntro: boolean;
|
|
@ -13,7 +13,7 @@ import ripNodeSpriteSheet from "../static/sprite/rip_node.png";
|
||||||
import prayerSpriteSheet from "../static/sprite/prayer.png";
|
import prayerSpriteSheet from "../static/sprite/prayer.png";
|
||||||
import knockSpriteSheet from "../static/sprite/knock.png";
|
import knockSpriteSheet from "../static/sprite/knock.png";
|
||||||
import knockAndFallSpriteSheet from "../static/sprite/knock_and_fall.png";
|
import knockAndFallSpriteSheet from "../static/sprite/knock_and_fall.png";
|
||||||
import touchAndScareSpriteSheet from "../static/sprite/touch_and_scare.png";
|
import touchAndScareSpriteSheet from "../static/sprite/touch_node_and_get_scared.png";
|
||||||
import touchSleeveSpriteSheet from "../static/sprite/touch_sleeve.png";
|
import touchSleeveSpriteSheet from "../static/sprite/touch_sleeve.png";
|
||||||
import thinkingSpriteSheet from "../static/sprite/thinking.png";
|
import thinkingSpriteSheet from "../static/sprite/thinking.png";
|
||||||
import stretchSpriteSheet from "../static/sprite/stretch.png";
|
import stretchSpriteSheet from "../static/sprite/stretch.png";
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import React, { memo } from "react";
|
||||||
import answerContainer from "../static/sprite/prompt_answer_container.png";
|
import answerContainer from "../static/sprite/prompt_answer_container.png";
|
||||||
import questionContainer from "../static/sprite/prompt_question_container.png";
|
import questionContainer from "../static/sprite/prompt_question_container.png";
|
||||||
import yes from "../static/sprite/prompt_yes.png";
|
import yes from "../static/sprite/prompt_yes.png";
|
||||||
|
@ -8,7 +8,7 @@ import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useStore } from "../store";
|
import { useStore } from "../store";
|
||||||
|
|
||||||
const Prompt = () => {
|
const Prompt = memo(() => {
|
||||||
const questionContainerTex = useLoader(
|
const questionContainerTex = useLoader(
|
||||||
THREE.TextureLoader,
|
THREE.TextureLoader,
|
||||||
questionContainer
|
questionContainer
|
||||||
|
@ -20,8 +20,10 @@ const Prompt = () => {
|
||||||
|
|
||||||
const activeComponent = useStore((state) => state.activePromptComponent);
|
const activeComponent = useStore((state) => state.activePromptComponent);
|
||||||
|
|
||||||
|
const promptVisible = useStore((state) => state.promptVisible);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<group visible={promptVisible}>
|
||||||
<sprite scale={[4.1, 0.3, 0]} renderOrder={200} position={[0, 0.2, 0]}>
|
<sprite scale={[4.1, 0.3, 0]} renderOrder={200} position={[0, 0.2, 0]}>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
map={questionContainerTex}
|
map={questionContainerTex}
|
||||||
|
@ -79,8 +81,8 @@ const Prompt = () => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</sprite>
|
||||||
</>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default Prompt;
|
export default Prompt;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { NodeData } from "../components/MainScene/Site";
|
import { NodeData } from "../components/MainScene/Site/Site";
|
||||||
import * as audio from "../static/sfx";
|
import * as audio from "../static/sfx";
|
||||||
import {
|
import {
|
||||||
nodeExplodeAnimation,
|
nodeExplodeAnimation,
|
||||||
|
@ -7,6 +7,7 @@ import {
|
||||||
nodeRipAnimation,
|
nodeRipAnimation,
|
||||||
nodeThrowAnimation,
|
nodeThrowAnimation,
|
||||||
} from "../utils/node-animations";
|
} from "../utils/node-animations";
|
||||||
|
import { playAudio } from "../store";
|
||||||
|
|
||||||
export const siteMoveHorizontal = (calculatedState: {
|
export const siteMoveHorizontal = (calculatedState: {
|
||||||
lainMoveAnimation: string;
|
lainMoveAnimation: string;
|
||||||
|
@ -263,3 +264,159 @@ export const changePauseComponent = (calculatedState: {
|
||||||
],
|
],
|
||||||
audio: [{ sfx: [audio.sound1], delay: 0 }],
|
audio: [{ sfx: [audio.sound1], delay: 0 }],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const showPermissionDenied = {
|
||||||
|
state: [
|
||||||
|
{ mutation: { permissionDenied: true }, delay: 0 },
|
||||||
|
{ mutation: { permissionDenied: false }, delay: 1200 },
|
||||||
|
],
|
||||||
|
audio: [{ sfx: [audio.sound0], delay: 0 }],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const displayPrompt = {
|
||||||
|
state: [{ mutation: { promptVisible: true }, delay: 0 }],
|
||||||
|
audio: [{ sfx: [audio.sound0], delay: 0 }],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const showAbout = {
|
||||||
|
state: [{ mutation: { showingAbout: true }, delay: 0 }],
|
||||||
|
audio: [{ sfx: [audio.sound0], delay: 0 }],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const exitPause = (calculatedState: { siteRot: number[] }) => ({
|
||||||
|
state: [
|
||||||
|
{
|
||||||
|
mutation: {
|
||||||
|
siteRot: calculatedState.siteRot,
|
||||||
|
pauseExitAnimation: true,
|
||||||
|
activePauseComponent: "change",
|
||||||
|
inputCooldown: true,
|
||||||
|
},
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mutation: {
|
||||||
|
mainSubscene: "site",
|
||||||
|
inputCooldown: false,
|
||||||
|
lainMoveState: "standing",
|
||||||
|
},
|
||||||
|
delay: 1200,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
audio: [{ sfx: [audio.sound0], delay: 0 }],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const exitAbout = {
|
||||||
|
state: [{ mutation: { showingAbout: false }, delay: 0 }],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const changePromptComponent = (calculatedState: {
|
||||||
|
activePromptComponent: "yes" | "no";
|
||||||
|
}) => ({
|
||||||
|
state: [
|
||||||
|
{
|
||||||
|
mutation: {
|
||||||
|
activePromptComponent: calculatedState.activePromptComponent,
|
||||||
|
},
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
audio: [{ sfx: [audio.sound1], delay: 0 }],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const exitPrompt = {
|
||||||
|
state: [
|
||||||
|
{
|
||||||
|
mutation: { activePromptComponent: "no", promptVisible: false },
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
audio: [{ sfx: [audio.sound28], delay: 0 }],
|
||||||
|
};
|
||||||
|
|
||||||
|
// todo actually save
|
||||||
|
export const saveGame = () => ({
|
||||||
|
state: [
|
||||||
|
{
|
||||||
|
mutation: { saveSuccessful: true },
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mutation: { saveSuccessful: undefined },
|
||||||
|
delay: 1200,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
audio: [{ sfx: [audio.sound28], delay: 0 }],
|
||||||
|
});
|
||||||
|
|
||||||
|
// todo actually load
|
||||||
|
export const loadGame = () => ({
|
||||||
|
state: [
|
||||||
|
{
|
||||||
|
mutation: { loadSuccessful: true },
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mutation: { loadSuccessful: undefined },
|
||||||
|
delay: 1200,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
audio: [{ sfx: [audio.sound28], delay: 0 }],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const changeSite = (calculatedState: {
|
||||||
|
newActiveSite: "a" | "b";
|
||||||
|
newActiveNode: NodeData;
|
||||||
|
newActiveLevel: string;
|
||||||
|
newSiteRot: number[];
|
||||||
|
newSiteSaveState: {
|
||||||
|
a: {
|
||||||
|
activeNode: NodeData;
|
||||||
|
siteRot: number[];
|
||||||
|
activeLevel: string;
|
||||||
|
};
|
||||||
|
b: {
|
||||||
|
activeNode: NodeData;
|
||||||
|
siteRot: number[];
|
||||||
|
activeLevel: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}) => ({
|
||||||
|
state: [
|
||||||
|
{
|
||||||
|
mutation: {
|
||||||
|
currentScene: "change_disc",
|
||||||
|
lainMoveState: "standing",
|
||||||
|
promptVisible: false,
|
||||||
|
activePromptComponent: "no",
|
||||||
|
mainSubscene: "site",
|
||||||
|
// load state
|
||||||
|
activeSite: calculatedState.newActiveSite,
|
||||||
|
activeNode: calculatedState.newActiveNode,
|
||||||
|
siteRot: calculatedState.newSiteRot,
|
||||||
|
activeLevel: calculatedState.newActiveLevel,
|
||||||
|
// save state
|
||||||
|
siteSaveState: calculatedState.newSiteSaveState,
|
||||||
|
},
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const changeLeftMediaComponent = (calculatedState: {
|
||||||
|
activeComponent: "play" | "exit";
|
||||||
|
}) => ({
|
||||||
|
state: [
|
||||||
|
{ mutation: { activeMediaComponent: calculatedState.activeComponent } },
|
||||||
|
],
|
||||||
|
audio: [{ sfx: [audio.sound1], delay: 0 }],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const changeMediaSide = (calculatedState: {
|
||||||
|
activeMediaComponent: "fstWord" | "sndWord" | "thirdWord" | "exit" | "play";
|
||||||
|
lastActiveMediaComponents: {
|
||||||
|
left: "play" | "exit";
|
||||||
|
right: "fstWord" | "sndWord" | "thirdWord";
|
||||||
|
};
|
||||||
|
currentMediaSide: "right" | "left";
|
||||||
|
}) => ({});
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { playAudio, useStore } from "../../store";
|
||||||
import sleep from "../../utils/sleep";
|
import sleep from "../../utils/sleep";
|
||||||
|
|
||||||
type Mutation = {
|
type Mutation = {
|
||||||
mutation: any;
|
mutation: Object;
|
||||||
delay: number;
|
delay: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -19,7 +19,6 @@ type Event = {
|
||||||
|
|
||||||
// the async/await here might be misleading for some, it functions as a setTimeout that fires
|
// the async/await here might be misleading for some, it functions as a setTimeout that fires
|
||||||
// multiple async calls without stopping the execution, which is what we want.
|
// multiple async calls without stopping the execution, which is what we want.
|
||||||
|
|
||||||
const handleEvent = (event: Event) => {
|
const handleEvent = (event: Event) => {
|
||||||
const now = performance.now();
|
const now = performance.now();
|
||||||
const setState = useStore.setState;
|
const setState = useStore.setState;
|
||||||
|
@ -42,7 +41,7 @@ const handleEvent = (event: Event) => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(performance.now() - now);
|
// console.log(performance.now() - now);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default handleEvent;
|
export default handleEvent;
|
||||||
|
|
|
@ -1,321 +0,0 @@
|
||||||
import { playAudio, useStore } from "../../store";
|
|
||||||
import sleep from "../../utils/sleep";
|
|
||||||
import * as audio from "../../static/sfx";
|
|
||||||
import { NodeData } from "../../components/MainScene/Site";
|
|
||||||
import {
|
|
||||||
nodeKnock,
|
|
||||||
nodeKnockAndFall,
|
|
||||||
nodeRip,
|
|
||||||
nodeThrow,
|
|
||||||
nodeTouchAndScare,
|
|
||||||
} from "../../utils/node-animations";
|
|
||||||
|
|
||||||
type MainSceneMutations = {
|
|
||||||
level?: string;
|
|
||||||
node?: NodeData;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMainSceneEvent = (eventState: any) => {
|
|
||||||
const setState = useStore.setState;
|
|
||||||
|
|
||||||
const changeSite = useStore.getState().changeSite;
|
|
||||||
|
|
||||||
switch (eventState.event) {
|
|
||||||
case "site_up":
|
|
||||||
case "site_down":
|
|
||||||
(async () => {
|
|
||||||
setState({
|
|
||||||
lainMoveState: eventState.event,
|
|
||||||
activeLevel: eventState.level,
|
|
||||||
inputCooldown: true,
|
|
||||||
});
|
|
||||||
playAudio(audio.sound13);
|
|
||||||
|
|
||||||
await sleep(1300);
|
|
||||||
playAudio(audio.sound10);
|
|
||||||
playAudio(audio.sound9);
|
|
||||||
|
|
||||||
await sleep(1400);
|
|
||||||
playAudio(audio.sound8);
|
|
||||||
|
|
||||||
await sleep(1200);
|
|
||||||
setState({
|
|
||||||
activeNode: eventState.node,
|
|
||||||
lainMoveState: "standing",
|
|
||||||
inputCooldown: false,
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "site_left":
|
|
||||||
case "site_right":
|
|
||||||
(async () => {
|
|
||||||
setState({
|
|
||||||
lainMoveState: eventState.event,
|
|
||||||
siteRot: [0, eventState.siteRotY, 0],
|
|
||||||
inputCooldown: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
await sleep(1100);
|
|
||||||
playAudio(audio.sound6);
|
|
||||||
playAudio(audio.sound34);
|
|
||||||
|
|
||||||
await sleep(2800);
|
|
||||||
setState({
|
|
||||||
activeNode: eventState.node,
|
|
||||||
lainMoveState: "standing",
|
|
||||||
inputCooldown: false,
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "change_node":
|
|
||||||
setState({ activeNode: eventState.node });
|
|
||||||
playAudio(audio.sound1);
|
|
||||||
break;
|
|
||||||
case "throw_node_media":
|
|
||||||
case "throw_node_sskn":
|
|
||||||
case "throw_node_gate":
|
|
||||||
case "throw_node_tak":
|
|
||||||
case "throw_node_polytan":
|
|
||||||
(async () => {
|
|
||||||
setState({
|
|
||||||
lainMoveState: "throw_node",
|
|
||||||
oldLevel: eventState.level,
|
|
||||||
oldSiteRot: [eventState.siteRotY, 0],
|
|
||||||
inputCooldown: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
nodeThrow(eventState.siteRotY);
|
|
||||||
|
|
||||||
playAudio(audio.sound0);
|
|
||||||
|
|
||||||
await sleep(1600);
|
|
||||||
playAudio(audio.sound12);
|
|
||||||
|
|
||||||
await sleep(1200);
|
|
||||||
playAudio(audio.sound13);
|
|
||||||
playAudio(audio.sound14);
|
|
||||||
|
|
||||||
await sleep(650);
|
|
||||||
|
|
||||||
setState({
|
|
||||||
currentScene: eventState.event.split("_")[2],
|
|
||||||
intro: false,
|
|
||||||
lainMoveState: "standing",
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "rip_node_media":
|
|
||||||
case "rip_node_gate":
|
|
||||||
case "rip_node_sskn":
|
|
||||||
case "rip_node_tak":
|
|
||||||
case "rip_node_polytan":
|
|
||||||
(async () => {
|
|
||||||
setState({
|
|
||||||
lainMoveState: "rip_node",
|
|
||||||
oldLevel: eventState.level,
|
|
||||||
oldSiteRot: [eventState.siteRotY, 0],
|
|
||||||
inputCooldown: true,
|
|
||||||
});
|
|
||||||
nodeRip(eventState.siteRotY);
|
|
||||||
playAudio(audio.sound0);
|
|
||||||
|
|
||||||
await sleep(1600);
|
|
||||||
playAudio(audio.sound12);
|
|
||||||
|
|
||||||
await sleep(2400);
|
|
||||||
playAudio(audio.sound15);
|
|
||||||
playAudio(audio.sound13);
|
|
||||||
|
|
||||||
await sleep(2000);
|
|
||||||
setState({
|
|
||||||
currentScene: eventState.event.split("_")[2],
|
|
||||||
intro: false,
|
|
||||||
lainMoveState: "standing",
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "touch_and_scare":
|
|
||||||
(async () => {
|
|
||||||
setState({
|
|
||||||
lainMoveState: "touch_and_scare",
|
|
||||||
inputCooldown: true,
|
|
||||||
});
|
|
||||||
nodeTouchAndScare(eventState.siteRotY);
|
|
||||||
|
|
||||||
await sleep(2400);
|
|
||||||
playAudio(audio.sound17);
|
|
||||||
|
|
||||||
await sleep(750);
|
|
||||||
playAudio(audio.sound33);
|
|
||||||
|
|
||||||
await sleep(650);
|
|
||||||
setState({
|
|
||||||
lainMoveState: "standing",
|
|
||||||
inputCooldown: false,
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "knock":
|
|
||||||
(async () => {
|
|
||||||
setState({ lainMoveState: "knock", inputCooldown: true });
|
|
||||||
nodeKnock(eventState.siteRotY);
|
|
||||||
|
|
||||||
await sleep(1200);
|
|
||||||
playAudio(audio.sound18);
|
|
||||||
|
|
||||||
await sleep(1700);
|
|
||||||
setState({ lainMoveState: "standing", inputCooldown: false });
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "knock_and_fall":
|
|
||||||
(async () => {
|
|
||||||
setState({ lainMoveState: "knock_and_fall", inputCooldown: true });
|
|
||||||
nodeKnockAndFall(eventState.siteRotY);
|
|
||||||
|
|
||||||
await sleep(1200);
|
|
||||||
playAudio(audio.sound18);
|
|
||||||
|
|
||||||
await sleep(1100);
|
|
||||||
|
|
||||||
playAudio(audio.sound19);
|
|
||||||
|
|
||||||
await sleep(850);
|
|
||||||
playAudio(audio.sound33);
|
|
||||||
|
|
||||||
await sleep(3350);
|
|
||||||
setState({ lainMoveState: "standing", inputCooldown: false });
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "enter_level_selection":
|
|
||||||
setState({
|
|
||||||
selectedLevel: eventState.level,
|
|
||||||
mainSubscene: "level_selection",
|
|
||||||
});
|
|
||||||
playAudio(audio.sound1);
|
|
||||||
break;
|
|
||||||
case "level_selection_up":
|
|
||||||
case "level_selection_down":
|
|
||||||
setState({ selectedLevel: eventState.selectedLevelIdx });
|
|
||||||
break;
|
|
||||||
case "level_selection_back":
|
|
||||||
setState({ mainSubscene: "site" });
|
|
||||||
playAudio(audio.sound1);
|
|
||||||
break;
|
|
||||||
case "select_level_up":
|
|
||||||
case "select_level_down":
|
|
||||||
(async () => {
|
|
||||||
setState({
|
|
||||||
lainMoveState: eventState.event,
|
|
||||||
activeLevel: eventState.level,
|
|
||||||
mainSubscene: "site",
|
|
||||||
inputCooldown: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
await sleep(1300);
|
|
||||||
playAudio(audio.sound10);
|
|
||||||
playAudio(audio.sound9);
|
|
||||||
|
|
||||||
await sleep(1400);
|
|
||||||
playAudio(audio.sound8);
|
|
||||||
|
|
||||||
await sleep(1200);
|
|
||||||
setState({
|
|
||||||
activeNode: eventState.node,
|
|
||||||
lainMoveState: "standing",
|
|
||||||
inputCooldown: false,
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "exit_not_found":
|
|
||||||
setState({ mainSubscene: "site" });
|
|
||||||
break;
|
|
||||||
case "pause_game":
|
|
||||||
(async () => {
|
|
||||||
setState({
|
|
||||||
lainMoveState: "pause_game",
|
|
||||||
pauseExitAnimation: false,
|
|
||||||
mainSubscene: "pause",
|
|
||||||
inputCooldown: true,
|
|
||||||
});
|
|
||||||
playAudio(audio.sound7);
|
|
||||||
|
|
||||||
await sleep(3600);
|
|
||||||
useStore.getState().setSiteRotX(Math.PI / 2);
|
|
||||||
playAudio(audio.sound23);
|
|
||||||
})();
|
|
||||||
break;
|
|
||||||
case "pause_up":
|
|
||||||
case "pause_down":
|
|
||||||
setState({ activePauseComponent: eventState.activePauseComponent });
|
|
||||||
playAudio(audio.sound1);
|
|
||||||
break;
|
|
||||||
case "pause_exit_select":
|
|
||||||
setState({
|
|
||||||
pauseExitAnimation: true,
|
|
||||||
activePauseComponent: "change",
|
|
||||||
siteRot: eventState.siteRot,
|
|
||||||
inputCooldown: true,
|
|
||||||
});
|
|
||||||
playAudio(audio.sound0);
|
|
||||||
|
|
||||||
setTimeout(
|
|
||||||
() =>
|
|
||||||
setState({
|
|
||||||
mainSubscene: "site",
|
|
||||||
inputCooldown: false,
|
|
||||||
lainMoveState: "standing",
|
|
||||||
}),
|
|
||||||
1200
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
case "pause_about_select":
|
|
||||||
setState({ showingAbout: true });
|
|
||||||
playAudio(audio.sound0);
|
|
||||||
break;
|
|
||||||
case "exit_about":
|
|
||||||
setState({ showingAbout: false });
|
|
||||||
break;
|
|
||||||
case "display_prompt":
|
|
||||||
setState({ promptVisible: true });
|
|
||||||
playAudio(audio.sound0);
|
|
||||||
break;
|
|
||||||
case "exit_prompt":
|
|
||||||
setState({ promptVisible: false, activePromptComponent: "no" });
|
|
||||||
playAudio(audio.sound28);
|
|
||||||
break;
|
|
||||||
case "prompt_left":
|
|
||||||
setState({ activePromptComponent: "yes" });
|
|
||||||
playAudio(audio.sound1);
|
|
||||||
break;
|
|
||||||
case "prompt_right":
|
|
||||||
setState({ activePromptComponent: "no" });
|
|
||||||
playAudio(audio.sound1);
|
|
||||||
break;
|
|
||||||
case "show_permission_denied":
|
|
||||||
setState({ permissionDenied: true });
|
|
||||||
playAudio(audio.sound0);
|
|
||||||
|
|
||||||
setTimeout(() => setState({ permissionDenied: false }), 1200);
|
|
||||||
break;
|
|
||||||
case "pause_save_select":
|
|
||||||
setState({ saveSuccessful: true });
|
|
||||||
playAudio(audio.sound28);
|
|
||||||
|
|
||||||
//todo actually save
|
|
||||||
setTimeout(() => setState({ saveSuccessful: undefined }), 1200);
|
|
||||||
break;
|
|
||||||
case "pause_load_select":
|
|
||||||
// todo check if data exists
|
|
||||||
setState({ loadSuccessful: true });
|
|
||||||
playAudio(audio.sound28);
|
|
||||||
|
|
||||||
//todo actually load
|
|
||||||
setTimeout(() => setState({ loadSuccessful: undefined }), 1200);
|
|
||||||
break;
|
|
||||||
case "pause_change_select":
|
|
||||||
const siteToLoad: "a" | "b" = eventState.site;
|
|
||||||
changeSite(siteToLoad);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default handleMainSceneEvent;
|
|
|
@ -37,14 +37,6 @@ const handleMediaSceneEvent = (eventState: any) => {
|
||||||
});
|
});
|
||||||
playAudio(audio.sound1);
|
playAudio(audio.sound1);
|
||||||
break;
|
break;
|
||||||
case "media_leftside_down":
|
|
||||||
setState({ activeMediaComponent: "exit" });
|
|
||||||
playAudio(audio.sound1);
|
|
||||||
break;
|
|
||||||
case "media_leftside_up":
|
|
||||||
setState({ activeMediaComponent: "play" });
|
|
||||||
playAudio(audio.sound1);
|
|
||||||
break;
|
|
||||||
case "media_leftside_right":
|
case "media_leftside_right":
|
||||||
updateLeftSide(
|
updateLeftSide(
|
||||||
eventState.newActiveComponent,
|
eventState.newActiveComponent,
|
||||||
|
|
|
@ -4,7 +4,6 @@ const handleSsknSceneEvent = (eventState: any) => {
|
||||||
const setState = useStore.setState;
|
const setState = useStore.setState;
|
||||||
|
|
||||||
const setNodeViewed = useStore.getState().setNodeViewed;
|
const setNodeViewed = useStore.getState().setNodeViewed;
|
||||||
const incrementSsknLvl = useStore.getState().incrementSsknLvl;
|
|
||||||
|
|
||||||
switch (eventState.event) {
|
switch (eventState.event) {
|
||||||
case "sskn_cancel_up":
|
case "sskn_cancel_up":
|
||||||
|
@ -25,7 +24,7 @@ const handleSsknSceneEvent = (eventState: any) => {
|
||||||
is_viewed: 1,
|
is_viewed: 1,
|
||||||
is_visible: 0,
|
is_visible: 0,
|
||||||
});
|
});
|
||||||
incrementSsknLvl();
|
// incrementSsknLvl();
|
||||||
|
|
||||||
setTimeout(() => setState({ currentScene: "main" }), 6000);
|
setTimeout(() => setState({ currentScene: "main" }), 6000);
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
const handleEndSceneKeyPress = (endSceneContext: any) => {
|
import { EndSceneContext } from "../../store";
|
||||||
|
|
||||||
|
const handleEndSceneKeyPress = (endSceneContext: EndSceneContext) => {
|
||||||
const { keyPress, selectionVisible, activeEndComponent } = endSceneContext;
|
const { keyPress, selectionVisible, activeEndComponent } = endSceneContext;
|
||||||
|
|
||||||
if (selectionVisible) {
|
if (selectionVisible) {
|
||||||
|
|
|
@ -5,6 +5,30 @@ import {
|
||||||
unknownNodeTemplate,
|
unknownNodeTemplate,
|
||||||
} from "../../utils/node-utils";
|
} from "../../utils/node-utils";
|
||||||
import { MainSceneContext } from "../../store";
|
import { MainSceneContext } from "../../store";
|
||||||
|
import {
|
||||||
|
changeNode,
|
||||||
|
changePauseComponent,
|
||||||
|
changePromptComponent,
|
||||||
|
changeSelectedLevel,
|
||||||
|
changeSite,
|
||||||
|
displayPrompt,
|
||||||
|
enterLevelSelection,
|
||||||
|
exitAbout,
|
||||||
|
exitLevelSelection,
|
||||||
|
exitPause,
|
||||||
|
exitPrompt,
|
||||||
|
explodeNode,
|
||||||
|
knockNode,
|
||||||
|
knockNodeAndFall,
|
||||||
|
loadGame,
|
||||||
|
pauseGame,
|
||||||
|
saveGame,
|
||||||
|
selectLevel,
|
||||||
|
showAbout,
|
||||||
|
showPermissionDenied,
|
||||||
|
siteMoveHorizontal,
|
||||||
|
siteMoveVertical,
|
||||||
|
} from "../eventTemplates";
|
||||||
|
|
||||||
const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
||||||
const {
|
const {
|
||||||
|
@ -22,23 +46,47 @@ const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
||||||
promptVisible,
|
promptVisible,
|
||||||
activePromptComponent,
|
activePromptComponent,
|
||||||
gateLvl,
|
gateLvl,
|
||||||
|
siteSaveState,
|
||||||
} = mainSceneContext;
|
} = mainSceneContext;
|
||||||
|
|
||||||
if (promptVisible) {
|
if (promptVisible) {
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "LEFT":
|
case "LEFT":
|
||||||
return { event: "prompt_left" };
|
return changePromptComponent({ activePromptComponent: "yes" });
|
||||||
case "RIGHT":
|
case "RIGHT":
|
||||||
return { event: "prompt_right" };
|
return changePromptComponent({ activePromptComponent: "no" });
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
switch (activePromptComponent) {
|
switch (activePromptComponent) {
|
||||||
case "no":
|
case "no":
|
||||||
return { event: "exit_prompt" };
|
return exitPrompt;
|
||||||
case "yes":
|
case "yes":
|
||||||
return {
|
switch (activePauseComponent) {
|
||||||
event: `pause_${activePauseComponent}_select`,
|
case "change":
|
||||||
site: activeSite === "a" ? "b" : "a",
|
const siteToLoad = activeSite === "a" ? "b" : "a";
|
||||||
};
|
const stateToLoad = siteSaveState[siteToLoad];
|
||||||
|
|
||||||
|
const newSiteSaveState = {
|
||||||
|
...siteSaveState,
|
||||||
|
[activeSite]: {
|
||||||
|
activeNode: activeNode,
|
||||||
|
siteRot: [0, siteRotY, 0],
|
||||||
|
activeLevel: level.toString().padStart(2, "0"),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
console.log(newSiteSaveState);
|
||||||
|
|
||||||
|
return changeSite({
|
||||||
|
newActiveSite: siteToLoad,
|
||||||
|
newActiveNode: stateToLoad.activeNode,
|
||||||
|
newSiteRot: stateToLoad.siteRot,
|
||||||
|
newActiveLevel: stateToLoad.activeLevel,
|
||||||
|
newSiteSaveState: newSiteSaveState,
|
||||||
|
});
|
||||||
|
case "save":
|
||||||
|
return saveGame();
|
||||||
|
case "load":
|
||||||
|
return loadGame();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -47,11 +95,10 @@ const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "LEFT":
|
case "LEFT":
|
||||||
case "RIGHT": {
|
case "RIGHT": {
|
||||||
const keyPressToLower = keyPress.toLowerCase();
|
const direction = keyPress.toLowerCase();
|
||||||
|
|
||||||
const nodeData = findNode(
|
const nodeData = findNode(
|
||||||
activeNode.id,
|
activeNode.id,
|
||||||
keyPressToLower,
|
direction,
|
||||||
activeNode.matrixIndices!,
|
activeNode.matrixIndices!,
|
||||||
level,
|
level,
|
||||||
activeSite,
|
activeSite,
|
||||||
|
@ -61,37 +108,38 @@ const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
||||||
|
|
||||||
if (!nodeData) return;
|
if (!nodeData) return;
|
||||||
|
|
||||||
|
const lainMoveAnimation = `move_${direction}`;
|
||||||
|
const newSiteRot = [
|
||||||
|
0,
|
||||||
|
direction === "left"
|
||||||
|
? siteRotY + Math.PI / 4
|
||||||
|
: siteRotY - Math.PI / 4,
|
||||||
|
0,
|
||||||
|
];
|
||||||
|
const newNode = {
|
||||||
|
...(nodeData.node !== "unknown"
|
||||||
|
? getNodeById(nodeData.node, activeSite)
|
||||||
|
: unknownNodeTemplate),
|
||||||
|
matrixIndices: nodeData.matrixIndices,
|
||||||
|
};
|
||||||
|
|
||||||
if (nodeData.didMove) {
|
if (nodeData.didMove) {
|
||||||
return {
|
return siteMoveHorizontal({
|
||||||
event: keyPressToLower === "left" ? `site_left` : "site_right",
|
lainMoveAnimation: lainMoveAnimation,
|
||||||
siteRotY:
|
siteRot: newSiteRot,
|
||||||
keyPressToLower === "left"
|
activeNode: newNode,
|
||||||
? siteRotY + Math.PI / 4
|
});
|
||||||
: siteRotY - Math.PI / 4,
|
|
||||||
node: {
|
|
||||||
...(nodeData.node !== "unknown"
|
|
||||||
? getNodeById(nodeData.node, activeSite)
|
|
||||||
: unknownNodeTemplate),
|
|
||||||
matrixIndices: nodeData.matrixIndices,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
} else {
|
} else {
|
||||||
return {
|
return changeNode({ activeNode: newNode });
|
||||||
event: "change_node",
|
|
||||||
nodeMatrixIndices: nodeData.matrixIndices,
|
|
||||||
node: {
|
|
||||||
...getNodeById(nodeData.node, activeSite),
|
|
||||||
matrixIndices: nodeData.matrixIndices,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
case "UP":
|
case "UP":
|
||||||
case "DOWN": {
|
case "DOWN": {
|
||||||
const keyPressToLower = keyPress.toLowerCase();
|
const direction = keyPress.toLowerCase();
|
||||||
|
|
||||||
const nodeData = findNode(
|
const nodeData = findNode(
|
||||||
activeNode.id,
|
activeNode.id,
|
||||||
keyPressToLower,
|
direction,
|
||||||
activeNode.matrixIndices!,
|
activeNode.matrixIndices!,
|
||||||
level,
|
level,
|
||||||
activeSite,
|
activeSite,
|
||||||
|
@ -101,28 +149,24 @@ const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
||||||
|
|
||||||
if (!nodeData) return;
|
if (!nodeData) return;
|
||||||
|
|
||||||
if (nodeData.didMove) {
|
const lainMoveAnimation = `jump_${direction}`;
|
||||||
return {
|
const newLevel = (direction === "up" ? level + 1 : level - 1)
|
||||||
event: keyPressToLower === "up" ? "site_up" : "site_down",
|
.toString()
|
||||||
level: (keyPressToLower === "up" ? level + 1 : level - 1)
|
.padStart(2, "0");
|
||||||
.toString()
|
const newNode = {
|
||||||
.padStart(2, "0"),
|
...(nodeData.node !== "unknown"
|
||||||
node: {
|
? getNodeById(nodeData.node, activeSite)
|
||||||
...(nodeData.node !== "unknown"
|
: unknownNodeTemplate),
|
||||||
? getNodeById(nodeData.node, activeSite)
|
matrixIndices: nodeData.matrixIndices,
|
||||||
: unknownNodeTemplate),
|
};
|
||||||
matrixIndices: nodeData.matrixIndices,
|
|
||||||
},
|
if (nodeData.didMove)
|
||||||
};
|
return siteMoveVertical({
|
||||||
} else {
|
lainMoveAnimation: lainMoveAnimation,
|
||||||
return {
|
activeLevel: newLevel,
|
||||||
event: "change_node",
|
activeNode: newNode,
|
||||||
node: {
|
});
|
||||||
...getNodeById(nodeData.node, activeSite),
|
else return changeNode({ activeNode: newNode });
|
||||||
matrixIndices: nodeData.matrixIndices,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
const eventAnimation =
|
const eventAnimation =
|
||||||
|
@ -137,21 +181,8 @@ const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
||||||
return;
|
return;
|
||||||
|
|
||||||
if (activeNode.upgrade_requirement > ssknLvl) {
|
if (activeNode.upgrade_requirement > ssknLvl) {
|
||||||
const rejectAnimations = [
|
const rejectEvents = [explodeNode, knockNode, knockNodeAndFall];
|
||||||
"touch_and_scare",
|
return rejectEvents[Math.floor(Math.random() * 3)];
|
||||||
"knock_and_fall",
|
|
||||||
"knock",
|
|
||||||
];
|
|
||||||
|
|
||||||
const pickedAnim =
|
|
||||||
rejectAnimations[
|
|
||||||
Math.floor(Math.random() * rejectAnimations.length)
|
|
||||||
];
|
|
||||||
|
|
||||||
return {
|
|
||||||
event: pickedAnim,
|
|
||||||
siteRotY: siteRotY,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (nodeType) {
|
switch (nodeType) {
|
||||||
|
@ -162,101 +193,56 @@ const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
||||||
case 5:
|
case 5:
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_media`,
|
event: `${eventAnimation}_media`,
|
||||||
scene: "media",
|
mutations: { scene: "media" },
|
||||||
siteRotY: siteRotY,
|
|
||||||
level: level.toString().padStart(2, "0"),
|
|
||||||
};
|
};
|
||||||
case 6:
|
case 6:
|
||||||
if (activeNode.node_name.substr(0, 3) === "TaK") {
|
if (activeNode.node_name.substr(0, 3) === "TaK") {
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_tak`,
|
event: `${eventAnimation}_tak`,
|
||||||
scene: "tak",
|
mutations: { scene: "tak" },
|
||||||
siteRotY: siteRotY,
|
|
||||||
node: activeNode,
|
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_media`,
|
event: `${eventAnimation}_media`,
|
||||||
scene: "media",
|
mutations: { scene: "media" },
|
||||||
siteRotY: siteRotY,
|
|
||||||
level: level.toString().padStart(2, "0"),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case 8:
|
case 8:
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_gate`,
|
event: `${eventAnimation}_gate`,
|
||||||
scene: "gate",
|
mutations: { scene: "gate" },
|
||||||
siteRotY: siteRotY,
|
|
||||||
node: activeNode,
|
|
||||||
};
|
};
|
||||||
case 7:
|
case 7:
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_sskn`,
|
event: `${eventAnimation}_sskn`,
|
||||||
scene: "sskn",
|
mutations: { scene: "sskn" },
|
||||||
siteRotY: siteRotY,
|
|
||||||
};
|
};
|
||||||
case 9:
|
case 9:
|
||||||
const bodyPart = (() => {
|
|
||||||
switch (parseInt(activeNode.node_name.slice(-1))) {
|
|
||||||
case 6:
|
|
||||||
return "head";
|
|
||||||
case 5:
|
|
||||||
return "rightArm";
|
|
||||||
case 4:
|
|
||||||
return "leftArm";
|
|
||||||
case 3:
|
|
||||||
return "rightLeg";
|
|
||||||
case 2:
|
|
||||||
return "leftLeg";
|
|
||||||
case 1:
|
|
||||||
return "body";
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_polytan`,
|
event: `${eventAnimation}_polytan`,
|
||||||
scene: "polytan",
|
mutations: { scene: "polytan" },
|
||||||
siteRotY: siteRotY,
|
|
||||||
node: activeNode,
|
|
||||||
bodyPart: bodyPart,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "L2":
|
case "L2":
|
||||||
return { event: "enter_level_selection", level: level };
|
return enterLevelSelection({ selectedLevel: level });
|
||||||
case "TRIANGLE":
|
case "TRIANGLE":
|
||||||
return { event: "pause_game" };
|
return pauseGame({ siteRot: [Math.PI / 2, siteRotY, 0] });
|
||||||
case "SPACE":
|
|
||||||
return { event: "play_with_hair", siteRotY: siteRotY };
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "level_selection":
|
case "level_selection":
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "UP":
|
case "UP":
|
||||||
if (activeSite === "a") {
|
const upperLimit = activeSite === "a" ? 22 : 13;
|
||||||
if (selectedLevel + 1 <= 22)
|
if (selectedLevel + 1 <= upperLimit)
|
||||||
return {
|
return changeSelectedLevel({ selectedLevel: selectedLevel + 1 });
|
||||||
event: `level_selection_up`,
|
|
||||||
selectedLevelIdx: selectedLevel + 1,
|
|
||||||
};
|
|
||||||
} else if (activeSite === "b") {
|
|
||||||
if (selectedLevel + 1 <= 13)
|
|
||||||
return {
|
|
||||||
event: `level_selection_up`,
|
|
||||||
selectedLevelIdx: selectedLevel + 1,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case "DOWN":
|
case "DOWN":
|
||||||
if (selectedLevel - 1 >= 1)
|
if (selectedLevel - 1 >= 1)
|
||||||
return {
|
return changeSelectedLevel({ selectedLevel: selectedLevel - 1 });
|
||||||
event: `level_selection_down`,
|
|
||||||
selectedLevelIdx: selectedLevel - 1,
|
|
||||||
};
|
|
||||||
break;
|
break;
|
||||||
case "X":
|
case "X":
|
||||||
return {
|
return exitLevelSelection;
|
||||||
event: "level_selection_back",
|
|
||||||
};
|
|
||||||
|
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
if (level === selectedLevel) return;
|
if (level === selectedLevel) return;
|
||||||
|
@ -275,96 +261,59 @@ const handleMainSceneKeyPress = (mainSceneContext: MainSceneContext) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (nodeData) {
|
if (nodeData) {
|
||||||
const event =
|
const newLevel = selectedLevel.toString().padStart(2, "0");
|
||||||
selectedLevel < level ? "select_level_down" : "select_level_up";
|
const newNode = {
|
||||||
return {
|
...(nodeData.node !== "unknown"
|
||||||
event: event,
|
? getNodeById(nodeData.node, activeSite)
|
||||||
node: {
|
: unknownNodeTemplate),
|
||||||
...(nodeData.node !== "unknown"
|
matrixIndices: nodeData.matrixIndices,
|
||||||
? getNodeById(nodeData.node, activeSite)
|
|
||||||
: unknownNodeTemplate),
|
|
||||||
matrixIndices: nodeData.matrixIndices,
|
|
||||||
},
|
|
||||||
level: selectedLevel.toString().padStart(2, "0"),
|
|
||||||
};
|
};
|
||||||
|
const lainMoveState =
|
||||||
|
selectedLevel < level ? "jump_down" : "jump_up";
|
||||||
|
|
||||||
|
return selectLevel({
|
||||||
|
lainMoveState: lainMoveState,
|
||||||
|
activeLevel: newLevel,
|
||||||
|
activeNode: newNode,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "pause":
|
case "pause":
|
||||||
if (showingAbout)
|
if (showingAbout) return exitAbout;
|
||||||
return {
|
switch (keyPress) {
|
||||||
event: "exit_about",
|
case "UP":
|
||||||
};
|
case "DOWN":
|
||||||
else {
|
const direction = keyPress.toLowerCase();
|
||||||
switch (keyPress) {
|
const components = ["load", "about", "change", "save", "exit"];
|
||||||
case "UP": {
|
|
||||||
const newComponent = (() => {
|
|
||||||
switch (activePauseComponent) {
|
|
||||||
case "exit":
|
|
||||||
return "save";
|
|
||||||
case "save":
|
|
||||||
return "change";
|
|
||||||
case "change":
|
|
||||||
return "about";
|
|
||||||
case "about":
|
|
||||||
return "load";
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
if (newComponent)
|
const newComponent =
|
||||||
return {
|
components[
|
||||||
event: "pause_up",
|
components.indexOf(activePauseComponent) +
|
||||||
activePauseComponent: newComponent,
|
(direction === "up" ? -1 : 1)
|
||||||
};
|
];
|
||||||
break;
|
|
||||||
|
if (newComponent)
|
||||||
|
return changePauseComponent({
|
||||||
|
activePauseComponent: newComponent,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "CIRCLE":
|
||||||
|
switch (activePauseComponent) {
|
||||||
|
case "about":
|
||||||
|
return showAbout;
|
||||||
|
case "exit":
|
||||||
|
return exitPause({ siteRot: [0, siteRotY, 0] });
|
||||||
|
case "save":
|
||||||
|
case "load":
|
||||||
|
return displayPrompt;
|
||||||
|
case "change":
|
||||||
|
if (activePauseComponent === "change" && gateLvl > 4)
|
||||||
|
return showPermissionDenied;
|
||||||
|
else return displayPrompt;
|
||||||
}
|
}
|
||||||
case "DOWN": {
|
|
||||||
const newComponent = (() => {
|
|
||||||
switch (activePauseComponent) {
|
|
||||||
case "load":
|
|
||||||
return "about";
|
|
||||||
case "about":
|
|
||||||
return "change";
|
|
||||||
case "change":
|
|
||||||
return "save";
|
|
||||||
case "save":
|
|
||||||
return "exit";
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
if (newComponent)
|
|
||||||
return {
|
|
||||||
event: "pause_down",
|
|
||||||
activePauseComponent: newComponent,
|
|
||||||
};
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "CIRCLE":
|
|
||||||
if (activePauseComponent === "change") {
|
|
||||||
if (gateLvl > 4) {
|
|
||||||
return { event: "show_permission_denied" };
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
event: "display_prompt",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
} else if (
|
|
||||||
activePauseComponent === "save" ||
|
|
||||||
activePauseComponent === "load"
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
event: "display_prompt",
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
event: `pause_${activePauseComponent}_select`,
|
|
||||||
siteRot: [0, siteRotY, 0],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "not_found":
|
|
||||||
return { event: "exit_not_found" };
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { findNodeFromWord } from "../../utils/media-utils";
|
import { findNodeFromWord } from "../../utils/media-utils";
|
||||||
import { MediaSceneContext } from "../../store";
|
import { MediaSceneContext } from "../../store";
|
||||||
|
import { changeLeftMediaComponent, changeMediaSide } from "../eventTemplates";
|
||||||
|
|
||||||
const handleMediaSceneKeyPress = (mediaSceneContext: MediaSceneContext) => {
|
const handleMediaSceneKeyPress = (mediaSceneContext: MediaSceneContext) => {
|
||||||
const {
|
const {
|
||||||
|
@ -17,16 +18,21 @@ const handleMediaSceneKeyPress = (mediaSceneContext: MediaSceneContext) => {
|
||||||
case "left":
|
case "left":
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "UP":
|
case "UP":
|
||||||
case "DOWN":
|
case "DOWN": {
|
||||||
return {
|
const direction = keyPress.toLowerCase();
|
||||||
event: `media_leftside_${keyPress.toLowerCase()}`,
|
const newComponent = direction === "up" ? "play" : "exit";
|
||||||
};
|
return changeLeftMediaComponent({ activeComponent: newComponent });
|
||||||
case "RIGHT":
|
}
|
||||||
return {
|
case "RIGHT": {
|
||||||
event: "media_leftside_right",
|
return changeMediaSide({
|
||||||
lastActiveComponent: activeMediaComponent,
|
activeMediaComponent: lastActiveMediaComponents.right,
|
||||||
newActiveComponent: lastActiveMediaComponents.right,
|
lastActiveMediaComponents: {
|
||||||
};
|
...lastActiveMediaComponents,
|
||||||
|
left: activeMediaComponent as "play" | "exit",
|
||||||
|
},
|
||||||
|
currentMediaSide: "right",
|
||||||
|
});
|
||||||
|
}
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
switch (activeMediaComponent) {
|
switch (activeMediaComponent) {
|
||||||
case "play":
|
case "play":
|
||||||
|
@ -84,11 +90,17 @@ const handleMediaSceneKeyPress = (mediaSceneContext: MediaSceneContext) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
case "LEFT":
|
case "LEFT":
|
||||||
return {
|
return changeMediaSide({
|
||||||
event: "media_rightside_left",
|
activeMediaComponent: lastActiveMediaComponents.left,
|
||||||
lastActiveComponent: activeMediaComponent,
|
lastActiveMediaComponents: {
|
||||||
newActiveComponent: lastActiveMediaComponents.left,
|
...lastActiveMediaComponents,
|
||||||
};
|
right: activeMediaComponent as
|
||||||
|
| "fstWord"
|
||||||
|
| "sndWord"
|
||||||
|
| "thirdWord",
|
||||||
|
},
|
||||||
|
currentMediaSide: "left",
|
||||||
|
});
|
||||||
|
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
const data = findNodeFromWord(
|
const data = findNodeFromWord(
|
||||||
|
|
|
@ -1,20 +1,19 @@
|
||||||
import { OrbitControls } from "@react-three/drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
import React, { Suspense, useEffect, useRef, useState } from "react";
|
import React, { Suspense, useEffect, useRef, useState } from "react";
|
||||||
import { playAudio, useStore } from "../store";
|
import { playAudio, useStore } from "../store";
|
||||||
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
import Pause from "../components/MainScene/Pause/Pause";
|
||||||
import LevelSelection from "../components/MainScene/LevelSelection";
|
import LevelSelection from "../components/MainScene/LevelSelection";
|
||||||
import HUD from "../components/MainScene/HUD";
|
import HUD from "../components/MainScene/HUD";
|
||||||
import MainYellowTextAnimator from "../components/TextRenderer/MainYellowTextAnimator";
|
import MainYellowTextAnimator from "../components/TextRenderer/MainYellowTextAnimator";
|
||||||
import YellowOrb from "../components/MainScene/YellowOrb";
|
import YellowOrb from "../components/MainScene/YellowOrb";
|
||||||
import MiddleRing from "../components/MainScene/MiddleRing";
|
import MiddleRing from "../components/MainScene/MiddleRing/MiddleRing";
|
||||||
import GrayPlanes from "../components/MainScene/GrayPlanes";
|
import GrayPlanes from "../components/MainScene/GrayPlanes/GrayPlanes";
|
||||||
import Starfield from "../components/MainScene/Starfield";
|
import Starfield from "../components/MainScene/Starfield/Starfield";
|
||||||
import Site from "../components/MainScene/Site";
|
import Site from "../components/MainScene/Site/Site";
|
||||||
import Lain from "../components/MainScene/Lain";
|
import Lain from "../components/MainScene/Lain";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import NotFound from "../components/MainScene/NotFound";
|
import Popups from "../components/MainScene/Popups/Popups";
|
||||||
import PausePopUps from "../components/MainScene/PauseSubscene/PausePopUps";
|
|
||||||
import * as audio from "../static/sfx";
|
import * as audio from "../static/sfx";
|
||||||
import Loading from "../components/Loading";
|
import Loading from "../components/Loading";
|
||||||
import usePrevious from "../hooks/usePrevious";
|
import usePrevious from "../hooks/usePrevious";
|
||||||
|
@ -94,9 +93,8 @@ const MainScene = () => {
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<Suspense fallback={<Loading />}>
|
<Suspense fallback={<Loading />}>
|
||||||
<LevelSelection />
|
<LevelSelection />
|
||||||
<PausePopUps />
|
<Popups />
|
||||||
<Pause />
|
<Pause />
|
||||||
<NotFound visible={subscene === "not_found"} />
|
|
||||||
<group visible={!paused}>
|
<group visible={!paused}>
|
||||||
<group visible={!wordSelected && (intro ? introFinished : true)}>
|
<group visible={!wordSelected && (intro ? introFinished : true)}>
|
||||||
<group visible={subscene !== "not_found"}>
|
<group visible={subscene !== "not_found"}>
|
||||||
|
|
115
src/store.ts
115
src/store.ts
|
@ -2,7 +2,7 @@ import create from "zustand";
|
||||||
import { combine } from "zustand/middleware";
|
import { combine } from "zustand/middleware";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import game_progress from "./resources/initial_progress.json";
|
import game_progress from "./resources/initial_progress.json";
|
||||||
import { NodeData } from "./components/MainScene/Site";
|
import { NodeData } from "./components/MainScene/Site/Site";
|
||||||
import { getNodeById } from "./utils/node-utils";
|
import { getNodeById } from "./utils/node-utils";
|
||||||
import site_a from "./resources/site_a.json";
|
import site_a from "./resources/site_a.json";
|
||||||
|
|
||||||
|
@ -126,7 +126,7 @@ export const useStore = create(
|
||||||
combine(
|
combine(
|
||||||
{
|
{
|
||||||
// scene data
|
// scene data
|
||||||
currentScene: "boot",
|
currentScene: "media",
|
||||||
|
|
||||||
// game progress
|
// game progress
|
||||||
gameProgress: game_progress,
|
gameProgress: game_progress,
|
||||||
|
@ -258,14 +258,7 @@ export const useStore = create(
|
||||||
// scene data setters
|
// scene data setters
|
||||||
setScene: (to: string) => set(() => ({ currentScene: to })),
|
setScene: (to: string) => set(() => ({ currentScene: to })),
|
||||||
|
|
||||||
// main subscene setter
|
|
||||||
setMainSubscene: (to: string) => set(() => ({ mainSubscene: to })),
|
|
||||||
|
|
||||||
// intro setters
|
|
||||||
setIntro: (to: boolean) => set(() => ({ intro: to })),
|
|
||||||
|
|
||||||
// node setters
|
// node setters
|
||||||
setNode: (to: NodeData) => set(() => ({ activeNode: to })),
|
|
||||||
setNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
|
setNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
|
||||||
setNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
|
setNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
|
||||||
setNodeAttributes: (
|
setNodeAttributes: (
|
||||||
|
@ -280,41 +273,19 @@ export const useStore = create(
|
||||||
setLainMoveState: (to: string) => set(() => ({ lainMoveState: to })),
|
setLainMoveState: (to: string) => set(() => ({ lainMoveState: to })),
|
||||||
|
|
||||||
// site setters
|
// site setters
|
||||||
setActiveSite: (to: "a" | "b") => set(() => ({ activeSite: to })),
|
|
||||||
setSiteRotY: (to: number) =>
|
|
||||||
set((prev) => {
|
|
||||||
const nextRot = [...prev.siteRot];
|
|
||||||
nextRot[1] = to;
|
|
||||||
return { siteRot: nextRot };
|
|
||||||
}),
|
|
||||||
setSiteRotX: (to: number) =>
|
setSiteRotX: (to: number) =>
|
||||||
set((prev) => {
|
set((prev) => {
|
||||||
const nextRot = [...prev.siteRot];
|
const nextRot = [...prev.siteRot];
|
||||||
nextRot[0] = to;
|
nextRot[0] = to;
|
||||||
return { siteRot: nextRot };
|
return { siteRot: nextRot };
|
||||||
}),
|
}),
|
||||||
setOldSiteRot: (to: number[]) =>
|
|
||||||
set(() => ({
|
|
||||||
oldSiteRot: to,
|
|
||||||
})),
|
|
||||||
|
|
||||||
// level setters
|
|
||||||
setActiveLevel: (to: string) => set(() => ({ activeLevel: to })),
|
|
||||||
setOldLevel: (to: string) => set(() => ({ oldLevel: to })),
|
|
||||||
|
|
||||||
// level selection setters
|
|
||||||
setSelectedLevel: (to: number) => set(() => ({ selectedLevel: to })),
|
|
||||||
|
|
||||||
// end scene setters
|
// end scene setters
|
||||||
setEndSceneSelectionVisible: (to: boolean) =>
|
setEndSceneSelectionVisible: (to: boolean) =>
|
||||||
set(() => ({ endSceneSelectionVisible: to })),
|
set(() => ({ endSceneSelectionVisible: to })),
|
||||||
|
|
||||||
// pause setters
|
// pause setters
|
||||||
setPauseExitAnimation: (to: boolean) =>
|
|
||||||
set(() => ({ pauseExitAnimation: to })),
|
|
||||||
setShowingAbout: (to: boolean) => set(() => ({ showingAbout: to })),
|
setShowingAbout: (to: boolean) => set(() => ({ showingAbout: to })),
|
||||||
setPermissionDenied: (to: boolean) =>
|
|
||||||
set(() => ({ permissionDenied: to })),
|
|
||||||
|
|
||||||
// media scene setters
|
// media scene setters
|
||||||
setAudioAnalyser: (to: any) => set(() => ({ audioAnalyser: to })),
|
setAudioAnalyser: (to: any) => set(() => ({ audioAnalyser: to })),
|
||||||
|
@ -368,41 +339,6 @@ export const useStore = create(
|
||||||
},
|
},
|
||||||
})),
|
})),
|
||||||
|
|
||||||
// gate scene setters
|
|
||||||
incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
|
|
||||||
|
|
||||||
// player name setters
|
|
||||||
setPlayerName: (to: string) => set(() => ({ playerName: to })),
|
|
||||||
|
|
||||||
// boot scene setters
|
|
||||||
setBootSubscene: (to: "load_data" | "authorize_user" | "main_menu") =>
|
|
||||||
set(() => ({ bootSubscene: to })),
|
|
||||||
|
|
||||||
setAuthorizeUserLetterIdx: (to: number) =>
|
|
||||||
set(() => ({ authorizeUserLetterIdx: to })),
|
|
||||||
|
|
||||||
// site state setters
|
|
||||||
setSiteSaveState: (
|
|
||||||
site: string,
|
|
||||||
to: {
|
|
||||||
activeNode: NodeData;
|
|
||||||
siteRot: number[];
|
|
||||||
activeLevel: string;
|
|
||||||
}
|
|
||||||
) =>
|
|
||||||
set((state) => ({
|
|
||||||
siteSaveState: { ...state.siteSaveState, [site]: to },
|
|
||||||
})),
|
|
||||||
loadSiteSaveState: (site: "a" | "b") =>
|
|
||||||
set((state) => {
|
|
||||||
const stateToLoad = state.siteSaveState[site];
|
|
||||||
return {
|
|
||||||
activeSite: site,
|
|
||||||
activeNode: stateToLoad.activeNode,
|
|
||||||
siteRot: stateToLoad.siteRot,
|
|
||||||
activeLevel: stateToLoad.activeLevel,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
changeSite: (to: "a" | "b") =>
|
changeSite: (to: "a" | "b") =>
|
||||||
set((state) => {
|
set((state) => {
|
||||||
const newState = state.siteSaveState[to];
|
const newState = state.siteSaveState[to];
|
||||||
|
@ -428,12 +364,6 @@ export const useStore = create(
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// status notifier setters
|
|
||||||
setSaveSuccessful: (to: boolean | undefined) =>
|
|
||||||
set(() => ({ saveSuccessful: to })),
|
|
||||||
setLoadSuccessful: (to: boolean | undefined) =>
|
|
||||||
set(() => ({ loadSuccessful: to })),
|
|
||||||
|
|
||||||
// progress setters
|
// progress setters
|
||||||
setNodeViewed: (
|
setNodeViewed: (
|
||||||
nodeName: string,
|
nodeName: string,
|
||||||
|
@ -447,22 +377,10 @@ export const useStore = create(
|
||||||
})),
|
})),
|
||||||
|
|
||||||
setInputCooldown: (to: boolean) => set(() => ({ inputCooldown: to })),
|
setInputCooldown: (to: boolean) => set(() => ({ inputCooldown: to })),
|
||||||
|
|
||||||
incrementSsknLvl: () => set((state) => ({ ssknLvl: state.ssknLvl + 1 })),
|
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
export const getSiteState = (site: "a" | "b") => {
|
|
||||||
const siteState = useStore.getState().siteSaveState[site];
|
|
||||||
|
|
||||||
return {
|
|
||||||
activeNode: siteState.activeNode,
|
|
||||||
siteRot: siteState.siteRot,
|
|
||||||
activeLevel: siteState.activeLevel,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
type PromptContext = {
|
type PromptContext = {
|
||||||
activePromptComponent: "yes" | "no";
|
activePromptComponent: "yes" | "no";
|
||||||
promptVisible: boolean;
|
promptVisible: boolean;
|
||||||
|
@ -490,6 +408,18 @@ export interface MainSceneContext extends PromptContext {
|
||||||
siteRotY: number;
|
siteRotY: number;
|
||||||
activeSite: "a" | "b";
|
activeSite: "a" | "b";
|
||||||
selectedLevel: number;
|
selectedLevel: number;
|
||||||
|
siteSaveState: {
|
||||||
|
a: {
|
||||||
|
activeNode: NodeData;
|
||||||
|
siteRot: number[];
|
||||||
|
activeLevel: string;
|
||||||
|
};
|
||||||
|
b: {
|
||||||
|
activeNode: NodeData;
|
||||||
|
siteRot: number[];
|
||||||
|
activeLevel: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getMainSceneContext = (keyPress: string): MainSceneContext => {
|
export const getMainSceneContext = (keyPress: string): MainSceneContext => {
|
||||||
|
@ -509,6 +439,7 @@ export const getMainSceneContext = (keyPress: string): MainSceneContext => {
|
||||||
ssknLvl: state.ssknLvl,
|
ssknLvl: state.ssknLvl,
|
||||||
showingAbout: state.showingAbout,
|
showingAbout: state.showingAbout,
|
||||||
gateLvl: state.gateLvl,
|
gateLvl: state.gateLvl,
|
||||||
|
siteSaveState: state.siteSaveState,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -610,19 +541,3 @@ export const createAudioAnalyser = () => {
|
||||||
|
|
||||||
return new THREE.AudioAnalyser(audio, 2048);
|
return new THREE.AudioAnalyser(audio, 2048);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getSceneResetValues = (scene: string) => {
|
|
||||||
switch (scene) {
|
|
||||||
case "media":
|
|
||||||
return {
|
|
||||||
mediaWordPosStateIdx: 1,
|
|
||||||
mediaComponentMatrixIndices: {
|
|
||||||
sideIdx: 0,
|
|
||||||
leftSideIdx: 0,
|
|
||||||
rightSideIdx: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
case "sskn":
|
|
||||||
return { ssknComponentMatrixIdx: 0, ssknLoading: false };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import site_b from "../resources/site_b.json";
|
import site_b from "../resources/site_b.json";
|
||||||
import { SiteData } from "../components/MainScene/Site";
|
import { SiteData } from "../components/MainScene/Site/Site";
|
||||||
import { useStore } from "../store";
|
import { useStore } from "../store";
|
||||||
|
|
||||||
export const getRandomIdleMedia = () => {
|
export const getRandomIdleMedia = () => {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import site_b from "../resources/site_b.json";
|
import site_b from "../resources/site_b.json";
|
||||||
import node_matrices from "../resources/node_matrices.json";
|
import node_matrices from "../resources/node_matrices.json";
|
||||||
import { NodeData, SiteData } from "../components/MainScene/Site";
|
import { NodeData, SiteData } from "../components/MainScene/Site/Site";
|
||||||
import { isNodeVisible } from "./node-utils";
|
import { isNodeVisible } from "./node-utils";
|
||||||
|
|
||||||
export const findNodeFromWord = (
|
export const findNodeFromWord = (
|
||||||
|
|
|
@ -14,8 +14,14 @@ const calculateCoordsBasedOnRotation = (
|
||||||
z: x * Math.sin(rotation) + z * Math.cos(rotation),
|
z: x * Math.sin(rotation) + z * Math.cos(rotation),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const nodeThrow = (siteRotY: number) => {
|
// async calls in this file are executed inside IIAFE-s because defining them as async would
|
||||||
|
// throw a warning about an unhandled promise, and we dont care about that.
|
||||||
|
// async/awaits here are used simply to improve readability, nothing else.
|
||||||
|
|
||||||
|
export const nodeThrowAnimation = () => {
|
||||||
(async () => {
|
(async () => {
|
||||||
|
const siteRotY = useStore.getState().siteRot[1];
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
||||||
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
||||||
const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
|
const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
|
||||||
|
@ -42,7 +48,9 @@ export const nodeThrow = (siteRotY: number) => {
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nodeKnock = (siteRotY: number) => {
|
export const nodeKnockAnimation = () => {
|
||||||
|
const siteRotY = useStore.getState().siteRot[1];
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
||||||
|
|
||||||
setActiveNodeAttributes(true, "interactedWith");
|
setActiveNodeAttributes(true, "interactedWith");
|
||||||
|
@ -52,8 +60,10 @@ export const nodeKnock = (siteRotY: number) => {
|
||||||
setTimeout(() => setActiveNodeAttributes(false, "interactedWith"), 2500);
|
setTimeout(() => setActiveNodeAttributes(false, "interactedWith"), 2500);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nodeKnockAndFall = (siteRotY: number) => {
|
export const nodeKnockAndFallAnimation = () => {
|
||||||
(async () => {
|
(async () => {
|
||||||
|
const siteRotY = useStore.getState().siteRot[1];
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
||||||
|
|
||||||
setActiveNodeAttributes(true, "interactedWith");
|
setActiveNodeAttributes(true, "interactedWith");
|
||||||
|
@ -71,8 +81,10 @@ export const nodeKnockAndFall = (siteRotY: number) => {
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nodeTouchAndScare = (siteRotY: number) => {
|
export const nodeExplodeAnimation = () => {
|
||||||
(async () => {
|
(async () => {
|
||||||
|
const siteRotY = useStore.getState().siteRot[1];
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(-0.6, 0.2, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(-0.6, 0.2, siteRotY);
|
||||||
|
|
||||||
setActiveNodeAttributes(true, "interactedWith");
|
setActiveNodeAttributes(true, "interactedWith");
|
||||||
|
@ -95,8 +107,10 @@ export const nodeTouchAndScare = (siteRotY: number) => {
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
||||||
export const nodeRip = (siteRotY: number) => {
|
export const nodeRipAnimation = () => {
|
||||||
(async () => {
|
(async () => {
|
||||||
|
const siteRotY = useStore.getState().siteRot[1];
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
||||||
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
||||||
const thirdCoordSet = calculateCoordsBasedOnRotation(0, 0.2, siteRotY);
|
const thirdCoordSet = calculateCoordsBasedOnRotation(0, 0.2, siteRotY);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { NodeData, SiteData } from "../components/MainScene/Site";
|
import { NodeData, SiteData } from "../components/MainScene/Site/Site";
|
||||||
import node_matrices from "../resources/node_matrices.json";
|
import node_matrices from "../resources/node_matrices.json";
|
||||||
import unlocked_nodes from "../resources/initial_progress.json";
|
import unlocked_nodes from "../resources/initial_progress.json";
|
||||||
import node_huds from "../resources/node_huds.json";
|
import node_huds from "../resources/node_huds.json";
|
||||||
|
|
Loading…
Reference in a new issue