1 files changed, 40 insertions, 32 deletions
diff --git a/src/App.jsx b/src/App.jsx
index 25fe834..81436a8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,30 +3,32 @@ import { Canvas, useFrame } from '@react-three/fiber';
 import Notes from './components/notes';
 import Player from './components/player';
 import Ground from './components/ground';
-import React, { Suspense, useContext, useEffect, useState } from 'react';
+import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
 import { Physics } from '@react-three/rapier';
+import Sun from './components/sun';
+import { Fog } from 'three';
+import * as everforest from './_everforest.module.scss'
 
 export const AppContext = React.createContext(null);
 
 function KeyPressedClearer() {
-    const { setKeysPressed } = useContext(AppContext);
-    useFrame((_s, _d) => setKeysPressed([]));
+    const { keysPressed } = useContext(AppContext);
+    useFrame((_s, _d) => keysPressed.current = [], -1);
     return <></>
 }
 
 function App() {
-    const [keys, setKeys] = useState([]);
-    const [keysPressed, setKeysPressed] = useState([]);
+    const keys = useRef([]);
+    const keysPressed = useRef([]);
+    const [messages, setMessages] = useState();
     const playerKeyDown = (event) => {
-        setKeys(keys => {
-            if(!keys.includes(event.code)) {
-                setKeysPressed(keysPressed => [...keysPressed, event.code]);
-            }
-         return [...keys, event.code]
-        });
+        if (!keys.current.includes(event.code)) {
+            keysPressed.current.push(event.code);
+        }
+        keys.current.push(event.code);
     }
     const playerKeyUp = (event) => {
-        setKeys(keys => keys.filter(k => k != event.code));
+        keys.current = keys.current.filter(k => k != event.code);
     }
     useEffect(() => {
         window.addEventListener('keydown', playerKeyDown);
@@ -36,28 +38,34 @@ function App() {
             window.removeEventListener('keyup', playerKeyUp);
         };
     }, []);
+    useEffect(() => {
+        fetch('/api/message').then((res) => res.json()).then((data) => {
+            console.log(data);
+            setMessages(data);
+        });
+    }, []);
     return (
-        <AppContext.Provider value={{ keys: keys, keysPressed: keysPressed, setKeysPressed: setKeysPressed }}>
-            <Canvas shadows>
-                <KeyPressedClearer />
-                <Suspense>
-                    <Physics timeStep={1/60}>
-                        <directionalLight
-                            castShadow
-                            position={[100, 100, 100]}
-                            lookAt={[0, 0, 0]}
-                            intensity={Math.PI / 2}
-                            shadow-mapSize-height={2048}
-                            shadow-mapSize-width={2048}
-                        />
-                        <ambientLight intensity={Math.PI / 4} />
+        <>
+            <div className='dot' />
+            <p className='unselectable hint'>
+                E - read<br/>
+                LMB - write
+            </p>
+            <AppContext.Provider value={{ keys: keys, keysPressed: keysPressed, messages: messages, setMessages: setMessages }}>
+                <Canvas shadows>
+                    <KeyPressedClearer />
+                    <Suspense>
+                        <fog color={everforest.bg0} attach="fog" far={500}/>
+                        <Sun />
                         <Notes />
-                        <Player />
-                        <Ground />
-                    </Physics>
-                </Suspense>
-            </Canvas>
-        </AppContext.Provider>
+                        <Physics timeStep={1 / 60}>
+                            <Player />
+                            <Ground />
+                        </Physics>
+                    </Suspense>
+                </Canvas>
+            </AppContext.Provider>
+        </>
     )
 }