diff --git a/src/components/MainScene/Pause.tsx b/src/components/MainScene/Pause.tsx new file mode 100644 index 0000000..446f1e5 --- /dev/null +++ b/src/components/MainScene/Pause.tsx @@ -0,0 +1,182 @@ +import React, { useCallback, useMemo, useRef, useState } from "react"; +import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png"; +import * as THREE from "three"; +import { useFrame, useLoader } from "react-three-fiber"; +import BigLetter from "../TextRenderer/BigLetter"; + +const Pause = () => { + const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes); + + const generateSqaureGeom = useCallback((row: number, square: number) => { + const geometry = new THREE.PlaneBufferGeometry(); + const uvAttribute = geometry.attributes.uv; + + for (let i = 0; i < uvAttribute.count; i++) { + let u = uvAttribute.getX(i); + let v = uvAttribute.getY(i); + + u = (u * 16) / 256 + (row * 64) / 256 + (square * 16) / 256; + + uvAttribute.setXY(i, u, v); + } + return geometry; + }, []); + + const squareGeoms = useMemo( + () => + [0, 1, 2, 3].map((row: number) => + [0, 1, 2, 3, 2, 1, 0].map((col: number) => generateSqaureGeom(row, col)) + ), + [generateSqaureGeom] + ); + + return ( + + {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) => + [0, 1, 2, 3, 4, 5, 6].map((col: number) => { + if (rowIdx === 5 && col > 0) { + return col === 1 ? ( + <> + + + + ) + + ) : ( + 3 ? -0.25 : 0.25, rowIdx <= 3 ? -0.25 : 0.25, 0]} + key={col} + > + 3 && rowIdx <= 3) || (col <= 3 && rowIdx > 3) + ? THREE.FrontSide + : THREE.BackSide + } + /> + + ); + } else if (rowIdx === 4 && col === 4) { + return ( + <> + + + + + ); + } else if (rowIdx === 3 && col === 3) { + return ( + <> + + + + + ); + } else { + return ( + 3 ? -0.25 : 0.25, rowIdx <= 3 ? -0.25 : 0.25, 0]} + key={col} + > + 3 && rowIdx <= 3) || (col <= 3 && rowIdx > 3) + ? THREE.FrontSide + : THREE.BackSide + } + /> + + ); + } + }) + )} + {/*{"Load".split("").map((letter, idx) => (*/} + {/* */} + {/* 0 ? "yellow" : "orange"}*/} + {/* letter={letter}*/} + {/* letterIdx={idx}*/} + {/* yellowTextOffsetXCoeff={0}*/} + {/* key={idx}*/} + {/* />*/} + {/* */} + {/*))}*/} + + {/*{"About".split("").map((letter, idx) => (*/} + {/* */} + {/* 0 ? "yellow" : "orange"}*/} + {/* letter={letter}*/} + {/* letterIdx={idx}*/} + {/* yellowTextOffsetXCoeff={0}*/} + {/* key={idx}*/} + {/* />*/} + {/* */} + {/*))}*/} + + {/*{"Change".split("").map((letter, idx) => (*/} + {/* */} + {/* 0 ? "yellow" : "orange"}*/} + {/* letter={letter}*/} + {/* letterIdx={idx}*/} + {/* yellowTextOffsetXCoeff={0}*/} + {/* key={idx}*/} + {/* />*/} + {/* */} + {/*))}*/} + + {/*{"Save".split("").map((letter, idx) => (*/} + {/* */} + {/* 0 ? "yellow" : "orange"}*/} + {/* letter={letter}*/} + {/* letterIdx={idx}*/} + {/* yellowTextOffsetXCoeff={0}*/} + {/* key={idx}*/} + {/* />*/} + {/* */} + {/*))}*/} + + {/*{"Exit".split("").map((letter, idx) => (*/} + {/* */} + {/* 0 ? "yellow" : "orange"}*/} + {/* letter={letter}*/} + {/* letterIdx={idx}*/} + {/* yellowTextOffsetXCoeff={0}*/} + {/* key={idx}*/} + {/* />*/} + {/* */} + {/*))}*/} + + ); +}; + +export default Pause; diff --git a/src/components/TextRenderer/BigLetter.tsx b/src/components/TextRenderer/BigLetter.tsx index 3e185a3..713bc80 100644 --- a/src/components/TextRenderer/BigLetter.tsx +++ b/src/components/TextRenderer/BigLetter.tsx @@ -1,5 +1,6 @@ import orangeFont from "../../static/sprite/orange_font_texture.png"; import yellowFont from "../../static/sprite/yellow_font_texture.png"; +import whiteFont from "../../static/sprite/white_and_green_texture.png"; import * as THREE from "three"; import { useLoader } from "react-three-fiber"; import orange_font_json from "../../resources/font_data/big_font.json"; @@ -13,7 +14,11 @@ const BigLetter = (props: { yellowTextOffsetXCoeff: number; }) => { const colorToTexture = (color: string) => { - const colorTexture = { orange: orangeFont, yellow: yellowFont }; + const colorTexture = { + orange: orangeFont, + yellow: yellowFont, + white: whiteFont, + }; return colorTexture[color as keyof typeof colorTexture]; }; diff --git a/src/resources/font_data/big_font.json b/src/resources/font_data/big_font.json index 80da2a5..83fd802 100644 --- a/src/resources/font_data/big_font.json +++ b/src/resources/font_data/big_font.json @@ -45,7 +45,7 @@ "d": [64, 34, 11, 14, 0], "e": [76, 34, 12, 14, 0], "f": [90, 34, 9, 14, 3], - "g": [100, 34, 11, 17, 0], + "g": [100, 34, 11, 14, 4], "h": [112, 34, 11, 14, 0], "i": [123, 34, 7, 14, 0], "j": [132, 34, 7, 17, 3], diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 108bdd4..f111248 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -15,6 +15,7 @@ import YellowOrb from "../components/MainScene/YellowOrb"; import ActiveLevelNodes from "../components/MainScene/ActiveLevelNodes"; import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer"; import LevelSelection from "../components/MainScene/LevelSelection"; +import Pause from "../components/MainScene/Pause"; const MainScene = () => { const currentSubscene = useMainSceneStore((state) => state.subscene); @@ -34,24 +35,25 @@ const MainScene = () => { - - + {/**/} + {/**/} {/**/} - - - - + {/**/} + {/**/} + {/**/} + {/**/} {/**/} - - - + {/**/} + {/**/} + {/**/} {/**/} + - + {/**/} ); diff --git a/src/store.ts b/src/store.ts index 3cfc659..df409e2 100644 --- a/src/store.ts +++ b/src/store.ts @@ -469,3 +469,5 @@ export const useLevelSelectionStore = create((set) => ({ levelSelectionToggled: Number(!state.levelSelectionToggled), })), })); + +export const usePauseStore = create((set) => ({}));