mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

rewrote pause

Browse source
This commit is contained in:
ad044 2021-02-25 18:51:19 +04:00
parent 28a270d442
commit 851b3ff597
9 changed files with 323 additions and 439 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

382
src/components/MainScene/Pause/Pause.tsx
View file

@ -3,28 +3,8 @@ import * as THREE from "three";
import PauseSquare from "./PauseSquare"; import PauseSquare from "./PauseSquare";
import PauseBigLetter from "../../TextRenderer/PauseBigLetter"; import PauseBigLetter from "../../TextRenderer/PauseBigLetter";
import { useStore } from "../../../store"; import { useStore } from "../../../store";
import { useLoader } from "react-three-fiber";
const Pause = () => { const Pause = () => {
const exit = useStore((state) => state.pauseExitAnimation);
const [showActiveComponent, setShowActiveComponent] = useState(false);
const [animation, setAnimation] = useState(false);
const [intro, setIntro] = useState(true);
const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
const config = useMemo(
() => ({
font: wordFont,
size: 2.5,
}),
[wordFont]
);
const activeComponent = useStore((state) =>
showActiveComponent ? state.activePauseComponent : ""
);
const generateSqaureGeom = useCallback((row: number, square: number) => { const generateSqaureGeom = useCallback((row: number, square: number) => {
const geometry = new THREE.PlaneBufferGeometry(); const geometry = new THREE.PlaneBufferGeometry();
const uvAttribute = geometry.attributes.uv; const uvAttribute = geometry.attributes.uv;
@ -48,306 +28,168 @@ const Pause = () => {
[generateSqaureGeom] [generateSqaureGeom]
); );
const subscene = useStore((state) => state.mainSubscene); const letterLocs = useMemo(
() => ({
"05": { letter: "E" },
"11": { letter: "S" },
"33": { letter: "C" },
"45": { letter: "A" },
"51": { letter: "L" },
}),
[]
);
const subscene = useStore((state) => state.mainSubscene);
const setInputCooldown = useStore((state) => state.setInputCooldown); const setInputCooldown = useStore((state) => state.setInputCooldown);
const [visible, setVisible] = useState(false);
const [finished, setFinished] = useState(false);
const [exit, setExit] = useState(false);
const activeComponent = useStore(
useCallback((state) => (finished ? state.activePauseComponent : ""), [
finished,
])
);
useEffect(() => { useEffect(() => {
setAnimation(false);
setIntro(true);
setShowActiveComponent(false);
if (subscene === "pause") { if (subscene === "pause") {
setTimeout(() => { setTimeout(() => setVisible(true), 4400);
setTimeout(() => { setTimeout(() => setFinished(true), 7300);
setAnimation(true); setTimeout(() => setInputCooldown(1000), 7600);
}, 1000);
setTimeout(() => {
setShowActiveComponent(true);
setIntro(false);
setInputCooldown(1000);
}, 3500);
}, 3400);
} }
return () => {
setExit(true);
setTimeout(() => {
setVisible(false);
setFinished(false);
setExit(false);
}, 1200);
};
}, [setInputCooldown, subscene]); }, [setInputCooldown, subscene]);
const whenActive = useCallback((rowIdx: number, colIdx: number) => {
switch (rowIdx) {
case 5:
if (colIdx > 1 && colIdx < 5) return "load";
break;
case 4:
if (colIdx > 5 && colIdx < 7) return "about";
break;
case 3:
if (colIdx > 3 && colIdx < 7) return "change";
break;
case 1:
if (colIdx > 1 && colIdx < 5) return "save";
break;
case 0:
if (colIdx > 4 && colIdx < 7) return "exit";
break;
}
}, []);
return ( return (
<> <>
{animation && ( {visible && (
<> <group position={[-0.9, -0.7, 0]} scale={[0.85, 0.85, 0]}>
<group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}> {[0, 1, 2, 3, 2, 1, 0].map((r: number, rowIdx: number) =>
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) => [0, 1, 2, 3, 4, 5, 6].map((c: number, colIdx: number) => {
[0, 1, 2, 3, 4, 5, 6].map((col: number) => { const key = `${rowIdx}${colIdx}`;
if (rowIdx === 5 && col > 0 && col < 5) {
return col === 1 ? ( const letter = letterLocs[key as keyof typeof letterLocs];
<React.Fragment key={`Lfragment`}> if (letter)
<PauseBigLetter return (
color={"white"} <React.Fragment key={`${key}fragment`}>
letter={"L"} <PauseBigLetter
letterIdx={col} letter={letter.letter}
position={[0.35, 1.8, 0]} letterIdx={0}
scale={[0.25, 0.25, 0.25]} position={[colIdx / 2.8, rowIdx / 2.8, 0]}
active={!(activeComponent === "load")}
key={"whiteL"}
rowIdx={rowIdx}
colIdx={col}
intro={intro}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={"whiteLsquare"}
shouldDisappear={true}
intro={intro}
/>
</React.Fragment>
) : (
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx} rowIdx={rowIdx}
colIdx={col} colIdx={colIdx}
active={!(activeComponent === "load")} mainLetter={true}
key={`${rowIdx}${col}L`} active={
intro={intro} letter.letter ===
activeComponent.charAt(0).toUpperCase()
}
introFinished={finished}
exit={exit}
/> />
);
} else if (rowIdx === 4 && col > 4 && col < 7) {
return col === 5 ? (
<React.Fragment key={"AFragment"}>
<PauseBigLetter
color={"white"}
letter={"A"}
letterIdx={col}
position={[1.78, 1.43, 0]}
scale={[0.25, 0.25, 0]}
active={!(activeComponent === "about")}
key={"whiteA"}
rowIdx={rowIdx}
colIdx={col}
intro={intro}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={"whiteAsquare"}
shouldDisappear={true}
intro={intro}
/>
</React.Fragment>
) : (
<PauseSquare <PauseSquare
geometry={squareGeoms[row][col]} geometry={squareGeoms[r][c]}
colIdx={colIdx}
rowIdx={rowIdx} rowIdx={rowIdx}
colIdx={col} letter={letter.letter}
active={!(activeComponent === "about")} introFinished={finished}
key={`${rowIdx}${col}A`} exit={exit}
intro={intro}
/> />
); </React.Fragment>
} else if (rowIdx === 3 && col > 2 && col < 7) { );
return col === 3 ? ( else
<React.Fragment key={"CFragment"}> return (
<PauseBigLetter <PauseSquare
color={"white"} geometry={squareGeoms[r][c]}
letter={"C"} colIdx={colIdx}
letterIdx={col} rowIdx={rowIdx}
position={[1.05, 1.07, 0]} key={key}
scale={[0.25, 0.25, 0]} active={activeComponent === whenActive(rowIdx, colIdx)}
active={!(activeComponent === "change")} introFinished={finished}
key={"whiteC"} exit={exit}
rowIdx={rowIdx} />
colIdx={col} );
intro={intro} })
/> )}
<PauseSquare
geometry={squareGeoms[row][col]} <>
rowIdx={rowIdx} {"oad".split("").map((letter, idx) => (
colIdx={col}
key={"whiteCsquare"}
shouldDisappear={true}
intro={intro}
/>
</React.Fragment>
) : (
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
active={!(activeComponent === "change")}
key={`${rowIdx}${col}C`}
intro={intro}
/>
);
} else if (rowIdx === 1 && col > 0 && col < 5) {
return col === 1 ? (
<React.Fragment key={"Sfragment"}>
<PauseBigLetter
color={"white"}
letter={"S"}
letterIdx={col}
position={[0.35, 0.35, 0]}
scale={[0.25, 0.25, 0]}
active={!(activeComponent === "save")}
key={"whiteS"}
rowIdx={rowIdx}
colIdx={col}
intro={intro}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={"whiteSsquare"}
shouldDisappear={true}
intro={intro}
/>
</React.Fragment>
) : (
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
active={!(activeComponent === "save")}
key={`${rowIdx}${col}S`}
intro={intro}
/>
);
} else if (rowIdx === 0 && col > 4 && col < 7) {
return col === 5 ? (
<React.Fragment key={"Efragment"}>
<PauseBigLetter
color={"white"}
letter={"E"}
letterIdx={col}
position={[1.78, 0, 0]}
scale={[0.25, 0.25, 0]}
active={!(activeComponent === "exit")}
key={"whiteE"}
rowIdx={1}
colIdx={col}
intro={intro}
/>
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={"whiteEsquare"}
shouldDisappear={true}
intro={intro}
/>
</React.Fragment>
) : (
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
active={!(activeComponent === "exit")}
key={`${rowIdx}${col}E`}
intro={intro}
/>
);
} else {
return (
<PauseSquare
geometry={squareGeoms[row][col]}
rowIdx={rowIdx}
colIdx={col}
key={`${rowIdx}${col}r`}
active={true}
intro={intro}
/>
);
}
})
)}
{"Load".split("").map((letter, idx) => (
<PauseBigLetter <PauseBigLetter
color={idx > 0 ? "yellow" : "orange"}
letter={letter} letter={letter}
letterIdx={idx} letterIdx={idx}
key={idx} key={idx}
position={[0.35 + idx / 2.8, 1.8, 0]} position={[2 / 2.8 + idx / 2.8, 5 / 2.8, 0]}
scale={[0.25, 0.25, 0.25]}
active={activeComponent === "load"} active={activeComponent === "load"}
/> />
))} ))}
{"About".split("").map((letter, idx) => ( {"bout".split("").map((letter, idx) => (
<PauseBigLetter <PauseBigLetter
color={idx > 0 ? "yellow" : "orange"}
letter={letter} letter={letter}
letterIdx={idx} letterIdx={idx}
position={[1.78 + idx / 2.8, 1.43, 0]} position={[6 / 2.8 + idx / 2.8, 4 / 2.8, 0]}
scale={[0.25, 0.25, 0]}
active={activeComponent === "about"} active={activeComponent === "about"}
key={idx} key={idx}
/> />
))} ))}
{"Change".split("").map((letter, idx) => (
{"hange".split("").map((letter, idx) => (
<PauseBigLetter <PauseBigLetter
color={idx > 0 ? "yellow" : "orange"}
letter={letter} letter={letter}
letterIdx={idx} letterIdx={idx}
position={[1.05 + idx / 2.8, 1.07, 0]} position={[4 / 2.8 + idx / 2.8, 3 / 2.8, 0]}
scale={[0.25, 0.25, 0]}
active={activeComponent === "change"} active={activeComponent === "change"}
key={idx} key={idx}
/> />
))} ))}
{"Save".split("").map((letter, idx) => (
{"ave".split("").map((letter, idx) => (
<PauseBigLetter <PauseBigLetter
color={idx > 0 ? "yellow" : "orange"}
letter={letter} letter={letter}
letterIdx={idx} letterIdx={idx}
position={[0.35 + idx / 2.8, 0.35, 0]} position={[2 / 2.8 + idx / 2.8, 1 / 2.8, 0]}
scale={[0.25, 0.25, 0]}
active={activeComponent === "save"} active={activeComponent === "save"}
key={idx} key={idx}
/> />
))} ))}
{"Exit".split("").map((letter, idx) => ( {"xit".split("").map((letter, idx) => (
<PauseBigLetter <PauseBigLetter
color={idx > 0 ? "yellow" : "orange"}
letter={letter} letter={letter}
letterIdx={idx} letterIdx={idx}
position={[1.78 + idx / 2.8, 0, 0]} position={[6 / 2.8 + idx / 2.8, 0, 0]}
scale={[0.25, 0.25, 0]}
key={idx} key={idx}
active={activeComponent === "exit"} active={activeComponent === "exit"}
/> />
))} ))}
<group visible={!exit}> </>
<sprite </group>
position={[0.5, -0.8, 0]}
scale={[3, 1, 0]}
renderOrder={100}
>
<spriteMaterial
attach="material"
color={0x000000}
opacity={0.8}
depthTest={false}
/>
</sprite>
<mesh
scale={[0.08, 0.07, 0]}
position={[-0.2, -0.6, 0]}
renderOrder={101}
>
<textGeometry
attach="geometry"
args={["Application Version 1.0", config]}
/>
<meshBasicMaterial
attach="material"
color={0x00ba7c}
transparent={true}
depthTest={false}
/>
</mesh>
</group>
</group>
</>
)} )}
</> </>
); );

150
src/components/MainScene/Pause/PauseSquare.tsx
View file

@ -1,25 +1,47 @@
import React, { useMemo, memo } from "react"; import React, { memo, useMemo } from "react";
import * as THREE from "three";
import { useLoader } from "react-three-fiber";
import pauseGrayBoxes from "../../../static/sprite/pause_gray_boxes.png"; import pauseGrayBoxes from "../../../static/sprite/pause_gray_boxes.png";
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
import { a, useSpring } from "@react-spring/three"; import { a, useSpring } from "@react-spring/three";
import { useStore } from "../../../store";
type PauseSquareProps = { type PauseSquareProps = {
geometry: THREE.PlaneBufferGeometry;
colIdx: number; colIdx: number;
rowIdx: number; rowIdx: number;
geometry: THREE.PlaneBufferGeometry; letter?: string;
active?: boolean; active?: boolean;
shouldDisappear?: boolean; introFinished?: boolean;
intro?: boolean; exit?: boolean;
}; };
const PauseSquare = memo((props: PauseSquareProps) => { const PauseSquare = memo((props: PauseSquareProps) => {
const exitAnimation = useStore((state) => state.pauseExitAnimation); const squareTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes); const introSpring = useSpring({
from: {
posX: 1.05,
posY: 1.07,
rotZ: -1,
rotX: Math.PI,
rotY: Math.PI,
},
to: async (next) => {
await next({
posX: props.colIdx / 2.8,
posY: props.rowIdx / 2.8,
rotZ: 0,
config: { duration: 500 },
});
await next({
rotX: 0,
rotY: props.letter ? Math.PI / 2 : 0,
delay: (props.rowIdx + props.colIdx) * 100,
config: { duration: 200 },
});
},
});
const getExitAnimValue = useMemo(() => { const exitAnimValue = useMemo(() => {
let col, row; let col, row;
if (props.colIdx < 3) col = -1; if (props.colIdx < 3) col = -1;
else if (props.colIdx > 3) col = 1; else if (props.colIdx > 3) col = 1;
@ -29,85 +51,47 @@ const PauseSquare = memo((props: PauseSquareProps) => {
else if (props.rowIdx > 3) row = 1; else if (props.rowIdx > 3) row = 1;
else row = 0; else row = 0;
return { row, col }; return { row: row * 2.2, col: col * 2.2 };
}, [props.colIdx, props.rowIdx]); }, [props.colIdx, props.rowIdx]);
const initialState = useSpring({ const spring = useSpring({
posX: props.colIdx / 2.8 + getExitAnimValue.col * (exitAnimation ? 2.2 : 0), posX: props.colIdx / 2.8 + (props.exit ? exitAnimValue.col : 0),
posY: props.rowIdx / 2.8 + getExitAnimValue.row * (exitAnimation ? 2.2 : 0), posY: props.rowIdx / 2.8 + (props.exit ? exitAnimValue.row : 0),
rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI, rotY: props.active || props.exit ? Math.PI / 2 : 0,
rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2, rotX: props.active ? Math.PI : 0,
rotZ: 0,
from: { posX: 1.05, posY: 1.07, rotZ: -1 },
config: { duration: 500 }, config: { duration: 500 },
}); });
const shadowState = useSpring({
posX: props.colIdx / 2.8 + getExitAnimValue.col * (exitAnimation ? 2.2 : 0),
posY: props.rowIdx / 2.8 + getExitAnimValue.row * (exitAnimation ? 2.2 : 0),
rotX: exitAnimation ? Math.PI / 2 : 0,
rotY: exitAnimation ? Math.PI / 2 : 0,
from: { posX: 1.05, posY: 1.07, rotZ: -1 },
config: { duration: 500 },
});
const introState = useSpring({
rotX: 0,
rotY: props.shouldDisappear ? Math.PI / 2 : 0,
from: { rotX: Math.PI, rotY: Math.PI },
delay: (props.rowIdx + props.colIdx) * 100 + 500,
config: { duration: 200 },
});
return ( return (
<> <a.mesh
<a.mesh position-x={props.introFinished ? spring.posX : introSpring.posX}
geometry={props.geometry} position-y={props.introFinished ? spring.posY : introSpring.posY}
position-x={initialState.posX} rotation-z={props.introFinished ? 0 : introSpring.rotZ}
position-y={initialState.posY} rotation-x={props.introFinished ? spring.rotX : introSpring.rotX}
scale={[ rotation-y={
props.colIdx > 3 ? -0.25 : 0.25, !props.letter && props.introFinished ? spring.rotY : introSpring.rotY
props.rowIdx <= 3 ? -0.25 : 0.25, }
0, geometry={props.geometry}
]} scale={[
rotation-x={props.intro ? introState.rotX : initialState.rotX} props.colIdx > 3 ? -0.25 : 0.25,
rotation-y={props.intro ? introState.rotY : initialState.rotY} props.rowIdx <= 3 ? -0.25 : 0.25,
rotation-z={initialState.rotZ} 0,
renderOrder={100} ]}
> renderOrder={100}
<meshBasicMaterial >
attach="material" <meshBasicMaterial
map={grayBoxesTex} attach="material"
side={ map={squareTex}
(props.colIdx > 3 && props.rowIdx <= 3) || side={
(props.colIdx <= 3 && props.rowIdx > 3) (props.colIdx > 3 && props.rowIdx <= 3) ||
? THREE.FrontSide (props.colIdx <= 3 && props.rowIdx > 3)
: THREE.BackSide ? THREE.FrontSide
} : THREE.BackSide
transparent={true} }
depthTest={false} transparent={true}
/> depthTest={false}
</a.mesh> />
<group scale={[0.9, 0.9, 0]} position={[0.1, 0.1, 0]}> </a.mesh>
<a.mesh
geometry={props.geometry}
position-x={shadowState.posX}
position-y={shadowState.posY}
scale={[0.25, 0.25, 0]}
rotation-x={shadowState.rotX}
rotation-y={shadowState.rotY}
rotation-z={initialState.rotZ}
renderOrder={99}
>
<meshBasicMaterial
attach="material"
side={THREE.DoubleSide}
transparent={true}
color={0x1d1d2d}
/>
</a.mesh>
</group>
</>
); );
}); });

6
src/components/MainScene/Site/MainSceneBackground.tsx
View file

@ -1,9 +1,9 @@
import React from "react"; import React, { memo } from "react";
import mainSceneBg from "../../../static/sprite/main_scene_background.png"; import mainSceneBg from "../../../static/sprite/main_scene_background.png";
import { useLoader } from "react-three-fiber"; import { useLoader } from "react-three-fiber";
import * as THREE from "three"; import * as THREE from "three";
const MainSceneBackground = () => { const MainSceneBackground = memo(() => {
const mainSceneBgTex = useLoader(THREE.TextureLoader, mainSceneBg); const mainSceneBgTex = useLoader(THREE.TextureLoader, mainSceneBg);
return ( return (
@ -16,6 +16,6 @@ const MainSceneBackground = () => {
/> />
</mesh> </mesh>
); );
}; });
export default MainSceneBackground; export default MainSceneBackground;

201
src/components/TextRenderer/PauseBigLetter.tsx
View file

@ -6,36 +6,22 @@ import { useLoader } from "react-three-fiber";
import orange_font_json from "../../resources/font_data/big_font.json"; import orange_font_json from "../../resources/font_data/big_font.json";
import { a, useSpring } from "@react-spring/three"; import { a, useSpring } from "@react-spring/three";
import React, { useMemo, memo } from "react"; import React, { useMemo, memo } from "react";
import { useStore } from "../../store";
const PauseBigLetter = memo( const PauseBigLetter = memo(
(props: { (props: {
color: string;
letter: string; letter: string;
letterIdx: number; letterIdx: number;
position: number[]; position: number[];
scale: number[];
active?: boolean;
rowIdx?: number; rowIdx?: number;
colIdx?: number; colIdx?: number;
intro?: boolean; mainLetter?: boolean;
active?: boolean;
introFinished?: boolean;
exit?: boolean;
}) => { }) => {
const exitAnimation = useStore( const whiteFontTex = useLoader(THREE.TextureLoader, whiteFont);
(state) => state.pauseExitAnimation const orangeFontTex = useLoader(THREE.TextureLoader, orangeFont);
); const yellowFontTex = useLoader(THREE.TextureLoader, yellowFont);
const tex = useMemo(() => {
switch (props.color) {
case "white":
return whiteFont;
case "yellow":
return yellowFont;
default:
return orangeFont;
}
}, [props.color]);
const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, tex);
const lineYOffset = useMemo(() => { const lineYOffset = useMemo(() => {
const lineOne = "ABCDEFGHIJKLMNOPQ"; const lineOne = "ABCDEFGHIJKLMNOPQ";
@ -93,64 +79,133 @@ const PauseBigLetter = memo(
return geometry; return geometry;
}, [letterData, lineYOffset]); }, [letterData, lineYOffset]);
const exitAnimValue = useMemo(() => { const mainLetterIntroSpring = useSpring({
let col = 0; from: {
let row = 0; rotX: Math.PI,
if (props.colIdx && props.rowIdx) { rotY: Math.PI / 2,
if (props.colIdx < 3) col = -1; },
else if (props.colIdx > 3) col = 1; to: { rotY: 0, rotX: 0 },
delay: (props.rowIdx! + props.colIdx!) * 100 + 500,
if (props.rowIdx < 3) row = -1;
else if (props.rowIdx > 3) row = 1;
return { row, col };
}
}, [props.colIdx, props.rowIdx]);
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 }, config: { duration: 500 },
}); });
const introState = useSpring({ const exitAnimValue = useMemo(() => {
rotX: 0, let col, row;
rotY: 0, if (props.colIdx! < 3) col = -1;
from: { rotX: Math.PI, rotY: Math.PI * 2 }, else if (props.colIdx! > 3) col = 1;
delay: (props.rowIdx! + props.colIdx!) * 100 + 500, else col = 0;
config: { duration: 200 },
if (props.rowIdx! < 3) row = -1;
else if (props.rowIdx! > 3) row = 1;
else row = 0;
return { row: row * 2.2, col: col * 2.2 };
}, [props.colIdx, props.rowIdx]);
const mainLetterSpring = useSpring({
orangeRotY: props.active ? 0 : Math.PI / 2,
orangeRotX: props.active ? 0 : Math.PI,
whiteRotY: props.active || props.exit ? Math.PI / 2 : 0,
whiteRotX: props.active || props.exit ? Math.PI : 0,
posX: props.colIdx
? props.colIdx / 2.8 + (props.exit ? exitAnimValue.col : 0)
: props.position[0],
posY: props.rowIdx
? props.rowIdx / 2.8 + (props.exit ? exitAnimValue.row : 0)
: -letterData[4] / 50 + props.position[1],
config: { duration: 500 },
});
const nonMainLetterSpring = useSpring({
rotY: props.active ? 0 : Math.PI / 2,
rotX: props.active ? 0 : Math.PI,
config: { duration: 500 },
}); });
return ( return (
<a.mesh <>
position={[ {props.mainLetter ? (
props.position[0], <>
-letterData[4] / 50 + props.position[1], <a.mesh
props.position[2], position={[
]} props.position[0],
position-x={initialState.posX} -letterData[4] / 50 + props.position[1],
position-y={initialState.posY} props.position[2],
scale={props.scale as [number, number, number]} ]}
geometry={geom} scale={[0.25, 0.25, 0]}
rotation-x={props.intro ? introState.rotX : initialState.rotX} geometry={geom}
rotation-y={props.intro ? introState.rotY : initialState.rotY} rotation-x={
renderOrder={100} props.introFinished
> ? mainLetterSpring.orangeRotX
<meshBasicMaterial : mainLetterIntroSpring.rotX
map={colorTexture} }
attach="material" rotation-y={
transparent={true} props.introFinished
side={THREE.FrontSide} ? mainLetterSpring.orangeRotY
depthTest={false} : mainLetterIntroSpring.rotY
/> }
</a.mesh> position-x={mainLetterSpring.posX}
position-y={mainLetterSpring.posY}
renderOrder={100}
>
<meshBasicMaterial
map={props.introFinished ? orangeFontTex : whiteFontTex}
attach="material"
transparent={true}
side={THREE.FrontSide}
depthTest={false}
/>
</a.mesh>
<a.mesh
position={[
props.position[0],
-letterData[4] / 50 + props.position[1],
props.position[2],
]}
scale={[0.25, 0.25, 0]}
geometry={geom}
position-x={mainLetterSpring.posX}
position-y={mainLetterSpring.posY}
rotation-x={
props.introFinished ? mainLetterSpring.whiteRotX : Math.PI
}
rotation-y={
props.introFinished ? mainLetterSpring.whiteRotY : Math.PI / 2
}
renderOrder={100}
>
<meshBasicMaterial
map={whiteFontTex}
attach="material"
transparent={true}
side={THREE.FrontSide}
depthTest={false}
/>
</a.mesh>
</>
) : (
<a.mesh
position={[
props.position[0],
-letterData[4] / 50 + props.position[1],
props.position[2],
]}
scale={[0.25, 0.25, 0]}
geometry={geom}
rotation-x={nonMainLetterSpring.rotX}
rotation-y={nonMainLetterSpring.rotY}
renderOrder={100}
>
<meshBasicMaterial
map={yellowFontTex}
attach="material"
transparent={true}
side={THREE.FrontSide}
depthTest={false}
/>
</a.mesh>
)}
</>
); );
} }
); );

6
src/core/eventTemplates.ts
View file

@ -293,14 +293,14 @@ export const exitPause = (calculatedState: { siteRot: number[] }) => ({
{ {
mutation: { mutation: {
siteRot: calculatedState.siteRot, siteRot: calculatedState.siteRot,
pauseExitAnimation: true,
activePauseComponent: "change",
inputCooldown: 1400, inputCooldown: 1400,
mainSubscene: "site",
activePauseComponent: "",
}, },
}, },
{ {
mutation: { mutation: {
mainSubscene: "site", activePauseComponent: "change",
inputCooldown: false, inputCooldown: false,
lainMoveState: "standing", lainMoveState: "standing",
}, },

5
src/scenes/MainScene.tsx
View file

@ -1,7 +1,6 @@
import { OrbitControls } from "@react-three/drei"; import { OrbitControls } from "@react-three/drei";
import React, { Suspense, useEffect, useRef, useState } from "react"; import React, { Suspense, useEffect, useRef, useState } from "react";
import { playAudio, useStore } from "../store"; import { playAudio, useStore } from "../store";
import Pause from "../components/MainScene/Pause/Pause";
import LevelSelection from "../components/MainScene/LevelSelection"; import LevelSelection from "../components/MainScene/LevelSelection";
import HUD from "../components/MainScene/HUD"; import HUD from "../components/MainScene/HUD";
import MainYellowTextAnimator from "../components/TextRenderer/MainYellowTextAnimator"; import MainYellowTextAnimator from "../components/TextRenderer/MainYellowTextAnimator";
@ -19,6 +18,7 @@ import Loading from "../components/Loading";
import usePrevious from "../hooks/usePrevious"; import usePrevious from "../hooks/usePrevious";
import MainSceneBackground from "../components/MainScene/Site/MainSceneBackground"; import MainSceneBackground from "../components/MainScene/Site/MainSceneBackground";
import { useSpring, a } from "@react-spring/three"; import { useSpring, a } from "@react-spring/three";
import Pause from "../components/MainScene/Pause/Pause";
const MainScene = () => { const MainScene = () => {
const intro = useStore((state) => state.intro); const intro = useStore((state) => state.intro);
@ -42,11 +42,10 @@ const MainScene = () => {
setTimeout(() => setPaused(true), 3400); setTimeout(() => setPaused(true), 3400);
} else if (prevData?.subscene === "pause" && subscene === "site") { } else if (prevData?.subscene === "pause" && subscene === "site") {
setBgState({ posY: 0 }); setBgState({ posY: 0 });
setPaused(false); setTimeout(() => setPaused(false), 1200);
} }
}, [prevData?.subscene, setBgState, subscene]); }, [prevData?.subscene, setBgState, subscene]);
// move up instead of rotate todo
useEffect(() => { useEffect(() => {
if (wordSelected) { if (wordSelected) {
setTimeout(() => setWordSelected(false), 3100); setTimeout(() => setWordSelected(false), 3100);

8
src/scenes/PolytanScene.tsx
View file

@ -5,10 +5,14 @@ import { useStore } from "../store";
const PolytanScene = () => { const PolytanScene = () => {
const setNodeViewed = useStore((state) => state.setNodeViewed); const setNodeViewed = useStore((state) => state.setNodeViewed);
const setPolytanPartUnlocked = useStore.getState().setPolytanPartUnlocked; const setPolytanPartUnlocked = useStore(
(state) => state.setPolytanPartUnlocked
);
const setInputCooldown = useStore((state) => state.setInputCooldown);
const activeNodeName = useStore((state) => state.activeNode.node_name); const activeNodeName = useStore((state) => state.activeNode.node_name);
useEffect(() => { useEffect(() => {
setTimeout(() => setInputCooldown(0), 1000);
setNodeViewed(activeNodeName, { setNodeViewed(activeNodeName, {
is_viewed: 1, is_viewed: 1,
is_visible: 0, is_visible: 0,
@ -30,7 +34,7 @@ const PolytanScene = () => {
} }
})(); })();
if (bodyPart) setPolytanPartUnlocked(bodyPart); if (bodyPart) setPolytanPartUnlocked(bodyPart);
}, [activeNodeName, setNodeViewed, setPolytanPartUnlocked]); }, [activeNodeName, setInputCooldown, setNodeViewed, setPolytanPartUnlocked]);
return ( return (
<> <>

1
src/store.ts
View file

@ -174,7 +174,6 @@ export const useStore = create(
// pause // pause
activePauseComponent: "change", activePauseComponent: "change",
pauseExitAnimation: false,
showingAbout: false, showingAbout: false,
permissionDenied: false, permissionDenied: false,

3
src/types/types.ts
View file

@ -20,7 +20,8 @@ export type GameScene =
| "boot" | "boot"
| "change_disc" | "change_disc"
| "end" | "end"
| "null"; | "null"
| "test";
export type MainSubscene = "site" | "pause" | "level_selection"; export type MainSubscene = "site" | "pause" | "level_selection";