From 74c396bea7b5c9423b819fe9af414024af6eca65 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Fri, 27 Oct 2023 12:51:32 +0200
Subject: [PATCH] front: GameComponent refactoring

---
 webapp/src/App.js                             | 30 +++++++++----------
 .../components/{Game/index.css => Game.css}   |  6 ++--
 webapp/src/components/Game.jsx                | 25 ++++++++++++++++
 .../src/components/Game/GameProposalAction.js | 19 ------------
 .../src/components/Game/GameProposalCancel.js | 24 ---------------
 webapp/src/components/Game/index.jsx          | 25 ----------------
 6 files changed, 42 insertions(+), 87 deletions(-)
 rename webapp/src/components/{Game/index.css => Game.css} (84%)
 create mode 100644 webapp/src/components/Game.jsx
 delete mode 100644 webapp/src/components/Game/GameProposalAction.js
 delete mode 100644 webapp/src/components/Game/GameProposalCancel.js
 delete mode 100644 webapp/src/components/Game/index.jsx

diff --git a/webapp/src/App.js b/webapp/src/App.js
index 8bda870..aa7b6e4 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -7,26 +7,24 @@ import Leaderboard from "./components/Leaderboard"
 import Game from "./components/Game"
 import About from "./components/About"
 
-function App() { 
+function App() {
 
   return <div className="App">
     <BrowserRouter>
-        <Header/>
-        <div className="Container">
-          <Routes>
-            {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
-            <Route path="/game" element={<Game/>} />
-            <Route path="/game/new" element={<Game/>} />
-            <Route path="/game/proposal" element={<Game/>} />
-            <Route path="/game/active" element={<Game/>} />
-            <Route path="/game/archive" element={<Game/>} />
-            
-            <Route path="/leaderboard" element={<Leaderboard/>} />
-            <Route path="/about" element={<About/>} />
-          </Routes>
-        </div>
+      <Header />
+      <Routes>
+        {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
+        <Route path="/game" element={<Game />} />
+        <Route path="/game/new" element={<Game />} />
+        <Route path="/game/proposal" element={<Game />} />
+        <Route path="/game/active" element={<Game />} />
+        <Route path="/game/archive" element={<Game />} />
+
+        <Route path="/leaderboard" element={<Leaderboard />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
     </BrowserRouter>
-    </div>
+  </div>
 }
 
 export default App;
diff --git a/webapp/src/components/Game/index.css b/webapp/src/components/Game.css
similarity index 84%
rename from webapp/src/components/Game/index.css
rename to webapp/src/components/Game.css
index 26fc611..458f0c4 100644
--- a/webapp/src/components/Game/index.css
+++ b/webapp/src/components/Game.css
@@ -1,9 +1,9 @@
-.split {
+.game {
     width: 100%;
     float: left;
 }
 
-.split .left {
+.game .left-side {
     float: left;
     width: 45%;
     /* max-width: 400px; */
@@ -15,7 +15,7 @@
     align-items: center;
 }
 
-.split .right {
+.game .right-side {
     float: left;
     width: 55%;
 }
\ No newline at end of file
diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx
new file mode 100644
index 0000000..b72bcfc
--- /dev/null
+++ b/webapp/src/components/Game.jsx
@@ -0,0 +1,25 @@
+import './Game.css';
+import React from 'react';
+import GameView from './Game/GameView'
+import GameSelector from './Game/GameSelector'
+import GameAction from './Game/GameAction'
+import GameBoard from './Game/GameBoard'
+import NewGame from './Game/NewGame';
+
+export default function Game() {
+
+  return (
+    <div className="game">
+      <div className='left-side'>
+        <GameView />
+        <GameSelector />
+        <NewGame />
+      </div>
+      <div className='right-side'>
+        <GameAction />
+        <GameBoard />
+      </div>
+    </div>
+  )
+
+}
diff --git a/webapp/src/components/Game/GameProposalAction.js b/webapp/src/components/Game/GameProposalAction.js
deleted file mode 100644
index 0c60782..0000000
--- a/webapp/src/components/Game/GameProposalAction.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-export function Accept({uuid}) {
-    return <button className="action" id={uuid} type="submit">
-        Accept
-        </button>
-}
-
-// export function Reject({uuid}) {
-//     return <button className="action" id={uuid} type="submit" >
-//         Reject
-//         </button>
-// }
-
-export function Cancel({uuid}) {
-    return <button className="action" id={uuid} type="submit">
-        Cancel
-        </button>
-}
diff --git a/webapp/src/components/Game/GameProposalCancel.js b/webapp/src/components/Game/GameProposalCancel.js
deleted file mode 100644
index 24a562e..0000000
--- a/webapp/src/components/Game/GameProposalCancel.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, {useState} from 'react';
-
-export default function Cancel({uuid}) {
-    const [pending, setPending] = useState(new Map())
-
-    for (const [key, value] of pending)
-        console.log("cancel", key, value);
-
-    function sendRequest(uuid2reject) {
-        const nextPending = new Map(pending)
-        nextPending.set(uuid2reject, null)
-
-        setPending(nextPending)
-    }
-
-    const status = pending.get(uuid)
-    const isPending = status !== undefined
-
-    return <button 
-        className={isPending ? "visible" : "action"} 
-        onClick={() => sendRequest(uuid) }>
-            Cancel
-        </button>
-}
diff --git a/webapp/src/components/Game/index.jsx b/webapp/src/components/Game/index.jsx
deleted file mode 100644
index 947b258..0000000
--- a/webapp/src/components/Game/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import './index.css';
-import React from 'react';
-import GameView from './GameView'
-import GameSelector from './GameSelector'
-import GameAction from './GameAction'
-import GameBoard from './GameBoard'
-import NewGame from './NewGame';
-
-export default function Game() {
-
-  return (
-    <div className="split">
-      <div className='split left'>
-        <GameView />
-        <GameSelector />
-        <NewGame />
-      </div>
-      <div className='split right'>
-        <GameAction />
-        <GameBoard />
-      </div>
-    </div>
-  )
-
-}