front: PlayerComponent

- color
- name

TBD:
- setName
- nameList

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

@@ -9,6 +9,8 @@
 
 .selectable i {
     font-size: 70%;
+    margin-left: 5px;
+    margin-right: 5px;
 }
 
 /* .Games .li button.action {

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

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

webapp/src/components/Game/Player.jsx

@@ -0,0 +1,13 @@
+import './Player.css'
+import React from 'react'
+import { Stone } from './Stone'
+
+export default function Player({ color, name }) {
+
+    return (
+        <span className='player'>
+            <Stone color={color} />
+            {name}
+        </span>
+    )
+}

webapp/src/components/Game/Stone.jsx

@@ -1,7 +1,7 @@
-import './Stone.css';
+import './Stone.css'
-import React from 'react';
+import React from 'react'
 
-export function Stone( color ) {
+export function Stone({ color }) {
     switch (color) {
         case WHITE():
             return WhiteStone()