mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added loading screen, optimized ring generation code, fixed some eslint errors
This commit is contained in:
parent
4465fbf8ae
commit
3333bdcfca
30 changed files with 178 additions and 173 deletions
|
@ -45,7 +45,7 @@ const App = () => {
|
||||||
<Canvas concurrent>
|
<Canvas concurrent>
|
||||||
<KeyPressHandler />
|
<KeyPressHandler />
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<Preloader />
|
{/*<Preloader />*/}
|
||||||
{dispatchScene[currentScene as keyof typeof dispatchScene]}
|
{dispatchScene[currentScene as keyof typeof dispatchScene]}
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useMemo } from "react";
|
import React, { useMemo } from "react";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import authorizeActive from "../../static/sprite/authorize_user_active.png";
|
import authorizeActive from "../../static/sprite/authorize_user_active.png";
|
||||||
import authorizeInactive from "../../static/sprite/authorize_user_inactive.png";
|
import authorizeInactive from "../../static/sprite/authorize_user_inactive.png";
|
||||||
|
@ -27,11 +27,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
const activeMainMenuElement = useStore(
|
const activeMainMenuElement = useStore(
|
||||||
useCallback(
|
(state) => state.mainMenuComponentMatrix[state.mainMenuComponentMatrixIdx]
|
||||||
(state) =>
|
|
||||||
state.mainMenuComponentMatrix[state.mainMenuComponentMatrixIdx],
|
|
||||||
[]
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
|
const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
|
||||||
|
|
|
@ -62,9 +62,8 @@ const GateMiddleObject = (props: GateMiddleObjectProps) => {
|
||||||
position-z={middleObjectGroupState.posZ}
|
position-z={middleObjectGroupState.posZ}
|
||||||
visible={props.intro}
|
visible={props.intro}
|
||||||
>
|
>
|
||||||
{springs.map((item, idx) => {
|
{springs.map((item, idx) =>
|
||||||
if (item.type) {
|
item.type.get() === 1 ? (
|
||||||
return item.type.get() === 1 ? (
|
|
||||||
<BlueOne
|
<BlueOne
|
||||||
posX={item.posX}
|
posX={item.posX}
|
||||||
posY={item.posY}
|
posY={item.posY}
|
||||||
|
@ -78,9 +77,8 @@ const GateMiddleObject = (props: GateMiddleObjectProps) => {
|
||||||
key={idx}
|
key={idx}
|
||||||
visibility={item.visibility}
|
visibility={item.visibility}
|
||||||
/>
|
/>
|
||||||
);
|
)
|
||||||
}
|
)}
|
||||||
})}
|
|
||||||
</a.group>
|
</a.group>
|
||||||
<Mirror
|
<Mirror
|
||||||
visible={props.gateLvl === 1 ? !props.intro : props.gateLvl > 0}
|
visible={props.gateLvl === 1 ? !props.intro : props.gateLvl > 0}
|
||||||
|
|
|
@ -3,7 +3,6 @@ import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import gateBlueBinarySingularOne from "../../../static/sprite/blue_binary_singular_one.png";
|
import gateBlueBinarySingularOne from "../../../static/sprite/blue_binary_singular_one.png";
|
||||||
import { a, SpringValue } from "@react-spring/three";
|
import { a, SpringValue } from "@react-spring/three";
|
||||||
import sleep from "../../../utils/sleep";
|
|
||||||
|
|
||||||
type BlueOneProps = {
|
type BlueOneProps = {
|
||||||
posX: SpringValue<number>;
|
posX: SpringValue<number>;
|
||||||
|
|
|
@ -3,7 +3,6 @@ import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import gateBlueBinarySingularZero from "../../../static/sprite/blue_binary_singular_zero.png";
|
import gateBlueBinarySingularZero from "../../../static/sprite/blue_binary_singular_zero.png";
|
||||||
import { a, SpringValue } from "@react-spring/three";
|
import { a, SpringValue } from "@react-spring/three";
|
||||||
import sleep from "../../../utils/sleep";
|
|
||||||
|
|
||||||
type BlueZeroProps = {
|
type BlueZeroProps = {
|
||||||
posX: SpringValue<number>;
|
posX: SpringValue<number>;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect, useMemo, useRef } from "react";
|
import React, { useMemo, useRef } 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 mirrorTexture from "../../../static/sprite/gate_object_texture.png";
|
import mirrorTexture from "../../../static/sprite/gate_object_texture.png";
|
||||||
|
|
|
@ -4,7 +4,6 @@ import { a, useSpring } from "@react-spring/three";
|
||||||
import dummy from "../static/sprite/dummy.png";
|
import dummy from "../static/sprite/dummy.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import sleep from "../utils/sleep";
|
|
||||||
|
|
||||||
const Images = () => {
|
const Images = () => {
|
||||||
const idleNodeImages = useStore((state) => state.idleImages);
|
const idleNodeImages = useStore((state) => state.idleImages);
|
||||||
|
|
|
@ -36,7 +36,6 @@ import idleManager from "../core/setters/main/idleManager";
|
||||||
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 endManager from "../core/setters/end/endManager";
|
import endManager from "../core/setters/end/endManager";
|
||||||
import sleep from "../utils/sleep";
|
|
||||||
|
|
||||||
const KeyPressHandler = () => {
|
const KeyPressHandler = () => {
|
||||||
const mediaSceneSetters = useMemo(
|
const mediaSceneSetters = useMemo(
|
||||||
|
|
34
src/components/Loading.tsx
Normal file
34
src/components/Loading.tsx
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import loadingSpritesheet from "../static/sprite/loading_spritesheet.png";
|
||||||
|
import lifeInstinct from "../static/sprite/life_instinct_function_os.png";
|
||||||
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
|
import * as THREE from "three";
|
||||||
|
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
||||||
|
|
||||||
|
const Loading = () => {
|
||||||
|
const loadingTex: any = useLoader(THREE.TextureLoader, loadingSpritesheet);
|
||||||
|
const lifeInstinctTex = useLoader(THREE.TextureLoader, lifeInstinct);
|
||||||
|
|
||||||
|
const [animator] = useState(() => {
|
||||||
|
const anim = new PlainAnimator(loadingTex, 10, 3, 29, 60);
|
||||||
|
anim.init(0);
|
||||||
|
return anim;
|
||||||
|
});
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
animator.animate();
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<sprite scale={[0.35, 0.6, 0.35]} position={[0, 0.2, 0]}>
|
||||||
|
<spriteMaterial attach="material" map={loadingTex} />
|
||||||
|
</sprite>
|
||||||
|
<sprite scale={[0.4, 0.6, 0.4]} position={[0, -0.5, 0]}>
|
||||||
|
<spriteMaterial attach="material" map={lifeInstinctTex} />
|
||||||
|
</sprite>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Loading;
|
|
@ -33,7 +33,6 @@ 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";
|
||||||
import sleep from "../../utils/sleep";
|
|
||||||
|
|
||||||
type LainConstructorProps = {
|
type LainConstructorProps = {
|
||||||
sprite: string;
|
sprite: string;
|
||||||
|
|
|
@ -12,7 +12,6 @@ import { useLoader } from "react-three-fiber";
|
||||||
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 usePrevious from "../../hooks/usePrevious";
|
import usePrevious from "../../hooks/usePrevious";
|
||||||
import sleep from "../../utils/sleep";
|
|
||||||
|
|
||||||
const LevelSelection = () => {
|
const LevelSelection = () => {
|
||||||
const levelSelectionFontTex = useLoader(
|
const levelSelectionFontTex = useLoader(
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useRef } from "react";
|
||||||
import aboutBg from "../../../static/sprite/about_background.png";
|
import aboutBg from "../../../static/sprite/about_background.png";
|
||||||
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 { playAudio, useStore } from "../../../store";
|
import { useStore } from "../../../store";
|
||||||
import { sound27, sound6, sound7 } from "../../../static/sfx";
|
|
||||||
|
|
||||||
const About = () => {
|
const About = () => {
|
||||||
const setShowingAbout = useStore((state) => state.setShowingAbout);
|
const setShowingAbout = useStore((state) => state.setShowingAbout);
|
||||||
|
|
|
@ -21,14 +21,10 @@ const Pause = () => {
|
||||||
[wordFont]
|
[wordFont]
|
||||||
);
|
);
|
||||||
|
|
||||||
const activeComponent = useStore(
|
const activeComponent = useStore((state) =>
|
||||||
useCallback(
|
|
||||||
(state) =>
|
|
||||||
showActiveComponent
|
showActiveComponent
|
||||||
? state.pauseComponentMatrix[state.pauseComponentMatrixIdx]
|
? state.pauseComponentMatrix[state.pauseComponentMatrixIdx]
|
||||||
: "",
|
: ""
|
||||||
[showActiveComponent]
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const generateSqaureGeom = useCallback((row: number, square: number) => {
|
const generateSqaureGeom = useCallback((row: number, square: number) => {
|
||||||
|
|
|
@ -9,7 +9,7 @@ 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 NodeNameContainer from "../MediaScene/NodeNameContainer";
|
import Loading from "../Loading";
|
||||||
|
|
||||||
export type NodeDataType = {
|
export type NodeDataType = {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -88,7 +88,7 @@ const Site = (props: SiteProps) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={<Loading />}>
|
||||||
<a.group rotation-x={rotState.x}>
|
<a.group rotation-x={rotState.x}>
|
||||||
<a.group rotation-y={rotState.y} position-y={posState.y}>
|
<a.group rotation-y={rotState.y} position-y={posState.y}>
|
||||||
<ActiveLevelNodes visibleNodes={visibleNodes} />
|
<ActiveLevelNodes visibleNodes={visibleNodes} />
|
||||||
|
|
|
@ -4,7 +4,6 @@ import node_positions from "../../../resources/node_positions.json";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../../store";
|
||||||
import { NodeDataType, SiteType } from "../Site";
|
import { NodeDataType, SiteType } from "../Site";
|
||||||
import usePrevious from "../../../hooks/usePrevious";
|
import usePrevious from "../../../hooks/usePrevious";
|
||||||
import sleep from "../../../utils/sleep";
|
|
||||||
|
|
||||||
type ActiveLevelNodesProps = {
|
type ActiveLevelNodesProps = {
|
||||||
visibleNodes: SiteType;
|
visibleNodes: SiteType;
|
||||||
|
|
|
@ -5,7 +5,6 @@ import { SiteType } 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";
|
||||||
import sleep from "../../../utils/sleep";
|
|
||||||
|
|
||||||
type ActiveLevelNodesProps = {
|
type ActiveLevelNodesProps = {
|
||||||
visibleNodes: SiteType;
|
visibleNodes: SiteType;
|
||||||
|
@ -26,9 +25,11 @@ const InactiveLevelNodes = memo((props: ActiveLevelNodesProps) => {
|
||||||
) {
|
) {
|
||||||
const prevLevel = parseInt(prevData?.activeLevel);
|
const prevLevel = parseInt(prevData?.activeLevel);
|
||||||
const newLevel = parseInt(activeLevel);
|
const newLevel = parseInt(activeLevel);
|
||||||
|
// if singular jump
|
||||||
if (prevLevel - 1 === newLevel || prevLevel + 1 === newLevel) {
|
if (prevLevel - 1 === newLevel || prevLevel + 1 === newLevel) {
|
||||||
setVisibleNodes(generateInactiveNodes(props.visibleNodes, activeLevel));
|
setVisibleNodes(generateInactiveNodes(props.visibleNodes, activeLevel));
|
||||||
} else {
|
} else {
|
||||||
|
// if changed from level selection
|
||||||
setTimeout(
|
setTimeout(
|
||||||
() =>
|
() =>
|
||||||
setVisibleNodes(
|
setVisibleNodes(
|
||||||
|
@ -42,8 +43,7 @@ const InactiveLevelNodes = memo((props: ActiveLevelNodesProps) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{Object.entries(visibleNodes).map((node: [string, any]) => {
|
{Object.entries(visibleNodes).map((node: [string, any]) => (
|
||||||
return (
|
|
||||||
<InactiveLevelNode
|
<InactiveLevelNode
|
||||||
nodeName={node[1].node_name}
|
nodeName={node[1].node_name}
|
||||||
position={
|
position={
|
||||||
|
@ -58,8 +58,7 @@ const InactiveLevelNodes = memo((props: ActiveLevelNodesProps) => {
|
||||||
level={node[0].substr(0, 2)}
|
level={node[0].substr(0, 2)}
|
||||||
viewed={Boolean(node[1].is_viewed)}
|
viewed={Boolean(node[1].is_viewed)}
|
||||||
/>
|
/>
|
||||||
);
|
))}
|
||||||
})}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useMemo, memo } from "react";
|
import React, { memo, useMemo } from "react";
|
||||||
import level_y_values from "../../../resources/level_y_values.json";
|
import level_y_values from "../../../resources/level_y_values.json";
|
||||||
import PurpleRing from "./PurpleRing";
|
import PurpleRing from "./PurpleRing";
|
||||||
import GrayRing from "./GrayRing";
|
import GrayRing from "./GrayRing";
|
||||||
|
@ -11,42 +11,46 @@ type RingsProps = {
|
||||||
|
|
||||||
const Rings = memo((props: RingsProps) => {
|
const Rings = memo((props: RingsProps) => {
|
||||||
const activeLevel = useStore((state) => state.activeLevel);
|
const activeLevel = useStore((state) => state.activeLevel);
|
||||||
|
|
||||||
const currentSite = useStore((state) => state.activeSite);
|
const currentSite = useStore((state) => state.activeSite);
|
||||||
|
|
||||||
const visibleRings = useMemo(() => {
|
const levelUpperLimit = useMemo(() => (currentSite === "a" ? 22 : 13), [
|
||||||
const rings: [string, number][] = [];
|
currentSite,
|
||||||
if (props.activateAllRings) {
|
]);
|
||||||
Object.entries(level_y_values).forEach((levelDataPair) => {
|
|
||||||
rings.push([levelDataPair[0], levelDataPair[1]]);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
const activeLevelNr = parseInt(activeLevel);
|
|
||||||
const visibleLevels = [
|
|
||||||
(activeLevelNr - 2).toString().padStart(2, "0"),
|
|
||||||
(activeLevelNr - 1).toString().padStart(2, "0"),
|
|
||||||
activeLevelNr.toString().padStart(2, "0"),
|
|
||||||
(activeLevelNr + 1).toString().padStart(2, "0"),
|
|
||||||
(activeLevelNr + 2).toString().padStart(2, "0"),
|
|
||||||
];
|
|
||||||
|
|
||||||
visibleLevels.forEach((level) => {
|
const possibleLevels = useMemo(
|
||||||
rings.push([
|
() =>
|
||||||
|
Array.from({ length: levelUpperLimit }, (_, i) =>
|
||||||
|
(i + 1).toString().padStart(2, "0")
|
||||||
|
),
|
||||||
|
[levelUpperLimit]
|
||||||
|
);
|
||||||
|
|
||||||
|
const visibleRings: [string, number][] = useMemo(() => {
|
||||||
|
if (props.activateAllRings) {
|
||||||
|
return Object.entries(level_y_values)
|
||||||
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||||
|
.slice(0, levelUpperLimit);
|
||||||
|
} else {
|
||||||
|
const activeLevelIdx = parseInt(activeLevel) - 1;
|
||||||
|
|
||||||
|
return possibleLevels
|
||||||
|
.slice(
|
||||||
|
activeLevelIdx < 3 ? 0 : activeLevelIdx - 3,
|
||||||
|
activeLevelIdx > levelUpperLimit - 3
|
||||||
|
? levelUpperLimit
|
||||||
|
: activeLevelIdx + 3
|
||||||
|
)
|
||||||
|
.map((level) => [
|
||||||
level,
|
level,
|
||||||
level_y_values[level as keyof typeof level_y_values],
|
level_y_values[level as keyof typeof level_y_values],
|
||||||
]);
|
]);
|
||||||
});
|
|
||||||
}
|
}
|
||||||
return rings;
|
}, [props.activateAllRings, activeLevel, possibleLevels, levelUpperLimit]);
|
||||||
}, [props.activateAllRings, activeLevel]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{visibleRings.map((level: [string, number]) => {
|
{visibleRings.map((level: [string, number]) => (
|
||||||
if (
|
|
||||||
(currentSite === "b" && parseInt(level[0]) <= 13) ||
|
|
||||||
currentSite === "a"
|
|
||||||
) {
|
|
||||||
return (
|
|
||||||
<group position={[0, level[1], 0]} key={level[0]}>
|
<group position={[0, level[1], 0]} key={level[0]}>
|
||||||
<PurpleRing
|
<PurpleRing
|
||||||
purpleRingPosY={0.44}
|
purpleRingPosY={0.44}
|
||||||
|
@ -56,9 +60,7 @@ const Rings = memo((props: RingsProps) => {
|
||||||
<GrayRing grayRingPosY={-0.29} />
|
<GrayRing grayRingPosY={-0.29} />
|
||||||
<CyanCrystal crystalRingPosY={-0.45} />
|
<CyanCrystal crystalRingPosY={-0.45} />
|
||||||
</group>
|
</group>
|
||||||
);
|
))}
|
||||||
}
|
|
||||||
})}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useCallback, useMemo, memo } from "react";
|
import React, { memo, useMemo } from "react";
|
||||||
import TriangularPrism from "./LeftSide/TriangularPrism";
|
import TriangularPrism from "./LeftSide/TriangularPrism";
|
||||||
import Cube from "./LeftSide/Cube";
|
import Cube from "./LeftSide/Cube";
|
||||||
import { useSpring, a } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../../store";
|
||||||
|
|
||||||
export type ShapeProps = {
|
export type ShapeProps = {
|
||||||
|
@ -12,15 +12,12 @@ export type ShapeProps = {
|
||||||
|
|
||||||
const LeftSide = memo(() => {
|
const LeftSide = memo(() => {
|
||||||
const activeMediaComponent = useStore(
|
const activeMediaComponent = useStore(
|
||||||
useCallback(
|
|
||||||
(state) =>
|
(state) =>
|
||||||
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||||
state.mediaComponentMatrixIndices.sideIdx === 0
|
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||||
? state.mediaComponentMatrixIndices.leftSideIdx
|
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||||
: state.mediaComponentMatrixIndices.rightSideIdx
|
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||||
],
|
]
|
||||||
[]
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const cubesActive = useMemo(() => activeMediaComponent === "exit", [
|
const cubesActive = useMemo(() => activeMediaComponent === "exit", [
|
||||||
|
|
|
@ -10,13 +10,10 @@ const RightSide = memo(() => {
|
||||||
const words = useStore((state) => state.activeNode.words);
|
const words = useStore((state) => state.activeNode.words);
|
||||||
|
|
||||||
const wordPositionState = useStore(
|
const wordPositionState = useStore(
|
||||||
useCallback(
|
|
||||||
(state) =>
|
(state) =>
|
||||||
word_position_states[
|
word_position_states[
|
||||||
state.mediaWordPosStateIdx.toString() as keyof typeof word_position_states
|
state.mediaWordPosStateIdx.toString() as keyof typeof word_position_states
|
||||||
],
|
]
|
||||||
[]
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const wordPositionStateSpring = useSpring({
|
const wordPositionStateSpring = useSpring({
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import React 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";
|
||||||
|
@ -19,10 +19,7 @@ const Prompt = () => {
|
||||||
const noTex = useLoader(THREE.TextureLoader, no);
|
const noTex = useLoader(THREE.TextureLoader, no);
|
||||||
|
|
||||||
const activeComponent = useStore(
|
const activeComponent = useStore(
|
||||||
useCallback(
|
(state) => state.promptComponentMatrix[state.promptComponentMatrixIdx]
|
||||||
(state) => state.promptComponentMatrix[state.promptComponentMatrixIdx],
|
|
||||||
[]
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { memo, useCallback } from "react";
|
import React, { memo } from "react";
|
||||||
import ssknOk from "../../static/sprite/sskn_ok.png";
|
import ssknOk from "../../static/sprite/sskn_ok.png";
|
||||||
import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png";
|
import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png";
|
||||||
import ssknCancel from "../../static/sprite/sskn_cancel.png";
|
import ssknCancel from "../../static/sprite/sskn_cancel.png";
|
||||||
|
@ -31,10 +31,7 @@ const SSknHUD = memo(() => {
|
||||||
const ssknLineTex = useLoader(THREE.TextureLoader, ssknLine);
|
const ssknLineTex = useLoader(THREE.TextureLoader, ssknLine);
|
||||||
|
|
||||||
const activeSSknComponent = useStore(
|
const activeSSknComponent = useStore(
|
||||||
useCallback(
|
(state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx]
|
||||||
(state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx],
|
|
||||||
[]
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const loading = useStore((state) => state.ssknLoading);
|
const loading = useStore((state) => state.ssknLoading);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect } from "react";
|
import React from "react";
|
||||||
import statusContainer from "../static/sprite/status_container.png";
|
import statusContainer from "../static/sprite/status_container.png";
|
||||||
import loadSuccessfulImg from "../static/sprite/load_successful.png";
|
import loadSuccessfulImg from "../static/sprite/load_successful.png";
|
||||||
import loadFailImg from "../static/sprite/load_fail.png";
|
import loadFailImg from "../static/sprite/load_fail.png";
|
||||||
|
|
|
@ -4,7 +4,6 @@ import { a, useTrail } from "@react-spring/three";
|
||||||
import SiteBigLetter from "./SiteBigLetter";
|
import SiteBigLetter from "./SiteBigLetter";
|
||||||
import usePrevious from "../../hooks/usePrevious";
|
import usePrevious from "../../hooks/usePrevious";
|
||||||
import { getNodeHud } from "../../utils/node-utils";
|
import { getNodeHud } from "../../utils/node-utils";
|
||||||
import sleep from "../../utils/sleep";
|
|
||||||
|
|
||||||
const MainYellowTextAnimator = (props: { visible?: boolean }) => {
|
const MainYellowTextAnimator = (props: { visible?: boolean }) => {
|
||||||
const activeNode = useStore((state) => state.activeNode);
|
const activeNode = useStore((state) => state.activeNode);
|
||||||
|
|
|
@ -2,7 +2,6 @@ import React, { memo, useEffect, useState } from "react";
|
||||||
import { useStore } from "../../store";
|
import { useStore } from "../../store";
|
||||||
import { a, useTrail } from "@react-spring/three";
|
import { a, useTrail } from "@react-spring/three";
|
||||||
import SiteBigLetter from "./SiteBigLetter";
|
import SiteBigLetter from "./SiteBigLetter";
|
||||||
import sleep from "../../utils/sleep";
|
|
||||||
|
|
||||||
const MediaYellowTextAnimator = memo(() => {
|
const MediaYellowTextAnimator = memo(() => {
|
||||||
const [lastLeftComponent, setLastLeftComponent] = useState("play");
|
const [lastLeftComponent, setLastLeftComponent] = useState("play");
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { useStore } from "../../../../store";
|
import { useStore } from "../../../../store";
|
||||||
import sleep from "../../../../utils/sleep";
|
|
||||||
|
|
||||||
const lainManager = (eventState: any) => {
|
const lainManager = (eventState: any) => {
|
||||||
const setLainMoveState = useStore.getState().setLainMoveState;
|
const setLainMoveState = useStore.getState().setLainMoveState;
|
||||||
|
|
|
@ -1,13 +1,7 @@
|
||||||
import React, {
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} 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 { createAudioAnalyser, useStore } from "../store";
|
import { useStore } from "../store";
|
||||||
import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
|
import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
|
||||||
import endroll from "../static/movie/ENDROLL1.STR[0].webm";
|
import endroll from "../static/movie/ENDROLL1.STR[0].webm";
|
||||||
import endrollVtt from "../static/webvtt/Endroll.vtt";
|
import endrollVtt from "../static/webvtt/Endroll.vtt";
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
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 { useStore } from "../store";
|
import { playAudio, useStore } from "../store";
|
||||||
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
import Pause from "../components/MainScene/PauseSubscene/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";
|
||||||
|
@ -15,9 +15,8 @@ import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import NotFound from "../components/MainScene/NotFound";
|
import NotFound from "../components/MainScene/NotFound";
|
||||||
import PausePopUps from "../components/MainScene/PauseSubscene/PausePopUps";
|
import PausePopUps from "../components/MainScene/PauseSubscene/PausePopUps";
|
||||||
import { playAudio } from "../store";
|
|
||||||
import * as audio from "../static/sfx";
|
import * as audio from "../static/sfx";
|
||||||
import sleep from "../utils/sleep";
|
import Loading from "../components/Loading";
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const intro = useStore((state) => state.intro);
|
const intro = useStore((state) => state.intro);
|
||||||
|
@ -91,7 +90,7 @@ const MainScene = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={<Loading />}>
|
||||||
<LevelSelection />
|
<LevelSelection />
|
||||||
<PausePopUps />
|
<PausePopUps />
|
||||||
<Pause />
|
<Pause />
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { createAudioAnalyser, useStore } from "../store";
|
import { createAudioAnalyser, useStore } from "../store";
|
||||||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||||
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
||||||
|
@ -8,6 +8,7 @@ import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
||||||
import Images from "../components/Images";
|
import Images from "../components/Images";
|
||||||
import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
|
import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
|
||||||
import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
|
import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
|
||||||
|
import Loading from "../components/Loading";
|
||||||
|
|
||||||
const MediaScene = () => {
|
const MediaScene = () => {
|
||||||
const percentageElapsed = useStore((state) => state.mediaPercentageElapsed);
|
const percentageElapsed = useStore((state) => state.mediaPercentageElapsed);
|
||||||
|
@ -65,8 +66,15 @@ const MediaScene = () => {
|
||||||
}
|
}
|
||||||
}, [activeNode.media_file, activeNode.node_name, setAudioAnalyser]);
|
}, [activeNode.media_file, activeNode.node_name, setAudioAnalyser]);
|
||||||
|
|
||||||
|
const [loaded, setLoaded] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLoaded(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
|
{loaded ? (
|
||||||
<group position={[0.4, -0.3, 0]}>
|
<group position={[0.4, -0.3, 0]}>
|
||||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||||
<LeftSide />
|
<LeftSide />
|
||||||
|
@ -85,6 +93,9 @@ const MediaScene = () => {
|
||||||
<Images />
|
<Images />
|
||||||
</group>
|
</group>
|
||||||
</group>
|
</group>
|
||||||
|
) : (
|
||||||
|
<Loading />
|
||||||
|
)}
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import LainSpeak from "../components/LainSpeak";
|
import LainSpeak from "../components/LainSpeak";
|
||||||
import { createAudioAnalyser, useStore } from "../store";
|
import { createAudioAnalyser, useStore } from "../store";
|
||||||
import sleep from "../utils/sleep";
|
|
||||||
|
|
||||||
const TaKScene = () => {
|
const TaKScene = () => {
|
||||||
const setScene = useStore((state) => state.setScene);
|
const setScene = useStore((state) => state.setScene);
|
||||||
|
|
|
@ -157,12 +157,12 @@ export const useStore = create(
|
||||||
// site
|
// site
|
||||||
activeSite: "a",
|
activeSite: "a",
|
||||||
siteRot: [0, 0, 0],
|
siteRot: [0, 0, 0],
|
||||||
// this one is used for word selection animation to start from the correct point
|
// this is used for word selection animation to start from the correct point
|
||||||
oldSiteRot: [0, 0, 0],
|
oldSiteRot: [0, 0, 0],
|
||||||
|
|
||||||
// level
|
// level
|
||||||
activeLevel: "04",
|
activeLevel: "04",
|
||||||
// this one is used for word selection animation to start from the correct point
|
// this is used for word selection animation to start from the correct point
|
||||||
oldLevel: "04",
|
oldLevel: "04",
|
||||||
|
|
||||||
// level selection
|
// level selection
|
||||||
|
|
Loading…
Reference in a new issue