euchre-live

commit ddfe9202518fdb3248eb80b8f985e9dea0268040 (patch)
parent 4eb3b081e0600b1a28d3b448562f10a00faddca9
Author: Chris Karle <chriskarle@hotmail.com>
Date:   Mon,  6 Apr 2020 23:14:48 -0400

SeatPicker: layout and styling

Main layout and styling for the SeatPicker widget.

Also tweak the tableDebug app state to send initial join_game.

Diffstat:
M
assets/app.js
 | 
12
+++++++++++-
M
assets/app.scss
 | 
32
+++++++++++++++++++++++++++++---
M
assets/components/SeatPicker.js
 | 
5
+++--
M
run.sh
 | 
2
+-

4 files changed, 44 insertions(+), 7 deletions(-)
diff --git a/assets/app.js b/assets/app.js
@@ -15,12 +15,22 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         const initialName = tableDebug ? 'Alex' : '';
-        const initialTable = tableDebug ? 'periodic' : '';
+        const initialTable = tableDebug ? ('periodic-'+Math.floor(Math.random() * 100)) : '';
         this.state = {
             playerName: initialName,
             tableName: initialTable,
             showTable: tableDebug
         };
+        if (tableDebug) { // on tableDebug send join w initialTable to server
+            // wait 1 second so socket establishes connection
+            setTimeout(()=>{
+                client.send(JSON.stringify({
+                    action:'join_game',
+                    player_name: initialName,
+                    game_id: initialTable
+                }));
+            }, 1000);
+        }
     }
 
     setPlayerName = name => {
diff --git a/assets/app.scss b/assets/app.scss
@@ -24,6 +24,32 @@
 .leave__button {
     font-size: 1.3rem;
 }
+.seat__picker {
+    height: 46vh;
+    margin-top: 2vh;
+}
+.table__seat {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+}
+.spName {
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+.sp__top, .sp__bot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 12vh;
+}
+.sp__mid {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 20vh;
+}
 
 .table__header {
     height: 10vh;
@@ -56,9 +82,9 @@
 .tm__left {
     background-color: lightskyblue;
 }
-.tm__center {
-    background-color: lightpink;
-}
+// .tm__center {
+//     background-color: lightpink;
+// }
 .tm__right {
     background-color: lightgreen;
 }
diff --git a/assets/components/SeatPicker.js b/assets/components/SeatPicker.js
@@ -14,16 +14,17 @@ class SeatPicker extends React.Component {
     tableSeat = (name, index) => {
         const taken = name != 'Empty';
         const mine = index === this.props.mySeat;
+        const iAmSeated = -1 != this.props.mySeat;
         return (
             <div className="table__seat">
-                {!taken && (
+                {!taken && !iAmSeated && (
                 <Button
                     className="sit__button"
                     kind="ghost"
                     onClick={()=>{this.props.handleSit(index)}}
                     renderIcon={Package32}>Choose seat</Button>
                 )}
-                {taken && (<span className="spName">{name}</span>)}
+                {(taken || iAmSeated) && (<div className="spName">{name}</div>)}
                 {taken && mine && (
                     <Button
                     className="stand__button"
diff --git a/run.sh b/run.sh
@@ -20,6 +20,6 @@ DIR=`dirname $0`
 cd $DIR
 
 # XXX: this should be handled by the server...
-export MOJO_INACTIVITY_TIMEOUT=500
+export MOJO_INACTIVITY_TIMEOUT=1000
 
 exec mojo webpack ./gloat.pl