mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
sskn/gate level progression and appropriate node reject animations.
This commit is contained in:
parent
65a1ebc6d4
commit
b24f54f934
43 changed files with 383 additions and 207 deletions
|
@ -51,6 +51,7 @@ const KeyPressHandler = () => {
|
||||||
sceneManager,
|
sceneManager,
|
||||||
gameLoader,
|
gameLoader,
|
||||||
gameSaver,
|
gameSaver,
|
||||||
|
progressManager,
|
||||||
],
|
],
|
||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
import React, { memo, useEffect, useRef } from "react";
|
import React, { memo, useEffect, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import bigHud from "../../../static/sprite/big_hud.png";
|
import bigHud from "../../static/sprite/big_hud.png";
|
||||||
import longHud from "../../../static/sprite/long_hud.png";
|
import longHud from "../../static/sprite/long_hud.png";
|
||||||
import boringHud from "../../../static/sprite/long_hud_boring.png";
|
import boringHud from "../../static/sprite/long_hud_boring.png";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../store";
|
||||||
import lerp from "../../../utils/lerp";
|
import lerp from "../../utils/lerp";
|
||||||
import GreenTextRenderer from "../../TextRenderer/GreenTextRenderer";
|
import GreenTextRenderer from "../TextRenderer/GreenTextRenderer";
|
||||||
import usePrevious from "../../../hooks/usePrevious";
|
import usePrevious from "../../hooks/usePrevious";
|
||||||
import {getNodeHud} from "../../../utils/node-utils";
|
import { getNodeHud } from "../../utils/node-utils";
|
||||||
|
|
||||||
export type HUDType = {
|
export type HUDType = {
|
||||||
mirrored: number;
|
mirrored: number;
|
|
@ -371,6 +371,9 @@ const Lain = (props: LainProps) => {
|
||||||
site_right: <LainMoveRight />,
|
site_right: <LainMoveRight />,
|
||||||
site_up: <LainMoveUp />,
|
site_up: <LainMoveUp />,
|
||||||
site_down: <LainMoveDown />,
|
site_down: <LainMoveDown />,
|
||||||
|
knock_and_fall: <LainKnockAndFall />,
|
||||||
|
touch_and_scare: <LainTouchAndScare />,
|
||||||
|
knock: <LainKnock />,
|
||||||
select_level_down: <LainMoveDown />,
|
select_level_down: <LainMoveDown />,
|
||||||
select_level_up: <LainMoveUp />,
|
select_level_up: <LainMoveUp />,
|
||||||
throw_node: <LainThrowNode />,
|
throw_node: <LainThrowNode />,
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import level_selection_font from "../../../static/sprite/select_level_font.png";
|
import level_selection_font from "../../static/sprite/select_level_font.png";
|
||||||
import verticalHud from "../../../static/sprite/select_level_hud_vertical.png";
|
import verticalHud from "../../static/sprite/select_level_hud_vertical.png";
|
||||||
import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.png";
|
import horizontalHud from "../../static/sprite/select_level_hud_horizontal.png";
|
||||||
import levelSelectionText from "../../../static/sprite/select_level_text.png";
|
import levelSelectionText from "../../static/sprite/select_level_text.png";
|
||||||
import upArrow from "../../../static/sprite/select_level_up_arrow.png";
|
import upArrow from "../../static/sprite/select_level_up_arrow.png";
|
||||||
import downArrow from "../../../static/sprite/select_level_down_arrow.png";
|
import downArrow from "../../static/sprite/select_level_down_arrow.png";
|
||||||
import upArrowActive from "../../../static/sprite/select_level_up_arrow_active.png";
|
import upArrowActive from "../../static/sprite/select_level_up_arrow_active.png";
|
||||||
import downArrowActive from "../../../static/sprite/select_level_down_arrow_active.png";
|
import downArrowActive from "../../static/sprite/select_level_down_arrow_active.png";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../store";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import usePrevious from "../../../hooks/usePrevious";
|
import usePrevious from "../../hooks/usePrevious";
|
||||||
|
|
||||||
const LevelSelection = () => {
|
const LevelSelection = () => {
|
||||||
const levelSelectionFontTex = useLoader(
|
const levelSelectionFontTex = useLoader(
|
|
@ -1,12 +1,12 @@
|
||||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
|
import middleRingTexture from "../../static/sprite/middle_ring_tex.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../store";
|
||||||
import MiddleRingPart from "./MiddleRing/MiddleRingPart";
|
import MiddleRingPart from "./MiddleRing/MiddleRingPart";
|
||||||
import usePrevious from "../../../hooks/usePrevious";
|
import usePrevious from "../../hooks/usePrevious";
|
||||||
import lerp from "../../../utils/lerp";
|
import lerp from "../../utils/lerp";
|
||||||
|
|
||||||
const MiddleRing = () => {
|
const MiddleRing = () => {
|
||||||
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useEffect, useMemo } from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
import middleRingTexture from "../../../../static/sprite/middle_ring_tex.png";
|
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useStore } from "../../../../store";
|
import { useStore } from "../../../store";
|
||||||
|
|
||||||
type MiddleRingPartProps = {
|
type MiddleRingPartProps = {
|
||||||
position: number[];
|
position: number[];
|
|
@ -1,17 +1,14 @@
|
||||||
import React, { Suspense, useEffect, useMemo, useRef } from "react";
|
import React, { Suspense, useEffect, useMemo } from "react";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../store";
|
||||||
import ActiveLevelNodes from "./Site/ActiveLevelNodes";
|
import ActiveLevelNodes from "./Site/ActiveLevelNodes";
|
||||||
import Rings from "./Site/Rings";
|
import Rings from "./Site/Rings";
|
||||||
import NodeAnimations from "./Site/NodeAnimations";
|
import NodeAnimations from "./Site/NodeAnimations";
|
||||||
import InactiveLevelNodes from "./Site/InactiveLevelNodes";
|
import InactiveLevelNodes from "./Site/InactiveLevelNodes";
|
||||||
import { useFrame } from "react-three-fiber";
|
import site_a from "../../resources/site_a.json";
|
||||||
import * as THREE from "three";
|
import site_b from "../../resources/site_b.json";
|
||||||
import site_a from "../../../resources/site_a.json";
|
import level_y_values from "../../resources/level_y_values.json";
|
||||||
import site_b from "../../../resources/site_b.json";
|
import { filterInvisibleNodes } from "../../utils/node-utils";
|
||||||
import level_y_values from "../../../resources/level_y_values.json";
|
|
||||||
import { filterInvisibleNodes } from "../../../utils/node-utils";
|
|
||||||
import usePrevious from "../../../hooks/usePrevious";
|
|
||||||
|
|
||||||
export type NodeDataType = {
|
export type NodeDataType = {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -32,6 +29,7 @@ export type NodeDataType = {
|
||||||
rowIdx: number;
|
rowIdx: number;
|
||||||
colIdx: number;
|
colIdx: number;
|
||||||
};
|
};
|
||||||
|
is_viewed?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type LevelType = {
|
export type LevelType = {
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { memo, useEffect, useState } from "react";
|
import React, { memo, useEffect, useState } from "react";
|
||||||
import Node from "./Node";
|
import Node from "./Node";
|
||||||
import node_positions from "../../../../resources/node_positions.json";
|
import node_positions from "../../../resources/node_positions.json";
|
||||||
import { useStore } from "../../../../store";
|
import { useStore } from "../../../store";
|
||||||
import { NodeDataType, SiteType } from "../Site";
|
import { NodeDataType, SiteType } from "../Site";
|
||||||
import usePrevious from "../../../../hooks/usePrevious";
|
import usePrevious from "../../../hooks/usePrevious";
|
||||||
|
|
||||||
type ActiveLevelNodesProps = {
|
type ActiveLevelNodesProps = {
|
||||||
visibleNodes: SiteType;
|
visibleNodes: SiteType;
|
||||||
|
@ -56,6 +56,7 @@ const ActiveLevelNodes = memo((props: ActiveLevelNodesProps) => {
|
||||||
key={node.node_name}
|
key={node.node_name}
|
||||||
active={node.id === activeNodeId}
|
active={node.id === activeNodeId}
|
||||||
level={node.id.substr(0, 2)}
|
level={node.id.substr(0, 2)}
|
||||||
|
viewed={Boolean(node.is_viewed)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { memo, useMemo } from "react";
|
import React, { memo, useMemo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import lofTexture from "../../../../static/sprite/gray_ring_lof.png";
|
import lofTexture from "../../../static/sprite/gray_ring_lof.png";
|
||||||
import holeTexture from "../../../../static/sprite/hole.png";
|
import holeTexture from "../../../static/sprite/hole.png";
|
||||||
import lifeTexture from "../../../../static/sprite/life.png";
|
import lifeTexture from "../../../static/sprite/life.png";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
|
|
||||||
type GrayRingProps = {
|
type GrayRingProps = {
|
|
@ -2,55 +2,66 @@ import React, { memo, useMemo } from "react";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import { a } from "@react-spring/three";
|
import { a } from "@react-spring/three";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import Cou from "../../../../static/sprite/Cou.png";
|
import Cou from "../../../static/sprite/Cou.png";
|
||||||
import Dc from "../../../../static/sprite/Dc.png";
|
import CouViewed from "../../../static/sprite/Cou_viewed.png";
|
||||||
import SSkn from "../../../../static/sprite/SSkn.png";
|
import Dc from "../../../static/sprite/Dc.png";
|
||||||
import Tda from "../../../../static/sprite/Tda.png";
|
import DcViewed from "../../../static/sprite/Dc_viewed.png";
|
||||||
import Dia from "../../../../static/sprite/Dia.png";
|
import SSkn from "../../../static/sprite/SSkn.png";
|
||||||
import Lda from "../../../../static/sprite/Lda.png";
|
import SSknViewed from "../../../static/sprite/SSkn_viewed.png";
|
||||||
import MULTI from "../../../../static/sprite/MULTI.png";
|
import Tda from "../../../static/sprite/Tda.png";
|
||||||
import level_y_values from "../../../../resources/level_y_values.json";
|
import TdaViewed from "../../../static/sprite/Tda_viewed.png";
|
||||||
|
import Dia from "../../../static/sprite/Dia.png";
|
||||||
|
import DiaViewed from "../../../static/sprite/Dia_viewed.png";
|
||||||
|
import Lda from "../../../static/sprite/Lda.png";
|
||||||
|
import LdaViewed from "../../../static/sprite/Lda_viewed.png";
|
||||||
|
import MULTI from "../../../static/sprite/MULTI.png";
|
||||||
|
import MULTIViewed from "../../../static/sprite/MULTI_viewed.png";
|
||||||
|
import level_y_values from "../../../resources/level_y_values.json";
|
||||||
|
|
||||||
type NodeContructorProps = {
|
type NodeContructorProps = {
|
||||||
nodeName: string;
|
nodeName: string;
|
||||||
position: number[];
|
position: number[];
|
||||||
rotation: number[];
|
rotation: number[];
|
||||||
level: string;
|
level: string;
|
||||||
|
viewed: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const InactiveLevelNode = memo((props: NodeContructorProps) => {
|
const InactiveLevelNode = memo((props: NodeContructorProps) => {
|
||||||
const tex = useMemo(() => {
|
const tex = useMemo(() => {
|
||||||
if (props.nodeName.includes("S")) {
|
if (props.nodeName.includes("S")) {
|
||||||
return SSkn;
|
return [SSkn, SSknViewed];
|
||||||
} else if (
|
} else if (
|
||||||
props.nodeName.startsWith("P") ||
|
props.nodeName.startsWith("P") ||
|
||||||
props.nodeName.startsWith("G") ||
|
props.nodeName.startsWith("G") ||
|
||||||
props.nodeName.includes("?")
|
props.nodeName.includes("?")
|
||||||
) {
|
) {
|
||||||
return MULTI;
|
return [MULTI, MULTIViewed];
|
||||||
} else if (props.nodeName.includes("Dc")) {
|
} else if (props.nodeName.includes("Dc")) {
|
||||||
return Dc;
|
return [Dc, DcViewed];
|
||||||
} else {
|
} else {
|
||||||
switch (props.nodeName.substr(0, 3)) {
|
switch (props.nodeName.substr(0, 3)) {
|
||||||
case "Tda":
|
case "Tda":
|
||||||
return Tda;
|
return [Tda, TdaViewed];
|
||||||
case "Cou":
|
case "Cou":
|
||||||
return Cou;
|
return [Cou, CouViewed];
|
||||||
case "Dia":
|
case "Dia":
|
||||||
return Dia;
|
return [Dia, DiaViewed];
|
||||||
case "Lda":
|
case "Lda":
|
||||||
return Lda;
|
return [Lda, LdaViewed];
|
||||||
case "Ere":
|
case "Ere":
|
||||||
case "Ekm":
|
case "Ekm":
|
||||||
case "Eda":
|
case "Eda":
|
||||||
case "TaK":
|
case "TaK":
|
||||||
case "Env":
|
case "Env":
|
||||||
return MULTI;
|
return [MULTI, MULTIViewed];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [props.nodeName]);
|
}, [props.nodeName]);
|
||||||
|
|
||||||
const nonActiveTexture = useLoader(THREE.TextureLoader, tex!);
|
const nonActiveTexture = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
props.viewed ? tex![1] : tex![0]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
|
@ -1,10 +1,10 @@
|
||||||
import React, { memo, useEffect, useState } from "react";
|
import React, { memo, useEffect, useState } from "react";
|
||||||
import node_positions from "../../../../resources/node_positions.json";
|
import node_positions from "../../../resources/node_positions.json";
|
||||||
import { useStore } from "../../../../store";
|
import { useStore } from "../../../store";
|
||||||
import { SiteType } from "../Site";
|
import { SiteType } from "../Site";
|
||||||
import InactiveLevelNode from "./InactiveLevelNode";
|
import InactiveLevelNode from "./InactiveLevelNode";
|
||||||
import usePrevious from "../../../../hooks/usePrevious";
|
import usePrevious from "../../../hooks/usePrevious";
|
||||||
import { generateInactiveNodes } from "../../../../utils/node-utils";
|
import { generateInactiveNodes } from "../../../utils/node-utils";
|
||||||
|
|
||||||
type ActiveLevelNodesProps = {
|
type ActiveLevelNodesProps = {
|
||||||
visibleNodes: SiteType;
|
visibleNodes: SiteType;
|
||||||
|
@ -53,6 +53,7 @@ const InactiveLevelNodes = memo((props: ActiveLevelNodesProps) => {
|
||||||
}
|
}
|
||||||
key={node[1].node_name}
|
key={node[1].node_name}
|
||||||
level={node[0].substr(0, 2)}
|
level={node[0].substr(0, 2)}
|
||||||
|
viewed={Boolean(node[1].is_viewed)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
|
@ -2,22 +2,29 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import Cou from "../../../../static/sprite/Cou.png";
|
import Cou from "../../../static/sprite/Cou.png";
|
||||||
import CouActive from "../../../../static/sprite/Cou_active.png";
|
import CouActive from "../../../static/sprite/Cou_active.png";
|
||||||
import Dc from "../../../../static/sprite/Dc.png";
|
import CouViewed from "../../../static/sprite/Cou_viewed.png";
|
||||||
import DcActive from "../../../../static/sprite/Dc_active.png";
|
import Dc from "../../../static/sprite/Dc.png";
|
||||||
import SSkn from "../../../../static/sprite/SSkn.png";
|
import DcActive from "../../../static/sprite/Dc_active.png";
|
||||||
import SSKnActive from "../../../../static/sprite/SSkn_active.png";
|
import DcViewed from "../../../static/sprite/Dc_viewed.png";
|
||||||
import Tda from "../../../../static/sprite/Tda.png";
|
import SSkn from "../../../static/sprite/SSkn.png";
|
||||||
import TdaActive from "../../../../static/sprite/Tda_active.png";
|
import SSKnActive from "../../../static/sprite/SSkn_active.png";
|
||||||
import Dia from "../../../../static/sprite/Dia.png";
|
import SSknViewed from "../../../static/sprite/SSkn_viewed.png";
|
||||||
import DiaActive from "../../../../static/sprite/Dia_active.png";
|
import Tda from "../../../static/sprite/Tda.png";
|
||||||
import Lda from "../../../../static/sprite/Lda.png";
|
import TdaActive from "../../../static/sprite/Tda_active.png";
|
||||||
import LdaActive from "../../../../static/sprite/Lda_active.png";
|
import TdaViewed from "../../../static/sprite/Tda_viewed.png";
|
||||||
import MULTI from "../../../../static/sprite/MULTI.png";
|
import Dia from "../../../static/sprite/Dia.png";
|
||||||
import MULTIActive from "../../../../static/sprite/MULTI_active.png";
|
import DiaActive from "../../../static/sprite/Dia_active.png";
|
||||||
import level_y_values from "../../../../resources/level_y_values.json";
|
import DiaViewed from "../../../static/sprite/Dia_viewed.png";
|
||||||
import { useStore } from "../../../../store";
|
import Lda from "../../../static/sprite/Lda.png";
|
||||||
|
import LdaActive from "../../../static/sprite/Lda_active.png";
|
||||||
|
import LdaViewed from "../../../static/sprite/Lda_viewed.png";
|
||||||
|
import MULTI from "../../../static/sprite/MULTI.png";
|
||||||
|
import MULTIActive from "../../../static/sprite/MULTI_active.png";
|
||||||
|
import MULTIViewed from "../../../static/sprite/MULTI_viewed.png";
|
||||||
|
import level_y_values from "../../../resources/level_y_values.json";
|
||||||
|
import { useStore } from "../../../store";
|
||||||
|
|
||||||
type NodeContructorProps = {
|
type NodeContructorProps = {
|
||||||
nodeName: string;
|
nodeName: string;
|
||||||
|
@ -25,43 +32,47 @@ type NodeContructorProps = {
|
||||||
rotation: number[];
|
rotation: number[];
|
||||||
active: boolean;
|
active: boolean;
|
||||||
level: string;
|
level: string;
|
||||||
|
viewed: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Node = memo((props: NodeContructorProps) => {
|
const Node = memo((props: NodeContructorProps) => {
|
||||||
const tex = useMemo(() => {
|
const tex = useMemo(() => {
|
||||||
if (props.nodeName.includes("S")) {
|
if (props.nodeName.includes("S")) {
|
||||||
return [SSkn, SSKnActive];
|
return [SSkn, SSKnActive, SSknViewed];
|
||||||
} else if (
|
} else if (
|
||||||
props.nodeName.startsWith("P") ||
|
props.nodeName.startsWith("P") ||
|
||||||
props.nodeName.startsWith("G") ||
|
props.nodeName.startsWith("G") ||
|
||||||
props.nodeName.includes("?")
|
props.nodeName.includes("?")
|
||||||
) {
|
) {
|
||||||
return [MULTI, MULTIActive];
|
return [MULTI, MULTIActive, MULTIViewed];
|
||||||
} else if (props.nodeName.includes("Dc")) {
|
} else if (props.nodeName.includes("Dc")) {
|
||||||
return [Dc, DcActive];
|
return [Dc, DcActive, DcViewed];
|
||||||
} else {
|
} else {
|
||||||
switch (props.nodeName.substr(0, 3)) {
|
switch (props.nodeName.substr(0, 3)) {
|
||||||
case "Tda":
|
case "Tda":
|
||||||
return [Tda, TdaActive];
|
return [Tda, TdaActive, TdaViewed];
|
||||||
case "Cou":
|
case "Cou":
|
||||||
return [Cou, CouActive];
|
return [Cou, CouActive, CouViewed];
|
||||||
case "Dia":
|
case "Dia":
|
||||||
return [Dia, DiaActive];
|
return [Dia, DiaActive, DiaViewed];
|
||||||
case "Lda":
|
case "Lda":
|
||||||
return [Lda, LdaActive];
|
return [Lda, LdaActive, LdaViewed];
|
||||||
case "Ere":
|
case "Ere":
|
||||||
case "Ekm":
|
case "Ekm":
|
||||||
case "Eda":
|
case "Eda":
|
||||||
case "TaK":
|
case "TaK":
|
||||||
case "Env":
|
case "Env":
|
||||||
return [MULTI, MULTIActive];
|
return [MULTI, MULTIActive, MULTIViewed];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [props.nodeName]);
|
}, [props.nodeName]);
|
||||||
|
|
||||||
const materialRef = useRef<THREE.ShaderMaterial>();
|
const materialRef = useRef<THREE.ShaderMaterial>();
|
||||||
|
|
||||||
const nonActiveTexture = useLoader(THREE.TextureLoader, tex![0]);
|
const nonActiveTexture = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
props.viewed ? tex![2] : tex![0]
|
||||||
|
);
|
||||||
const activeTexture = useLoader(THREE.TextureLoader, tex![1]);
|
const activeTexture = useLoader(THREE.TextureLoader, tex![1]);
|
||||||
|
|
||||||
const uniforms = useMemo(
|
const uniforms = useMemo(
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useStore } from "../../../../store";
|
import { useStore } from "../../../store";
|
||||||
import NodeExplosion from "./NodeAnimations/NodeExplosion";
|
import NodeExplosion from "./NodeAnimations/NodeExplosion";
|
||||||
import NodeRip from "./NodeAnimations/NodeRip";
|
import NodeRip from "./NodeAnimations/NodeRip";
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import ExplosionLine from "./NodeExplosion/ExplosionLine";
|
import ExplosionLine from "./NodeExplosion/ExplosionLine";
|
||||||
import node_explosion_line_positions from "../../../../../resources/node_explosion_line_positions.json";
|
import node_explosion_line_positions from "../../../../resources/node_explosion_line_positions.json";
|
||||||
|
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import GoldNode from "./NodeExplosion/GoldNode";
|
import GoldNode from "./NodeExplosion/GoldNode";
|
||||||
import { useStore } from "../../../../../store";
|
import { useStore } from "../../../../store";
|
||||||
|
|
||||||
const NodeExplosion = () => {
|
const NodeExplosion = () => {
|
||||||
const explosionVisible = useStore(
|
const explosionVisible = useStore(
|
|
@ -2,21 +2,21 @@ import React, { useEffect, useMemo, useRef } from "react";
|
||||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import Cou from "../../../../../../static/sprite/Cou.png";
|
import Cou from "../../../../../static/sprite/Cou.png";
|
||||||
import CouGold from "../../../../../../static/sprite/Cou_gold.png";
|
import CouGold from "../../../../../static/sprite/Cou_gold.png";
|
||||||
import Dc from "../../../../../../static/sprite/Dc.png";
|
import Dc from "../../../../../static/sprite/Dc.png";
|
||||||
import DcGold from "../../../../../../static/sprite/Dc_gold.png";
|
import DcGold from "../../../../../static/sprite/Dc_gold.png";
|
||||||
import SSkn from "../../../../../../static/sprite/SSkn.png";
|
import SSkn from "../../../../../static/sprite/SSkn.png";
|
||||||
import SSKnGold from "../../../../../../static/sprite/SSkn_gold.png";
|
import SSKnGold from "../../../../../static/sprite/SSkn_gold.png";
|
||||||
import Tda from "../../../../../../static/sprite/Tda.png";
|
import Tda from "../../../../../static/sprite/Tda.png";
|
||||||
import TdaGold from "../../../../../../static/sprite/Tda_gold.png";
|
import TdaGold from "../../../../../static/sprite/Tda_gold.png";
|
||||||
import Dia from "../../../../../../static/sprite/Dia.png";
|
import Dia from "../../../../../static/sprite/Dia.png";
|
||||||
import DiaGold from "../../../../../../static/sprite/Dia_gold.png";
|
import DiaGold from "../../../../../static/sprite/Dia_gold.png";
|
||||||
import Lda from "../../../../../../static/sprite/Lda.png";
|
import Lda from "../../../../../static/sprite/Lda.png";
|
||||||
import LdaGold from "../../../../../../static/sprite/Lda_gold.png";
|
import LdaGold from "../../../../../static/sprite/Lda_gold.png";
|
||||||
import MULTI from "../../../../../../static/sprite/MULTI.png";
|
import MULTI from "../../../../../static/sprite/MULTI.png";
|
||||||
import MULTIGold from "../../../../../../static/sprite/MULTI_gold.png";
|
import MULTIGold from "../../../../../static/sprite/MULTI_gold.png";
|
||||||
import { useStore } from "../../../../../../store";
|
import { useStore } from "../../../../../store";
|
||||||
|
|
||||||
type GLTFResult = GLTF & {
|
type GLTFResult = GLTF & {
|
||||||
nodes: {
|
nodes: {
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import TriangleNode from "./NodeRip/TriangleNode";
|
import TriangleNode from "./NodeRip/TriangleNode";
|
||||||
import { useStore } from "../../../../../store";
|
import { useStore } from "../../../../store";
|
||||||
import RipLine from "./NodeRip/RipLine";
|
import RipLine from "./NodeRip/RipLine";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import MULTI from "../../../../../../static/sprite/MULTI.png";
|
import MULTI from "../../../../../static/sprite/MULTI.png";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { memo, useEffect, useMemo, useRef } from "react";
|
import React, { memo, useEffect, useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import siteATex from "../../../../static/sprite/site_a.png";
|
import siteATex from "../../../static/sprite/site_a.png";
|
||||||
import siteBTex from "../../../../static/sprite/site_b.png";
|
import siteBTex from "../../../static/sprite/site_b.png";
|
||||||
import siteLevelTex from "../../../../static/sprite/site_levels.png";
|
import siteLevelTex from "../../../static/sprite/site_levels.png";
|
||||||
|
|
||||||
type PurpleRingProps = {
|
type PurpleRingProps = {
|
||||||
purpleRingPosY: number;
|
purpleRingPosY: number;
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useMemo, memo } from "react";
|
import React, { useMemo, memo } from "react";
|
||||||
import level_y_values from "../../../../resources/level_y_values.json";
|
import level_y_values from "../../../resources/level_y_values.json";
|
||||||
import PurpleRing from "./PurpleRing";
|
import PurpleRing from "./PurpleRing";
|
||||||
import GrayRing from "./GrayRing";
|
import GrayRing from "./GrayRing";
|
||||||
import CyanCrystal from "./CyanCrystal";
|
import CyanCrystal from "./CyanCrystal";
|
||||||
import { useStore } from "../../../../store";
|
import { useStore } from "../../../store";
|
||||||
|
|
||||||
type RingsProps = {
|
type RingsProps = {
|
||||||
activateAllRings: boolean;
|
activateAllRings: boolean;
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { memo, useRef, useState } from "react";
|
import React, { memo, useRef, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import orbSprite from "../../../static/sprite/orb.png";
|
import orbSprite from "../../static/sprite/orb.png";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../store";
|
||||||
|
|
||||||
// initialize outside the component otherwise it gets overwritten when it rerenders
|
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||||
let orbIdx = 0;
|
let orbIdx = 0;
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { memo } from "react";
|
import React, { memo, useCallback } from "react";
|
||||||
import ssknOk from "../../static/sprite/sskn_ok.png";
|
import ssknOk from "../../static/sprite/sskn_ok.png";
|
||||||
import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png";
|
import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png";
|
||||||
import ssknCancel from "../../static/sprite/sskn_cancel.png";
|
import ssknCancel from "../../static/sprite/sskn_cancel.png";
|
||||||
|
@ -11,13 +11,9 @@ import ssknLine from "../../static/sprite/sskn_line.png";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import SSknLoadingBar from "./SSknLoadingBar";
|
import SSknLoadingBar from "./SSknLoadingBar";
|
||||||
|
import { useStore } from "../../store";
|
||||||
|
|
||||||
type SSknHUDProps = {
|
const SSknHUD = memo(() => {
|
||||||
activeSSknComponent: string;
|
|
||||||
loading: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SSknHUD = memo((props: SSknHUDProps) => {
|
|
||||||
const ssknOkTex = useLoader(THREE.TextureLoader, ssknOk);
|
const ssknOkTex = useLoader(THREE.TextureLoader, ssknOk);
|
||||||
const ssknOkInactiveTex = useLoader(THREE.TextureLoader, ssknOkInactive);
|
const ssknOkInactiveTex = useLoader(THREE.TextureLoader, ssknOkInactive);
|
||||||
const ssknCancelTex = useLoader(THREE.TextureLoader, ssknCancel);
|
const ssknCancelTex = useLoader(THREE.TextureLoader, ssknCancel);
|
||||||
|
@ -34,27 +30,32 @@ const SSknHUD = memo((props: SSknHUDProps) => {
|
||||||
);
|
);
|
||||||
const ssknLineTex = useLoader(THREE.TextureLoader, ssknLine);
|
const ssknLineTex = useLoader(THREE.TextureLoader, ssknLine);
|
||||||
|
|
||||||
|
const activeSSknComponent = useStore(
|
||||||
|
useCallback(
|
||||||
|
(state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx],
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const loading = useStore((state) => state.ssknLoading);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{props.loading ? (
|
{loading ? (
|
||||||
<SSknLoadingBar />
|
<SSknLoadingBar />
|
||||||
) : (
|
) : (
|
||||||
<group>
|
<group>
|
||||||
<sprite position={[2.8, -2, 0]} scale={[1, 0.5, 0]}>
|
<sprite position={[2.8, -2, 0]} scale={[1, 0.5, 0]}>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={
|
map={activeSSknComponent === "ok" ? ssknOkTex : ssknOkInactiveTex}
|
||||||
props.activeSSknComponent === "ok"
|
|
||||||
? ssknOkTex
|
|
||||||
: ssknOkInactiveTex
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</sprite>
|
||||||
<sprite position={[3.3, -3, 0]} scale={[2, 0.5, 0]}>
|
<sprite position={[3.3, -3, 0]} scale={[2, 0.5, 0]}>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={
|
map={
|
||||||
props.activeSSknComponent === "cancel"
|
activeSSknComponent === "cancel"
|
||||||
? ssknCancelTex
|
? ssknCancelTex
|
||||||
: ssknCancelInactiveTex
|
: ssknCancelInactiveTex
|
||||||
}
|
}
|
||||||
|
@ -64,7 +65,7 @@ const SSknHUD = memo((props: SSknHUDProps) => {
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={
|
map={
|
||||||
props.activeSSknComponent === "ok"
|
activeSSknComponent === "ok"
|
||||||
? ssknTextWrapperTex
|
? ssknTextWrapperTex
|
||||||
: ssknTextWrapperInactiveTex
|
: ssknTextWrapperInactiveTex
|
||||||
}
|
}
|
||||||
|
@ -74,7 +75,7 @@ const SSknHUD = memo((props: SSknHUDProps) => {
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={
|
map={
|
||||||
props.activeSSknComponent === "cancel"
|
activeSSknComponent === "cancel"
|
||||||
? ssknTextWrapperTex
|
? ssknTextWrapperTex
|
||||||
: ssknTextWrapperInactiveTex
|
: ssknTextWrapperInactiveTex
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,6 +12,7 @@ const handleMainSceneEvent = (mainSceneContext: any) => {
|
||||||
activeNode,
|
activeNode,
|
||||||
level,
|
level,
|
||||||
keyPress,
|
keyPress,
|
||||||
|
ssknLvl,
|
||||||
} = mainSceneContext;
|
} = mainSceneContext;
|
||||||
|
|
||||||
switch (subscene) {
|
switch (subscene) {
|
||||||
|
@ -94,6 +95,24 @@ const handleMainSceneEvent = (mainSceneContext: any) => {
|
||||||
|
|
||||||
const nodeType = activeNode.type;
|
const nodeType = activeNode.type;
|
||||||
|
|
||||||
|
if (activeNode.upgrade_requirement > ssknLvl) {
|
||||||
|
const rejectAnimations = [
|
||||||
|
"touch_and_scare",
|
||||||
|
"knock_and_fall",
|
||||||
|
"knock",
|
||||||
|
];
|
||||||
|
|
||||||
|
const pickedAnim =
|
||||||
|
rejectAnimations[
|
||||||
|
Math.floor(Math.random() * rejectAnimations.length)
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
event: pickedAnim,
|
||||||
|
siteRotY: siteRotY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
switch (nodeType) {
|
switch (nodeType) {
|
||||||
case 0:
|
case 0:
|
||||||
case 2:
|
case 2:
|
||||||
|
@ -112,6 +131,7 @@ const handleMainSceneEvent = (mainSceneContext: any) => {
|
||||||
event: `${eventAnimation}_tak`,
|
event: `${eventAnimation}_tak`,
|
||||||
scene: "tak",
|
scene: "tak",
|
||||||
siteRotY: siteRotY,
|
siteRotY: siteRotY,
|
||||||
|
node: activeNode,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
|
@ -126,6 +146,7 @@ const handleMainSceneEvent = (mainSceneContext: any) => {
|
||||||
event: `${eventAnimation}_gate`,
|
event: `${eventAnimation}_gate`,
|
||||||
scene: "gate",
|
scene: "gate",
|
||||||
siteRotY: siteRotY,
|
siteRotY: siteRotY,
|
||||||
|
node: activeNode,
|
||||||
};
|
};
|
||||||
case 7:
|
case 7:
|
||||||
return {
|
return {
|
||||||
|
@ -133,6 +154,30 @@ const handleMainSceneEvent = (mainSceneContext: any) => {
|
||||||
scene: "sskn",
|
scene: "sskn",
|
||||||
siteRotY: siteRotY,
|
siteRotY: siteRotY,
|
||||||
};
|
};
|
||||||
|
case 9:
|
||||||
|
const bodyPart = (() => {
|
||||||
|
switch (parseInt(activeNode.node_name.slice(-1))) {
|
||||||
|
case 6:
|
||||||
|
return "head";
|
||||||
|
case 5:
|
||||||
|
return "rightArm";
|
||||||
|
case 4:
|
||||||
|
return "leftArm";
|
||||||
|
case 3:
|
||||||
|
return "rightLeg";
|
||||||
|
case 2:
|
||||||
|
return "leftLeg";
|
||||||
|
case 1:
|
||||||
|
return "body";
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
return {
|
||||||
|
event: `${eventAnimation}_polytan`,
|
||||||
|
scene: "polytan",
|
||||||
|
siteRotY: siteRotY,
|
||||||
|
node: activeNode,
|
||||||
|
bodyPart: bodyPart,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "L2":
|
case "L2":
|
||||||
|
|
|
@ -84,11 +84,13 @@ const handleMediaKeyPress = (mediaSceneContext: any) => {
|
||||||
default:
|
default:
|
||||||
if (activeMediaComponent === "play") {
|
if (activeMediaComponent === "play") {
|
||||||
return {
|
return {
|
||||||
event: `media_${activeMediaComponent}_select`,
|
event: `media_play_select`,
|
||||||
node: activeNode,
|
node: activeNode,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return { event: `media_${activeMediaComponent}_select` };
|
return {
|
||||||
|
event: `media_exit_select`,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,17 +5,17 @@ const handleSSknSceneEvent = (ssknSceneContext: any) => {
|
||||||
case "UP":
|
case "UP":
|
||||||
case "DOWN":
|
case "DOWN":
|
||||||
return {
|
return {
|
||||||
event: `${activeSSknComponent}_${keyPress.toLowerCase()}`,
|
event: `sskn_${activeSSknComponent}_${keyPress.toLowerCase()}`,
|
||||||
};
|
};
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
if (activeSSknComponent === "ok") {
|
if (activeSSknComponent === "ok") {
|
||||||
return {
|
return {
|
||||||
event: `sskn_${activeSSknComponent}_select`,
|
event: `sskn_ok_select`,
|
||||||
nodeName: activeNode.node_name,
|
node: activeNode,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
event: `${activeSSknComponent}_select`,
|
event: `sskn_cancel_select`,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,15 +38,19 @@ const lainManager = (eventState: any) => {
|
||||||
case "throw_node_gate":
|
case "throw_node_gate":
|
||||||
case "throw_node_sskn":
|
case "throw_node_sskn":
|
||||||
case "throw_node_tak":
|
case "throw_node_tak":
|
||||||
|
case "throw_node_polytan":
|
||||||
return { action: () => setLainMoveState("throw_node"), duration: 3900 };
|
return { action: () => setLainMoveState("throw_node"), duration: 3900 };
|
||||||
case "rip_node_media":
|
case "rip_node_media":
|
||||||
case "rip_node_gate":
|
case "rip_node_gate":
|
||||||
case "rip_node_sskn":
|
case "rip_node_sskn":
|
||||||
case "rip_node_tak":
|
case "rip_node_tak":
|
||||||
|
case "rip_node_polytan":
|
||||||
return { action: () => setLainMoveState("rip_node"), duration: 6000 };
|
return { action: () => setLainMoveState("rip_node"), duration: 6000 };
|
||||||
case "knock_node_and_fall":
|
case "knock_and_fall":
|
||||||
|
case "knock":
|
||||||
|
case "touch_and_scare":
|
||||||
return {
|
return {
|
||||||
action: () => setLainMoveState("knock_node_and_fall"),
|
action: () => setLainMoveState(eventState.event),
|
||||||
duration: 6000,
|
duration: 6000,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { useStore } from "../../../../store";
|
import { useStore } from "../../../../store";
|
||||||
import { NodeDataType } from "../../../../components/MainScene/SyncedComponents/Site";
|
import { NodeDataType } from "../../../../components/MainScene/Site";
|
||||||
|
|
||||||
const nodeManager = (eventState: any) => {
|
const nodeManager = (eventState: any) => {
|
||||||
const setActiveNode = useStore.getState().setNode;
|
const setActiveNode = useStore.getState().setNode;
|
||||||
|
@ -150,6 +150,18 @@ const nodeManager = (eventState: any) => {
|
||||||
|
|
||||||
const dispatchAction = (eventState: any) => {
|
const dispatchAction = (eventState: any) => {
|
||||||
switch (eventState.event) {
|
switch (eventState.event) {
|
||||||
|
case "touch_and_scare":
|
||||||
|
return {
|
||||||
|
action: () => animateNodeTouchAndScare(eventState.siteRotY),
|
||||||
|
};
|
||||||
|
case "knock_and_fall":
|
||||||
|
return {
|
||||||
|
action: () => animateNodeKnockAndFall(eventState.siteRotY),
|
||||||
|
};
|
||||||
|
case "knock":
|
||||||
|
return {
|
||||||
|
action: () => animateNodeKnock(eventState.siteRotY),
|
||||||
|
};
|
||||||
case "site_up":
|
case "site_up":
|
||||||
case "site_down":
|
case "site_down":
|
||||||
case "site_left":
|
case "site_left":
|
||||||
|
@ -170,6 +182,7 @@ const nodeManager = (eventState: any) => {
|
||||||
case "throw_node_gate":
|
case "throw_node_gate":
|
||||||
case "throw_node_sskn":
|
case "throw_node_sskn":
|
||||||
case "throw_node_tak":
|
case "throw_node_tak":
|
||||||
|
case "throw_node_polytan":
|
||||||
return {
|
return {
|
||||||
action: () => animateActiveNodeThrow(eventState.siteRotY),
|
action: () => animateActiveNodeThrow(eventState.siteRotY),
|
||||||
};
|
};
|
||||||
|
@ -177,6 +190,7 @@ const nodeManager = (eventState: any) => {
|
||||||
case "rip_node_gate":
|
case "rip_node_gate":
|
||||||
case "rip_node_sskn":
|
case "rip_node_sskn":
|
||||||
case "rip_node_tak":
|
case "rip_node_tak":
|
||||||
|
case "rip_node_polytan":
|
||||||
return {
|
return {
|
||||||
action: () => animateShrinkAndRip(eventState.siteRotY),
|
action: () => animateShrinkAndRip(eventState.siteRotY),
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,8 +11,6 @@ const mediaManager = (eventState: any) => {
|
||||||
|
|
||||||
const updateRightSide = useStore.getState().updateRightSide;
|
const updateRightSide = useStore.getState().updateRightSide;
|
||||||
|
|
||||||
const resetScene = useStore.getState().resetMediaScene;
|
|
||||||
|
|
||||||
const setAudioAnalyser = useStore.getState().setAudioAnalyser;
|
const setAudioAnalyser = useStore.getState().setAudioAnalyser;
|
||||||
|
|
||||||
const playMedia = () => {
|
const playMedia = () => {
|
||||||
|
@ -36,7 +34,6 @@ const mediaManager = (eventState: any) => {
|
||||||
mediaElement.pause();
|
mediaElement.pause();
|
||||||
mediaElement.currentTime = 0;
|
mediaElement.currentTime = 0;
|
||||||
}
|
}
|
||||||
resetScene();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const dispatchAction = (eventState: {
|
const dispatchAction = (eventState: {
|
||||||
|
|
|
@ -1,22 +1,103 @@
|
||||||
import { useStore } from "../../store";
|
import { useStore } from "../../store";
|
||||||
|
import { NodeDataType } from "../../components/MainScene/Site";
|
||||||
|
|
||||||
const progressManager = (eventState: any) => {
|
const progressManager = (eventState: any) => {
|
||||||
const updateNodeViewed = useStore.getState().setNodeViewed;
|
const updateNodeViewed = useStore.getState().setNodeViewed;
|
||||||
|
const setPolytanPartUnlocked = useStore.getState().setPolytanPartUnlocked;
|
||||||
|
const incrementGateLvl = useStore.getState().incrementGateLvl;
|
||||||
|
const incrementSSknLvl = useStore.getState().incrementSSknLvl;
|
||||||
|
|
||||||
const dispatchAction = (eventState: { event: string; nodeName: string }) => {
|
const nodesThatTurnInvisibleAfterWatching = ["SSkn", "GaTE", "P2"];
|
||||||
|
|
||||||
|
const dispatchAction = (eventState: {
|
||||||
|
event: string;
|
||||||
|
bodyPart: string;
|
||||||
|
node: NodeDataType;
|
||||||
|
}) => {
|
||||||
switch (eventState.event) {
|
switch (eventState.event) {
|
||||||
case "media_exit_select":
|
case "throw_node_tak":
|
||||||
|
case "rip_node_tak":
|
||||||
|
return {
|
||||||
|
action: () =>
|
||||||
|
updateNodeViewed(eventState.node.node_name, {
|
||||||
|
is_viewed: 1,
|
||||||
|
is_visible: Number(
|
||||||
|
!nodesThatTurnInvisibleAfterWatching.some((node) =>
|
||||||
|
eventState.node.node_name.includes(node)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
delay: 8000,
|
||||||
|
};
|
||||||
|
case "rip_node_gate":
|
||||||
|
case "throw_node_gate":
|
||||||
|
return {
|
||||||
|
action: () => {
|
||||||
|
updateNodeViewed(eventState.node.node_name, {
|
||||||
|
is_viewed: 1,
|
||||||
|
is_visible: Number(
|
||||||
|
!nodesThatTurnInvisibleAfterWatching.some((node) =>
|
||||||
|
eventState.node.node_name.includes(node)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
});
|
||||||
|
incrementGateLvl();
|
||||||
|
},
|
||||||
|
delay: 0,
|
||||||
|
};
|
||||||
|
case "throw_node_polytan":
|
||||||
|
case "rip_node_polytan":
|
||||||
|
return {
|
||||||
|
action: () => {
|
||||||
|
updateNodeViewed(eventState.node.node_name, {
|
||||||
|
is_viewed: 1,
|
||||||
|
is_visible: Number(
|
||||||
|
!nodesThatTurnInvisibleAfterWatching.some((node) =>
|
||||||
|
eventState.node.node_name.includes(node)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
});
|
||||||
|
setPolytanPartUnlocked(eventState.bodyPart);
|
||||||
|
},
|
||||||
|
delay: 0,
|
||||||
|
};
|
||||||
|
case "media_play_select":
|
||||||
|
return {
|
||||||
|
action: () =>
|
||||||
|
updateNodeViewed(eventState.node.node_name, {
|
||||||
|
is_viewed: 1,
|
||||||
|
is_visible: Number(
|
||||||
|
!nodesThatTurnInvisibleAfterWatching.some((node) =>
|
||||||
|
eventState.node.node_name.includes(node)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
delay: 0,
|
||||||
|
};
|
||||||
case "sskn_ok_select":
|
case "sskn_ok_select":
|
||||||
return {
|
return {
|
||||||
action: () => updateNodeViewed(eventState.nodeName),
|
action: () => {
|
||||||
|
updateNodeViewed(eventState.node.node_name, {
|
||||||
|
is_viewed: 1,
|
||||||
|
is_visible: Number(
|
||||||
|
!nodesThatTurnInvisibleAfterWatching.some((node) =>
|
||||||
|
eventState.node.node_name.includes(node)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
});
|
||||||
|
incrementSSknLvl();
|
||||||
|
},
|
||||||
|
delay: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const { action } = { ...dispatchAction(eventState) };
|
const { action, delay } = { ...dispatchAction(eventState) };
|
||||||
|
|
||||||
if (action) {
|
if (action) {
|
||||||
|
setTimeout(() => {
|
||||||
action();
|
action();
|
||||||
|
}, delay);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -3,26 +3,51 @@ import { useStore } from "../../store";
|
||||||
const sceneManager = (eventState: any) => {
|
const sceneManager = (eventState: any) => {
|
||||||
const dispatchAction = (eventState: { event: string; scene: string }) => {
|
const dispatchAction = (eventState: { event: string; scene: string }) => {
|
||||||
switch (eventState.event) {
|
switch (eventState.event) {
|
||||||
case "throw_node_media":
|
|
||||||
case "throw_node_gate":
|
|
||||||
case "throw_node_sskn":
|
case "throw_node_sskn":
|
||||||
|
case "rip_node_sskn":
|
||||||
|
return {
|
||||||
|
action: () =>
|
||||||
|
useStore.setState({
|
||||||
|
currentScene: eventState.scene,
|
||||||
|
intro: false,
|
||||||
|
ssknComponentMatrixIdx: 0,
|
||||||
|
ssknLoading: false,
|
||||||
|
}),
|
||||||
|
delay: eventState.event === "throw_node_sskn" ? 3450 : 6000,
|
||||||
|
};
|
||||||
|
case "throw_node_media":
|
||||||
|
case "rip_node_media":
|
||||||
|
return {
|
||||||
|
action: () =>
|
||||||
|
useStore.setState({
|
||||||
|
currentScene: eventState.scene,
|
||||||
|
intro: false,
|
||||||
|
mediaWordPosStateIdx: 1,
|
||||||
|
mediaComponentMatrixIndices: {
|
||||||
|
sideIdx: 0,
|
||||||
|
leftSideIdx: 0,
|
||||||
|
rightSideIdx: 0,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
delay: eventState.event === "throw_node_media" ? 3450 : 6000,
|
||||||
|
};
|
||||||
|
case "throw_node_gate":
|
||||||
case "throw_node_tak":
|
case "throw_node_tak":
|
||||||
|
case "throw_node_polytan":
|
||||||
return {
|
return {
|
||||||
action: () =>
|
action: () =>
|
||||||
useStore.setState({ currentScene: eventState.scene, intro: false }),
|
useStore.setState({ currentScene: eventState.scene, intro: false }),
|
||||||
delay: 3450,
|
delay: 3450,
|
||||||
};
|
};
|
||||||
case "rip_node_media":
|
|
||||||
case "rip_node_gate":
|
case "rip_node_gate":
|
||||||
case "rip_node_sskn":
|
|
||||||
case "rip_node_tak":
|
case "rip_node_tak":
|
||||||
|
case "rip_node_polytan":
|
||||||
return {
|
return {
|
||||||
action: () =>
|
action: () =>
|
||||||
useStore.setState({ currentScene: eventState.scene, intro: false }),
|
useStore.setState({ currentScene: eventState.scene, intro: false }),
|
||||||
delay: 6000,
|
delay: 6000,
|
||||||
};
|
};
|
||||||
case "media_exit_select":
|
case "media_exit_select":
|
||||||
case "exit_gate":
|
|
||||||
case "sskn_cancel_select":
|
case "sskn_cancel_select":
|
||||||
case "media_fstWord_select":
|
case "media_fstWord_select":
|
||||||
case "media_sndWord_select":
|
case "media_sndWord_select":
|
||||||
|
|
|
@ -3,17 +3,10 @@ import { useStore } from "../../../store";
|
||||||
const ssknManager = (eventState: any) => {
|
const ssknManager = (eventState: any) => {
|
||||||
const toggleComponentMatrixIdx = useStore.getState()
|
const toggleComponentMatrixIdx = useStore.getState()
|
||||||
.toggleSSknComponentMatrixIdx;
|
.toggleSSknComponentMatrixIdx;
|
||||||
const resetComponentMatrixIdx = useStore.getState()
|
|
||||||
.resetSSknComponentMatrixIdx;
|
|
||||||
const setSSknLoading = useStore.getState().setSSknLoading;
|
const setSSknLoading = useStore.getState().setSSknLoading;
|
||||||
|
|
||||||
const dispatchAction = (eventState: { event: string }) => {
|
const dispatchAction = (eventState: { event: string }) => {
|
||||||
switch (eventState.event) {
|
switch (eventState.event) {
|
||||||
case "throw_node_sskn":
|
|
||||||
case "rip_node_sskn":
|
|
||||||
return {
|
|
||||||
action: () => resetComponentMatrixIdx(),
|
|
||||||
};
|
|
||||||
case "sskn_ok_down":
|
case "sskn_ok_down":
|
||||||
case "sskn_cancel_up":
|
case "sskn_cancel_up":
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -2,14 +2,14 @@ import { OrbitControls } from "@react-three/drei";
|
||||||
import React, { Suspense, useEffect, useRef, useState } from "react";
|
import React, { Suspense, useEffect, useRef, useState } from "react";
|
||||||
import { useStore } from "../store";
|
import { useStore } from "../store";
|
||||||
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
||||||
import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection";
|
import LevelSelection from "../components/MainScene/LevelSelection";
|
||||||
import HUD from "../components/MainScene/SyncedComponents/HUD";
|
import HUD from "../components/MainScene/HUD";
|
||||||
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
||||||
import YellowOrb from "../components/MainScene/SyncedComponents/YellowOrb";
|
import YellowOrb from "../components/MainScene/YellowOrb";
|
||||||
import MiddleRing from "../components/MainScene/SyncedComponents/MiddleRing";
|
import MiddleRing from "../components/MainScene/MiddleRing";
|
||||||
import GrayPlanes from "../components/MainScene/SyncedComponents/GrayPlanes";
|
import GrayPlanes from "../components/MainScene/GrayPlanes";
|
||||||
import Starfield from "../components/MainScene/SyncedComponents/Starfield";
|
import Starfield from "../components/MainScene/Starfield";
|
||||||
import Site from "../components/MainScene/SyncedComponents/Site";
|
import Site from "../components/MainScene/Site";
|
||||||
import Lain from "../components/MainScene/Lain";
|
import Lain from "../components/MainScene/Lain";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
|
|
|
@ -1,24 +1,14 @@
|
||||||
import React, { useCallback } from "react";
|
import React from "react";
|
||||||
import SSknIcon from "../components/SSknScene/SSknIcon";
|
import SSknIcon from "../components/SSknScene/SSknIcon";
|
||||||
import SSknBackground from "../components/SSknScene/SSknBackground";
|
import SSknBackground from "../components/SSknScene/SSknBackground";
|
||||||
import SSknHUD from "../components/SSknScene/SSknHUD";
|
import SSknHUD from "../components/SSknScene/SSknHUD";
|
||||||
import { useStore } from "../store";
|
|
||||||
|
|
||||||
const SSknScene = () => {
|
const SSknScene = () => {
|
||||||
const activeSSknComponent = useStore(
|
|
||||||
useCallback(
|
|
||||||
(state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx],
|
|
||||||
[]
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
const loading = useStore((state) => state.ssknLoading);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SSknBackground />
|
<SSknBackground />
|
||||||
<SSknIcon />
|
<SSknIcon />
|
||||||
<SSknHUD activeSSknComponent={activeSSknComponent} loading={loading} />
|
<SSknHUD />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
39
src/store.ts
39
src/store.ts
|
@ -3,7 +3,7 @@ import { combine } from "zustand/middleware";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import authorize_user_letters from "./resources/authorize_user_letters.json";
|
import authorize_user_letters from "./resources/authorize_user_letters.json";
|
||||||
import game_progress from "./resources/initial_progress.json";
|
import game_progress from "./resources/initial_progress.json";
|
||||||
import { NodeDataType } from "./components/MainScene/SyncedComponents/Site";
|
import { NodeDataType } from "./components/MainScene/Site";
|
||||||
import { getNodeById } from "./utils/node-utils";
|
import { getNodeById } from "./utils/node-utils";
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -65,6 +65,7 @@ type State = {
|
||||||
ssknComponentMatrix: ["ok", "cancel"];
|
ssknComponentMatrix: ["ok", "cancel"];
|
||||||
ssknComponentMatrixIdx: 0 | 1;
|
ssknComponentMatrixIdx: 0 | 1;
|
||||||
ssknLoading: boolean;
|
ssknLoading: boolean;
|
||||||
|
ssknLvl: number;
|
||||||
|
|
||||||
// polytan scene
|
// polytan scene
|
||||||
polytanUnlockedParts: {
|
polytanUnlockedParts: {
|
||||||
|
@ -215,10 +216,11 @@ export const useStore = create(
|
||||||
ssknComponentMatrix: ["ok", "cancel"],
|
ssknComponentMatrix: ["ok", "cancel"],
|
||||||
ssknComponentMatrixIdx: 0,
|
ssknComponentMatrixIdx: 0,
|
||||||
ssknLoading: false,
|
ssknLoading: false,
|
||||||
|
ssknLvl: 0,
|
||||||
|
|
||||||
// polytan scene
|
// polytan scene
|
||||||
polytanUnlockedParts: {
|
polytanUnlockedParts: {
|
||||||
body: true,
|
body: false,
|
||||||
head: false,
|
head: false,
|
||||||
leftArm: false,
|
leftArm: false,
|
||||||
rightArm: false,
|
rightArm: false,
|
||||||
|
@ -227,7 +229,7 @@ export const useStore = create(
|
||||||
},
|
},
|
||||||
|
|
||||||
// gate scene
|
// gate scene
|
||||||
gateLvl: 4,
|
gateLvl: 0,
|
||||||
|
|
||||||
// boot scene
|
// boot scene
|
||||||
bootComponentMatrix: {
|
bootComponentMatrix: {
|
||||||
|
@ -353,21 +355,20 @@ export const useStore = create(
|
||||||
set(() => ({ mediaPercentageElapsed: to })),
|
set(() => ({ mediaPercentageElapsed: to })),
|
||||||
setAudioAnalyser: (to: THREE.AudioAnalyser) =>
|
setAudioAnalyser: (to: THREE.AudioAnalyser) =>
|
||||||
set(() => ({ audioAnalyser: to })),
|
set(() => ({ audioAnalyser: to })),
|
||||||
resetMediaScene: () =>
|
|
||||||
set(() => ({
|
|
||||||
mediaWordPosStateIdx: 1,
|
|
||||||
mediaComponentMatrixIndices: {
|
|
||||||
sideIdx: 0,
|
|
||||||
leftSideIdx: 0,
|
|
||||||
rightSideIdx: 0,
|
|
||||||
},
|
|
||||||
})),
|
|
||||||
setWordSelected: (to: boolean) => set(() => ({ wordSelected: to })),
|
setWordSelected: (to: boolean) => set(() => ({ wordSelected: to })),
|
||||||
|
|
||||||
// idle media setters
|
// idle media setters
|
||||||
setIdleMedia: (to: any) => set(() => ({ idleMedia: to })),
|
setIdleMedia: (to: any) => set(() => ({ idleMedia: to })),
|
||||||
setIdleImages: (to: any) => set(() => ({ idleImages: to })),
|
setIdleImages: (to: any) => set(() => ({ idleImages: to })),
|
||||||
|
|
||||||
|
//polytan setters
|
||||||
|
setPolytanPartUnlocked: (bodyPart: string) =>
|
||||||
|
set((state) => ({
|
||||||
|
polytanUnlockedParts: {
|
||||||
|
...state.polytanUnlockedParts,
|
||||||
|
[bodyPart]: true,
|
||||||
|
},
|
||||||
|
})),
|
||||||
// sskn scene setters
|
// sskn scene setters
|
||||||
toggleSSknComponentMatrixIdx: () =>
|
toggleSSknComponentMatrixIdx: () =>
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
|
@ -375,9 +376,8 @@ export const useStore = create(
|
||||||
| 0
|
| 0
|
||||||
| 1,
|
| 1,
|
||||||
})),
|
})),
|
||||||
resetSSknComponentMatrixIdx: () =>
|
|
||||||
set(() => ({ ssknComponentMatrixIdx: 0 })),
|
|
||||||
setSSknLoading: (to: boolean) => set(() => ({ ssknLoading: to })),
|
setSSknLoading: (to: boolean) => set(() => ({ ssknLoading: to })),
|
||||||
|
incrementSSknLvl: () => set((state) => ({ ssknLvl: state.ssknLvl + 1 })),
|
||||||
|
|
||||||
// gate scene setters
|
// gate scene setters
|
||||||
incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
|
incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
|
||||||
|
@ -428,14 +428,14 @@ export const useStore = create(
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// progress setters
|
// progress setters
|
||||||
setNodeViewed: (nodeName: string) =>
|
setNodeViewed: (
|
||||||
|
nodeName: string,
|
||||||
|
to: { is_viewed: number; is_visible: number }
|
||||||
|
) =>
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
gameProgress: {
|
gameProgress: {
|
||||||
...state.gameProgress,
|
...state.gameProgress,
|
||||||
[nodeName]: {
|
[nodeName]: to,
|
||||||
is_viewed: 1,
|
|
||||||
is_visible: nodeName.includes("SSkn") ? 0 : 1,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})),
|
})),
|
||||||
})
|
})
|
||||||
|
@ -466,6 +466,7 @@ export const getMainSceneContext = () => {
|
||||||
siteRotY: state.siteRot[1],
|
siteRotY: state.siteRot[1],
|
||||||
activeNode: state.activeNode,
|
activeNode: state.activeNode,
|
||||||
level: parseInt(state.activeLevel),
|
level: parseInt(state.activeLevel),
|
||||||
|
ssknLvl: state.ssknLvl,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import site_b from "../resources/site_b.json";
|
import site_b from "../resources/site_b.json";
|
||||||
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
import { SiteType } from "../components/MainScene/Site";
|
||||||
import { useStore } from "../store";
|
import { useStore } from "../store";
|
||||||
|
|
||||||
export const getRandomIdleMedia = (site: string) => {
|
export const getRandomIdleMedia = (site: string) => {
|
||||||
|
|
|
@ -4,7 +4,7 @@ import node_matrices from "../resources/node_matrices.json";
|
||||||
import {
|
import {
|
||||||
NodeDataType,
|
NodeDataType,
|
||||||
SiteType,
|
SiteType,
|
||||||
} from "../components/MainScene/SyncedComponents/Site";
|
} from "../components/MainScene/Site";
|
||||||
|
|
||||||
export const findNodeFromWord = (
|
export const findNodeFromWord = (
|
||||||
wordLabel: string,
|
wordLabel: string,
|
||||||
|
|
|
@ -1,7 +1,4 @@
|
||||||
import {
|
import { NodeDataType, SiteType } from "../components/MainScene/Site";
|
||||||
NodeDataType,
|
|
||||||
SiteType,
|
|
||||||
} from "../components/MainScene/SyncedComponents/Site";
|
|
||||||
import node_matrices from "../resources/node_matrices.json";
|
import node_matrices from "../resources/node_matrices.json";
|
||||||
import game_progress from "../resources/initial_progress.json";
|
import game_progress from "../resources/initial_progress.json";
|
||||||
import unlocked_nodes from "../resources/initial_progress.json";
|
import unlocked_nodes from "../resources/initial_progress.json";
|
||||||
|
@ -66,11 +63,6 @@ export const isNodeVisible = (
|
||||||
node: NodeDataType,
|
node: NodeDataType,
|
||||||
gameProgress: typeof unlocked_nodes
|
gameProgress: typeof unlocked_nodes
|
||||||
) => {
|
) => {
|
||||||
// if (node && node.node_name === "SSkn01") {
|
|
||||||
// console.log(
|
|
||||||
// gameProgress[node.node_name as keyof typeof gameProgress].is_visible
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
return node
|
return node
|
||||||
? (node.unlocked_by === "" ||
|
? (node.unlocked_by === "" ||
|
||||||
gameProgress[node.unlocked_by as keyof typeof gameProgress]
|
gameProgress[node.unlocked_by as keyof typeof gameProgress]
|
||||||
|
@ -230,7 +222,12 @@ export const filterInvisibleNodes = (
|
||||||
visibleNodes[level[0]] = {};
|
visibleNodes[level[0]] = {};
|
||||||
Object.entries(level[1]).forEach((node) => {
|
Object.entries(level[1]).forEach((node) => {
|
||||||
if (isNodeVisible(node[1], gameProgress)) {
|
if (isNodeVisible(node[1], gameProgress)) {
|
||||||
visibleNodes[level[0]][node[0]] = node[1];
|
visibleNodes[level[0]][node[0]] = {
|
||||||
|
...node[1],
|
||||||
|
is_viewed:
|
||||||
|
gameProgress[node[1].node_name as keyof typeof gameProgress]
|
||||||
|
.is_viewed,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue