From a658827cb37c8e40b86a2a081ae955211b1b8503 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Thu, 26 Oct 2023 13:46:09 +0200
Subject: [PATCH] front: PlayerComponent

- color
- name

TBD:
- setName
- nameList
---
 .../src/components/Game/GameSelector/Selectable.css |  2 ++
 .../src/components/Game/GameSelector/Selectable.jsx | 13 +++++++++----
 webapp/src/components/Game/Player.css               |  0
 webapp/src/components/Game/Player.jsx               | 13 +++++++++++++
 webapp/src/components/Game/Stone.jsx                |  6 +++---
 5 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 webapp/src/components/Game/Player.css
 create mode 100644 webapp/src/components/Game/Player.jsx

diff --git a/webapp/src/components/Game/GameSelector/Selectable.css b/webapp/src/components/Game/GameSelector/Selectable.css
index f1efadc..abc3ec4 100644
--- a/webapp/src/components/Game/GameSelector/Selectable.css
+++ b/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 {
diff --git a/webapp/src/components/Game/GameSelector/Selectable.jsx b/webapp/src/components/Game/GameSelector/Selectable.jsx
index ba3c8a0..b2ed7cd 100644
--- a/webapp/src/components/Game/GameSelector/Selectable.jsx
+++ b/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))}
-        {game.opponentName}
+        <Player color={opponentColor} name={opponentName}/>
       </div>
       <q>{game.message}</q>
     </div>
diff --git a/webapp/src/components/Game/Player.css b/webapp/src/components/Game/Player.css
new file mode 100644
index 0000000..e69de29
diff --git a/webapp/src/components/Game/Player.jsx b/webapp/src/components/Game/Player.jsx
new file mode 100644
index 0000000..113879f
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/webapp/src/components/Game/Stone.jsx b/webapp/src/components/Game/Stone.jsx
index 0c7cfcc..60995fc 100644
--- a/webapp/src/components/Game/Stone.jsx
+++ b/webapp/src/components/Game/Stone.jsx
@@ -1,7 +1,7 @@
-import './Stone.css';
-import React from 'react';
+import './Stone.css'
+import React from 'react'
 
-export function Stone( color ) {
+export function Stone({ color }) {
     switch (color) {
         case WHITE():
             return WhiteStone()