euchre-live

Euchre web-app for the socially distant family
git clone git://git.alexkarle.com/euchre-live.git
Log | Files | Refs | README | LICENSE

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:
Massets/app.js | 12+++++++++++-
Massets/app.scss | 32+++++++++++++++++++++++++++++---
Massets/components/SeatPicker.js | 5+++--
Mrun.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