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) => ({}));