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

better implementation of swiping, fixed stuff

Browse source
This commit is contained in:
ad044 2021-03-01 21:53:02 +04:00
parent 483d549bb1
commit 6292e452b5
14 changed files with 170 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
package-lock.json generated
View file

@ -14144,11 +14144,6 @@
"workbox-webpack-plugin": "5.1.4" "workbox-webpack-plugin": "5.1.4"
} }
}, },
"react-swipeable": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-6.0.1.tgz",
"integrity": "sha512-69nonicgjT4ofeHxZSpjuz37BoIiWMEbUYkX0mdTCY2mX1U53XDzDUIOVKRg6vVBNGL+pxYjbRzmylXWORh1xQ=="
},
"react-three-fiber": { "react-three-fiber": {
"version": "4.2.21", "version": "4.2.21",
"resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-4.2.21.tgz", "resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-4.2.21.tgz",
@ -14166,6 +14161,11 @@
"utility-types": "^3.10.0" "utility-types": "^3.10.0"
} }
}, },
"react-use-gesture": {
"version": "9.0.4",
"resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.0.4.tgz",
"integrity": "sha512-G0sbQY+HSm2gSVIlD+LE1unpVpG7YZRTr8TI72vo0Nu1lecJtvjbcY3ZLonEZLTtODJgLL6nBllMRXyy0bRSQA=="
},
"react-use-measure": { "react-use-measure": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.0.2.tgz", "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.0.2.tgz",

2
package.json
View file

@ -15,8 +15,8 @@
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "^4.0.0", "react-scripts": "^4.0.0",
"react-swipeable": "^6.0.1",
"react-three-fiber": "^4.2.20", "react-three-fiber": "^4.2.20",
"react-use-gesture": "^9.0.4",
"three": "^0.119.1", "three": "^0.119.1",
"three-plain-animator": "^1.0.2", "three-plain-animator": "^1.0.2",
"typescript": "^3.7.5", "typescript": "^3.7.5",

5
src/App.tsx
View file

@ -45,14 +45,13 @@ const App = () => {
<Canvas <Canvas
concurrent concurrent
gl={{ antialias: false }} gl={{ antialias: false }}
pixelRatio={1} pixelRatio={window.devicePixelRatio}
className="main-canvas"
> >
<Suspense fallback={null}> <Suspense fallback={null}>
{/*<Preloader />*/} {/*<Preloader />*/}
{dispatchScene[currentScene as keyof typeof dispatchScene]} {dispatchScene[currentScene as keyof typeof dispatchScene]}
<Html center zIndexRange={[0, 0]}>
<InputHandler /> <InputHandler />
</Html>
</Suspense> </Suspense>
</Canvas> </Canvas>
{["media", "idle_media", "tak", "end"].includes(currentScene) && ( {["media", "idle_media", "tak", "end"].includes(currentScene) && (

12
src/components/BootScene/BootAuthorizeUser.tsx
View file

@ -49,7 +49,6 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
const prevData = usePrevious({ letterIdx, subscene }); const prevData = usePrevious({ letterIdx, subscene });
const bgLettersRef = useRef<THREE.Object3D>(); const bgLettersRef = useRef<THREE.Object3D>();
const activeLetterRef = useRef<THREE.Mesh>();
const activeLetterMap = useMemo(() => { const activeLetterMap = useMemo(() => {
activeLettersTex.wrapT = activeLettersTex.wrapS = THREE.RepeatWrapping; activeLettersTex.wrapT = activeLettersTex.wrapS = THREE.RepeatWrapping;
@ -60,11 +59,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
}, [activeLettersTex]); }, [activeLettersTex]);
useEffect(() => { useEffect(() => {
if ( if (prevData?.subscene === "main_menu" && subscene === "authorize_user") {
prevData?.subscene === "main_menu" &&
subscene === "authorize_user" &&
activeLetterRef
) {
activeLetterMap.offset.x = 0; activeLetterMap.offset.x = 0;
activeLetterMap.offset.y = -0.2; activeLetterMap.offset.y = -0.2;
} }
@ -115,6 +110,11 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
activeLetterMap.offset.x += 0.155; activeLetterMap.offset.x += 0.155;
} }
} }
return () => {
activeLetterMap.offset.x = 0;
activeLetterMap.offset.y = -0.2;
};
}, [activeLetterMap.offset, letterIdx, prevData]); }, [activeLetterMap.offset, letterIdx, prevData]);
const playerName = useStore((state) => state.playerName.split("")); const playerName = useStore((state) => state.playerName.split(""));

50
src/components/IdleManager.tsx
View file

@ -43,31 +43,31 @@ const IdleManager = (props: IdleManagerProps) => {
if (event) handleEvent(event); if (event) handleEvent(event);
} }
// if (now > props.idleSceneTimerRef.current + 5000) { if (now > props.idleSceneTimerRef.current + 30000) {
// // put it on lock until the next action, since while the idle media plays, the // put it on lock until the next action, since while the idle media plays, the
// // Date.now() value keeps increasing, which can result in another idle media playing right after one finishes // Date.now() value keeps increasing, which can result in another idle media playing right after one finishes
// // one way to work around this would be to modify the value depending on the last played idle media's duration // one way to work around this would be to modify the value depending on the last played idle media's duration
// // but i'm way too lazy for that // but i'm way too lazy for that
// props.idleSceneTimerRef.current = -1; props.idleSceneTimerRef.current = -1;
//
// playAudio(audio.sound32); playAudio(audio.sound32);
//
// const data = getRandomIdleMedia(); const data = getRandomIdleMedia();
//
// const { type, nodeName, images, media } = data; const { type, nodeName, images, media } = data;
// let event; let event;
// if (type === "audio" && images && nodeName) { if (type === "audio" && images && nodeName) {
// event = playIdleAudio({ event = playIdleAudio({
// idleNodeName: nodeName, idleNodeName: nodeName,
// idleImages: images, idleImages: images,
// idleMedia: media, idleMedia: media,
// }); });
// } else if (type === "video") { } else if (type === "video") {
// event = playIdleVideo({ idleMedia: media }); event = playIdleVideo({ idleMedia: media });
// } }
//
// if (event) handleEvent(event); if (event) handleEvent(event);
// } }
} }
}); });

65
src/components/InputHandler.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef } from "react"; import React, { useCallback, useEffect, useMemo, useRef } from "react";
import { import {
getBootSceneContext, getBootSceneContext,
getEndSceneContext, getEndSceneContext,
@ -15,14 +15,18 @@ import handleBootSceneInput from "../core/input-handlers/handleBootSceneInput";
import handleEndSceneInput from "../core/input-handlers/handleEndSceneInput"; import handleEndSceneInput from "../core/input-handlers/handleEndSceneInput";
import handleEvent from "../core/handleEvent"; import handleEvent from "../core/handleEvent";
import { GameEvent } from "../types/types"; import { GameEvent } from "../types/types";
import { useSwipeable } from "react-swipeable"; import { useLoader } from "react-three-fiber";
import circleButton from "../static/sprites/controller/circle.png";
import * as THREE from "three";
import { useGesture } from "react-use-gesture";
import IdleManager from "./IdleManager"; import IdleManager from "./IdleManager";
import { Canvas } from "react-three-fiber";
const InputHandler = () => { const InputHandler = () => {
const scene = useStore((state) => state.currentScene); const scene = useStore((state) => state.currentScene);
const inputCooldown = useStore((state) => state.inputCooldown); const inputCooldown = useStore((state) => state.inputCooldown);
const circleButtonTex = useLoader(THREE.TextureLoader, circleButton);
const timeSinceLastKeyPress = useRef(-1); const timeSinceLastKeyPress = useRef(-1);
const lainIdleTimerRef = useRef(-1); const lainIdleTimerRef = useRef(-1);
@ -32,6 +36,10 @@ const InputHandler = () => {
(keyPress: string) => { (keyPress: string) => {
const now = Date.now(); const now = Date.now();
if (
now > timeSinceLastKeyPress.current + inputCooldown &&
inputCooldown !== -1
) {
if (scene === "main") { if (scene === "main") {
timeSinceLastKeyPress.current = now; timeSinceLastKeyPress.current = now;
lainIdleTimerRef.current = now; lainIdleTimerRef.current = now;
@ -73,6 +81,8 @@ const InputHandler = () => {
useStore.setState({ useStore.setState({
currentScene: "main", currentScene: "main",
idleStarting: false, idleStarting: false,
intro: false,
inputCooldown: -1,
}); });
break; break;
} }
@ -88,49 +98,64 @@ const InputHandler = () => {
); );
if (event) handleEvent(event); if (event) handleEvent(event);
} }
}
}, },
[scene] [inputCooldown, scene]
); );
const handlers = useSwipeable({ const bind = useGesture(
onSwiped: (eventData) => handleKeyPress(eventData.dir.toUpperCase()), {
onTap: () => handleKeyPress("CIRCLE"), onDragEnd: ({ axis, direction: xy }) => {
}); if (axis === "x") {
if (xy[0] > 0) handleKeyPress("RIGHT");
else handleKeyPress("LEFT");
} else {
if (xy[1] > 0) handleKeyPress("DOWN");
else handleKeyPress("UP");
}
},
},
{ drag: { delay: true } }
);
const firedRef = useRef(false);
const handleKeyBoardEvent = useCallback( const handleKeyBoardEvent = useCallback(
(event) => { (event) => {
if (!firedRef.current) {
firedRef.current = true;
const key = getKeyPress(event.key); const key = getKeyPress(event.key);
const now = Date.now(); if (key) handleKeyPress(key);
if (
key &&
now > timeSinceLastKeyPress.current + inputCooldown &&
inputCooldown !== -1
) {
handleKeyPress(key);
} }
}, },
[handleKeyPress, inputCooldown] [handleKeyPress]
); );
useEffect(() => { useEffect(() => {
window.addEventListener("keydown", handleKeyBoardEvent); window.addEventListener("keydown", handleKeyBoardEvent);
window.addEventListener("keyup", () => {
firedRef.current = false;
});
return () => { return () => {
window.removeEventListener("keydown", handleKeyBoardEvent); window.removeEventListener("keydown", handleKeyBoardEvent);
window.removeEventListener("keyup", () => {
firedRef.current = false;
});
}; };
}, [handleKeyBoardEvent]); }, [handleKeyBoardEvent]);
return ( return (
<> <>
<div {...handlers} className="swipe-handler" /> <sprite scale={[10, 10, 0]} renderOrder={99999} {...bind()}>
<Canvas> <spriteMaterial attach="material" opacity={0} depthTest={false} />
</sprite>
<IdleManager <IdleManager
lainIdleTimerRef={lainIdleTimerRef} lainIdleTimerRef={lainIdleTimerRef}
idleSceneTimerRef={idleSceneTimerRef} idleSceneTimerRef={idleSceneTimerRef}
/> />
</Canvas>
</> </>
); );
}; };

11
src/components/MainScene/HUD.tsx
View file

@ -107,6 +107,8 @@ const HUD = memo(() => {
) { ) {
// set to final pos instantly // set to final pos instantly
setPos(hud, "position"); setPos(hud, "position");
if (hud.mirrored) mirror();
else unMirror();
} else { } else {
if ( if (
prevData?.siteRotY !== siteRotY || prevData?.siteRotY !== siteRotY ||
@ -121,11 +123,10 @@ const HUD = memo(() => {
() => { () => {
// set to initial pos instantly while its hidden // set to initial pos instantly while its hidden
setPos(hud, "initial_position"); setPos(hud, "initial_position");
if (hud.mirrored) {
mirror(); if (hud.mirrored) mirror();
} else { else unMirror();
unMirror();
}
currentHudRef.current = hud; currentHudRef.current = hud;
activeRef.current = true; activeRef.current = true;
}, },

3
src/core/input-handlers/handleBootSceneInput.ts
View file

@ -75,7 +75,7 @@ const handleBootSceneInput = (
case "START": case "START":
if (playerName.length > 0) return startNewGame; if (playerName.length > 0) return startNewGame;
return; return;
case "X": case "CROSS":
if (playerName.length > 0) { if (playerName.length > 0) {
return removePlayerNameLastChar({ return removePlayerNameLastChar({
playerName: playerName.slice(0, -1), playerName: playerName.slice(0, -1),
@ -192,6 +192,7 @@ const handleBootSceneInput = (
const newName = handleNameSelection(playerName, chosenCharacter); const newName = handleNameSelection(playerName, chosenCharacter);
if (newName?.length === 8) return;
if (newName !== undefined) if (newName !== undefined)
return updatePlayerName({ playerName: newName }); return updatePlayerName({ playerName: newName });
else return failUpdatePlayerName; else return failUpdatePlayerName;

2
src/core/input-handlers/handleMainSceneInput.ts
View file

@ -228,7 +228,7 @@ const handleMainSceneInput = (
if (selectedLevel - 1 >= 1) if (selectedLevel - 1 >= 1)
return changeSelectedLevel({ selectedLevel: selectedLevel - 1 }); return changeSelectedLevel({ selectedLevel: selectedLevel - 1 });
break; break;
case "X": case "CROSS":
return exitLevelSelection; return exitLevelSelection;
case "CIRCLE": case "CIRCLE":

2
src/core/input-handlers/handleMediaSceneInput.ts
View file

@ -39,6 +39,8 @@ const handleMediaSceneInput = (
return changeLeftMediaComponent({ activeComponent: newComponent }); return changeLeftMediaComponent({ activeComponent: newComponent });
} }
case "RIGHT": { case "RIGHT": {
if (!activeNode.media_file.includes("XA")) return;
return changeMediaSide({ return changeMediaSide({
activeMediaComponent: lastActiveMediaComponents.right, activeMediaComponent: lastActiveMediaComponents.right,
lastActiveMediaComponents: { lastActiveMediaComponents: {

3
src/scenes/BootScene.tsx
View file

@ -15,9 +15,10 @@ const BootScene = () => {
const setInputCooldown = useStore((state) => state.setInputCooldown); const setInputCooldown = useStore((state) => state.setInputCooldown);
useEffect(() => { useEffect(() => {
setInputCooldown(-1);
setTimeout(() => setAccelaVisible(false), 2000); setTimeout(() => setAccelaVisible(false), 2000);
setTimeout(() => setMainMenuVisible(true), 6200); setTimeout(() => setMainMenuVisible(true), 6200);
setTimeout(() => setInputCooldown(0), 500); setTimeout(() => setInputCooldown(0), 6500);
}, [setInputCooldown]); }, [setInputCooldown]);
return ( return (

6
src/scenes/IdleMediaScene.tsx
View file

@ -9,6 +9,11 @@ const IdleMediaScene = () => {
const idleMedia = useStore((state) => state.idleMedia); const idleMedia = useStore((state) => state.idleMedia);
const idleNodeName = useStore((state) => state.idleNodeName); const idleNodeName = useStore((state) => state.idleNodeName);
const setInputCooldown = useStore((state) => state.setInputCooldown);
useEffect(() => {
setInputCooldown(0);
}, [setInputCooldown]);
useEffect(() => { useEffect(() => {
if (mediaPercentageElapsed === 100) if (mediaPercentageElapsed === 100)
@ -16,6 +21,7 @@ const IdleMediaScene = () => {
currentScene: "main", currentScene: "main",
idleStarting: false, idleStarting: false,
intro: false, intro: false,
inputCooldown: -1,
}); });
}, [mediaPercentageElapsed]); }, [mediaPercentageElapsed]);

2
src/store.ts
View file

@ -111,7 +111,7 @@ export const useStore = create(
combine( combine(
{ {
// scene data // scene data
currentScene: "main", currentScene: "boot",
// game progress // game progress
gameProgress: game_progress, gameProgress: game_progress,

2
src/utils/getKeyPress.ts
View file

@ -5,7 +5,7 @@ const getKeyPress = (keyCode: string) => {
ArrowUp: "UP", // up arrow ArrowUp: "UP", // up arrow
ArrowRight: "RIGHT", // right arrow ArrowRight: "RIGHT", // right arrow
x: "CIRCLE", // x key x: "CIRCLE", // x key
z: "X", // z key z: "CROSS", // z key
d: "TRIANGLE", // d key d: "TRIANGLE", // d key
e: "L2", // e key e: "L2", // e key
v: "START", // v key v: "START", // v key