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

authorize user text movement done

Browse source
This commit is contained in:
ad044 2020-11-21 20:55:01 +04:00
parent c522cfd48c
commit 2f5153fd2b
3 changed files with 142 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/components/Boot/BootAuthorizeUser.tsx
View file

@ -1,12 +1,15 @@
import React, { useRef } from "react";
import React, { useCallback, useMemo, useRef } from "react";
import authorizeHeaderUnderline from "../../static/sprite/authorize_header_underline.png";
import authorizeGlass from "../../static/sprite/authorize_glass.png";
import authorizeGlassUnderline from "../../static/sprite/authorize_glass_underline.png";
import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.png";
import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_letters.png";
import authorizeActiveLetters from "../../static/sprite/authorize_active_letters.png";
import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
import { useBootStore } from "../../store";
import { OrbitControls } from "@react-three/drei";
type BootAuthorizeUserProps = {
visible: boolean;
@ -34,17 +37,29 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
THREE.TextureLoader,
authorizeInactiveLetters
);
const authorizeActiveLettersTex = useLoader(
THREE.TextureLoader,
authorizeActiveLetters
);
const backgroundLetterRef = useRef<THREE.Object3D>();
const backgroundLettersPos = useBootStore((state) => state.lettersPos);
const activeLetterTextureOffset = useBootStore(
(state) => state.activeLetterTextureOffset
);
useFrame(() => {
if (backgroundLetterRef.current) {
// backgroundLetterRef.current.position.x += 0.01
}
});
const authorizeActiveLettersMap = useMemo(() => {
authorizeActiveLettersTex.wrapT = authorizeActiveLettersTex.wrapS =
THREE.RepeatWrapping;
authorizeActiveLettersTex.repeat.set(0.06, 0.2);
authorizeActiveLettersTex.offset.x = activeLetterTextureOffset.x;
authorizeActiveLettersTex.offset.y = activeLetterTextureOffset.y;
return authorizeActiveLettersTex;
}, [activeLetterTextureOffset, authorizeActiveLettersTex]);
return (
<>
<OrbitControls />
{props.visible ? (
<>
<sprite
@ -112,8 +127,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
<mesh
scale={[4, 1.28, 0]}
renderOrder={-1}
position={[-0.45, -0.6, 0]}
ref={backgroundLetterRef}
position={[backgroundLettersPos.x, backgroundLettersPos.y, 0]}
>
<planeBufferGeometry attach="geometry" />
<meshBasicMaterial
@ -122,6 +136,28 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
transparent={true}
/>
</mesh>
<mesh
scale={[0.35, 0.45, 0]}
position={[1.51, -0.12, 0]}
renderOrder={2}
>
<planeBufferGeometry attach="geometry" />
<meshBasicMaterial
map={authorizeActiveLettersMap}
attach="material"
transparent={true}
depthTest={false}
/>
</mesh>
<mesh position={[1.54, -0.13, 0]} renderOrder={1}>
<circleBufferGeometry attach="geometry" args={[0.221, 32]} />
<meshBasicMaterial
attach="material"
transparent={true}
depthTest={false}
color={0x000000}
/>
</mesh>
</group>
</>
) : (

25
src/core/StateManagers/BootManager.tsx
View file

@ -7,6 +7,9 @@ const BootManager = (props: StateManagerProps) => {
(state) => state.toggleComponentMatrixIdx
);
const setBootSubscene = useBootStore((state) => state.setSubscene);
const moveAuthorizeUserLetters = useBootStore(
(state) => state.moveAuthorizeUserLetters
);
const dispatchObject = useCallback(
(event: string) => {
@ -34,11 +37,31 @@ const BootManager = (props: StateManagerProps) => {
action: setBootSubscene,
value: "authorize_user",
};
case "authorize_user_right":
return {
action: moveAuthorizeUserLetters,
value: "right",
};
case "authorize_user_left":
return {
action: moveAuthorizeUserLetters,
value: "left",
};
case "authorize_user_up":
return {
action: moveAuthorizeUserLetters,
value: "up",
};
case "authorize_user_down":
return {
action: moveAuthorizeUserLetters,
value: "down",
};
case "load_data_select":
return { action: setBootSubscene, value: "load_data" };
}
},
[setBootSubscene, toggleComponentMatrixIdx]
[moveAuthorizeUserLetters, setBootSubscene, toggleComponentMatrixIdx]
);
useEffect(() => {

89
src/store.ts
View file

@ -454,22 +454,13 @@ export const useBootStore = create(
load_data: ["load_data_yes", "load_data_no"],
authorize_user: ["authorize_user_letters"],
},
authorizeUserLetterMatrix: {
xIndices: [
3.35,
3.05,
2.75,
2.45,
2.15,
1.85,
1.55,
1.25,
0.75,
0.45,
0.15,
-0.15,
-0.45,
],
lettersPos: {
x: 3.35,
y: -0.7,
},
activeLetterTextureOffset: {
x: 0,
y: -0.2,
},
componentMatrixIndices: {
// 0 or 1
@ -491,6 +482,72 @@ export const useBootStore = create(
},
})),
setSubscene: (to: string) => set(() => ({ subscene: to })),
moveAuthorizeUserLetters: (direction: string) =>
set((state) => {
let initialPos = state.lettersPos;
let initialActiveLetterTextureOffset =
state.activeLetterTextureOffset;
let axis: string;
let finalPosVal: number;
let finalTextureOffsetVal: number;
switch (direction) {
case "right":
axis = "x";
if (initialPos.x - 0.3 < -0.25) {
finalPosVal = -0.25;
finalTextureOffsetVal = 0.93;
} else {
finalPosVal = initialPos.x - 0.3;
finalTextureOffsetVal =
initialActiveLetterTextureOffset.x + 0.0775;
}
break;
case "left":
axis = "x";
if (initialPos.x + 0.3 > 3.35) {
finalPosVal = 3.35;
finalTextureOffsetVal = 0;
} else {
finalPosVal = initialPos.x + 0.3;
finalTextureOffsetVal =
initialActiveLetterTextureOffset.x - 0.0775;
}
break;
case "up":
axis = "y";
if (initialPos.y - 0.25 < -0.7) {
finalPosVal = -0.7;
finalTextureOffsetVal = -0.2;
} else {
finalPosVal = initialPos.y - 0.25;
finalTextureOffsetVal =
initialActiveLetterTextureOffset.y + 0.2;
}
break;
case "down":
axis = "y";
if (initialPos.y + 0.25 > 0.3) {
finalPosVal = 0.3;
finalTextureOffsetVal = -1;
} else {
finalPosVal = initialPos.y + 0.25;
finalTextureOffsetVal =
initialActiveLetterTextureOffset.y - 0.2;
}
break;
}
return {
lettersPos: {
...state.lettersPos,
[axis!]: finalPosVal!,
},
activeLetterTextureOffset: {
...state.activeLetterTextureOffset,
[axis!]: finalTextureOffsetVal!,
},
};
}),
})
)
);