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"
}
},
"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": {
"version": "4.2.21",
"resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-4.2.21.tgz",
@ -14166,6 +14161,11 @@
"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": {
"version": "2.0.2",
"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-dom": "^16.13.1",
"react-scripts": "^4.0.0",
"react-swipeable": "^6.0.1",
"react-three-fiber": "^4.2.20",
"react-use-gesture": "^9.0.4",
"three": "^0.119.1",
"three-plain-animator": "^1.0.2",
"typescript": "^3.7.5",

7
src/App.tsx
View file

@ -45,14 +45,13 @@ const App = () => {
<Canvas
concurrent
gl={{ antialias: false }}
pixelRatio={1}
pixelRatio={window.devicePixelRatio}
className="main-canvas"
>
<Suspense fallback={null}>
{/*<Preloader />*/}
{dispatchScene[currentScene as keyof typeof dispatchScene]}
<Html center zIndexRange={[0, 0]}>
<InputHandler />
</Html>
<InputHandler />
</Suspense>
</Canvas>
{["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 bgLettersRef = useRef<THREE.Object3D>();
const activeLetterRef = useRef<THREE.Mesh>();
const activeLetterMap = useMemo(() => {
activeLettersTex.wrapT = activeLettersTex.wrapS = THREE.RepeatWrapping;
@ -60,11 +59,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
}, [activeLettersTex]);
useEffect(() => {
if (
prevData?.subscene === "main_menu" &&
subscene === "authorize_user" &&
activeLetterRef
) {
if (prevData?.subscene === "main_menu" && subscene === "authorize_user") {
activeLetterMap.offset.x = 0;
activeLetterMap.offset.y = -0.2;
}
@ -115,6 +110,11 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
activeLetterMap.offset.x += 0.155;
}
}
return () => {
activeLetterMap.offset.x = 0;
activeLetterMap.offset.y = -0.2;
};
}, [activeLetterMap.offset, letterIdx, prevData]);
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 (now > props.idleSceneTimerRef.current + 5000) {
// // 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
// // 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
// props.idleSceneTimerRef.current = -1;
//
// playAudio(audio.sound32);
//
// const data = getRandomIdleMedia();
//
// const { type, nodeName, images, media } = data;
// let event;
// if (type === "audio" && images && nodeName) {
// event = playIdleAudio({
// idleNodeName: nodeName,
// idleImages: images,
// idleMedia: media,
// });
// } else if (type === "video") {
// event = playIdleVideo({ idleMedia: media });
// }
//
// if (event) handleEvent(event);
// }
if (now > props.idleSceneTimerRef.current + 30000) {
// 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
// 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
props.idleSceneTimerRef.current = -1;
playAudio(audio.sound32);
const data = getRandomIdleMedia();
const { type, nodeName, images, media } = data;
let event;
if (type === "audio" && images && nodeName) {
event = playIdleAudio({
idleNodeName: nodeName,
idleImages: images,
idleMedia: media,
});
} else if (type === "video") {
event = playIdleVideo({ idleMedia: media });
}
if (event) handleEvent(event);
}
}
});

193
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 {
getBootSceneContext,
getEndSceneContext,
@ -15,14 +15,18 @@ import handleBootSceneInput from "../core/input-handlers/handleBootSceneInput";
import handleEndSceneInput from "../core/input-handlers/handleEndSceneInput";
import handleEvent from "../core/handleEvent";
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 { Canvas } from "react-three-fiber";
const InputHandler = () => {
const scene = useStore((state) => state.currentScene);
const inputCooldown = useStore((state) => state.inputCooldown);
const circleButtonTex = useLoader(THREE.TextureLoader, circleButton);
const timeSinceLastKeyPress = useRef(-1);
const lainIdleTimerRef = useRef(-1);
@ -32,105 +36,126 @@ const InputHandler = () => {
(keyPress: string) => {
const now = Date.now();
if (scene === "main") {
timeSinceLastKeyPress.current = now;
lainIdleTimerRef.current = now;
idleSceneTimerRef.current = now;
}
const sceneFns = (() => {
switch (scene) {
case "main":
return {
contextProvider: getMainSceneContext,
keyPressHandler: handleMainSceneInput,
};
case "media":
return {
contextProvider: getMediaSceneContext,
keyPressHandler: handleMediaSceneInput,
};
case "sskn":
return {
contextProvider: getSsknSceneContext,
keyPressHandler: handleSsknSceneInput,
};
case "boot":
return {
contextProvider: getBootSceneContext,
keyPressHandler: handleBootSceneInput,
};
case "end":
return {
contextProvider: getEndSceneContext,
keyPressHandler: handleEndSceneInput,
};
case "gate":
case "polytan":
useStore.setState({ currentScene: "main" });
break;
case "idle_media":
useStore.setState({
currentScene: "main",
idleStarting: false,
});
break;
}
})();
if (sceneFns) {
const { contextProvider, keyPressHandler } = sceneFns;
const ctx = contextProvider();
const event: GameEvent | undefined = keyPressHandler(
ctx as any,
keyPress
);
if (event) handleEvent(event);
}
},
[scene]
);
const handlers = useSwipeable({
onSwiped: (eventData) => handleKeyPress(eventData.dir.toUpperCase()),
onTap: () => handleKeyPress("CIRCLE"),
});
const handleKeyBoardEvent = useCallback(
(event) => {
const key = getKeyPress(event.key);
const now = Date.now();
if (
key &&
now > timeSinceLastKeyPress.current + inputCooldown &&
inputCooldown !== -1
) {
handleKeyPress(key);
if (scene === "main") {
timeSinceLastKeyPress.current = now;
lainIdleTimerRef.current = now;
idleSceneTimerRef.current = now;
}
const sceneFns = (() => {
switch (scene) {
case "main":
return {
contextProvider: getMainSceneContext,
keyPressHandler: handleMainSceneInput,
};
case "media":
return {
contextProvider: getMediaSceneContext,
keyPressHandler: handleMediaSceneInput,
};
case "sskn":
return {
contextProvider: getSsknSceneContext,
keyPressHandler: handleSsknSceneInput,
};
case "boot":
return {
contextProvider: getBootSceneContext,
keyPressHandler: handleBootSceneInput,
};
case "end":
return {
contextProvider: getEndSceneContext,
keyPressHandler: handleEndSceneInput,
};
case "gate":
case "polytan":
useStore.setState({ currentScene: "main" });
break;
case "idle_media":
useStore.setState({
currentScene: "main",
idleStarting: false,
intro: false,
inputCooldown: -1,
});
break;
}
})();
if (sceneFns) {
const { contextProvider, keyPressHandler } = sceneFns;
const ctx = contextProvider();
const event: GameEvent | undefined = keyPressHandler(
ctx as any,
keyPress
);
if (event) handleEvent(event);
}
}
},
[handleKeyPress, inputCooldown]
[inputCooldown, scene]
);
const bind = useGesture(
{
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(
(event) => {
if (!firedRef.current) {
firedRef.current = true;
const key = getKeyPress(event.key);
if (key) handleKeyPress(key);
}
},
[handleKeyPress]
);
useEffect(() => {
window.addEventListener("keydown", handleKeyBoardEvent);
window.addEventListener("keyup", () => {
firedRef.current = false;
});
return () => {
window.removeEventListener("keydown", handleKeyBoardEvent);
window.removeEventListener("keyup", () => {
firedRef.current = false;
});
};
}, [handleKeyBoardEvent]);
return (
<>
<div {...handlers} className="swipe-handler" />
<Canvas>
<IdleManager
lainIdleTimerRef={lainIdleTimerRef}
idleSceneTimerRef={idleSceneTimerRef}
/>
</Canvas>
<sprite scale={[10, 10, 0]} renderOrder={99999} {...bind()}>
<spriteMaterial attach="material" opacity={0} depthTest={false} />
</sprite>
<IdleManager
lainIdleTimerRef={lainIdleTimerRef}
idleSceneTimerRef={idleSceneTimerRef}
/>
</>
);
};

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

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

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

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

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

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

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

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

3
src/scenes/BootScene.tsx
View file

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

6
src/scenes/IdleMediaScene.tsx
View file

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

2
src/store.ts
View file

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

2
src/utils/getKeyPress.ts
View file

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