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

user authorization fully functional, bugfixes, all mobile buttons implemtned

Browse source
This commit is contained in:
ad044 2021-03-03 20:19:36 +04:00
parent 42b5857f8a
commit 613764f91c
12 changed files with 152 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.tsx
View file

@ -14,7 +14,6 @@ import ChangeDiscScene from "./scenes/ChangeDiscScene";
import EndScene from "./scenes/EndScene";
import IdleMediaScene from "./scenes/IdleMediaScene";
import InputHandler from "./components/InputHandler";
import { Html } from "@react-three/drei";
const App = () => {
const currentScene = useStore((state) => state.currentScene);

33
src/components/BootScene/BootAnimation.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import React, {useEffect, useMemo, useRef, useState} from "react";
import bootLof from "../../static/sprites/boot/boot_lof.png";
import bootBottomBarLeft from "../../static/sprites/boot/boot_bottom_bar_left.png";
import bootBottomBarRight from "../../static/sprites/boot/boot_bottom_bar_right.png";
@ -11,13 +11,14 @@ import bootStatusTexts from "../../static/sprites/boot/boot_status_texts.png";
import bootBackgroundText from "../../static/sprites/boot/boot_background_text.png";
import bootBackgroundDistortedTex from "../../static/sprites/boot/distorted_text.png";
import { useFrame, useLoader } from "react-three-fiber";
import { a, useSpring } from "@react-spring/three";
import {useFrame, useLoader} from "react-three-fiber";
import {a, useSpring} from "@react-spring/three";
import * as THREE from "three";
import sleep from "../../utils/sleep";
type BootAnimationProps = {
visible: boolean;
mainMenuVisible: boolean;
activeSubScene: string;
};
@ -134,20 +135,22 @@ const BootAnimation = (props: BootAnimationProps) => {
await sleep(100);
currentBootStatusTextTex.offset.y = 0.79;
await sleep(1700);
currentBootStatusTextTex.offset.x = 0.5;
currentBootStatusTextTex.offset.y = 0.005;
setBootOpacity(0);
setGraySquarePosY(0);
setLofPosX(1.3);
setLofPosY(1);
setBackgroundFloatingTextShown(true);
})();
}
}, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
useEffect(() => {
if (props.mainMenuVisible) {
currentBootStatusTextTex.offset.x = 0.5;
currentBootStatusTextTex.offset.y = 0.005;
setBootOpacity(0);
setGraySquarePosY(0);
setLofPosX(1.3);
setLofPosY(1);
setBackgroundFloatingTextShown(true);
}
}, [currentBootStatusTextTex.offset, props.mainMenuVisible]);
const [bootOpacity, setBootOpacity] = useState(1);
const [graySquarePosY, setGraySquarePosY] = useState(-0.8);
const [lofPosX, setLofPosX] = useState(0);
@ -196,7 +199,7 @@ const BootAnimation = (props: BootAnimationProps) => {
opacity={animationState.graySquareOpacity}
/>
</a.sprite>
{props.activeSubScene !== "authorize_user" ? (
{props.activeSubScene !== "authorize_user" && (
<>
{/*we have two of each to create looping effect*/}
<a.sprite
@ -315,8 +318,6 @@ const BootAnimation = (props: BootAnimationProps) => {
/>
</sprite>
</>
) : (
<></>
)}
</group>
);

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

@ -8,9 +8,7 @@ import authorizeInactiveLetters from "../../static/sprites/boot/authorize_inacti
import authorizeActiveLetters from "../../static/sprites/boot/authorize_active_letters.png";
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
import { OrbitControls } from "@react-three/drei";
import { useStore } from "../../store";
import usePrevious from "../../hooks/usePrevious";
import StaticJpCharacter from "../TextRenderer/StaticJpCharacter";
type BootAuthorizeUserProps = {
@ -44,7 +42,6 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
authorizeActiveLetters
);
const subscene = useStore((state) => state.bootSubscene);
const authorizeUserMatrixIndices = useStore(
(state) => state.authorizeUserMatrixIndices
);
@ -115,8 +112,9 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
</sprite>
<sprite
scale={[0.2, 0.2, 0]}
position={[-0.2, -0.3, 0]}
position={[-0.19, -0.3, 0]}
renderOrder={3}
visible={!(playerName.length === 8)}
>
<spriteMaterial
map={authorizeOrangeSquareTex}
@ -125,8 +123,15 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
depthTest={false}
/>
</sprite>
<group position={[playerName.length * -0.25 - 0.2, -0.27, 0]}>
<group
position={[
(playerName.length === 8 ? 0.2 : 0) +
playerName.length * -0.2 -
0.2,
-0.29,
0,
]}
>
{playerName.map((char, idx) => (
<StaticJpCharacter char={char} charIdx={idx} key={idx} />
))}
@ -144,11 +149,10 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
/>
</sprite>
<OrbitControls />
<group position={[-1.15, 0.4, 0.3]} rotation={[-0.8, 0, -0.3]}>
<mesh
scale={[4, 1.28, 0]}
position={[3.35, -0.7, 0]}
position={[1.25, -0.45, 0]}
ref={bgLettersRef}
>
<planeBufferGeometry attach="geometry" />
@ -156,7 +160,6 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
map={authorizeInactiveLettersTex}
attach="material"
transparent={true}
side={THREE.DoubleSide}
/>
</mesh>
<mesh

7
src/components/IdleManager.tsx
View file

@ -11,6 +11,7 @@ import {
getRandomIdleMedia,
} from "../helpers/idle-helpers";
import handleEvent from "../core/handleEvent";
import { useEffect } from "react";
type IdleManagerProps = {
lainIdleTimerRef: any;
@ -21,6 +22,12 @@ const IdleManager = (props: IdleManagerProps) => {
const mainSubscene = useStore((state) => state.mainSubscene);
const scene = useStore((state) => state.currentScene);
useEffect(() => {
if (scene !== "main") {
props.idleSceneTimerRef.current = -1;
}
}, [props.idleSceneTimerRef, scene]);
useFrame(() => {
const now = Date.now();
if (

36
src/components/InputHandler.tsx
View file

@ -20,6 +20,8 @@ import circleButton from "../static/sprites/controller/circle.png";
import squareButton from "../static/sprites/controller/square.png";
import triangleButton from "../static/sprites/controller/triangle.png";
import crossButton from "../static/sprites/controller/cross.png";
import startButton from "../static/sprites/controller/start.png";
import l2Button from "../static/sprites/controller/l2.png";
import * as THREE from "three";
import { useGesture } from "react-use-gesture";
import IdleManager from "./IdleManager";
@ -32,6 +34,8 @@ const InputHandler = () => {
const crossButtonTex = useLoader(THREE.TextureLoader, crossButton);
const squareButtonTex = useLoader(THREE.TextureLoader, squareButton);
const triangleButtonTex = useLoader(THREE.TextureLoader, triangleButton);
const startButtonTex = useLoader(THREE.TextureLoader, startButton);
const l2ButtonTex = useLoader(THREE.TextureLoader, l2Button);
const timeSinceLastKeyPress = useRef(-1);
@ -166,7 +170,37 @@ const InputHandler = () => {
<spriteMaterial attach="material" opacity={0} depthTest={false} />
</sprite>
<group scale={[0.8, 0.8, 0]} position={[3.5, -2, 0]}>
<sprite
scale={[1.5, 1.5, 0]}
position={[-4, 3, 0]}
renderOrder={99999}
onClick={handleVirtualButtonPress}
name={"L2"}
>
<spriteMaterial
attach="material"
map={l2ButtonTex}
depthTest={false}
opacity={0.8}
/>
</sprite>
<sprite
scale={[1.5, 1.5, 0]}
position={[4, 3, 0]}
renderOrder={99999}
onClick={handleVirtualButtonPress}
name={"START"}
>
<spriteMaterial
attach="material"
map={startButtonTex}
depthTest={false}
opacity={0.8}
/>
</sprite>
<group scale={[0.8, 0.8, 0]} position={[3.5, -2.3, 0]}>
<sprite
scale={[1.5, 1.5, 0]}
position={[1, 0, 0]}

4
src/components/MainScene/LevelSelection.tsx
View file

@ -124,7 +124,7 @@ const LevelSelection = () => {
]);
return (
<group>
<>
<a.group position-y={pos.vertPosY} renderOrder={5}>
<mesh
scale={[0.3, 0.4, 0]}
@ -212,7 +212,7 @@ const LevelSelection = () => {
depthTest={false}
/>
</a.sprite>
</group>
</>
);
};

4
src/components/TextRenderer/StaticJpCharacter.tsx
View file

@ -34,8 +34,8 @@ const StaticJpCharacter = memo((props: { char: string; charIdx: number }) => {
return (
<mesh
position={[props.charIdx / 4, 0, 0]}
scale={[0.25, 0.25, 0]}
position={[props.charIdx / 5, 0, 0]}
scale={[0.2, 0.2, 0]}
geometry={geom}
renderOrder={205}
>

2
src/core/eventTemplates.ts
View file

@ -662,7 +662,7 @@ export const exitUserAuthorization = {
playerName: "",
bootSubscene: "main_menu",
inputCooldown: 500,
authorizeUserMatrixIndices: { rowIdx: 0, colIdx: 0 },
authorizeUserMatrixIndices: { rowIdx: 1, colIdx: 7 },
},
},
],

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

@ -1,5 +1,8 @@
import authorize_user_letters from "../../resources/authorize_user_letters.json";
import handleNameSelection from "../../helpers/name-selection-helpers";
import {
handleNameSelection,
handleUserAuthorizationMove,
} from "../../helpers/name-selection-helpers";
import {
changeMainMenuComponent,
changePromptComponent,
@ -83,62 +86,21 @@ const handleBootSceneInput = (
} else {
return exitUserAuthorization;
}
case "LEFT": {
const newMatrixIndices = {
...authorizeUserMatrixIndices,
colIdx:
authorizeUserMatrixIndices.colIdx - 1 < 0
? authorizeUserMatrixIndices.colIdx
: authorizeUserMatrixIndices.colIdx - 1,
};
return updateAuthorizeUserLetterMatrixIndices({
authorizeUserLetterMatrixIndices: newMatrixIndices,
});
}
case "RIGHT": {
const newMatrixIndices = {
...authorizeUserMatrixIndices,
colIdx:
authorizeUserMatrixIndices.colIdx + 1 > 12
? authorizeUserMatrixIndices.colIdx
: authorizeUserMatrixIndices.colIdx + 1,
};
return updateAuthorizeUserLetterMatrixIndices({
authorizeUserLetterMatrixIndices: newMatrixIndices,
});
}
case "DOWN": {
const newMatrixIndices = {
...authorizeUserMatrixIndices,
rowIdx:
authorizeUserMatrixIndices.rowIdx + 1 > 4
? authorizeUserMatrixIndices.rowIdx
: authorizeUserMatrixIndices.rowIdx + 1,
};
return updateAuthorizeUserLetterMatrixIndices({
authorizeUserLetterMatrixIndices: newMatrixIndices,
});
}
case "UP": {
const newMatrixIndices = {
...authorizeUserMatrixIndices,
rowIdx:
authorizeUserMatrixIndices.rowIdx - 1 < 0
? authorizeUserMatrixIndices.rowIdx
: authorizeUserMatrixIndices.rowIdx - 1,
};
return updateAuthorizeUserLetterMatrixIndices({
authorizeUserLetterMatrixIndices: newMatrixIndices,
});
}
case "LEFT":
case "UP":
case "DOWN":
case "RIGHT":
const direction = keyPress.toLowerCase();
const newMatrixIndices = handleUserAuthorizationMove(
authorizeUserMatrixIndices,
direction
);
if (newMatrixIndices)
return updateAuthorizeUserLetterMatrixIndices({
authorizeUserLetterMatrixIndices: newMatrixIndices,
});
break;
case "CIRCLE":
const chosenCharacter =
authorize_user_letters.matrix[authorizeUserMatrixIndices.rowIdx][
@ -148,7 +110,7 @@ const handleBootSceneInput = (
if (chosenCharacter) {
const newName = handleNameSelection(playerName, chosenCharacter);
if (newName?.length === 8) return;
if (newName && newName.length > 8) return;
if (newName !== undefined)
return updatePlayerName({ playerName: newName });
else return failUpdatePlayerName;

52
src/helpers/name-selection-helpers.ts
View file

@ -1,6 +1,11 @@
// huge thanks to oo for help with this!!
import authorize_user_letters from "../resources/authorize_user_letters.json";
import { AuthorizeUserMatrixIndices } from "../types/types";
const handleNameSelection = (currentString: string, newCharacter: string) => {
// huge thanks to oo for help with this!!
export const handleNameSelection = (
currentString: string,
newCharacter: string
) => {
// characters that cannot be the first letter
const cantBeFirst = [
"ン",
@ -120,4 +125,45 @@ const handleNameSelection = (currentString: string, newCharacter: string) => {
return currentString.concat(newCharacter);
};
export default handleNameSelection;
export const handleUserAuthorizationMove = (
matrixIndices: AuthorizeUserMatrixIndices,
direction: string
): AuthorizeUserMatrixIndices | undefined => {
const funcs = {
up: (matIndices: AuthorizeUserMatrixIndices) => ({
...matIndices,
rowIdx: matIndices.rowIdx - 1,
}),
down: (matIndices: AuthorizeUserMatrixIndices) => ({
...matIndices,
rowIdx: matIndices.rowIdx + 1,
}),
left: (matIndices: AuthorizeUserMatrixIndices) => ({
...matIndices,
colIdx: matIndices.colIdx - 1,
}),
right: (matIndices: AuthorizeUserMatrixIndices) => ({
...matIndices,
colIdx: matIndices.colIdx + 1,
}),
};
const boundaries = {
up: (matIndices: AuthorizeUserMatrixIndices) => matIndices.rowIdx === 0,
down: (matIndices: AuthorizeUserMatrixIndices) => matIndices.rowIdx === 4,
left: (matIndices: AuthorizeUserMatrixIndices) => matIndices.colIdx === 0,
right: (matIndices: AuthorizeUserMatrixIndices) => matIndices.colIdx === 12,
};
const isBoundary = boundaries[direction as keyof typeof boundaries](
matrixIndices
);
if (isBoundary) return;
const res = funcs[direction as keyof typeof funcs](matrixIndices);
const chosenCharacter = authorize_user_letters.matrix[res.rowIdx][res.colIdx];
if (chosenCharacter) return res;
else return handleUserAuthorizationMove(res, direction);
};

6
src/scenes/BootScene.tsx
View file

@ -24,7 +24,11 @@ const BootScene = () => {
return (
<group position-z={3}>
<BootAccela visible={accelaVisible} />
<BootAnimation visible={!accelaVisible} activeSubScene={activeSubscene} />
<BootAnimation
visible={!accelaVisible}
activeSubScene={activeSubscene}
mainMenuVisible={mainMenuVisible}
/>
<BootMainMenuComponents
visible={mainMenuVisible}
activeSubScene={activeSubscene}

6
src/store.ts
View file

@ -199,13 +199,13 @@ export const useStore = create(
},
// player name
playerName: "アイウエオ",
playerName: "",
// boot scene
activeMainMenuComponent: "authorize_user",
authorizeUserMatrixIndices: {
rowIdx: 0,
colIdx: 0,
rowIdx: 1,
colIdx: 7,
},
bootSubscene: "main_menu",