front: selectable player names for GameBoard

- bugfix keys for ProposalSelector
- css fix for Selectable title

webapp/src/components/Game/GameAction.css

@@ -17,7 +17,7 @@
     padding: 8px;
     padding-left: 15px;
     padding-right: 15px;
-    border-radius: 10px;
+    border-radius: 5px;
     border: 0.5px solid darkgrey; 
     margin: 2px;
 }

webapp/src/components/Game/GameBoard.jsx

@@ -1,13 +1,39 @@
-import './GameBoard.css';
-import React from 'react';
-
+import './GameBoard.css'
+import React, { useState } from 'react'
+import { AppData } from '../../context/data'
 import Board from './GameBoard/Board'
+import { SelectPlayer } from './Player'
+// import { WHITE, BLACK, WhiteStone, BlackStone } from './Stone'
 
 export default function GameBoard() {
 
+  const [data] = React.useContext(AppData)
+
+  const [whiteName, setWhiteName] = useState('');
+  const [blackName, setBlackName] = useState('');
+
+
+  const nameOptions = data.leaderboard
+    ? Object.keys(data.leaderboard).map(playerName => {
+      const displayName = data.isCurrentUser(playerName) ? 'You' : playerName
+      return <option key={playerName} value={playerName}>{displayName}</option>
+    })
+    : []
+
+  const whiteOptions = Array(nameOptions)
+  whiteOptions.push(<option key='default' value=''>{'⛀ …'}</option>)
+
+  const blackOptions = Array(nameOptions)
+  blackOptions.push(<option key='default' value=''>{'⛂ …'}</option>)
+
+
   return (
     <div className='game-board'>
+      <SelectPlayer name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} />
+      {/* <Player color={WHITE()} name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} /> */}
       <Board />
+      {/* <Player color={BLACK()} name={blackName} setName={setBlackName} nameOptions={blackOptions} /> */}
+      <SelectPlayer name={blackName} setName={setBlackName} nameOptions={blackOptions} />
     </div>
   )
 }

webapp/src/components/Game/GameSelector/GameProposal.jsx

@@ -5,11 +5,11 @@ export default function ProposalSelector({ games }) {
 
   const waitForYou = games
     .filter(game => game.status === Status.WaitForYou)
-    .map(game => <Selectable game={game} />)
+    .map(game => <Selectable game={game} key={game.uuid} />)
 
   const WaitForOpponent = games
     .filter(game => game.status === Status.WaitForOpponent)
-    .map(game => <Selectable game={game} />)
+    .map(game => <Selectable game={game} key={game.uuid} />)
 
   return (
     <div className="Games">

webapp/src/components/Game/GameSelector/Selectable.css

@@ -31,7 +31,9 @@
     margin-bottom: 7px;
 }
 
-.stone {
-    vertical-align: -3px; 
-    margin: 3px 3px;
+.selectable .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 }

webapp/src/components/Game/GameSelector/Selectable.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { oppositeColor } from '../Stone';
 import Player from '../Player';
 
-export default function Selectable({game}) {
+export default function Selectable({ game }) {
 
   const myColor = game.myColor
 
@@ -11,11 +11,11 @@ export default function Selectable({game}) {
   const opponentName = game.opponentName
 
   return (
-    <div className='selectable' key={game.uuid}>
-      <div className='tiltle'>
-        <Player color={myColor}/>
+    <div className='selectable'>
+      <div className='title'>
+        <Player color={myColor} />
         <i>vs</i>
-        <Player color={opponentColor} name={opponentName}/>
+        <Player color={opponentColor} name={opponentName} />
       </div>
       <q>{game.message}</q>
     </div>

webapp/src/components/Game/Player.css

@@ -0,0 +1,17 @@
+.player {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.player select {
+    border-radius: 5px;
+    border: 0.5px solid darkgrey;
+
+    margin: 4px;
+}
+
+.player select:hover {
+    background: lightgray;
+}

webapp/src/components/Game/Player.jsx

@@ -5,9 +5,25 @@ import { Stone } from './Stone'
 export default function Player({ color, name }) {
 
     return (
-        <span className='player'>
+        <div className='player'>
             <Stone color={color} />
             {name}
-        </span>
+        </div>
+    )
+}
+
+export function SelectPlayer({ name, setName, nameOptions }) {
+    const handleSelectChange = (event) => {
+        setName(event.target.value)
+    }
+
+    return (
+        <div className='select player'>
+            <form>
+                <select value={name} onChange={handleSelectChange}>
+                    {nameOptions}
+                </select>
+            </form>
+        </div>
     )
 }

webapp/src/context/data/index.jsx

@@ -14,7 +14,7 @@ export const AppDataProvider = ({ children }) => {
 
   const [games,       gamesFetching       ] = Poll('/api/gamestate'  , 30, data.offlineMode)
   const [leaderboard, leaderboardFetching ] = Poll('/api/leaderboard', 60, data.offlineMode)
-  const [user] = Poll('api/user') // once
+  const [user] = Poll('/api/user') // once
 
   data.games         = games
   data.gamesFetching = gamesFetching