WebsiteProjects/ToneGuessr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit
Some checks failed
Publish Docker image / Push Docker image to Docker Hub (push) Failing after 4m2s
Details

Browse Source
This commit is contained in:
Mathias Wagner
2025-02-27 19:24:14 +01:00
parent 9318052560
commit 62acb290fe
27 changed files with 4873 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/.eslintrc.cjs Normal file
View File

@ -0,0 +1,15 @@
module.exports = {
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': 'warn',
},
}

24
client/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

13
client/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ToneGuessr</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

10
client/jsconfig.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
}
}

32
client/package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "webui",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@fontsource/bangers": "^5.1.1",
"@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"sass": "^1.85.1",
"socket.io-client": "^4.8.1"
},
"devDependencies": {
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.21.0",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"vite": "^6.2.0"
}
}

3194
client/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
client/public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

15
client/src/App.jsx Normal file
View File

@ -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

30
client/src/common/contexts/SocketContext/SocketContext.jsx Normal file
View File

@ -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>
)
}

1
client/src/common/contexts/SocketContext/index.js Normal file
View File

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

13
client/src/common/contexts/StateContext/StateContext.jsx Normal file
View File

@ -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>
)
}

1
client/src/common/contexts/StateContext/index.js Normal file
View File

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

0
client/src/common/styles/colors.sass Normal file
View File

17
client/src/common/styles/main.sass Normal file
View File

@ -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

21
client/src/main.jsx Normal file
View File

@ -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>,
);

13
client/src/pages/Home/Home.jsx Normal file
View File

@ -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>
);
}

1
client/src/pages/Home/index.js Normal file
View File

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

8
client/src/pages/Home/styles.sass Normal file
View File

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

21
client/vite.config.js Normal file
View File

@ -0,0 +1,21 @@
import {defineConfig} from "vite";
import react from "@vitejs/plugin-react";
import * as path from "path";
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
server: {
proxy: {
"/socket.io": {
target: "http://localhost:5287",
changeOrigin: true,
ws: true,
},
},
},
})