GameSelctor: minigame preview

webapp/src/components/Checkers.css

@@ -2,32 +2,16 @@
     cursor: default; /* disable 'I beam' cursor change */
 }
 
-.Player {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
 .Board {
     display: flex;
     flex-direction: column;
     justify-content: center; 
     align-items: center;
-    /* scale: 15%; */
 }
 
 .Tile {
     border: 1px solid #e4e4e4;
     float: left;
-    font-size: 200%;
-    font-weight: bold;
-    line-height: 34px;
-    height: 34px;
-    width: 34px; 
-    margin-right: -1px;
-    margin-top: -1px;
-    padding: 0;
     text-align: center;
 }
 
@@ -35,10 +19,6 @@
     background: lightgray;
 }
 
-.Tile.white:hover {
+.Tile.white {
-    background-color:azure;
+    background: white;
-}
-
-.Tile .Stone {
-    font-size: 120%;
 }

webapp/src/components/Checkers.jsx

@@ -56,8 +56,8 @@ export function BlackStone({ type }) {
 export function Player({ color, name }) {
     return (
         <div className='Player'>
-            <Stone color={color} />
             {name}
+            <Stone color={color} />
         </div>
     )
 }

webapp/src/container/games/GameBoard.css

@@ -1,3 +1,24 @@
-.GameBoard .Board {
+.GameBoard .Player {
-    padding: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.GameBoard .Tile {
+    font-size: 200%;
+    line-height: 34px;
+    height: 34px;
+    width: 34px; 
+    margin-right: -1px;
+    margin-top: -1px;
+}
+
+.GameBoard .Tile.white:hover {
+    background-color:azure;
+}
+
+.Message2Opponent {
+    margin: 10px;
+    width: 270px;
 }

webapp/src/container/games/view/GameSelector.css

@@ -3,61 +3,56 @@
     overflow-y: scroll;
 }
 
-hr {
+.Selectable {
-    border: 0;
-    height: 0;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-
-    margin-bottom: 2px;
-    margin-top: 3px;
-}
-
-.Selectable .Title {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    min-width: 250px;
-    justify-content: center;
+}
+.Selectable:hover {
+    background-color: #d3d3d360;
+    border-radius: 2px;
+}
+.Selectable.selected {
+    background-color: #d3d3d3f0;
+    border-radius: 2px;
 }
 
 .Selectable q {
     color: gray;
     font-size: 70%;
 
-    max-width: 250px;
+    width: 205px;
     display: block;
     white-space: nowrap;
-    overflow: scroll;
+    overflow: hidden;
-    padding-bottom: 2px;
+    text-overflow: ellipsis;
 }
 
-.Selectable i {
+.Selectable .Board {
-    font-size: 70%;
+    margin: 5px;
-    margin-left: 5px;
+}
-    margin-right: 5px;
+.Selectable .Board .Tile {
+    font-size: 33.3%;
+    line-height: 4px;
+    height: 4px;
+    width: 4px; 
+    margin-right: -1px;
+    margin-top: -1px;
 }
 
-.Selectable:hover {
+.Selectable .Message {
-    background-color: #d3d3d360;
+    display: flex;
-    border-radius: 2px;
+    flex-direction: column;
+    justify-content: center;
 }
 
-.Selectable.selected {
-    background-color: #d3d3d3f0;
-    border-radius: 2px;
-}
-
-
 .Separator {
-    /* width: 20%;  */
-    /* height: 20px;  */
     border-bottom: 1px dotted black;
     text-align: center;
     font-size: 50%;
     padding-left: 50%;
-    margin-bottom: 7px;
+    margin-bottom: 2px;
 }
-
 .Separator .Counter {
     background-color: darkgray;
 }

webapp/src/container/games/view/GameSelector.jsx

@@ -2,7 +2,7 @@ import './GameSelector.css';
 import React, { useContext } from 'react';
 import { GamesContext } from '../../../context/games';
 
-import { Color, Player } from '../../../components/Checkers';
+import { Board, Color, Player } from '../../../components/Checkers';
 import Loading from '../../../components/Loading';
 import Counter from '../../../components/Counter';
 
@@ -115,17 +115,14 @@ function Selectable({ game, selected, onClick }) {
     const opponentName = game.opponentName;
 
     return (
-        <div >
+        <div className={'Selectable' + (selected ? ' selected' : '')}
-            <div className={'Selectable' + (selected ? ' selected' : '')}
+            onClick={() => onClick(game.uuid)}
-                onClick={() => onClick(game.uuid)}>
+        >
-                <div className='Title'>
+            <Board game={game} />
-                    <Player color={myColor} />
+            <div className='Message'>
-                    <i>vs</i>
+                <Player color={opponentColor} name={opponentName} />
-                    <Player color={opponentColor} name={opponentName} />
-                </div>
                 <q>{game.message}</q>
             </div>
-            <hr />
         </div>
     )
 };