From a2de2331cf41d5b7d0f2caae634d8409a7ca44c5 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Wed, 25 Oct 2023 18:18:56 +0200
Subject: [PATCH] front: Game section sceleton

---
 webapp/src/components/Board/index.jsx         |  2 +-
 .../index.css => Game/GameHeader.css}         |  0
 webapp/src/components/Game/GameHeader.jsx     | 14 +++
 .../index.css => Game/GameSelector.css}       |  0
 webapp/src/components/Game/GameSelector.jsx   | 26 ++++++
 .../Game/GameSelector/ActiveGames.jsx         | 32 +++++++
 .../Game/GameSelector/GameArchive.jsx         | 32 +++++++
 .../Game/GameSelector/GameProposal.jsx        | 30 +++++++
 .../Game/GameSelector/Selectable.css          | 35 ++++++++
 .../Game/GameSelector/Selectable.jsx          | 19 ++++
 webapp/src/components/Game/Proposal/index.css |  0
 webapp/src/components/Game/Proposal/index.jsx | 22 -----
 .../{Stone/index.css => Game/Stone.css}       |  0
 .../{Stone/index.jsx => Game/Stone.jsx}       |  2 +-
 webapp/src/components/Game/index.jsx          | 11 +--
 webapp/src/components/GameHeader/index.jsx    | 15 ----
 webapp/src/components/GameSelector/index.jsx  | 89 -------------------
 17 files changed, 196 insertions(+), 133 deletions(-)
 rename webapp/src/components/{GameHeader/index.css => Game/GameHeader.css} (100%)
 create mode 100644 webapp/src/components/Game/GameHeader.jsx
 rename webapp/src/components/{GameSelector/index.css => Game/GameSelector.css} (100%)
 create mode 100644 webapp/src/components/Game/GameSelector.jsx
 create mode 100644 webapp/src/components/Game/GameSelector/ActiveGames.jsx
 create mode 100644 webapp/src/components/Game/GameSelector/GameArchive.jsx
 create mode 100644 webapp/src/components/Game/GameSelector/GameProposal.jsx
 create mode 100644 webapp/src/components/Game/GameSelector/Selectable.css
 create mode 100644 webapp/src/components/Game/GameSelector/Selectable.jsx
 delete mode 100644 webapp/src/components/Game/Proposal/index.css
 delete mode 100644 webapp/src/components/Game/Proposal/index.jsx
 rename webapp/src/components/{Stone/index.css => Game/Stone.css} (100%)
 rename webapp/src/components/{Stone/index.jsx => Game/Stone.jsx} (96%)
 delete mode 100644 webapp/src/components/GameHeader/index.jsx
 delete mode 100644 webapp/src/components/GameSelector/index.jsx

diff --git a/webapp/src/components/Board/index.jsx b/webapp/src/components/Board/index.jsx
index 9ce884c..f3e2e86 100644
--- a/webapp/src/components/Board/index.jsx
+++ b/webapp/src/components/Board/index.jsx
@@ -1,7 +1,7 @@
 import './index.css';
 import React from 'react';
 
-import { WhiteStone, BlackStone } from '../Stone' 
+import { WhiteStone, BlackStone } from '../Game/Stone' 
 
 export default function Board() {
 
diff --git a/webapp/src/components/GameHeader/index.css b/webapp/src/components/Game/GameHeader.css
similarity index 100%
rename from webapp/src/components/GameHeader/index.css
rename to webapp/src/components/Game/GameHeader.css
diff --git a/webapp/src/components/Game/GameHeader.jsx b/webapp/src/components/Game/GameHeader.jsx
new file mode 100644
index 0000000..4b9ffe9
--- /dev/null
+++ b/webapp/src/components/Game/GameHeader.jsx
@@ -0,0 +1,14 @@
+import './GameHeader.css';
+import React from 'react';
+import { NavLink } from "react-router-dom";
+
+export default function GameHeader() {
+
+  return (
+    <nav className='game-header'>
+      <NavLink to="/game/proposal">Proposal</NavLink>
+      <NavLink to="/game/active">Active</NavLink>
+      <NavLink to="/game/archive">Archive</NavLink>
+    </nav>
+  )
+}
diff --git a/webapp/src/components/GameSelector/index.css b/webapp/src/components/Game/GameSelector.css
similarity index 100%
rename from webapp/src/components/GameSelector/index.css
rename to webapp/src/components/Game/GameSelector.css
diff --git a/webapp/src/components/Game/GameSelector.jsx b/webapp/src/components/Game/GameSelector.jsx
new file mode 100644
index 0000000..6c99e1a
--- /dev/null
+++ b/webapp/src/components/Game/GameSelector.jsx
@@ -0,0 +1,26 @@
+import './GameSelector.css';
+import React from 'react';
+import { useLocation, matchPath } from "react-router";
+
+import { AppData } from "../../context/data"
+import Proposal from './GameSelector/GameProposal';
+
+export default function Game() {
+  const [data] = React.useContext(AppData)
+
+  const { pathname } = useLocation();
+  const isProposalPath = matchPath("/game/proposal/*", pathname);
+  const isActivelPath = matchPath("/game/active/*", pathname);
+  const isArchivePath = matchPath("/game/archive/*", pathname);
+
+  if (!data.games)
+    return <div>Loading..</div>
+
+  return (
+    <div className='game-selector'>
+      {isProposalPath && <Proposal games={data.games} />}
+      {isActivelPath  && <div>TBD #1</div>}
+      {isArchivePath  && <div>TBD #2</div>}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/webapp/src/components/Game/GameSelector/ActiveGames.jsx b/webapp/src/components/Game/GameSelector/ActiveGames.jsx
new file mode 100644
index 0000000..ed68149
--- /dev/null
+++ b/webapp/src/components/Game/GameSelector/ActiveGames.jsx
@@ -0,0 +1,32 @@
+import './ProposalSelector.css'
+import React from 'react';
+import Selectable from './Selectable';
+
+export default function ProposalSelector({ games }) {
+
+  const waitForYou = games
+    .filter(game => game.status === Status.WaitForYou)
+    .map(game => <Selectable game={game} />)
+
+  const WaitForOpponent = games
+    .filter(game => game.status === Status.WaitForOpponent)
+    .map(game => <Selectable game={game} />)
+
+  return <div className="Container">
+    <div className="Games">
+      {waitForYou}
+      {WaitForOpponent.length > 0 &&
+        <div className="separator">
+          waiting for opponent ({WaitForOpponent.length})
+        </div>
+      }
+      {WaitForOpponent}
+    </div>
+  </div>
+};
+
+
+const Status = {
+  WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
+  WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
+}
diff --git a/webapp/src/components/Game/GameSelector/GameArchive.jsx b/webapp/src/components/Game/GameSelector/GameArchive.jsx
new file mode 100644
index 0000000..ed68149
--- /dev/null
+++ b/webapp/src/components/Game/GameSelector/GameArchive.jsx
@@ -0,0 +1,32 @@
+import './ProposalSelector.css'
+import React from 'react';
+import Selectable from './Selectable';
+
+export default function ProposalSelector({ games }) {
+
+  const waitForYou = games
+    .filter(game => game.status === Status.WaitForYou)
+    .map(game => <Selectable game={game} />)
+
+  const WaitForOpponent = games
+    .filter(game => game.status === Status.WaitForOpponent)
+    .map(game => <Selectable game={game} />)
+
+  return <div className="Container">
+    <div className="Games">
+      {waitForYou}
+      {WaitForOpponent.length > 0 &&
+        <div className="separator">
+          waiting for opponent ({WaitForOpponent.length})
+        </div>
+      }
+      {WaitForOpponent}
+    </div>
+  </div>
+};
+
+
+const Status = {
+  WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
+  WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
+}
diff --git a/webapp/src/components/Game/GameSelector/GameProposal.jsx b/webapp/src/components/Game/GameSelector/GameProposal.jsx
new file mode 100644
index 0000000..322c547
--- /dev/null
+++ b/webapp/src/components/Game/GameSelector/GameProposal.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Selectable from './Selectable';
+
+export default function ProposalSelector({ games }) {
+
+  const waitForYou = games
+    .filter(game => game.status === Status.WaitForYou)
+    .map(game => <Selectable game={game} />)
+
+  const WaitForOpponent = games
+    .filter(game => game.status === Status.WaitForOpponent)
+    .map(game => <Selectable game={game} />)
+
+  return (
+    <div className="Games">
+      {waitForYou}
+      {WaitForOpponent.length > 0 &&
+        <div className="separator">
+          waiting for opponent ({WaitForOpponent.length})
+        </div>
+      }
+      {WaitForOpponent}
+    </div>
+  )
+}
+
+const Status = {
+  WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
+  WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
+}
diff --git a/webapp/src/components/Game/GameSelector/Selectable.css b/webapp/src/components/Game/GameSelector/Selectable.css
new file mode 100644
index 0000000..f1efadc
--- /dev/null
+++ b/webapp/src/components/Game/GameSelector/Selectable.css
@@ -0,0 +1,35 @@
+.selectable {
+    border: 1px solid black;
+    margin-bottom: 5px;
+}
+
+.selectable q {
+    color: gray;
+}
+
+.selectable i {
+    font-size: 70%;
+}
+
+/* .Games .li button.action {
+    display: none;
+}
+
+.Games .li:hover button.action {
+    display: initial;
+} */
+
+.separator {
+    /* width: 20%;  */
+    /* height: 20px;  */
+    border-bottom: 1px dotted black; 
+    text-align: center;
+    font-size: 50%;
+    padding-left: 50%;
+    margin-bottom: 7px;
+}
+
+.stone {
+    vertical-align: -3px; 
+    margin: 3px 3px;
+} 
diff --git a/webapp/src/components/Game/GameSelector/Selectable.jsx b/webapp/src/components/Game/GameSelector/Selectable.jsx
new file mode 100644
index 0000000..ba3c8a0
--- /dev/null
+++ b/webapp/src/components/Game/GameSelector/Selectable.jsx
@@ -0,0 +1,19 @@
+import './Selectable.css'
+import React from 'react';
+import { Stone, oppositeColor } from '../Stone';
+
+export default function Selectable({game}) {
+
+  return (
+    <div className='selectable' key={game.uuid}>
+      <div className='tiltle'>
+        {Stone(game.myColor)}
+        <i>vs</i>
+        {Stone(oppositeColor(game.myColor))}
+        {game.opponentName}
+      </div>
+      <q>{game.message}</q>
+    </div>
+  )
+};
+
diff --git a/webapp/src/components/Game/Proposal/index.css b/webapp/src/components/Game/Proposal/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/webapp/src/components/Game/Proposal/index.jsx b/webapp/src/components/Game/Proposal/index.jsx
deleted file mode 100644
index 6fc4fa2..0000000
--- a/webapp/src/components/Game/Proposal/index.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import './index.css';
-import React from 'react';
-// import { NavLink } from "react-router-dom";
-// import { AppData } from "../../../context/data"
-import GameHeader from '../../GameHeader'
-import GameSelector from '../../GameSelector'
-import Board from '../../Board' 
-
-export default function Proposal() {
-  // const [data] = React.useContext(AppData)
-
-  return <div className="split">
-    <div className='split left'>
-      <GameHeader/>
-      <button>+ Create</button>
-      <GameSelector/>
-    </div>
-
-    <div className='split right'></div>
-      <Board/>
-    </div>
-};
diff --git a/webapp/src/components/Stone/index.css b/webapp/src/components/Game/Stone.css
similarity index 100%
rename from webapp/src/components/Stone/index.css
rename to webapp/src/components/Game/Stone.css
diff --git a/webapp/src/components/Stone/index.jsx b/webapp/src/components/Game/Stone.jsx
similarity index 96%
rename from webapp/src/components/Stone/index.jsx
rename to webapp/src/components/Game/Stone.jsx
index 829782c..0c7cfcc 100644
--- a/webapp/src/components/Stone/index.jsx
+++ b/webapp/src/components/Game/Stone.jsx
@@ -1,4 +1,4 @@
-import './index.css';
+import './Stone.css';
 import React from 'react';
 
 export function Stone( color ) {
diff --git a/webapp/src/components/Game/index.jsx b/webapp/src/components/Game/index.jsx
index 34f0e6b..d5860db 100644
--- a/webapp/src/components/Game/index.jsx
+++ b/webapp/src/components/Game/index.jsx
@@ -1,7 +1,7 @@
 import './index.css';
 import React from 'react';
-import GameHeader from '../GameHeader'
-import GameSelector from '../GameSelector'
+import GameHeader from './GameHeader'
+import GameSelector from './GameSelector'
 import Board from '../Board'
 
 // import { AppData } from "../../context/data"
@@ -15,8 +15,9 @@ export default function Game() {
       <GameSelector />
     </div>
 
-    <div className='split right'></div>
-    <Board />
+    <div className='split right'>
+      <Board />
+    </div>
   </div>
 
-};
+}
diff --git a/webapp/src/components/GameHeader/index.jsx b/webapp/src/components/GameHeader/index.jsx
deleted file mode 100644
index af0dad6..0000000
--- a/webapp/src/components/GameHeader/index.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import './index.css';
-import React from 'react';
-import { NavLink } from "react-router-dom";
-// import { AppData } from "../../context/data"
-
-export default function GameHeader() {
-  // const [data] = React.useContext(AppData)
-
-
-  return <nav className="game-header">
-    <NavLink to="/game/proposal">Proposal</NavLink>
-    <NavLink to="/game/active">Active</NavLink>
-    <NavLink to="/game/archive">Archive</NavLink>
-  </nav>
-};
diff --git a/webapp/src/components/GameSelector/index.jsx b/webapp/src/components/GameSelector/index.jsx
deleted file mode 100644
index af4ff88..0000000
--- a/webapp/src/components/GameSelector/index.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import './index.css';
-import React from 'react';
-import { useLocation, matchPath } from "react-router";
-
-import { AppData } from "../../context/data"
-
-export default function Game() {
-  const [data] = React.useContext(AppData)
-
-const { pathname } = useLocation();
-const isProposalPath = matchPath("/game/proposal/*", pathname);
-const isActivelPath = matchPath("/game/active/*", pathname);
-const isArchivePath = matchPath("/game/archive/*", pathname);
-
-console.log("path: Proposal ", isProposalPath != null, "Active", isActivelPath != null, "Archive", isArchivePath != null )
-
-  if (!data?.games)
-    return <div>Loading..</div>
-
-  // for (const [key, value] of Object.entries(data.games))
-  //   console.log(key, value);
-   
-  const waitForYou = data.games
-    .filter(game => game.status === Status.WaitForYou)
-    .map(game => { 
-      return <div className="li" key={game.uuid}>
-        <p>
-          You {Stone(game.myColor)} <i>vs</i> {game.opponentName} {Stone(oppositeColor(game.myColor))}
-          <br/>
-          <q>{game.message}</q>
-          <br/>
-          {/* <Accept uuid={game.uuid}/>
-          <Reject uuid={game.uuid}/> */}
-        </p>
-        </div>
-    });
-
-  const WaitForOpponent = data.games
-    .filter(game => game.status === Status.WaitForOpponent)
-    .map(game => { 
-      return <div className="li" key={game.uuid}>
-        <p> 
-          You {Stone(game.myColor)} <i>vs</i> {game.opponentName} {Stone(oppositeColor(game.myColor))}
-          <br/>
-          <q>{game.message}</q>
-          <br/>
-          {/* <Cancel uuid={game.uuid}/> */}
-        </p>
-        </div>
-    });
-
-  return <div className="Container">
-    <div className="Games">
-      {waitForYou}
-      {WaitForOpponent.length > 0 && 
-        <div className="separator">
-          waiting for opponent ({WaitForOpponent.length})
-        </div>
-      }
-      {WaitForOpponent}
-    </div>
-    </div>
-};
-
-
-const Status = {
-	WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
-	WaitForYou:      "GAME_PROPOSAL_WAIT_FOR_YOU",
-}
-
-function Stone(color) {
-  if (color === "WHITE")
-    return <span className="stone">⛀</span>
-
-  if (color === "BLACK")
-    return <span className="stone">⛂</span>
-
-  return <span className="stone">{color}</span>
-}
-
-function oppositeColor(color) {
-  if (color === "WHITE")
-    return "BLACK"
-
-  if (color === "BLACK")
-    return "WHITE"
-
-  return color
-}