Initial commit

client/src/App.jsx

@@ -0,0 +1,15 @@
+import Home from "./pages/Home";
+import {useContext} from "react";
+import {StateContext} from "@/common/contexts/StateContext";
+
+const App = () => {
+    const {currentState} = useContext(StateContext);
+
+    return (
+        <>
+            {currentState === "Home" && <Home />}
+        </>
+    )
+}
+
+export default App

client/src/common/contexts/SocketContext/SocketContext.jsx

@@ -0,0 +1,30 @@
+import {createContext} from "react";
+import {io} from "socket.io-client";
+
+export const SocketContext = createContext({});
+
+export const SocketProvider = ({ children }) => {
+    const socket = io("/", {autoConnect: false});
+
+    const connect = () => {
+        socket.connect();
+    }
+
+    const send = (event, data) => {
+        socket.emit(event, data);
+    }
+
+    const disconnect = () => {
+        socket.disconnect();
+    }
+
+    const addListener = (event, callback) => {
+        socket.on(event, callback);
+    }
+
+    return (
+        <SocketContext.Provider value={{connect, disconnect, send, addListener}}>
+            {children}
+        </SocketContext.Provider>
+    )
+}

client/src/common/contexts/SocketContext/index.js

@@ -0,0 +1 @@
+export * from "./SocketContext";

client/src/common/contexts/StateContext/StateContext.jsx

@@ -0,0 +1,13 @@
+import {createContext, useState} from "react";
+
+export const StateContext = createContext({});
+
+export const StateProvider = ({ children }) => {
+    const [currentState, setCurrentState] = useState("Home");
+
+    return (
+        <StateContext.Provider value={{currentState, setCurrentState}}>
+            {children}
+        </StateContext.Provider>
+    )
+}

client/src/common/contexts/StateContext/index.js

@@ -0,0 +1 @@
+export * from "./StateContext";

client/src/common/styles/main.sass

@@ -0,0 +1,17 @@
+@use "@/common/styles/colors" as *
+
+*
+  box-sizing: border-box
+
+body, html
+  margin: 0
+  padding: 0
+  background-color: #232529
+  letter-spacing: 0.2rem
+  color: #E0E0E0
+  height: 100%
+  font-family: 'Bangers', sans-serif
+
+
+::-webkit-scrollbar
+  width: 10px

client/src/main.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "@fontsource/bangers";
+import "@/common/styles/main.sass";
+import {StateProvider} from "@/common/contexts/StateContext";
+import {SocketProvider} from "@/common/contexts/SocketContext";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+    <React.StrictMode>
+
+        <div className="app">
+            <StateProvider>
+                <SocketProvider>
+                    <App/>
+                </SocketProvider>
+            </StateProvider>
+        </div>
+
+    </React.StrictMode>,
+);

client/src/pages/Home/Home.jsx

@@ -0,0 +1,13 @@
+import "./styles.sass";
+import {StateContext} from "@/common/contexts/StateContext";
+import {useContext} from "react";
+
+export const Home = () => {
+    const {setCurrentState} = useContext(StateContext);
+
+    return (
+        <div className="home-page">
+            <h2>ToneGuessr</h2>
+        </div>
+    );
+}

client/src/pages/Home/index.js

@@ -0,0 +1 @@
+export {Home as default} from "./Home";

client/src/pages/Home/styles.sass

@@ -0,0 +1,8 @@
+.home-page
+  display: flex
+  align-items: center
+  justify-content: center
+  height: 100vh
+
+  h2
+    font-size: 48pt