From 751f8793e1b638215b24a05145b828c1b5b0055c Mon Sep 17 00:00:00 2001 From: ad044 Date: Sat, 23 Jan 2021 21:23:50 +0400 Subject: [PATCH] merging media and main stores, optimized pause a bit --- src/components/LainSpeak.tsx | 6 +- .../MainScene/PauseSubscene/Pause.tsx | 576 +++++++++--------- .../MainScene/PauseSubscene/PauseSquare.tsx | 10 +- .../MainScene/SyncedComponentLoader.tsx | 1 - .../MainScene/SyncedComponents/HUD.tsx | 7 +- .../SyncedComponents/LevelSelection.tsx | 16 +- .../Site/ActiveLevelNodes.tsx | 23 +- .../Site/InactiveLevelNodes.tsx | 6 +- .../MainScene/SyncedComponents/Site/Rings.tsx | 6 +- .../MainScene/SyncedComponents/Starfield.tsx | 6 +- .../AudioVisualizer/AudioVisualizer.tsx | 4 +- src/components/MediaScene/Images.tsx | 15 +- src/components/MediaScene/MediaLoadingBar.tsx | 4 +- src/components/MediaScene/MediaPlayer.tsx | 8 +- .../TextRenderer/StaticBigLetter.tsx | 263 ++++---- .../TextRenderer/YellowTextRenderer.tsx | 4 +- src/core/StateManagers/EventManager.tsx | 273 +-------- .../StateManagers/MainSceneEventManager.tsx | 16 +- .../LevelSelectionManager.tsx | 21 +- .../MainSceneManagers/MiddleRingManager.tsx | 7 +- .../PauseComponentManager.tsx | 10 +- .../StateManagers/MediaSceneEventManager.tsx | 23 +- .../MediaComponentManager.tsx | 20 +- .../SSknComponentManager.tsx | 2 +- src/resources/site_b.json | 437 ++++++++++--- src/scenes/EndScene.tsx | 7 +- src/scenes/MainScene.tsx | 5 +- src/scenes/MediaScene.tsx | 22 +- src/scenes/SSknScene.tsx | 2 +- src/scenes/TaKScene.tsx | 6 +- src/store.ts | 164 ++--- 31 files changed, 951 insertions(+), 1019 deletions(-) diff --git a/src/components/LainSpeak.tsx b/src/components/LainSpeak.tsx index 1498d3e..cbbf4fd 100644 --- a/src/components/LainSpeak.tsx +++ b/src/components/LainSpeak.tsx @@ -7,7 +7,7 @@ import mouth1 from "../static/sprite/mouth_1.png"; import mouth2 from "../static/sprite/mouth_2.png"; import mouth3 from "../static/sprite/mouth_3.png"; import mouth4 from "../static/sprite/mouth_4.png"; -import { useMediaStore } from "../store"; +import { useMainSceneStore } from "../store"; import { LainConstructor } from "./MainScene/Lain"; type LainTaKProps = { @@ -39,12 +39,12 @@ const LainSpeak = (props: LainTaKProps) => { /> ); - const analyser = useMediaStore((state) => state.audioAnalyser); + const analyser = useMainSceneStore((state) => state.audioAnalyser); const mouthRef = useRef(); useFrame(() => { if (analyser) { - const freq = parseInt(analyser.getAverageFrequency()); + const freq = parseInt(String(analyser.getAverageFrequency())); if (mouthRef.current) { if (freq >= 50) { diff --git a/src/components/MainScene/PauseSubscene/Pause.tsx b/src/components/MainScene/PauseSubscene/Pause.tsx index 52b7d41..ac9c183 100644 --- a/src/components/MainScene/PauseSubscene/Pause.tsx +++ b/src/components/MainScene/PauseSubscene/Pause.tsx @@ -2,12 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import * as THREE from "three"; import PauseSquare from "./PauseSquare"; import StaticBigLetter from "../../TextRenderer/StaticBigLetter"; -import { usePauseStore } from "../../../store"; +import { useMainSceneStore } from "../../../store"; import { useLoader } from "react-three-fiber"; -import MainSceneEventManager from "../../../core/StateManagers/MainSceneEventManager"; -const Pause = (props: { visible: boolean }) => { - const exit = usePauseStore((state) => state.exitAnimation); +type PauseProps = { + paused: boolean; +}; + +const Pause = (props: PauseProps) => { + const exit = useMainSceneStore((state) => state.pauseExitAnimation); const [showActiveComponent, setShowActiveComponent] = useState(false); const [animation, setAnimation] = useState(false); const [intro, setIntro] = useState(true); @@ -22,12 +25,13 @@ const Pause = (props: { visible: boolean }) => { [wordFont] ); - const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx); - const activeComponent = usePauseStore( + const activeComponent = useMainSceneStore( useCallback( (state) => - showActiveComponent ? state.componentMatrix[componentMatrixIdx] : "", - [componentMatrixIdx, showActiveComponent] + showActiveComponent + ? state.pauseComponentMatrix[state.pauseComponentMatrixIdx] + : "", + [showActiveComponent] ) ); @@ -58,7 +62,7 @@ const Pause = (props: { visible: boolean }) => { setAnimation(false); setIntro(true); setShowActiveComponent(false); - if (props.visible) { + if (props.paused) { setTimeout(() => { setAnimation(true); }, 1000); @@ -67,285 +71,291 @@ const Pause = (props: { visible: boolean }) => { setIntro(false); }, 3500); } - }, [props.visible]); + }, [props.paused]); - return animation ? ( - - {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) => - [0, 1, 2, 3, 4, 5, 6].map((col: number) => { - if (rowIdx === 5 && col > 0 && col < 5) { - return col === 1 ? ( - - - - - ) : ( - + {animation && ( + + {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) => + [0, 1, 2, 3, 4, 5, 6].map((col: number) => { + if (rowIdx === 5 && col > 0 && col < 5) { + return col === 1 ? ( + + + + + ) : ( + + ); + } else if (rowIdx === 4 && col > 4 && col < 7) { + return col === 5 ? ( + + + + + ) : ( + + ); + } else if (rowIdx === 3 && col > 2 && col < 7) { + return col === 3 ? ( + + + + + ) : ( + + ); + } else if (rowIdx === 1 && col > 0 && col < 5) { + return col === 1 ? ( + + + + + ) : ( + + ); + } else if (rowIdx === 0 && col > 4 && col < 7) { + return col === 5 ? ( + + + + + ) : ( + + ); + } else { + return ( + + ); + } + }) + )} + {"Load".split("").map((letter, idx) => ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + key={idx} + position={[0.35 + idx / 2.8, 1.8, 0]} + scale={[0.25, 0.25, 0.25]} + active={activeComponent === "load"} + /> + ))} + + {"About".split("").map((letter, idx) => ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + position={[1.78 + idx / 2.8, 1.43, 0]} + scale={[0.25, 0.25, 0]} + active={activeComponent === "about"} + key={idx} + /> + ))} + + {"Change".split("").map((letter, idx) => ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + position={[1.05 + idx / 2.8, 1.07, 0]} + scale={[0.25, 0.25, 0]} + active={activeComponent === "change"} + key={idx} + /> + ))} + + {"Save".split("").map((letter, idx) => ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + position={[0.35 + idx / 2.8, 0.35, 0]} + scale={[0.25, 0.25, 0]} + active={activeComponent === "save"} + key={idx} + /> + ))} + + {"Exit".split("").map((letter, idx) => ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + position={[1.78 + idx / 2.8, 0, 0]} + scale={[0.25, 0.25, 0]} + key={idx} + active={activeComponent === "exit"} + /> + ))} + + + + - ); - } else if (rowIdx === 4 && col > 4 && col < 7) { - return col === 5 ? ( - - - - - ) : ( - + + - ); - } else if (rowIdx === 3 && col > 2 && col < 7) { - return col === 3 ? ( - - - - - ) : ( - - ); - } else if (rowIdx === 1 && col > 0 && col < 5) { - return col === 1 ? ( - - - - - ) : ( - - ); - } else if (rowIdx === 0 && col > 4 && col < 7) { - return col === 5 ? ( - - - - - ) : ( - - ); - } else { - return ( - - ); - } - }) + + + )} - {"Load".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - key={idx} - position={[0.35 + idx / 2.8, 1.8, 0]} - scale={[0.25, 0.25, 0.25]} - active={activeComponent === "load"} - /> - ))} - - {"About".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - position={[1.78 + idx / 2.8, 1.43, 0]} - scale={[0.25, 0.25, 0]} - active={activeComponent === "about"} - key={idx} - /> - ))} - - {"Change".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - position={[1.05 + idx / 2.8, 1.07, 0]} - scale={[0.25, 0.25, 0]} - active={activeComponent === "change"} - key={idx} - /> - ))} - - {"Save".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - position={[0.35 + idx / 2.8, 0.35, 0]} - scale={[0.25, 0.25, 0]} - active={activeComponent === "save"} - key={idx} - /> - ))} - - {"Exit".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - position={[1.78 + idx / 2.8, 0, 0]} - scale={[0.25, 0.25, 0]} - key={idx} - active={activeComponent === "exit"} - /> - ))} - - - - - - - - - - - - ) : ( - <> + ); }; diff --git a/src/components/MainScene/PauseSubscene/PauseSquare.tsx b/src/components/MainScene/PauseSubscene/PauseSquare.tsx index 2acae50..dcd5912 100644 --- a/src/components/MainScene/PauseSubscene/PauseSquare.tsx +++ b/src/components/MainScene/PauseSubscene/PauseSquare.tsx @@ -1,9 +1,9 @@ -import React, { useMemo } from "react"; +import React, { useMemo, memo } from "react"; import * as THREE from "three"; import { useLoader } from "react-three-fiber"; import pauseGrayBoxes from "../../../static/sprite/pause_gray_boxes.png"; import { a, useSpring } from "@react-spring/three"; -import { usePauseStore } from "../../../store"; +import { useMainSceneStore } from "../../../store"; type PauseSquareProps = { colIdx: number; @@ -14,8 +14,8 @@ type PauseSquareProps = { intro?: boolean; }; -const PauseSquare = (props: PauseSquareProps) => { - const exitAnimation = usePauseStore((state) => state.exitAnimation); +const PauseSquare = memo((props: PauseSquareProps) => { + const exitAnimation = useMainSceneStore((state) => state.pauseExitAnimation); const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes); @@ -109,6 +109,6 @@ const PauseSquare = (props: PauseSquareProps) => { ); -}; +}); export default PauseSquare; diff --git a/src/components/MainScene/SyncedComponentLoader.tsx b/src/components/MainScene/SyncedComponentLoader.tsx index fc4c803..a0a9a79 100644 --- a/src/components/MainScene/SyncedComponentLoader.tsx +++ b/src/components/MainScene/SyncedComponentLoader.tsx @@ -52,7 +52,6 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => { shouldIntro={props.shouldIntro} introFinished={introFinished} /> - { +const HUD = memo(() => { const greenText = useMainSceneStore((state) => state.activeNode.title.split("") ); @@ -155,6 +154,6 @@ const HUD = () => { ); -}; +}); export default HUD; diff --git a/src/components/MainScene/SyncedComponents/LevelSelection.tsx b/src/components/MainScene/SyncedComponents/LevelSelection.tsx index bf09d2b..3906518 100644 --- a/src/components/MainScene/SyncedComponents/LevelSelection.tsx +++ b/src/components/MainScene/SyncedComponents/LevelSelection.tsx @@ -1,11 +1,11 @@ -import React, { useCallback, useEffect, useMemo } from "react"; +import React, { useCallback } from "react"; import level_selection_font from "../../../static/sprite/select_level_font.png"; import verticalHud from "../../../static/sprite/select_level_hud_vertical.png"; import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.png"; import levelSelectionText from "../../../static/sprite/select_level_text.png"; import upArrow from "../../../static/sprite/select_level_up_arrow.png"; import downArrow from "../../../static/sprite/select_level_down_arrow.png"; -import { useLevelSelectionStore } from "../../../store"; +import { useMainSceneStore } from "../../../store"; import { useLoader } from "react-three-fiber"; import * as THREE from "three"; import { a, useSpring } from "@react-spring/three"; @@ -24,16 +24,16 @@ const LevelSelection = () => { const upArrowTex = useLoader(THREE.TextureLoader, upArrow); const downArrowTex = useLoader(THREE.TextureLoader, downArrow); - const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel) + const toggled = useMainSceneStore( + useCallback((state) => Number(state.subscene === "level_selection"), []) + ); + + const selectedLevel = useMainSceneStore((state) => state.selectedLevel) .toString() .padStart(2, "0"); - const levelSelectionToggled = useLevelSelectionStore( - (state) => state.levelSelectionToggled - ); - const { levelSelectionToggle } = useSpring({ - levelSelectionToggle: levelSelectionToggled, + levelSelectionToggle: toggled, config: { duration: 500 }, }); diff --git a/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx b/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx index e639483..1fbe860 100644 --- a/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx +++ b/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx @@ -1,12 +1,13 @@ -import React, { useMemo } from "react"; +import React, { useMemo, memo } from "react"; import Node from "./Node"; import node_positions from "../../../../resources/node_positions.json"; import { useMainSceneStore } from "../../../../store"; import { isNodeVisible } from "../../../../core/nodeSelector"; import site_a from "../../../../resources/site_a.json"; import site_b from "../../../../resources/site_b.json"; +import { NodeDataType } from "../Site"; -const ActiveLevelNodes = () => { +const ActiveLevelNodes = memo(() => { const activeNodeId = useMainSceneStore((state) => state.activeNode.id); const gameProgress = useMainSceneStore((state) => state.gameProgress); @@ -26,28 +27,28 @@ const ActiveLevelNodes = () => { return ( <> - {Object.entries(visibleNodes).map((node: [string, any]) => { - if (isNodeVisible(node[1], gameProgress)) { + {Object.values(visibleNodes).map((node: NodeDataType) => { + if (isNodeVisible(node, gameProgress)) { return ( ); } })} ); -}; +}); export default ActiveLevelNodes; diff --git a/src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx b/src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx index 47f068f..3576ba8 100644 --- a/src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx +++ b/src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React, { useMemo, memo } from "react"; import Node from "./Node"; import node_positions from "../../../../resources/node_positions.json"; import { useMainSceneStore } from "../../../../store"; @@ -6,7 +6,7 @@ import { isNodeVisible } from "../../../../core/nodeSelector"; import site_a from "../../../../resources/site_a.json"; import site_b from "../../../../resources/site_b.json"; -const InactiveLevelNodes = () => { +const InactiveLevelNodes = memo(() => { const gameProgress = useMainSceneStore((state) => state.gameProgress); const currentSite = useMainSceneStore((state) => state.activeSite); @@ -57,6 +57,6 @@ const InactiveLevelNodes = () => { })} ); -}; +}); export default InactiveLevelNodes; diff --git a/src/components/MainScene/SyncedComponents/Site/Rings.tsx b/src/components/MainScene/SyncedComponents/Site/Rings.tsx index 1080e1e..6321360 100644 --- a/src/components/MainScene/SyncedComponents/Site/Rings.tsx +++ b/src/components/MainScene/SyncedComponents/Site/Rings.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React, { useMemo, memo } from "react"; import level_y_values from "../../../../resources/level_y_values.json"; import PurpleRing from "./PurpleRing"; import GrayRing from "./GrayRing"; @@ -9,7 +9,7 @@ type RingsProps = { activateAllRings: boolean; }; -const Rings = (props: RingsProps) => { +const Rings = memo((props: RingsProps) => { const activeLevel = useMainSceneStore((state) => state.activeLevel); const currentSite = useMainSceneStore((state) => state.activeSite); @@ -61,6 +61,6 @@ const Rings = (props: RingsProps) => { })} ); -}; +}); export default Rings; diff --git a/src/components/MainScene/SyncedComponents/Starfield.tsx b/src/components/MainScene/SyncedComponents/Starfield.tsx index 8be1432..38e6b81 100644 --- a/src/components/MainScene/SyncedComponents/Starfield.tsx +++ b/src/components/MainScene/SyncedComponents/Starfield.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, memo } from "react"; import Star from "./Starfield/Star"; type StarfieldProps = { @@ -7,7 +7,7 @@ type StarfieldProps = { introFinished: boolean; }; -const Starfield = (props: StarfieldProps) => { +const Starfield = memo((props: StarfieldProps) => { const LCG = (a: number, c: number, m: number, s: number) => () => (s = (s * a + c) % m); @@ -128,6 +128,6 @@ const Starfield = (props: StarfieldProps) => { )} ); -}; +}); export default Starfield; diff --git a/src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx b/src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx index 142eb8c..969a81b 100644 --- a/src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx +++ b/src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx @@ -2,10 +2,10 @@ import React, { createRef, MutableRefObject, useMemo } from "react"; import * as THREE from "three"; import { useFrame } from "react-three-fiber"; import AudioVisualizerColumn from "./AudioVisualizerColumn"; -import { useMediaStore } from "../../../store"; +import { useMainSceneStore } from "../../../store"; const AudioVisualizer = () => { - const analyser = useMediaStore((state) => state.audioAnalyser); + const analyser = useMainSceneStore((state) => state.audioAnalyser); const columnRefs = useMemo( () => diff --git a/src/components/MediaScene/Images.tsx b/src/components/MediaScene/Images.tsx index f8335fd..edae8b1 100644 --- a/src/components/MediaScene/Images.tsx +++ b/src/components/MediaScene/Images.tsx @@ -1,14 +1,9 @@ -import React, { useEffect, useState } from "react"; -import { - useIdleStore, - useMainSceneStore, - useMediaStore, - useSceneStore, -} from "../../store"; -import { a, useSpring } from "@react-spring/three"; +import React, {useEffect, useState} from "react"; +import {useIdleStore, useMainSceneStore, useSceneStore,} from "../../store"; +import {a, useSpring} from "@react-spring/three"; import dummy from "../../static/sprite/dummy.png"; import * as THREE from "three"; -import { useLoader } from "react-three-fiber"; +import {useLoader} from "react-three-fiber"; const Images = () => { const idleNodeImages = useIdleStore((state) => state.images); @@ -26,7 +21,7 @@ const Images = () => { const dummyTex = useLoader(THREE.TextureLoader, dummy); - const mediaPercentageElapsed = useMediaStore( + const mediaPercentageElapsed = useMainSceneStore( (state) => state.mediaPercentageElapsed ); diff --git a/src/components/MediaScene/MediaLoadingBar.tsx b/src/components/MediaScene/MediaLoadingBar.tsx index f1c47cf..e9c32f6 100644 --- a/src/components/MediaScene/MediaLoadingBar.tsx +++ b/src/components/MediaScene/MediaLoadingBar.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useRef } from "react"; -import { useMediaStore } from "../../store"; +import { useMainSceneStore } from "../../store"; import loadingBarContainer from "../../static/sprite/media_loading_bar_container.png"; import loadingBar from "../../static/sprite/media_loading_bar.png"; import loadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png"; @@ -12,7 +12,7 @@ import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; const MediaLoadingBar = () => { - const mediaPercentageElapsed = useMediaStore( + const mediaPercentageElapsed = useMainSceneStore( (state) => state.mediaPercentageElapsed ); const loadingBarContainerTex = useLoader( diff --git a/src/components/MediaScene/MediaPlayer.tsx b/src/components/MediaScene/MediaPlayer.tsx index 3b9990e..f2cc611 100644 --- a/src/components/MediaScene/MediaPlayer.tsx +++ b/src/components/MediaScene/MediaPlayer.tsx @@ -10,7 +10,6 @@ import { useEndSceneStore, useIdleStore, useMainSceneStore, - useMediaStore, useSceneStore, } from "../../store"; import t from "../../static/webvtt/test.vtt"; @@ -24,7 +23,7 @@ const MediaPlayer = () => { const currentScene = useSceneStore((state) => state.currentScene); const setScene = useSceneStore((state) => state.setScene); - const setPercentageElapsed = useMediaStore( + const setPercentageElapsed = useMainSceneStore( (state) => state.setPercentageElapsed ); @@ -53,7 +52,10 @@ const MediaPlayer = () => { const updateTime = useCallback(() => { (requestRef.current as any) = requestAnimationFrame(updateTime); - if (videoRef.current) { + if ( + videoRef.current && + ["media", "idle_media", "tak", "end"].includes(currentScene) + ) { const timeElapsed = videoRef.current.currentTime; const duration = videoRef.current.duration; const percentageElapsed = Math.floor((timeElapsed / duration) * 100); diff --git a/src/components/TextRenderer/StaticBigLetter.tsx b/src/components/TextRenderer/StaticBigLetter.tsx index 1159dfd..f6c4047 100644 --- a/src/components/TextRenderer/StaticBigLetter.tsx +++ b/src/components/TextRenderer/StaticBigLetter.tsx @@ -5,157 +5,154 @@ import * as THREE from "three"; import { useLoader } from "react-three-fiber"; import orange_font_json from "../../resources/font_data/big_font.json"; import { a, useSpring } from "@react-spring/three"; -import React, { useMemo } from "react"; -import { usePauseStore } from "../../store"; +import React, { useMemo, memo } from "react"; +import { useMainSceneStore } from "../../store"; -const StaticBigLetter = (props: { - color: string; - letter: string; - letterIdx: number; - position: number[]; - scale: number[]; - active: boolean; - rowIdx?: number; - colIdx?: number; - intro?: boolean; -}) => { - const exitAnimation = usePauseStore((state) => state.exitAnimation); +const StaticBigLetter = memo( + (props: { + color: string; + letter: string; + letterIdx: number; + position: number[]; + scale: number[]; + active: boolean; + rowIdx?: number; + colIdx?: number; + intro?: boolean; + }) => { + const exitAnimation = useMainSceneStore( + (state) => state.pauseExitAnimation + ); - const colorToTexture = (color: string) => { - const colorTexture = { - orange: orangeFont, - yellow: yellowFont, - white: whiteFont, - }; - return colorTexture[color as keyof typeof colorTexture]; - }; + const tex = useMemo(() => { + switch (props.color) { + case "white": + return whiteFont; + case "yellow": + return yellowFont; + default: + return orangeFont; + } + }, [props.color]); - // first letter in big font is always orange in this case so make it orange if so. else, - // run through the function. - const color = - props.letterIdx === 0 ? orangeFont : colorToTexture(props.color); + const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, tex); - const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, color); + const lineYOffset = useMemo(() => { + const lineOne = "ABCDEFGHIJKLMNOPQ"; + const lineTwo = "RSTUVWXYZ01234567"; + const lineThree = "89abcdefghijklmnopqrs"; - // i have yet to figure out a genrealizable way of - // calculating the y offset, this shit will do for now - // also, we dont have all the lines since i dont need them yet. - // also, baseline offsets dont work properly since i dont need them yet either - // should be trivial to calculate though, im just lazy - const getLineNum = (letter: string) => { - const lineOne = "ABCDEFGHIJKLMNOPQ"; - const lineTwo = "RSTUVWXYZ01234567"; - const lineThree = "89abcdefghijklmnopqrs"; + let lineNum: number; + if (props.letter === " ") { + lineNum = 5; + } else { + if (lineOne.includes(props.letter)) { + lineNum = 1; + } else if (lineTwo.includes(props.letter)) { + lineNum = 2; + } else if (lineThree.includes(props.letter)) { + lineNum = 3; + } else { + lineNum = 4; + } + } - if (letter === " ") return 5; + const offsets = { + 1: 0.884, + 2: 0.765, + 3: 0.648, + 4: 0.47, + 5: 1, + }; + return offsets[lineNum as keyof typeof offsets]; + }, [props.letter]); - if (lineOne.includes(letter)) { - return 1; - } else if (lineTwo.includes(letter)) { - return 2; - } else if (lineThree.includes(letter)) { - return 3; - } else { - return 4; - } - }; + const letterData = useMemo( + () => + orange_font_json.glyphs[ + props.letter as keyof typeof orange_font_json.glyphs + ], + [props.letter] + ); - const lineYOffsets = useMemo( - () => ({ - 1: 0.884, - 2: 0.765, - 3: 0.648, - 4: 0.47, - 5: 1, - }), - [] - ); + const geom = useMemo(() => { + const geometry = new THREE.PlaneBufferGeometry(); - const letterData = - orange_font_json.glyphs[ - props.letter as keyof typeof orange_font_json.glyphs - ]; + const uvAttribute = geometry.attributes.uv; - const geom = useMemo(() => { - const geometry = new THREE.PlaneBufferGeometry(); + for (let i = 0; i < uvAttribute.count; i++) { + let u = uvAttribute.getX(i); + let v = uvAttribute.getY(i); - const uvAttribute = geometry.attributes.uv; + u = (u * letterData[2]) / 256 + letterData[0] / 256; - for (let i = 0; i < uvAttribute.count; i++) { - let u = uvAttribute.getX(i); - let v = uvAttribute.getY(i); + v = (v * letterData[3]) / 136 + lineYOffset - letterData[4] / 136; - u = (u * letterData[2]) / 256 + letterData[0] / 256; + uvAttribute.setXY(i, u, v); + } + return geometry; + }, [letterData, lineYOffset]); - v = - (v * letterData[3]) / 136 + - lineYOffsets[getLineNum(props.letter)] - - letterData[4] / 136; + const exitAnimValue = useMemo(() => { + let col = 0; + let row = 0; + if (props.colIdx && props.rowIdx) { + if (props.colIdx < 3) col = -1; + else if (props.colIdx > 3) col = 1; - uvAttribute.setXY(i, u, v); - } - return geometry; - }, [letterData, lineYOffsets, props.letter]); + if (props.rowIdx < 3) row = -1; + else if (props.rowIdx > 3) row = 1; - const getExitAnimValue = useMemo(() => { - let col = 0; - let row = 0; - if (props.colIdx && props.rowIdx) { - if (props.colIdx < 3) col = -1; - else if (props.colIdx > 3) col = 1; + return { row, col }; + } + }, [props.colIdx, props.rowIdx]); - if (props.rowIdx < 3) row = -1; - else if (props.rowIdx > 3) row = 1; + const initialState = useSpring({ + posX: + props.position[0] + + (exitAnimValue ? exitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0), + posY: + -letterData[4] / 50 + + props.position[1] + + (exitAnimValue ? exitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0), + rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI, + rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2, + config: { duration: 500 }, + }); - return { row, col }; - } - }, [props.colIdx, props.rowIdx]); + const introState = useSpring({ + rotX: 0, + rotY: 0, + from: { rotX: Math.PI, rotY: Math.PI * 2 }, + delay: (props.rowIdx! + props.colIdx!) * 100 + 500, + config: { duration: 200 }, + }); - const initialState = useSpring({ - posX: - props.position[0] + - (getExitAnimValue ? getExitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0), - posY: - -letterData[4] / 50 + - props.position[1] + - (getExitAnimValue ? getExitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0), - rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI, - rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2, - config: { duration: 500 }, - }); - - const introState = useSpring({ - rotX: 0, - rotY: 0, - from: { rotX: Math.PI, rotY: Math.PI * 2 }, - delay: (props.rowIdx! + props.colIdx!) * 100 + 500, - config: { duration: 200 }, - }); - - return ( - - - - ); -}; + return ( + + + + ); + } +); export default StaticBigLetter; diff --git a/src/components/TextRenderer/YellowTextRenderer.tsx b/src/components/TextRenderer/YellowTextRenderer.tsx index c6eaeb0..f466b14 100644 --- a/src/components/TextRenderer/YellowTextRenderer.tsx +++ b/src/components/TextRenderer/YellowTextRenderer.tsx @@ -11,8 +11,8 @@ const YellowTextRenderer = (props: { visible?: boolean }) => { const textRef = useRef(useMainSceneStore.getState().bigText.split("")); const [trail, set] = useTrail(textRef.current.length, () => ({ - posX: 0, - posY: 0, + posX: useMainSceneStore.getState().bigTextPos[0], + posY: useMainSceneStore.getState().bigTextPos[1], config: { duration: 280 }, })); diff --git a/src/core/StateManagers/EventManager.tsx b/src/core/StateManagers/EventManager.tsx index f36c3dd..6d16d75 100644 --- a/src/core/StateManagers/EventManager.tsx +++ b/src/core/StateManagers/EventManager.tsx @@ -1,39 +1,4 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; -import SiteManager from "./MainSceneManagers/SiteManager"; -import MiddleRingManager from "./MainSceneManagers/MiddleRingManager"; -import LainManager from "./MainSceneManagers/LainManager"; -import NodeManager from "./MainSceneManagers/NodeManager"; -import NodeHUDManager from "./MainSceneManagers/NodeHUDManager"; -import { - useAuthorizeUserStore, - useBootStore, - useLevelSelectionStore, - useMainSceneStore, - useMediaStore, - useMediaWordStore, - usePauseStore, - useSceneStore, - useSSknStore, -} from "../../store"; -import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager"; -import SceneManager from "./GameManagers/SceneManager"; -import BigTextManager from "./MainSceneManagers/BigTextManager"; -import LevelManager from "./MainSceneManagers/LevelManager"; -import BootComponentManager from "./BootSceneManagers/BootComponentManager"; -import SSknComponentManager from "./SSknSceneManagers/SSknComponentManager"; -import handleMainSceneEvent from "../mainSceneEventHandler"; -import handleMediaSceneEvent from "../mediaSceneEventHandler"; -import handleBootEvent from "../bootEventHandler"; -import handleSSknSceneEvent from "../ssknSceneEventHandler"; -import BootAuthorizeUserManager from "./BootSceneManagers/BootAuthorizeUserManager"; -import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager"; -import SubsceneManager from "./GameManagers/SubsceneManager"; -import PauseComponentManager from "./MainSceneManagers/PauseComponentManager"; -import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager"; -import GameSaver from "./GameManagers/GameSaver"; -import GameLoader from "./GameManagers/GameLoader"; -import { useFrame } from "react-three-fiber"; -import IdleManager from "./MainSceneManagers/IdleManager"; +import React from "react"; const getKeyCodeAssociation = (keyCode: number): string => { const keyCodeAssocs = { @@ -55,242 +20,6 @@ export type StateManagerProps = { }; const EventManager = () => { - // const currentScene = useSceneStore((state) => state.currentScene); - // - // // main scene - // const currentSite = useSiteStore((state) => state.currentSite); - // // const activeNodeId = useNodeStore((state) => state.activeNodeState.id); - // // const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices); - // const siteTransformState = useSiteStore((state) => state.transformState); - // const activeLevel = useLevelStore((state) => state.activeLevel); - // const mainSubscene = useMainSceneStore((state) => state.subscene); - // const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel); - // const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx); - // const activePauseComponent = usePauseStore( - // useCallback((state) => state.componentMatrix[pauseMatrixIdx], [ - // pauseMatrixIdx, - // ]) - // ); - // // const gameProgress = useNodeStore((state) => state.gameProgress); - // - // // media scene - // const mediaComponentMatrixIndices = useMediaStore( - // (state) => state.componentMatrixIndices - // ); - // - // const activeMediaComponent = useMediaStore( - // useCallback( - // (state) => - // state.componentMatrix[mediaComponentMatrixIndices.sideIdx][ - // mediaComponentMatrixIndices.sideIdx === 0 - // ? mediaComponentMatrixIndices.leftSideIdx - // : mediaComponentMatrixIndices.rightSideIdx - // ], - // [mediaComponentMatrixIndices] - // ) - // ); - // const rightSideComponentIdx = useMediaStore( - // (state) => state.componentMatrixIndices.rightSideIdx - // ); - // - // const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx); - // - // // sskn scene - // const ssknComponentMatrixIdx = useSSknStore( - // (state) => state.componentMatrixIdx - // ); - // const activeSSknComponent = useSSknStore( - // useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [ - // ssknComponentMatrixIdx, - // ]) - // ); - // - // // boot scene - // const currentBootSubscene = useBootStore((state) => state.subscene); - // const activeBootElement = useBootStore( - // useCallback( - // (state) => - // state.componentMatrix[ - // currentBootSubscene as keyof typeof state.componentMatrix - // ][ - // state.componentMatrixIndices[ - // currentBootSubscene as keyof typeof state.componentMatrixIndices - // ] - // ], - // [currentBootSubscene] - // ) - // ); - // - // const authorizeUserBgLettersPos = useAuthorizeUserStore( - // (state) => state.bgLettersPos - // ); - // const authorizeUserActiveLetterTexOffset = useAuthorizeUserStore( - // (state) => state.activeLetterTextureOffset - // ); - // const authorizeUserMatrixIdx = useBootStore( - // (state) => state.componentMatrixIndices.authorize_user - // ); - // - // const [eventState, setEventState] = useState(); - // - // const [inputCooldown, setInputCooldown] = useState(false); - // - // const timePassedSinceLastKeyPress = useRef(-1); - // - // useFrame(() => { - // const now = Date.now(); - // if ( - // timePassedSinceLastKeyPress.current > -1 && - // mainSubscene !== "pause" && - // mainSubscene !== "level_selection" && - // currentScene === "main" - // ) { - // if (now > timePassedSinceLastKeyPress.current + 10000) { - // const moves = [ - // "prayer", - // "touch_sleeve", - // "thinking", - // "stretch_2", - // "stretch", - // "spin", - // "scratch_head", - // "blush", - // "hands_behind_head", - // "hands_on_hips", - // "hands_on_hips_2", - // "hands_together", - // "lean_forward", - // "lean_left", - // "lean_right", - // "look_around", - // "play_with_hair", - // ]; - // - // const event = moves[Math.floor(Math.random() * moves.length)]; - // setEventState({ event: event }); - // timePassedSinceLastKeyPress.current = now - 2500; - // } - // if (now > timePassedSinceLastKeyPress.current + 5000) { - // setEventState({ - // event: "play_idle_media", - // scene: "idle_media", - // site: currentSite, - // }); - // timePassedSinceLastKeyPress.current = -1; - // } - // } - // }); - // - // const handleKeyPress = useCallback( - // (event) => { - // const { keyCode } = event; - // - // const keyPress = getKeyCodeAssociation(keyCode); - // - // if (keyPress && !inputCooldown) { - // let event; - // switch (currentScene) { - // case "main": - // timePassedSinceLastKeyPress.current = Date.now() + 2500; - // event = handleMainSceneEvent({ - // mainSubscene: mainSubscene, - // keyPress: keyPress, - // siteTransformState: siteTransformState, - // // activeNodeId: activeNodeId, - // // nodeMatrixIndices: nodeMatrixIndices, - // activeLevel: activeLevel, - // selectedLevel: selectedLevel, - // pauseMatrixIdx: pauseMatrixIdx, - // activePauseComponent: activePauseComponent, - // // gameProgress: gameProgress, - // currentSite: currentSite, - // }); - // break; - // case "media": - // case "idle_media": - // event = handleMediaSceneEvent({ - // keyPress: keyPress, - // activeMediaComponent: activeMediaComponent, - // wordPosStateIdx: wordPosStateIdx, - // rightSideComponentIdx: rightSideComponentIdx, - // }); - // break; - // case "boot": - // event = handleBootEvent({ - // keyPress: keyPress, - // bootSubscene: currentBootSubscene, - // activeBootElement: activeBootElement, - // authorizeUserBgLettersPos: authorizeUserBgLettersPos, - // authorizeUserActiveLetterTexOffset: authorizeUserActiveLetterTexOffset, - // authorizeUserMatrixIdx: authorizeUserMatrixIdx, - // }); - // break; - // case "gate": - // event = { event: "exit_gate" }; - // break; - // case "sskn": - // event = handleSSknSceneEvent({ - // keyPress: keyPress, - // activeSSknComponent: activeSSknComponent, - // }); - // break; - // } - // setEventState(event); - // } - // }, - // [ - // inputCooldown, - // currentScene, - // mainSubscene, - // siteTransformState, - // activeLevel, - // selectedLevel, - // pauseMatrixIdx, - // activePauseComponent, - // currentSite, - // activeMediaComponent, - // wordPosStateIdx, - // rightSideComponentIdx, - // currentBootSubscene, - // activeBootElement, - // authorizeUserBgLettersPos, - // authorizeUserActiveLetterTexOffset, - // authorizeUserMatrixIdx, - // activeSSknComponent, - // ] - // ); - // - // useEffect(() => { - // window.addEventListener("keydown", handleKeyPress); - // - // return () => { - // window.removeEventListener("keydown", handleKeyPress); - // }; - // }, [handleKeyPress]); - // - // return ( - // <> - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // ); return <>; }; diff --git a/src/core/StateManagers/MainSceneEventManager.tsx b/src/core/StateManagers/MainSceneEventManager.tsx index e88d04f..fa687bb 100644 --- a/src/core/StateManagers/MainSceneEventManager.tsx +++ b/src/core/StateManagers/MainSceneEventManager.tsx @@ -1,9 +1,5 @@ import React, { useCallback, useEffect, useRef, useState } from "react"; -import { - useLevelSelectionStore, - useMainSceneStore, - usePauseStore, -} from "../../store"; +import { useMainSceneStore } from "../../store"; import handleMainSceneEvent from "../mainSceneEventHandler"; import { getKeyCodeAssociation } from "../utils/keyPressUtils"; import NodeManager from "./MainSceneManagers/NodeManager"; @@ -37,10 +33,12 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => { const sitePosY = useMainSceneStore((state) => state.sitePos[1]); const activeLevel = useMainSceneStore((state) => state.activeLevel); const mainSubscene = useMainSceneStore((state) => state.subscene); - const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel); - const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx); - const activePauseComponent = usePauseStore( - useCallback((state) => state.componentMatrix[pauseMatrixIdx], [ + const selectedLevel = useMainSceneStore((state) => state.selectedLevel); + const pauseMatrixIdx = useMainSceneStore( + (state) => state.pauseComponentMatrixIdx + ); + const activePauseComponent = useMainSceneStore( + useCallback((state) => state.pauseComponentMatrix[pauseMatrixIdx], [ pauseMatrixIdx, ]) ); diff --git a/src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx b/src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx index ac4488b..125eaf6 100644 --- a/src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx @@ -1,37 +1,22 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "../EventManager"; -import { useLevelSelectionStore } from "../../../store"; +import { useMainSceneStore } from "../../../store"; const LevelSelectionManager = (props: StateManagerProps) => { - const toggleLevelSelection = useLevelSelectionStore( - (state) => state.toggleLevelSelection - ); - const setSelectedLevel = useLevelSelectionStore( - (state) => state.setSelectedLevel - ); + const setSelectedLevel = useMainSceneStore((state) => state.setSelectedLevel); const dispatchObject = useCallback( (eventState: { event: string; selectedLevelIdx: number }) => { switch (eventState.event) { - case "toggle_level_selection": - case "level_selection_back": - return { - action: toggleLevelSelection, - }; case "level_selection_up": case "level_selection_down": return { action: setSelectedLevel, value: eventState.selectedLevelIdx, }; - case "select_level_up": - case "select_level_down": - return { - action: toggleLevelSelection, - }; } }, - [setSelectedLevel, toggleLevelSelection] + [setSelectedLevel] ); useEffect(() => { diff --git a/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx b/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx index 3832384..1e9adda 100644 --- a/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx @@ -37,14 +37,11 @@ const MiddleRingManager = (props: any) => { const moveDown = useCallback(() => { // make noise appear again - setTimeout(() => { - setNoiseAmp(0.06); - }, 800); - // disable rotation of the ring setTimeout(() => { + setNoiseAmp(0.06); setRotating(false); - }, 700); + }, 800); setTimeout(() => { setPos([0, 1.39, 0]); diff --git a/src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx b/src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx index 0b0ee02..287c493 100644 --- a/src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx @@ -1,12 +1,14 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "../EventManager"; -import { usePauseStore } from "../../../store"; +import { useMainSceneStore } from "../../../store"; const PauseComponentManager = (props: StateManagerProps) => { - const setComponentMatrixIdx = usePauseStore( - (state) => state.setComponentMatrixIdx + const setComponentMatrixIdx = useMainSceneStore( + (state) => state.setPauseComponentMatrixIdx + ); + const setExitAnimation = useMainSceneStore( + (state) => state.setPauseExitAnimation ); - const setExitAnimation = usePauseStore((state) => state.setExitAnimation); const dispatchObject = useCallback( (eventState: { event: string; pauseMatrixIdx: number }) => { diff --git a/src/core/StateManagers/MediaSceneEventManager.tsx b/src/core/StateManagers/MediaSceneEventManager.tsx index 895d36a..3effa59 100644 --- a/src/core/StateManagers/MediaSceneEventManager.tsx +++ b/src/core/StateManagers/MediaSceneEventManager.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from "react"; -import { useMediaStore, useMediaWordStore } from "../../store"; +import { useMainSceneStore, useMediaWordStore } from "../../store"; import { getKeyCodeAssociation } from "../utils/keyPressUtils"; import SceneManager from "./GameManagers/SceneManager"; import handleMediaSceneEvent from "../mediaSceneEventHandler"; @@ -8,23 +8,20 @@ import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager" const MediaSceneEventManager = () => { // all the possible context needed to calculate new state - const mediaComponentMatrixIndices = useMediaStore( - (state) => state.componentMatrixIndices - ); - - const activeMediaComponent = useMediaStore( + const activeMediaComponent = useMainSceneStore( useCallback( (state) => - state.componentMatrix[mediaComponentMatrixIndices.sideIdx][ - mediaComponentMatrixIndices.sideIdx === 0 - ? mediaComponentMatrixIndices.leftSideIdx - : mediaComponentMatrixIndices.rightSideIdx + state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][ + state.mediaComponentMatrixIndices.sideIdx === 0 + ? state.mediaComponentMatrixIndices.leftSideIdx + : state.mediaComponentMatrixIndices.rightSideIdx ], - [mediaComponentMatrixIndices] + [] ) ); - const rightSideComponentIdx = useMediaStore( - (state) => state.componentMatrixIndices.rightSideIdx + + const rightSideComponentIdx = useMainSceneStore( + (state) => state.mediaComponentMatrixIndices.rightSideIdx ); const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx); diff --git a/src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx b/src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx index dc8166c..f0e9df5 100644 --- a/src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx +++ b/src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx @@ -1,26 +1,26 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "../EventManager"; -import { useMediaStore, useMediaWordStore } from "../../../store"; +import { useMainSceneStore, useMediaWordStore } from "../../../store"; import * as THREE from "three"; const MediaComponentManager = (props: StateManagerProps) => { - const toggleSide = useMediaStore((state) => state.toggleSide); - const setLeftComponentMatrixIdx = useMediaStore( - (state) => state.setLeftComponentMatrixIdx + const toggleSide = useMainSceneStore((state) => state.toggleMediaSide); + const setLeftComponentMatrixIdx = useMainSceneStore( + (state) => state.setMediaLeftComponentMatrixIdx ); - const setRightComponentMatrixIdx = useMediaStore( - (state) => state.setRightComponentMatrixIdx + const setRightComponentMatrixIdx = useMainSceneStore( + (state) => state.setMediaRightComponentMatrixIdx ); const setWordPosStateIdx = useMediaWordStore((state) => state.setPosStateIdx); - const resetComponentMatrixIndices = useMediaStore( - (state) => state.resetComponentMatrixIndices + const resetComponentMatrixIndices = useMainSceneStore( + (state) => state.resetMediaComponentMatrixIndices ); const resetWordPosStateIdx = useMediaWordStore( (state) => state.resetPosStateIdx ); - const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser); + const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser); const playMedia = useCallback(() => { const mediaElement = document.getElementById("media") as HTMLMediaElement; @@ -46,7 +46,7 @@ const MediaComponentManager = (props: StateManagerProps) => { }, []); const updateRightSide = useCallback( - (newRightSideComponentIdx: number, newWordPosStateIdx: number) => { + (newRightSideComponentIdx: 0 | 1 | 2, newWordPosStateIdx: number) => { setRightComponentMatrixIdx(newRightSideComponentIdx); setWordPosStateIdx(newWordPosStateIdx); }, diff --git a/src/core/StateManagers/SSknSceneManagers/SSknComponentManager.tsx b/src/core/StateManagers/SSknSceneManagers/SSknComponentManager.tsx index 6edbcf4..aeddb9d 100644 --- a/src/core/StateManagers/SSknSceneManagers/SSknComponentManager.tsx +++ b/src/core/StateManagers/SSknSceneManagers/SSknComponentManager.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "../EventManager"; -import { useMediaStore, useSSknStore } from "../../../store"; +import { useSSknStore } from "../../../store"; const SSknComponentManager = (props: StateManagerProps) => { const toggleComponentMatrixIdx = useSSknStore( diff --git a/src/resources/site_b.json b/src/resources/site_b.json index 485f955..4c4f266 100644 --- a/src/resources/site_b.json +++ b/src/resources/site_b.json @@ -1,6 +1,7 @@ { "01": { "0100": { + "id": "0100", "image_table_indices": { "1": "-1", "2": "-1", @@ -28,6 +29,7 @@ } }, "0101": { + "id": "0101", "image_table_indices": { "1": "-1", "2": "-1", @@ -55,6 +57,7 @@ } }, "0103": { + "id": "0103", "image_table_indices": { "1": "152", "2": "14", @@ -82,6 +85,7 @@ } }, "0104": { + "id": "0104", "image_table_indices": { "1": "15", "2": "153", @@ -109,6 +113,7 @@ } }, "0105": { + "id": "0105", "image_table_indices": { "1": "361", "2": "508", @@ -124,7 +129,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -136,6 +141,7 @@ } }, "0106": { + "id": "0106", "image_table_indices": { "1": "362", "2": "93", @@ -151,7 +157,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda151", @@ -163,6 +169,7 @@ } }, "0110": { + "id": "0110", "image_table_indices": { "1": "16", "2": "329", @@ -190,6 +197,7 @@ } }, "0112": { + "id": "0112", "image_table_indices": { "1": "-1", "2": "-1", @@ -217,6 +225,7 @@ } }, "0113": { + "id": "0113", "image_table_indices": { "1": "-1", "2": "-1", @@ -244,6 +253,7 @@ } }, "0114": { + "id": "0114", "image_table_indices": { "1": "94", "2": "363", @@ -259,7 +269,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -271,6 +281,7 @@ } }, "0115": { + "id": "0115", "image_table_indices": { "1": "95", "2": "511", @@ -286,7 +297,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda153", @@ -298,6 +309,7 @@ } }, "0116": { + "id": "0116", "image_table_indices": { "1": "513", "2": "367", @@ -313,7 +325,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda155", @@ -325,6 +337,7 @@ } }, "0119": { + "id": "0119", "image_table_indices": { "1": "334", "2": "17", @@ -352,6 +365,7 @@ } }, "0121": { + "id": "0121", "image_table_indices": { "1": "-1", "2": "-1", @@ -379,6 +393,7 @@ } }, "0122": { + "id": "0122", "image_table_indices": { "1": "-1", "2": "-1", @@ -406,6 +421,7 @@ } }, "0123": { + "id": "0123", "image_table_indices": { "1": "512", "2": "96", @@ -421,7 +437,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -435,6 +451,7 @@ }, "02": { "0200": { + "id": "0200", "image_table_indices": { "1": "368", "2": "514", @@ -450,7 +467,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -462,6 +479,7 @@ } }, "0201": { + "id": "0201", "image_table_indices": { "1": "369", "2": "99", @@ -477,7 +495,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda157", @@ -489,6 +507,7 @@ } }, "0202": { + "id": "0202", "image_table_indices": { "1": "-1", "2": "-1", @@ -516,6 +535,7 @@ } }, "0203": { + "id": "0203", "image_table_indices": { "1": "336", "2": "167", @@ -543,6 +563,7 @@ } }, "0204": { + "id": "0204", "image_table_indices": { "1": "168", "2": "337", @@ -570,6 +591,7 @@ } }, "0205": { + "id": "0205", "image_table_indices": { "1": "-1", "2": "-1", @@ -597,6 +619,7 @@ } }, "0209": { + "id": "0209", "image_table_indices": { "1": "100", "2": "346", @@ -612,7 +635,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -624,6 +647,7 @@ } }, "0210": { + "id": "0210", "image_table_indices": { "1": "101", "2": "536", @@ -639,7 +663,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda159", @@ -651,6 +675,7 @@ } }, "0211": { + "id": "0211", "image_table_indices": { "1": "172", "2": "20", @@ -678,6 +703,7 @@ } }, "0212": { + "id": "0212", "image_table_indices": { "1": "537", "2": "102", @@ -693,7 +719,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -705,6 +731,7 @@ } }, "0213": { + "id": "0213", "image_table_indices": { "1": "538", "2": "372", @@ -720,7 +747,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda161", @@ -732,6 +759,7 @@ } }, "0214": { + "id": "0214", "image_table_indices": { "1": "21", "2": "173", @@ -759,6 +787,7 @@ } }, "0215": { + "id": "0215", "image_table_indices": { "1": "22", "2": "342", @@ -786,6 +815,7 @@ } }, "0216": { + "id": "0216", "image_table_indices": { "1": "-1", "2": "-1", @@ -813,6 +843,7 @@ } }, "0220": { + "id": "0220", "image_table_indices": { "1": "343", "2": "28", @@ -840,6 +871,7 @@ } }, "0221": { + "id": "0221", "image_table_indices": { "1": "373", "2": "539", @@ -855,7 +887,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -867,6 +899,7 @@ } }, "0222": { + "id": "0222", "image_table_indices": { "1": "374", "2": "-1", @@ -882,7 +915,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda163", @@ -896,6 +929,7 @@ }, "03": { "0301": { + "id": "0301", "image_table_indices": { "1": "-1", "2": "-1", @@ -923,6 +957,7 @@ } }, "0302": { + "id": "0302", "image_table_indices": { "1": "-1", "2": "-1", @@ -950,6 +985,7 @@ } }, "0303": { + "id": "0303", "image_table_indices": { "1": "-1", "2": "-1", @@ -977,6 +1013,7 @@ } }, "0304": { + "id": "0304", "image_table_indices": { "1": "-1", "2": "-1", @@ -1004,6 +1041,7 @@ } }, "0305": { + "id": "0305", "image_table_indices": { "1": "344", "2": "176", @@ -1031,6 +1069,7 @@ } }, "0306": { + "id": "0306", "image_table_indices": { "1": "105", "2": "375", @@ -1046,7 +1085,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1058,6 +1097,7 @@ } }, "0307": { + "id": "0307", "image_table_indices": { "1": "106", "2": "541", @@ -1073,7 +1113,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda165", @@ -1085,6 +1125,7 @@ } }, "0308": { + "id": "0308", "image_table_indices": { "1": "543", "2": "381", @@ -1100,7 +1141,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda167", @@ -1112,6 +1153,7 @@ } }, "0309": { + "id": "0309", "image_table_indices": { "1": "382", "2": "544", @@ -1127,7 +1169,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1139,6 +1181,7 @@ } }, "0310": { + "id": "0310", "image_table_indices": { "1": "383", "2": "110", @@ -1154,7 +1197,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda169", @@ -1166,6 +1209,7 @@ } }, "0311": { + "id": "0311", "image_table_indices": { "1": "9", "2": "-1", @@ -1193,6 +1237,7 @@ } }, "0312": { + "id": "0312", "image_table_indices": { "1": "177", "2": "35", @@ -1220,6 +1265,7 @@ } }, "0313": { + "id": "0313", "image_table_indices": { "1": "40", "2": "179", @@ -1247,6 +1293,7 @@ } }, "0314": { + "id": "0314", "image_table_indices": { "1": "41", "2": "349", @@ -1274,6 +1321,7 @@ } }, "0315": { + "id": "0315", "image_table_indices": { "1": "542", "2": "107", @@ -1289,7 +1337,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1301,6 +1349,7 @@ } }, "0316": { + "id": "0316", "image_table_indices": { "1": "0", "2": "-1", @@ -1316,7 +1365,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1328,6 +1377,7 @@ } }, "0317": { + "id": "0317", "image_table_indices": { "1": "111", "2": "546", @@ -1343,7 +1393,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda171", @@ -1355,6 +1405,7 @@ } }, "0318": { + "id": "0318", "image_table_indices": { "1": "547", "2": "112", @@ -1370,7 +1421,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1382,6 +1433,7 @@ } }, "0319": { + "id": "0319", "image_table_indices": { "1": "548", "2": "388", @@ -1397,7 +1449,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda173", @@ -1409,6 +1461,7 @@ } }, "0320": { + "id": "0320", "image_table_indices": { "1": "351", "2": "42", @@ -1436,6 +1489,7 @@ } }, "0321": { + "id": "0321", "image_table_indices": { "1": "352", "2": "183", @@ -1463,6 +1517,7 @@ } }, "0323": { + "id": "0323", "image_table_indices": { "1": "-1", "2": "-1", @@ -1492,6 +1547,7 @@ }, "04": { "0400": { + "id": "0400", "image_table_indices": { "1": "392", "2": "549", @@ -1507,7 +1563,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1519,6 +1575,7 @@ } }, "0401": { + "id": "0401", "image_table_indices": { "1": "393", "2": "115", @@ -1534,7 +1591,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda175", @@ -1546,6 +1603,7 @@ } }, "0402": { + "id": "0402", "image_table_indices": { "1": "1", "2": "-1", @@ -1561,7 +1619,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1573,6 +1631,7 @@ } }, "0403": { + "id": "0403", "image_table_indices": { "1": "116", "2": "124", @@ -1588,7 +1647,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1600,6 +1659,7 @@ } }, "0404": { + "id": "0404", "image_table_indices": { "1": "170", "2": "117", @@ -1615,7 +1675,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda178", @@ -1627,6 +1687,7 @@ } }, "0405": { + "id": "0405", "image_table_indices": { "1": "-1", "2": "-1", @@ -1654,6 +1715,7 @@ } }, "0406": { + "id": "0406", "image_table_indices": { "1": "-1", "2": "-1", @@ -1681,6 +1743,7 @@ } }, "0408": { + "id": "0408", "image_table_indices": { "1": "184", "2": "354", @@ -1708,6 +1771,7 @@ } }, "0409": { + "id": "0409", "image_table_indices": { "1": "188", "2": "47", @@ -1735,6 +1799,7 @@ } }, "0410": { + "id": "0410", "image_table_indices": { "1": "50", "2": "197", @@ -1762,6 +1827,7 @@ } }, "0411": { + "id": "0411", "image_table_indices": { "1": "-1", "2": "-1", @@ -1789,6 +1855,7 @@ } }, "0413": { + "id": "0413", "image_table_indices": { "1": "-1", "2": "-1", @@ -1816,6 +1883,7 @@ } }, "0414": { + "id": "0414", "image_table_indices": { "1": "-1", "2": "-1", @@ -1843,6 +1911,7 @@ } }, "0415": { + "id": "0415", "image_table_indices": { "1": "-1", "2": "-1", @@ -1870,6 +1939,7 @@ } }, "0416": { + "id": "0416", "image_table_indices": { "1": "266", "2": "311", @@ -1897,6 +1967,7 @@ } }, "0417": { + "id": "0417", "image_table_indices": { "1": "194", "2": "397", @@ -1912,7 +1983,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -1924,6 +1995,7 @@ } }, "0418": { + "id": "0418", "image_table_indices": { "1": "400", "2": "284", @@ -1939,7 +2011,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda180", @@ -1951,6 +2023,7 @@ } }, "0419": { + "id": "0419", "image_table_indices": { "1": "425", "2": "421", @@ -1978,6 +2051,7 @@ } }, "0420": { + "id": "0420", "image_table_indices": { "1": "51", "2": "357", @@ -2005,6 +2079,7 @@ } }, "0421": { + "id": "0421", "image_table_indices": { "1": "10", "2": "-1", @@ -2032,6 +2107,7 @@ } }, "0422": { + "id": "0422", "image_table_indices": { "1": "358", "2": "201", @@ -2059,6 +2135,7 @@ } }, "0423": { + "id": "0423", "image_table_indices": { "1": "126", "2": "77", @@ -2088,6 +2165,7 @@ }, "05": { "0500": { + "id": "0500", "image_table_indices": { "1": "321", "2": "308", @@ -2115,6 +2193,7 @@ } }, "0501": { + "id": "0501", "image_table_indices": { "1": "301", "2": "302", @@ -2142,6 +2221,7 @@ } }, "0502": { + "id": "0502", "image_table_indices": { "1": "402", "2": "120", @@ -2157,7 +2237,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -2169,6 +2249,7 @@ } }, "0503": { + "id": "0503", "image_table_indices": { "1": "121", "2": "403", @@ -2184,7 +2265,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda182", @@ -2196,6 +2277,7 @@ } }, "0504": { + "id": "0504", "image_table_indices": { "1": "202", "2": "359", @@ -2223,6 +2305,7 @@ } }, "0505": { + "id": "0505", "image_table_indices": { "1": "206", "2": "54", @@ -2250,6 +2333,7 @@ } }, "0506": { + "id": "0506", "image_table_indices": { "1": "55", "2": "207", @@ -2277,6 +2361,7 @@ } }, "0507": { + "id": "0507", "image_table_indices": { "1": "56", "2": "377", @@ -2304,6 +2389,7 @@ } }, "0508": { + "id": "0508", "image_table_indices": { "1": "304", "2": "300", @@ -2331,6 +2417,7 @@ } }, "0509": { + "id": "0509", "image_table_indices": { "1": "303", "2": "281", @@ -2358,6 +2445,7 @@ } }, "0510": { + "id": "0510", "image_table_indices": { "1": "307", "2": "309", @@ -2385,6 +2473,7 @@ } }, "0511": { + "id": "0511", "image_table_indices": { "1": "123", "2": "327", @@ -2400,7 +2489,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -2412,6 +2501,7 @@ } }, "0512": { + "id": "0512", "image_table_indices": { "1": "409", "2": "125", @@ -2427,7 +2517,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda184", @@ -2439,6 +2529,7 @@ } }, "0513": { + "id": "0513", "image_table_indices": { "1": "278", "2": "263", @@ -2466,6 +2557,7 @@ } }, "0514": { + "id": "0514", "image_table_indices": { "1": "264", "2": "269", @@ -2493,6 +2585,7 @@ } }, "0517": { + "id": "0517", "image_table_indices": { "1": "166", "2": "165", @@ -2520,6 +2613,7 @@ } }, "0518": { + "id": "0518", "image_table_indices": { "1": "159", "2": "143", @@ -2547,6 +2641,7 @@ } }, "0519": { + "id": "0519", "image_table_indices": { "1": "78", "2": "138", @@ -2574,6 +2669,7 @@ } }, "0520": { + "id": "0520", "image_table_indices": { "1": "267", "2": "171", @@ -2601,6 +2697,7 @@ } }, "0521": { + "id": "0521", "image_table_indices": { "1": "410", "2": "407", @@ -2616,7 +2713,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -2628,6 +2725,7 @@ } }, "0522": { + "id": "0522", "image_table_indices": { "1": "-1", "2": "-1", @@ -2655,6 +2753,7 @@ } }, "0523": { + "id": "0523", "image_table_indices": { "1": "-1", "2": "-1", @@ -2684,6 +2783,7 @@ }, "06": { "0600": { + "id": "0600", "image_table_indices": { "1": "26", "2": "80", @@ -2711,6 +2811,7 @@ } }, "0601": { + "id": "0601", "image_table_indices": { "1": "-1", "2": "-1", @@ -2738,6 +2839,7 @@ } }, "0603": { + "id": "0603", "image_table_indices": { "1": "315", "2": "185", @@ -2765,6 +2867,7 @@ } }, "0604": { + "id": "0604", "image_table_indices": { "1": "-1", "2": "-1", @@ -2792,6 +2895,7 @@ } }, "0605": { + "id": "0605", "image_table_indices": { "1": "-1", "2": "-1", @@ -2819,6 +2923,7 @@ } }, "0606": { + "id": "0606", "image_table_indices": { "1": "79", "2": "25", @@ -2846,6 +2951,7 @@ } }, "0607": { + "id": "0607", "image_table_indices": { "1": "178", "2": "270", @@ -2873,6 +2979,7 @@ } }, "0608": { + "id": "0608", "image_table_indices": { "1": "-1", "2": "-1", @@ -2900,6 +3007,7 @@ } }, "0609": { + "id": "0609", "image_table_indices": { "1": "-1", "2": "-1", @@ -2927,6 +3035,7 @@ } }, "0610": { + "id": "0610", "image_table_indices": { "1": "378", "2": "57", @@ -2954,6 +3063,7 @@ } }, "0611": { + "id": "0611", "image_table_indices": { "1": "379", "2": "226", @@ -2981,6 +3091,7 @@ } }, "0613": { + "id": "0613", "image_table_indices": { "1": "408", "2": "411", @@ -2996,7 +3107,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -3008,6 +3119,7 @@ } }, "0614": { + "id": "0614", "image_table_indices": { "1": "438", "2": "128", @@ -3023,7 +3135,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -3035,6 +3147,7 @@ } }, "0616": { + "id": "0616", "image_table_indices": { "1": "227", "2": "384", @@ -3062,6 +3175,7 @@ } }, "0617": { + "id": "0617", "image_table_indices": { "1": "27", "2": "141", @@ -3089,6 +3203,7 @@ } }, "0618": { + "id": "0618", "image_table_indices": { "1": "181", "2": "314", @@ -3116,6 +3231,7 @@ } }, "0619": { + "id": "0619", "image_table_indices": { "1": "316", "2": "273", @@ -3143,6 +3259,7 @@ } }, "0620": { + "id": "0620", "image_table_indices": { "1": "274", "2": "317", @@ -3170,6 +3287,7 @@ } }, "0621": { + "id": "0621", "image_table_indices": { "1": "-1", "2": "-1", @@ -3197,6 +3315,7 @@ } }, "0622": { + "id": "0622", "image_table_indices": { "1": "129", "2": "439", @@ -3212,7 +3331,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -3224,6 +3343,7 @@ } }, "0623": { + "id": "0623", "image_table_indices": { "1": "130", "2": "419", @@ -3239,7 +3359,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda189", @@ -3253,6 +3373,7 @@ }, "07": { "0700": { + "id": "0700", "image_table_indices": { "1": "2", "2": "-1", @@ -3268,7 +3389,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -3280,6 +3401,7 @@ } }, "0701": { + "id": "0701", "image_table_indices": { "1": "422", "2": "463", @@ -3295,7 +3417,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda192", @@ -3307,6 +3429,7 @@ } }, "0702": { + "id": "0702", "image_table_indices": { "1": "470", "2": "423", @@ -3322,7 +3445,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda193", @@ -3334,6 +3457,7 @@ } }, "0703": { + "id": "0703", "image_table_indices": { "1": "237", "2": "60", @@ -3361,6 +3485,7 @@ } }, "0705": { + "id": "0705", "image_table_indices": { "1": "275", "2": "189", @@ -3388,6 +3513,7 @@ } }, "0706": { + "id": "0706", "image_table_indices": { "1": "85", "2": "145", @@ -3415,6 +3541,7 @@ } }, "0707": { + "id": "0707", "image_table_indices": { "1": "420", "2": "131", @@ -3430,7 +3557,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda190", @@ -3442,6 +3569,7 @@ } }, "0708": { + "id": "0708", "image_table_indices": { "1": "-1", "2": "-1", @@ -3469,6 +3597,7 @@ } }, "0709": { + "id": "0709", "image_table_indices": { "1": "-1", "2": "-1", @@ -3496,6 +3625,7 @@ } }, "0710": { + "id": "0710", "image_table_indices": { "1": "471", "2": "135", @@ -3511,7 +3641,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda194", @@ -3523,6 +3653,7 @@ } }, "0711": { + "id": "0711", "image_table_indices": { "1": "137", "2": "472", @@ -3538,7 +3669,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda195", @@ -3550,6 +3681,7 @@ } }, "0713": { + "id": "0713", "image_table_indices": { "1": "-1", "2": "-1", @@ -3577,6 +3709,7 @@ } }, "0714": { + "id": "0714", "image_table_indices": { "1": "-1", "2": "-1", @@ -3604,6 +3737,7 @@ } }, "0715": { + "id": "0715", "image_table_indices": { "1": "-1", "2": "-1", @@ -3631,6 +3765,7 @@ } }, "0716": { + "id": "0716", "image_table_indices": { "1": "-1", "2": "-1", @@ -3658,6 +3793,7 @@ } }, "0717": { + "id": "0717", "image_table_indices": { "1": "142", "2": "30", @@ -3685,6 +3821,7 @@ } }, "0718": { + "id": "0718", "image_table_indices": { "1": "144", "2": "84", @@ -3712,6 +3849,7 @@ } }, "0719": { + "id": "0719", "image_table_indices": { "1": "-1", "2": "-1", @@ -3739,6 +3877,7 @@ } }, "0720": { + "id": "0720", "image_table_indices": { "1": "150", "2": "428", @@ -3754,7 +3893,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -3766,6 +3905,7 @@ } }, "0721": { + "id": "0721", "image_table_indices": { "1": "429", "2": "154", @@ -3781,7 +3921,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -3793,6 +3933,7 @@ } }, "0722": { + "id": "0722", "image_table_indices": { "1": "-1", "2": "-1", @@ -3820,6 +3961,7 @@ } }, "0723": { + "id": "0723", "image_table_indices": { "1": "61", "2": "238", @@ -3849,6 +3991,7 @@ }, "08": { "0800": { + "id": "0800", "image_table_indices": { "1": "190", "2": "276", @@ -3876,6 +4019,7 @@ } }, "0801": { + "id": "0801", "image_table_indices": { "1": "-1", "2": "-1", @@ -3903,6 +4047,7 @@ } }, "0802": { + "id": "0802", "image_table_indices": { "1": "86", "2": "33", @@ -3930,6 +4075,7 @@ } }, "0803": { + "id": "0803", "image_table_indices": { "1": "-1", "2": "-1", @@ -3957,6 +4103,7 @@ } }, "0804": { + "id": "0804", "image_table_indices": { "1": "-1", "2": "-1", @@ -3984,6 +4131,7 @@ } }, "0805": { + "id": "0805", "image_table_indices": { "1": "430", "2": "476", @@ -3999,7 +4147,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4011,6 +4159,7 @@ } }, "0806": { + "id": "0806", "image_table_indices": { "1": "3", "2": "-1", @@ -4026,7 +4175,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4038,6 +4187,7 @@ } }, "0807": { + "id": "0807", "image_table_indices": { "1": "502", "2": "507", @@ -4065,6 +4215,7 @@ } }, "0808": { + "id": "0808", "image_table_indices": { "1": "499", "2": "500", @@ -4092,6 +4243,7 @@ } }, "0809": { + "id": "0809", "image_table_indices": { "1": "486", "2": "486", @@ -4119,6 +4271,7 @@ } }, "0810": { + "id": "0810", "image_table_indices": { "1": "-1", "2": "-1", @@ -4146,6 +4299,7 @@ } }, "0811": { + "id": "0811", "image_table_indices": { "1": "-1", "2": "-1", @@ -4173,6 +4327,7 @@ } }, "0812": { + "id": "0812", "image_table_indices": { "1": "-1", "2": "-1", @@ -4200,6 +4355,7 @@ } }, "0813": { + "id": "0813", "image_table_indices": { "1": "-1", "2": "-1", @@ -4227,6 +4383,7 @@ } }, "0814": { + "id": "0814", "image_table_indices": { "1": "483", "2": "156", @@ -4242,7 +4399,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4254,6 +4411,7 @@ } }, "0815": { + "id": "0815", "image_table_indices": { "1": "163", "2": "484", @@ -4269,7 +4427,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda201", @@ -4281,6 +4439,7 @@ } }, "0816": { + "id": "0816", "image_table_indices": { "1": "164", "2": "433", @@ -4296,7 +4455,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4308,6 +4467,7 @@ } }, "0817": { + "id": "0817", "image_table_indices": { "1": "434", "2": "203", @@ -4323,7 +4483,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda203", @@ -4335,6 +4495,7 @@ } }, "0818": { + "id": "0818", "image_table_indices": { "1": "435", "2": "488", @@ -4350,7 +4511,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4362,6 +4523,7 @@ } }, "0819": { + "id": "0819", "image_table_indices": { "1": "34", "2": "87", @@ -4389,6 +4551,7 @@ } }, "0820": { + "id": "0820", "image_table_indices": { "1": "-1", "2": "-1", @@ -4416,6 +4579,7 @@ } }, "0821": { + "id": "0821", "image_table_indices": { "1": "191", "2": "325", @@ -4443,6 +4607,7 @@ } }, "0822": { + "id": "0822", "image_table_indices": { "1": "328", "2": "192", @@ -4470,6 +4635,7 @@ } }, "0823": { + "id": "0823", "image_table_indices": { "1": "-1", "2": "-1", @@ -4499,6 +4665,7 @@ }, "09": { "0900": { + "id": "0900", "image_table_indices": { "1": "489", "2": "436", @@ -4514,7 +4681,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4526,6 +4693,7 @@ } }, "0901": { + "id": "0901", "image_table_indices": { "1": "490", "2": "211", @@ -4541,7 +4709,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda206", @@ -4553,6 +4721,7 @@ } }, "0902": { + "id": "0902", "image_table_indices": { "1": "213", "2": "491", @@ -4568,7 +4737,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4580,6 +4749,7 @@ } }, "0903": { + "id": "0903", "image_table_indices": { "1": "-1", "2": "-1", @@ -4607,6 +4777,7 @@ } }, "0904": { + "id": "0904", "image_table_indices": { "1": "-1", "2": "-1", @@ -4634,6 +4805,7 @@ } }, "0905": { + "id": "0905", "image_table_indices": { "1": "62", "2": "398", @@ -4661,6 +4833,7 @@ } }, "0906": { + "id": "0906", "image_table_indices": { "1": "399", "2": "63", @@ -4688,6 +4861,7 @@ } }, "0907": { + "id": "0907", "image_table_indices": { "1": "330", "2": "286", @@ -4715,6 +4889,7 @@ } }, "0908": { + "id": "0908", "image_table_indices": { "1": "37", "2": "148", @@ -4742,6 +4917,7 @@ } }, "0909": { + "id": "0909", "image_table_indices": { "1": "215", "2": "441", @@ -4757,7 +4933,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4769,6 +4945,7 @@ } }, "0910": { + "id": "0910", "image_table_indices": { "1": "442", "2": "216", @@ -4784,7 +4961,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -4796,6 +4973,7 @@ } }, "0911": { + "id": "0911", "image_table_indices": { "1": "446", "2": "494", @@ -4811,7 +4989,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda210", @@ -4823,6 +5001,7 @@ } }, "0912": { + "id": "0912", "image_table_indices": { "1": "-1", "2": "-1", @@ -4850,6 +5029,7 @@ } }, "0913": { + "id": "0913", "image_table_indices": { "1": "11", "2": "-1", @@ -4877,6 +5057,7 @@ } }, "0914": { + "id": "0914", "image_table_indices": { "1": "249", "2": "406", @@ -4904,6 +5085,7 @@ } }, "0915": { + "id": "0915", "image_table_indices": { "1": "287", "2": "331", @@ -4931,6 +5113,7 @@ } }, "0916": { + "id": "0916", "image_table_indices": { "1": "288", "2": "196", @@ -4958,6 +5141,7 @@ } }, "0917": { + "id": "0917", "image_table_indices": { "1": "149", "2": "38", @@ -4985,6 +5169,7 @@ } }, "0919": { + "id": "0919", "image_table_indices": { "1": "4", "2": "-1", @@ -5000,7 +5185,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -5012,6 +5197,7 @@ } }, "0920": { + "id": "0920", "image_table_indices": { "1": "-1", "2": "-1", @@ -5039,6 +5225,7 @@ } }, "0922": { + "id": "0922", "image_table_indices": { "1": "-1", "2": "-1", @@ -5066,6 +5253,7 @@ } }, "0923": { + "id": "0923", "image_table_indices": { "1": "253", "2": "65", @@ -5095,6 +5283,7 @@ }, "10": { "1000": { + "id": "1000", "image_table_indices": { "1": "-1", "2": "-1", @@ -5122,6 +5311,7 @@ } }, "1001": { + "id": "1001", "image_table_indices": { "1": "66", "2": "254", @@ -5149,6 +5339,7 @@ } }, "1002": { + "id": "1002", "image_table_indices": { "1": "67", "2": "414", @@ -5176,6 +5367,7 @@ } }, "1003": { + "id": "1003", "image_table_indices": { "1": "495", "2": "221", @@ -5191,7 +5383,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -5203,6 +5395,7 @@ } }, "1004": { + "id": "1004", "image_table_indices": { "1": "222", "2": "496", @@ -5218,7 +5411,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda213", @@ -5230,6 +5423,7 @@ } }, "1006": { + "id": "1006", "image_table_indices": { "1": "-1", "2": "-1", @@ -5257,6 +5451,7 @@ } }, "1007": { + "id": "1007", "image_table_indices": { "1": "-1", "2": "-1", @@ -5284,6 +5479,7 @@ } }, "1008": { + "id": "1008", "image_table_indices": { "1": "223", "2": "449", @@ -5299,7 +5495,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -5311,6 +5507,7 @@ } }, "1009": { + "id": "1009", "image_table_indices": { "1": "450", "2": "225", @@ -5326,7 +5523,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda215", @@ -5338,6 +5535,7 @@ } }, "1010": { + "id": "1010", "image_table_indices": { "1": "-1", "2": "-1", @@ -5365,6 +5563,7 @@ } }, "1011": { + "id": "1011", "image_table_indices": { "1": "-1", "2": "-1", @@ -5392,6 +5591,7 @@ } }, "1012": { + "id": "1012", "image_table_indices": { "1": "418", "2": "68", @@ -5419,6 +5619,7 @@ } }, "1013": { + "id": "1013", "image_table_indices": { "1": "-1", "2": "-1", @@ -5446,6 +5647,7 @@ } }, "1015": { + "id": "1015", "image_table_indices": { "1": "503", "2": "506", @@ -5473,6 +5675,7 @@ } }, "1016": { + "id": "1016", "image_table_indices": { "1": "451", "2": "518", @@ -5488,7 +5691,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -5500,6 +5703,7 @@ } }, "1017": { + "id": "1017", "image_table_indices": { "1": "519", "2": "452", @@ -5515,7 +5719,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -5527,6 +5731,7 @@ } }, "1018": { + "id": "1018", "image_table_indices": { "1": "520", "2": "231", @@ -5542,7 +5747,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda218", @@ -5554,6 +5759,7 @@ } }, "1019": { + "id": "1019", "image_table_indices": { "1": "199", "2": "290", @@ -5581,6 +5787,7 @@ } }, "1020": { + "id": "1020", "image_table_indices": { "1": "200", "2": "338", @@ -5608,6 +5815,7 @@ } }, "1021": { + "id": "1021", "image_table_indices": { "1": "424", "2": "257", @@ -5635,6 +5843,7 @@ } }, "1022": { + "id": "1022", "image_table_indices": { "1": "151", "2": "90", @@ -5664,6 +5873,7 @@ }, "11": { "1102": { + "id": "1102", "image_table_indices": { "1": "233", "2": "521", @@ -5679,7 +5889,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda191", @@ -5691,6 +5901,7 @@ } }, "1103": { + "id": "1103", "image_table_indices": { "1": "455", "2": "239", @@ -5706,7 +5917,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -5718,6 +5929,7 @@ } }, "1104": { + "id": "1104", "image_table_indices": { "1": "458", "2": "523", @@ -5733,7 +5945,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda221", @@ -5745,6 +5957,7 @@ } }, "1105": { + "id": "1105", "image_table_indices": { "1": "5", "2": "-1", @@ -5760,7 +5973,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -5772,6 +5985,7 @@ } }, "1106": { + "id": "1106", "image_table_indices": { "1": "258", "2": "443", @@ -5799,6 +6013,7 @@ } }, "1107": { + "id": "1107", "image_table_indices": { "1": "259", "2": "71", @@ -5826,6 +6041,7 @@ } }, "1108": { + "id": "1108", "image_table_indices": { "1": "91", "2": "158", @@ -5853,6 +6069,7 @@ } }, "1109": { + "id": "1109", "image_table_indices": { "1": "340", "2": "235", @@ -5880,6 +6097,7 @@ } }, "1110": { + "id": "1110", "image_table_indices": { "1": "341", "2": "293", @@ -5907,6 +6125,7 @@ } }, "1111": { + "id": "1111", "image_table_indices": { "1": "-1", "2": "-1", @@ -5934,6 +6153,7 @@ } }, "1113": { + "id": "1113", "image_table_indices": { "1": "524", "2": "243", @@ -5949,7 +6169,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda223", @@ -5961,6 +6181,7 @@ } }, "1114": { + "id": "1114", "image_table_indices": { "1": "244", "2": "525", @@ -5976,7 +6197,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -5988,6 +6209,7 @@ } }, "1115": { + "id": "1115", "image_table_indices": { "1": "72", "2": "260", @@ -6015,6 +6237,7 @@ } }, "1116": { + "id": "1116", "image_table_indices": { "1": "73", "2": "456", @@ -6042,6 +6265,7 @@ } }, "1117": { + "id": "1117", "image_table_indices": { "1": "467", "2": "528", @@ -6057,7 +6281,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -6069,6 +6293,7 @@ } }, "1118": { + "id": "1118", "image_table_indices": { "1": "6", "2": "-1", @@ -6084,7 +6309,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -6096,6 +6321,7 @@ } }, "1119": { + "id": "1119", "image_table_indices": { "1": "-1", "2": "-1", @@ -6123,6 +6349,7 @@ } }, "1120": { + "id": "1120", "image_table_indices": { "1": "-1", "2": "-1", @@ -6150,6 +6377,7 @@ } }, "1121": { + "id": "1121", "image_table_indices": { "1": "457", "2": "74", @@ -6177,6 +6405,7 @@ } }, "1122": { + "id": "1122", "image_table_indices": { "1": "246", "2": "465", @@ -6192,7 +6421,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda225", @@ -6204,6 +6433,7 @@ } }, "1123": { + "id": "1123", "image_table_indices": { "1": "466", "2": "247", @@ -6219,7 +6449,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -6233,6 +6463,7 @@ }, "12": { "1200": { + "id": "1200", "image_table_indices": { "1": "36", "2": "39", @@ -6260,6 +6491,7 @@ } }, "1201": { + "id": "1201", "image_table_indices": { "1": "529", "2": "530", @@ -6287,6 +6519,7 @@ } }, "1203": { + "id": "1203", "image_table_indices": { "1": "-1", "2": "-1", @@ -6314,6 +6547,7 @@ } }, "1204": { + "id": "1204", "image_table_indices": { "1": "-1", "2": "-1", @@ -6341,6 +6575,7 @@ } }, "1205": { + "id": "1205", "image_table_indices": { "1": "468", "2": "268", @@ -6368,6 +6603,7 @@ } }, "1206": { + "id": "1206", "image_table_indices": { "1": "-1", "2": "-1", @@ -6395,6 +6631,7 @@ } }, "1207": { + "id": "1207", "image_table_indices": { "1": "-1", "2": "-1", @@ -6422,6 +6659,7 @@ } }, "1209": { + "id": "1209", "image_table_indices": { "1": "-1", "2": "-1", @@ -6449,6 +6687,7 @@ } }, "1210": { + "id": "1210", "image_table_indices": { "1": "-1", "2": "-1", @@ -6476,6 +6715,7 @@ } }, "1212": { + "id": "1212", "image_table_indices": { "1": "-1", "2": "-1", @@ -6503,6 +6743,7 @@ } }, "1214": { + "id": "1214", "image_table_indices": { "1": "12", "2": "-1", @@ -6530,6 +6771,7 @@ } }, "1215": { + "id": "1215", "image_table_indices": { "1": "-1", "2": "-1", @@ -6557,6 +6799,7 @@ } }, "1218": { + "id": "1218", "image_table_indices": { "1": "-1", "2": "-1", @@ -6584,6 +6827,7 @@ } }, "1219": { + "id": "1219", "image_table_indices": { "1": "481", "2": "482", @@ -6611,6 +6855,7 @@ } }, "1220": { + "id": "1220", "image_table_indices": { "1": "-1", "2": "-1", @@ -6638,6 +6883,7 @@ } }, "1221": { + "id": "1221", "image_table_indices": { "1": "-1", "2": "-1", @@ -6667,6 +6913,7 @@ }, "13": { "1300": { + "id": "1300", "image_table_indices": { "1": "7", "2": "-1", @@ -6682,7 +6929,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "", @@ -6694,6 +6941,7 @@ } }, "1301": { + "id": "1301", "image_table_indices": { "1": "299", "2": "531", @@ -6709,7 +6957,7 @@ }, "required_final_video_viewcount": 1, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda230", @@ -6721,6 +6969,7 @@ } }, "1302": { + "id": "1302", "image_table_indices": { "1": "8", "2": "-1", @@ -6736,7 +6985,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda230", @@ -6748,6 +6997,7 @@ } }, "1303": { + "id": "1303", "image_table_indices": { "1": "-1", "2": "-1", @@ -6775,6 +7025,7 @@ } }, "1304": { + "id": "1304", "image_table_indices": { "1": "-1", "2": "-1", @@ -6802,6 +7053,7 @@ } }, "1305": { + "id": "1305", "image_table_indices": { "1": "-1", "2": "-1", @@ -6829,6 +7081,7 @@ } }, "1306": { + "id": "1306", "image_table_indices": { "1": "-1", "2": "-1", @@ -6856,6 +7109,7 @@ } }, "1309": { + "id": "1309", "image_table_indices": { "1": "474", "2": "76", @@ -6871,7 +7125,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda230", @@ -6883,6 +7137,7 @@ } }, "1310": { + "id": "1310", "image_table_indices": { "1": "477", "2": "533", @@ -6898,7 +7153,7 @@ }, "required_final_video_viewcount": 2, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda230", @@ -6910,6 +7165,7 @@ } }, "1311": { + "id": "1311", "image_table_indices": { "1": "534", "2": "478", @@ -6925,7 +7181,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda230", @@ -6937,6 +7193,7 @@ } }, "1312": { + "id": "1312", "image_table_indices": { "1": "-1", "2": "-1", @@ -6964,6 +7221,7 @@ } }, "1313": { + "id": "1313", "image_table_indices": { "1": "-1", "2": "-1", @@ -6991,6 +7249,7 @@ } }, "1315": { + "id": "1315", "image_table_indices": { "1": "-1", "2": "-1", @@ -7018,6 +7277,7 @@ } }, "1316": { + "id": "1316", "image_table_indices": { "1": "-1", "2": "-1", @@ -7045,6 +7305,7 @@ } }, "1319": { + "id": "1319", "image_table_indices": { "1": "535", "2": "252", @@ -7060,7 +7321,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 0, "type": 0, "unlocked_by": "Lda230", @@ -7072,6 +7333,7 @@ } }, "1320": { + "id": "1320", "image_table_indices": { "1": "556", "2": "557", @@ -7087,7 +7349,7 @@ }, "required_final_video_viewcount": 0, "site": "B", - "title": "", + "title": "lain's DIARY", "triggers_final_video": 1, "type": 0, "unlocked_by": "Lda230", @@ -7099,6 +7361,7 @@ } }, "1321": { + "id": "1321", "image_table_indices": { "1": "-1", "2": "-1", diff --git a/src/scenes/EndScene.tsx b/src/scenes/EndScene.tsx index 242a244..70366f7 100644 --- a/src/scenes/EndScene.tsx +++ b/src/scenes/EndScene.tsx @@ -1,14 +1,11 @@ import React, { useEffect, useRef, useState } from "react"; import * as THREE from "three"; import { useFrame } from "react-three-fiber"; -import EndCylinder from "../components/EndScene/EndCylinder"; -import EndSphere from "../components/EndScene/EndSphere"; -import LainSpeak from "../components/LainSpeak"; -import { useEndSceneStore, useMediaStore } from "../store"; +import { useEndSceneStore, useMainSceneStore } from "../store"; import EndSelectionScreen from "../components/EndScene/EndSelectionScreen"; const EndScene = () => { - const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser); + const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser); const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount); diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 7e30321..5648656 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -1,16 +1,12 @@ import { a } from "@react-spring/three"; import { OrbitControls } from "@react-three/drei"; import React, { Suspense, useEffect, useMemo } from "react"; -import Site from "../components/MainScene/SyncedComponents/Site"; import Lain from "../components/MainScene/Lain"; import Preloader from "../components/Preloader"; -import MiddleRing from "../components/MainScene/SyncedComponents/MiddleRing"; import { useMainSceneStore } from "../store"; import Pause from "../components/MainScene/PauseSubscene/Pause"; import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader"; import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection"; -import NodeExplosion from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion"; -import NodeRip from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip"; const MainScene = () => { const currentSubscene = useMainSceneStore((state) => state.subscene); @@ -31,6 +27,7 @@ const MainScene = () => { + diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx index cc2a45d..100cd56 100644 --- a/src/scenes/MediaScene.tsx +++ b/src/scenes/MediaScene.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect } from "react"; -import { useMainSceneStore, useMediaStore } from "../store"; +import { useMainSceneStore } from "../store"; import LeftSide from "../components/MediaScene/Selectables/LeftSide"; import RightSide from "../components/MediaScene/Selectables/RightSide"; import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer"; @@ -12,10 +12,6 @@ import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextA import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager"; const MediaScene = () => { - const mediaComponentMatrixIndices = useMediaStore( - (state) => state.componentMatrixIndices - ); - const activeNodeName = useMainSceneStore((state) => state.activeNode.node_name.split("") ); @@ -23,15 +19,15 @@ const MediaScene = () => { (state) => state.activeNode.media_file ); - const activeMediaComponent = useMediaStore( + const activeMediaComponent = useMainSceneStore( useCallback( (state) => - state.componentMatrix[mediaComponentMatrixIndices.sideIdx][ - mediaComponentMatrixIndices.sideIdx === 0 - ? mediaComponentMatrixIndices.leftSideIdx - : mediaComponentMatrixIndices.rightSideIdx + state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][ + state.mediaComponentMatrixIndices.sideIdx === 0 + ? state.mediaComponentMatrixIndices.leftSideIdx + : state.mediaComponentMatrixIndices.rightSideIdx ], - [mediaComponentMatrixIndices] + [] ) ); @@ -48,7 +44,7 @@ const MediaScene = () => { - + @@ -61,7 +57,7 @@ const MediaScene = () => { - + diff --git a/src/scenes/SSknScene.tsx b/src/scenes/SSknScene.tsx index bc012eb..7826e2c 100644 --- a/src/scenes/SSknScene.tsx +++ b/src/scenes/SSknScene.tsx @@ -2,7 +2,7 @@ import React, { useCallback } from "react"; import SSknIcon from "../components/SSknScene/SSknIcon"; import SSknBackground from "../components/SSknScene/SSknBackground"; import SSknHUD from "../components/SSknScene/SSknHUD"; -import { useMediaStore, useSSknStore } from "../store"; +import { useSSknStore } from "../store"; import SSknSceneManager from "../core/StateManagers/SSknSceneManager"; const SSknScene = () => { diff --git a/src/scenes/TaKScene.tsx b/src/scenes/TaKScene.tsx index fbf4985..cce8f69 100644 --- a/src/scenes/TaKScene.tsx +++ b/src/scenes/TaKScene.tsx @@ -1,16 +1,16 @@ import React, { useEffect, useState } from "react"; import LainSpeak from "../components/LainSpeak"; import * as THREE from "three"; -import { useMediaStore, useSceneStore } from "../store"; +import { useMainSceneStore, useSceneStore } from "../store"; const TaKScene = () => { - const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser); + const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser); const setScene = useSceneStore((state) => state.setScene); const [isIntro, setIsIntro] = useState(true); const [isOutro, setIsOutro] = useState(false); - const percentageElapsed = useMediaStore( + const percentageElapsed = useMainSceneStore( (state) => state.mediaPercentageElapsed ); diff --git a/src/store.ts b/src/store.ts index 9f66aab..4cd9f15 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,8 +1,6 @@ import create from "zustand"; import { combine } from "zustand/middleware"; import * as THREE from "three"; -import site_a from "./resources/site_a.json"; -import site_b from "./resources/site_b.json"; import authorize_user_letters from "./resources/authorize_user_letters.json"; import game_progress from "./resources/initial_progress.json"; import { HUDType } from "./components/MainScene/SyncedComponents/HUD"; @@ -40,21 +38,6 @@ type SiteSaveState = { }; }; -type PauseState = { - exitAnimation: boolean; - componentMatrix: string[]; - componentMatrixIdx: number; - setComponentMatrixIdx: (to: number) => void; - setExitAnimation: (to: boolean) => void; -}; - -type LevelSelectionState = { - selectedLevel: number; - levelSelectionToggled: number; - setSelectedLevel: (to: number) => void; - toggleLevelSelection: () => void; -}; - type SceneState = { currentScene: string; setScene: (to: string) => void; @@ -179,62 +162,6 @@ export const useIdleStore = create((set) => ({ setImages: (to) => set(() => ({ images: to })), })); -export const useMediaStore = create( - combine( - { - audioAnalyser: undefined, - mediaPercentageElapsed: 0, - componentMatrix: [ - ["play", "exit"], - ["fstWord", "sndWord", "thirdWord"], - ], - componentMatrixIndices: { - // 0 or 1 (left/right) - sideIdx: 0, - // 0 or 1 ("play" or "exit") - leftSideIdx: 0, - // 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord") - rightSideIdx: 0, - }, - } as MediaState, - (set) => ({ - toggleSide: () => - set((state) => ({ - componentMatrixIndices: { - ...state.componentMatrixIndices, - sideIdx: Number(!state.componentMatrixIndices.sideIdx), - }, - })), - setLeftComponentMatrixIdx: (to: number) => - set((state) => ({ - componentMatrixIndices: { - ...state.componentMatrixIndices, - leftSideIdx: to, - }, - })), - setRightComponentMatrixIdx: (to: number) => - set((state) => ({ - componentMatrixIndices: { - ...state.componentMatrixIndices, - rightSideIdx: to, - }, - })), - resetComponentMatrixIndices: () => - set(() => ({ - componentMatrixIndices: { - sideIdx: 0, - leftSideIdx: 0, - rightSideIdx: 0, - }, - })), - setPercentageElapsed: (to: number) => - set(() => ({ mediaPercentageElapsed: to })), - setAudioAnalyser: (to: THREE.AudioAnalyser) => - set(() => ({ audioAnalyser: to })), - }) - ) -); - export const useMediaWordStore = create((set) => ({ posStateIdx: 1, setPosStateIdx: (to) => set(() => ({ posStateIdx: to })), @@ -252,7 +179,7 @@ export const useSSknStore = create((set) => ({ })); export const useSceneStore = create((set) => ({ - currentScene: "main", + currentScene: "media", setScene: (to) => set(() => ({ currentScene: to })), })); @@ -331,6 +258,16 @@ type MainSceneState = { pauseComponentMatrix: [string, string, string, string, string]; pauseComponentMatrixIdx: number; pauseExitAnimation: boolean; + + // media/media scene + audioAnalyser: undefined | THREE.AudioAnalyser; + mediaPercentageElapsed: number; + mediaComponentMatrix: [[string, string], [string, string, string]]; + mediaComponentMatrixIndices: { + sideIdx: 0 | 1; + leftSideIdx: 0 | 1; + rightSideIdx: 0 | 1 | 2; + }; }; export const useMainSceneStore = create( @@ -349,7 +286,7 @@ export const useMainSceneStore = create( bigText: "Tda028", bigTextVisible: true, bigTextColor: "yellow", - bigTextPos: [-0.35, 0.23, 0], + bigTextPos: [-0.35, 0.23, -8.7], bigTextXOffset: 0, // hud @@ -377,6 +314,7 @@ export const useMainSceneStore = create( // nodes activeNode: { + id: "0422", image_table_indices: { "1": "93", "2": "356", @@ -435,12 +373,27 @@ export const useMainSceneStore = create( // level selection selectedLevel: 4, - levelSelectionToggled: false, // pause pauseComponentMatrix: ["load", "about", "change", "save", "exit"], pauseComponentMatrixIdx: 2, pauseExitAnimation: false, + + // media / media scene + audioAnalyser: undefined, + mediaPercentageElapsed: 0, + mediaComponentMatrix: [ + ["play", "exit"], + ["fstWord", "sndWord", "thirdWord"], + ], + mediaComponentMatrixIndices: { + // 0 or 1 (left/right) + sideIdx: 0, + // 0 or 1 ("play" or "exit") + leftSideIdx: 0, + // 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord") + rightSideIdx: 0, + }, } as MainSceneState, (set) => ({ // subscene setters @@ -511,16 +464,49 @@ export const useMainSceneStore = create( // level selection setters setSelectedLevel: (to: number) => set(() => ({ selectedLevel: to })), - toggleLevelSelection: () => - set((state) => ({ - levelSelectionToggled: !state.levelSelectionToggled, - })), // pause setters setPauseComponentMatrixIdx: (to: number) => set(() => ({ pauseComponentMatrixIdx: to })), setPauseExitAnimation: (to: boolean) => set(() => ({ pauseExitAnimation: to })), + + // media/media scene setters + toggleMediaSide: () => + set((state) => ({ + mediaComponentMatrixIndices: { + ...state.mediaComponentMatrixIndices, + sideIdx: Number(!state.mediaComponentMatrixIndices.sideIdx) as + | 0 + | 1, + }, + })), + setMediaLeftComponentMatrixIdx: (to: 0 | 1) => + set((state) => ({ + mediaComponentMatrixIndices: { + ...state.mediaComponentMatrixIndices, + leftSideIdx: to, + }, + })), + setMediaRightComponentMatrixIdx: (to: 0 | 1 | 2) => + set((state) => ({ + mediaComponentMatrixIndices: { + ...state.mediaComponentMatrixIndices, + rightSideIdx: to, + }, + })), + resetMediaComponentMatrixIndices: () => + set(() => ({ + mediaComponentMatrixIndices: { + sideIdx: 0, + leftSideIdx: 0, + rightSideIdx: 0, + }, + })), + setPercentageElapsed: (to: number) => + set(() => ({ mediaPercentageElapsed: to })), + setAudioAnalyser: (to: THREE.AudioAnalyser) => + set(() => ({ audioAnalyser: to })), }) ) ); @@ -583,24 +569,6 @@ export const useGateStore = create((set) => ({ incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })), })); -export const useLevelSelectionStore = create((set) => ({ - selectedLevel: 4, - levelSelectionToggled: 0, - setSelectedLevel: (to) => set(() => ({ selectedLevel: to })), - toggleLevelSelection: () => - set((state) => ({ - levelSelectionToggled: Number(!state.levelSelectionToggled), - })), -})); - -export const usePauseStore = create((set) => ({ - componentMatrix: ["load", "about", "change", "save", "exit"], - componentMatrixIdx: 2, - exitAnimation: false, - setComponentMatrixIdx: (to) => set(() => ({ componentMatrixIdx: to })), - setExitAnimation: (to) => set(() => ({ exitAnimation: to })), -})); - export const useSiteSaveStore = create( combine( {