mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
rewrote pause
This commit is contained in:
parent
28a270d442
commit
851b3ff597
9 changed files with 323 additions and 439 deletions
|
@ -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)
|
||||||
|
return (
|
||||||
|
<React.Fragment key={`${key}fragment`}>
|
||||||
<PauseBigLetter
|
<PauseBigLetter
|
||||||
color={"white"}
|
letter={letter.letter}
|
||||||
letter={"L"}
|
letterIdx={0}
|
||||||
letterIdx={col}
|
position={[colIdx / 2.8, rowIdx / 2.8, 0]}
|
||||||
position={[0.35, 1.8, 0]}
|
|
||||||
scale={[0.25, 0.25, 0.25]}
|
|
||||||
active={!(activeComponent === "load")}
|
|
||||||
key={"whiteL"}
|
|
||||||
rowIdx={rowIdx}
|
rowIdx={rowIdx}
|
||||||
colIdx={col}
|
colIdx={colIdx}
|
||||||
intro={intro}
|
mainLetter={true}
|
||||||
|
active={
|
||||||
|
letter.letter ===
|
||||||
|
activeComponent.charAt(0).toUpperCase()
|
||||||
|
}
|
||||||
|
introFinished={finished}
|
||||||
|
exit={exit}
|
||||||
/>
|
/>
|
||||||
<PauseSquare
|
<PauseSquare
|
||||||
geometry={squareGeoms[row][col]}
|
geometry={squareGeoms[r][c]}
|
||||||
|
colIdx={colIdx}
|
||||||
rowIdx={rowIdx}
|
rowIdx={rowIdx}
|
||||||
colIdx={col}
|
letter={letter.letter}
|
||||||
key={"whiteLsquare"}
|
introFinished={finished}
|
||||||
shouldDisappear={true}
|
exit={exit}
|
||||||
intro={intro}
|
|
||||||
/>
|
/>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
) : (
|
|
||||||
<PauseSquare
|
|
||||||
geometry={squareGeoms[row][col]}
|
|
||||||
rowIdx={rowIdx}
|
|
||||||
colIdx={col}
|
|
||||||
active={!(activeComponent === "load")}
|
|
||||||
key={`${rowIdx}${col}L`}
|
|
||||||
intro={intro}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
} else if (rowIdx === 4 && col > 4 && col < 7) {
|
else
|
||||||
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
|
|
||||||
geometry={squareGeoms[row][col]}
|
|
||||||
rowIdx={rowIdx}
|
|
||||||
colIdx={col}
|
|
||||||
active={!(activeComponent === "about")}
|
|
||||||
key={`${rowIdx}${col}A`}
|
|
||||||
intro={intro}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else if (rowIdx === 3 && col > 2 && col < 7) {
|
|
||||||
return col === 3 ? (
|
|
||||||
<React.Fragment key={"CFragment"}>
|
|
||||||
<PauseBigLetter
|
|
||||||
color={"white"}
|
|
||||||
letter={"C"}
|
|
||||||
letterIdx={col}
|
|
||||||
position={[1.05, 1.07, 0]}
|
|
||||||
scale={[0.25, 0.25, 0]}
|
|
||||||
active={!(activeComponent === "change")}
|
|
||||||
key={"whiteC"}
|
|
||||||
rowIdx={rowIdx}
|
|
||||||
colIdx={col}
|
|
||||||
intro={intro}
|
|
||||||
/>
|
|
||||||
<PauseSquare
|
|
||||||
geometry={squareGeoms[row][col]}
|
|
||||||
rowIdx={rowIdx}
|
|
||||||
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 (
|
return (
|
||||||
<PauseSquare
|
<PauseSquare
|
||||||
geometry={squareGeoms[row][col]}
|
geometry={squareGeoms[r][c]}
|
||||||
|
colIdx={colIdx}
|
||||||
rowIdx={rowIdx}
|
rowIdx={rowIdx}
|
||||||
colIdx={col}
|
key={key}
|
||||||
key={`${rowIdx}${col}r`}
|
active={activeComponent === whenActive(rowIdx, colIdx)}
|
||||||
active={true}
|
introFinished={finished}
|
||||||
intro={intro}
|
exit={exit}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
{"Load".split("").map((letter, idx) => (
|
|
||||||
|
<>
|
||||||
|
{"oad".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
|
|
||||||
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>
|
|
||||||
</>
|
</>
|
||||||
|
</group>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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,55 +51,37 @@ 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}
|
||||||
|
position-y={props.introFinished ? spring.posY : introSpring.posY}
|
||||||
|
rotation-z={props.introFinished ? 0 : introSpring.rotZ}
|
||||||
|
rotation-x={props.introFinished ? spring.rotX : introSpring.rotX}
|
||||||
|
rotation-y={
|
||||||
|
!props.letter && props.introFinished ? spring.rotY : introSpring.rotY
|
||||||
|
}
|
||||||
geometry={props.geometry}
|
geometry={props.geometry}
|
||||||
position-x={initialState.posX}
|
|
||||||
position-y={initialState.posY}
|
|
||||||
scale={[
|
scale={[
|
||||||
props.colIdx > 3 ? -0.25 : 0.25,
|
props.colIdx > 3 ? -0.25 : 0.25,
|
||||||
props.rowIdx <= 3 ? -0.25 : 0.25,
|
props.rowIdx <= 3 ? -0.25 : 0.25,
|
||||||
0,
|
0,
|
||||||
]}
|
]}
|
||||||
rotation-x={props.intro ? introState.rotX : initialState.rotX}
|
|
||||||
rotation-y={props.intro ? introState.rotY : initialState.rotY}
|
|
||||||
rotation-z={initialState.rotZ}
|
|
||||||
renderOrder={100}
|
renderOrder={100}
|
||||||
>
|
>
|
||||||
<meshBasicMaterial
|
<meshBasicMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={grayBoxesTex}
|
map={squareTex}
|
||||||
side={
|
side={
|
||||||
(props.colIdx > 3 && props.rowIdx <= 3) ||
|
(props.colIdx > 3 && props.rowIdx <= 3) ||
|
||||||
(props.colIdx <= 3 && props.rowIdx > 3)
|
(props.colIdx <= 3 && props.rowIdx > 3)
|
||||||
|
@ -88,26 +92,6 @@ const PauseSquare = memo((props: PauseSquareProps) => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
</a.mesh>
|
</a.mesh>
|
||||||
<group scale={[0.9, 0.9, 0]} position={[0.1, 0.1, 0]}>
|
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 (
|
||||||
|
<>
|
||||||
|
{props.mainLetter ? (
|
||||||
|
<>
|
||||||
<a.mesh
|
<a.mesh
|
||||||
position={[
|
position={[
|
||||||
props.position[0],
|
props.position[0],
|
||||||
-letterData[4] / 50 + props.position[1],
|
-letterData[4] / 50 + props.position[1],
|
||||||
props.position[2],
|
props.position[2],
|
||||||
]}
|
]}
|
||||||
position-x={initialState.posX}
|
scale={[0.25, 0.25, 0]}
|
||||||
position-y={initialState.posY}
|
|
||||||
scale={props.scale as [number, number, number]}
|
|
||||||
geometry={geom}
|
geometry={geom}
|
||||||
rotation-x={props.intro ? introState.rotX : initialState.rotX}
|
rotation-x={
|
||||||
rotation-y={props.intro ? introState.rotY : initialState.rotY}
|
props.introFinished
|
||||||
|
? mainLetterSpring.orangeRotX
|
||||||
|
: mainLetterIntroSpring.rotX
|
||||||
|
}
|
||||||
|
rotation-y={
|
||||||
|
props.introFinished
|
||||||
|
? mainLetterSpring.orangeRotY
|
||||||
|
: mainLetterIntroSpring.rotY
|
||||||
|
}
|
||||||
|
position-x={mainLetterSpring.posX}
|
||||||
|
position-y={mainLetterSpring.posY}
|
||||||
renderOrder={100}
|
renderOrder={100}
|
||||||
>
|
>
|
||||||
<meshBasicMaterial
|
<meshBasicMaterial
|
||||||
map={colorTexture}
|
map={props.introFinished ? orangeFontTex : whiteFontTex}
|
||||||
attach="material"
|
attach="material"
|
||||||
transparent={true}
|
transparent={true}
|
||||||
side={THREE.FrontSide}
|
side={THREE.FrontSide}
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
</a.mesh>
|
</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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
@ -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",
|
||||||
},
|
},
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -174,7 +174,6 @@ export const useStore = create(
|
||||||
|
|
||||||
// pause
|
// pause
|
||||||
activePauseComponent: "change",
|
activePauseComponent: "change",
|
||||||
pauseExitAnimation: false,
|
|
||||||
showingAbout: false,
|
showingAbout: false,
|
||||||
permissionDenied: false,
|
permissionDenied: false,
|
||||||
|
|
||||||
|
|
|
@ -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";
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue