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 8eb862de458e9b71c9e536d9c08028c474d9ac83 (patch)
parent 88ca7e5d2e46f80dd462cfccf14ff4a6b2e88b6d
Author: Chris Karle <chriskarle@hotmail.com>
Date:   Thu,  4 Jun 2020 23:44:29 -0400

CardTable, TableList, TrumpPicker

Add settings for CreateTable join call using existing checkboxes
on the CreateTableModal, and add the options to the displayed
TableList sections.  Change CardTable to use the settings from incoming
msg instead of old hard-code, and implement StickDealer functionality
in the TrumpPicker and CardTable (disable pass for dealer on 2nd vote)

Diffstat:
Massets/app.scss | 4++++
Massets/components/CardTable.js | 21++++++++++++++-------
Massets/components/TableList.js | 23++++++++++++++++++-----
Massets/components/TrumpPicker.js | 4+++-
4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/assets/app.scss b/assets/app.scss @@ -353,6 +353,10 @@ font-size: 1.2rem; font-weight: 600; } +.table__options { + font-size: 0.8rem; + font-variant: small-caps; +} .table__name--locked { color: red; } diff --git a/assets/components/CardTable.js b/assets/components/CardTable.js @@ -17,9 +17,6 @@ const suit = { C: 'Clubs' } -const hard_order = true; -const hard_pick = true; - export default class CardTable extends React.Component { constructor(props) { @@ -57,8 +54,12 @@ export default class CardTable extends React.Component { innerWinMsg: '', onlyAlone: false, noPick: false, + noPass: false, amSpectator: false, - latestPost: '' + latestPost: '', + hard_order: true, + hard_pick: true, + stick_dealer: false }; }; @@ -242,7 +243,10 @@ export default class CardTable extends React.Component { this.setState({ playerNames: plAr, mySeat: mySeat, - amSpectator: newSpec + amSpectator: newSpec, + hard_order: msg.settings.hard_order, + hard_pick: msg.settings.hard_pick, + stick_dealer: msg.settings.stick_dealer }); }; } @@ -266,10 +270,11 @@ export default class CardTable extends React.Component { // second condition is for all players pass trump twice this.trumpStartSetup(msg); } - const {leftSeat, rightSeat, partnerSeat, mySeat, dealSeat} = this.state; + const {leftSeat, rightSeat, partnerSeat, mySeat, dealSeat, hard_order, hard_pick, stick_dealer} = this.state; const vote1phase = msg.game.pass_count < 4; const phaseString = vote1phase ? 'vote' : 'vote2'; const onlyAlone = hard_order && vote1phase && dealSeat == partnerSeat; + const noPass = stick_dealer && !vote1phase && (dealSeat == mySeat); const noPick = hard_pick && vote1phase && (dealSeat == mySeat) && !this.haveSuit(msg.hand, msg.game.trump_nominee); let turnInfo = ['', '', '', '']; turnInfo[msg.game.turn] = 'trump?'; @@ -279,6 +284,7 @@ export default class CardTable extends React.Component { turnSeat: msg.game.turn, onlyAlone: onlyAlone, noPick: noPick, + noPass: noPass, handLengths: msg.game.hand_lengths, leftTurnInfo: turnInfo[leftSeat], rightTurnInfo: turnInfo[rightSeat], @@ -677,7 +683,7 @@ export default class CardTable extends React.Component { const { playerNames, mySeat, phase, myCards, myTurnInfo, amSpectator, partnerHandInfo, partnerTurnInfo, partnerSeat, leftTurnInfo, leftHandInfo, leftSeat, rightHandInfo, rightTurnInfo, rightSeat, trumpPlace, trumpNom, turnSeat, - dealSeat, trump, handLengths, score, trickWinner, bannerMsg, noPick, onlyAlone, latestPost } = this.state; + dealSeat, trump, handLengths, score, trickWinner, bannerMsg, noPick, noPass, onlyAlone, latestPost } = this.state; const showSeatPicker = phase == 'lobby'; const showGameOver = phase == 'end'; const showTrump = (phase == 'vote') || (phase == 'vote2') || (phase == 'swap'); @@ -787,6 +793,7 @@ export default class CardTable extends React.Component { myDeal={dealSeat == mySeat} onlyAlone={onlyAlone} noPick={noPick} + noPass={noPass} handleVote={this.sendVote} /> )} {showSwap && !amSpectator && ( diff --git a/assets/components/TableList.js b/assets/components/TableList.js @@ -45,9 +45,14 @@ export default class TableList extends React.Component { alert('Unnamed tables are not permitted'); } else { const pwd = this.ctPwd.value; + let settings = {}; + settings.hard_order = this.optHorder.checked; + settings.hard_pick = this.optHpick.checked; + settings.stick_dealer = this.optStick.checked; let joinInfo = { table: tableName, - player_name: playerName + player_name: playerName, + settings: settings } if (pwd && pwd != ''){ joinInfo.password = pwd; @@ -109,12 +114,20 @@ export default class TableList extends React.Component { }) const lockIcon = table.has_password ? (<Locked16 fill="red" description="locked table"/>) : null; const nameClass = table.has_password ? "table__name table__name--locked" : "table__name"; + const settings = table.settings; + let optionSpan = ''; + if (settings.hard_pick || settings.hard_order || settings.stick_dealer){ + const thp = settings.hard_pick ? 'HardPick' : ''; + const tho = settings.hard_order ? 'HardOrder' : ''; + const tsd = settings.stick_dealer ? 'StickDealer' : ''; + optionSpan = (<span className="table__options">&nbsp;&nbsp;&nbsp;{thp} {tho} {tsd}</span>); + } retVal.push( <ClickableTile key={table.name} handleClick={() => clickHandler(table.name, table.has_password)} > - <div className={nameClass}>{lockIcon}{table.name}</div> + <div className={nameClass}>{lockIcon}{table.name}{optionSpan}</div> {conflictWarning} <div className="table__players">Seated: {seated}</div> <div className="table__spectators">Spectators: {specs}</div> @@ -201,11 +214,11 @@ export default class TableList extends React.Component { <fieldset className="ct__optSet"> <legend className="ct__optLabel">Game Options</legend> <Checkbox className="opt__hpick" id="opt__hpick" ref={(input) => {this.optHpick = input}} - defaultChecked labelText="Dealer must have suit to pick up"/> + defaultChecked labelText="HardPick: Dealer must have suit to pick up"/> <Checkbox className="opt__horder" id="opt__horder" ref={(input) => {this.optHorder = input}} - defaultChecked labelText="Must play alone if ordering partner"/> + defaultChecked labelText="HardOrder: Must play alone if ordering partner"/> <Checkbox className="opt__stick" id="opt__stick" ref={(input) => {this.optStick = input}} - labelText="Stick the dealer" /> + labelText="StickDealer: Dealer must name trump if no one has" /> </fieldset> </ModalWrapper> </div> diff --git a/assets/components/TrumpPicker.js b/assets/components/TrumpPicker.js @@ -42,7 +42,7 @@ class TrumpPicker extends React.Component { render () { - const { trumpCard, phaseTwo, myDeal, onlyAlone, noPick, handleVote } = this.props; + const { trumpCard, phaseTwo, myDeal, onlyAlone, noPick, noPass, handleVote } = this.props; const { suitPick } = this.state; const trumpSuit = trumpCard ? trumpCard.substring(1) : 'U'; const orderLabel = myDeal ? 'Pick up' : 'Order'; @@ -59,6 +59,7 @@ class TrumpPicker extends React.Component { className="p1p__button" kind="primary" size="small" + disabled={noPass} onClick={()=>{handleVote(voteOptions.pass)}} >Pass</Button> {phaseTwo && ( @@ -97,6 +98,7 @@ TrumpPicker.propTypes = { myDeal: PropTypes.bool, onlyAlone: PropTypes.bool, noPick: PropTypes.bool, + noPass: PropTypes.bool, handleVote: PropTypes.func, } export default TrumpPicker;