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 2d61fe7af70d5fa039017b12efbdf8ce22e01a7c (patch)
parent b8fe2b3cd5f99591bd4722dea9a9fc5e536b8f02
Author: Chris Karle <chriskarle@hotmail.com>
Date:   Tue, 31 Mar 2020 01:36:45 -0400

App, Lobby, CardTable basic framework established.

also deletes empty placeholder file Table.js (html name conflict,
oops!)

No websockets used yet but ready...

Diffstat:
Massets/app.js | 44++++++++++++++++++++++++++++++++++++++++++--
Aassets/components/CardTable.js | 30++++++++++++++++++++++++++++++
Massets/components/Lobby.js | 88++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------
Dassets/components/Table.js | 0
Mpackage-lock.json | 22++++++++++++++++++++++
Mpackage.json | 1+
Mwebpack.config.js | 5++++-
7 files changed, 180 insertions(+), 10 deletions(-)

diff --git a/assets/app.js b/assets/app.js @@ -2,14 +2,54 @@ import './app.css'; import React from 'react'; import ReactDOM from 'react-dom'; import Lobby from './components/Lobby'; +import CardTable from './components/CardTable'; class App extends React.Component { + constructor(props) { + super(props); + this.state = { + playerName: '', + tableName: '', + showTable: false + }; + } + + setPlayerName = name => { + this.setState( + { playerName: name } + ); + } + + chooseTable = tableName => { + const show = tableName && tableName != ''; + this.setState( + { + tableName: tableName, + showTable: show + } + ); + } + render () { + const {showTable, playerName, tableName} = this.state; return ( <div id="top-app"> - <h3>top level app</h3> - <Lobby /> + <h3>the app page</h3> + {!showTable && ( + <Lobby + setName={this.setPlayerName} + chooseTable={this.chooseTable} + name={playerName} + /> + )} + {showTable && ( + <CardTable + chooseTable={this.chooseTable} + name={playerName} + tableName={tableName} + /> + )} </div> ); }; diff --git a/assets/components/CardTable.js b/assets/components/CardTable.js @@ -0,0 +1,29 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {Button} from 'carbon-components-react'; +import {Logout32} from '@carbon/icons-react'; + +export default class CardTable extends React.Component { + + render () { + const {name, tableName} = this.props; + const welcomeMsg = 'Welcome to the ' + tableName + ' table, ' + name + '!'; + return ( + <div id="table"> + <h3>{welcomeMsg}</h3> + <p>click the leave button to return to the lobby...</p> + <Button + className="leave-button" + hasIconOnly + onClick={()=>{this.props.chooseTable('')}} + renderIcon={Logout32}></Button> + </div> + ); + }; +} + +CardTable.propTypes = { + chooseTable: PropTypes.func, + name: PropTypes.string, + tableName: PropTypes.string +}+ \ No newline at end of file diff --git a/assets/components/Lobby.js b/assets/components/Lobby.js @@ -1,20 +1,94 @@ import React, {Component} from 'react'; -import {Button} from 'carbon-components-react'; -import {Shuttle32} from '@carbon/icons-react'; +import PropTypes from 'prop-types'; +import {Button, TextInput} from 'carbon-components-react'; +import {Login32, CheckmarkOutline32} from '@carbon/icons-react'; export default class Lobby extends React.Component { + constructor(props) { + super(props); + this.state = { + nameIn: '', + nameError: false, + tableIn: '', + tableError: false + } + } + + handlePlayerIn = event => { + const value = event.target.value; + const error = this.checkName(value); + this.setState({ + nameIn: value, + nameError: error + }); + } + + handleTableIn = event => { + const value = event.target.value; + const error = this.checkName(value); + this.setState({ + tableIn: value, + tableError: error + }); + } + + checkName = name => { + //TODO replace w real pattern match + return name.includes("<"); + } + render () { + const {name} = this.props; + const {nameIn, nameError, tableIn, tableError} = this.state; return ( <div id="lobby"> - <h3>Welcome to the Lobby!</h3> - <p>using a carbon-react button and icon...</p> + <h3>Welcome to the Lobby {name}</h3> + <p>Don't Panic Aya!! :-) much formatting/styling to be done.. also, no sockets engaged yet, but soon!</p> + <p>Text validation temp func only checks for &lt;</p> + <TextInput + id="lobby__name" + className="lobby__name__input" + placeholder="Name to display at table" + labelText="Name to display at table" + invalidText="Sorry, letters A-Z a-z and spaces only" + invalid={nameError} + onChange={this.handlePlayerIn} + /> + <Button + className="name__button" + hasIconOnly={true} + onClick={()=>this.props.setName(nameIn)} + renderIcon={CheckmarkOutline32} + iconDescription="" + disabled={nameError} + /> + <br/><br/> + <TextInput + id="lobby__table" + className="lobby__table__input" + size="xl" + placeholder="Table choice?" + labelText="Name of table to join" + invalidText="Sorry, letters A-Z a-z and spaces only" + invalid={tableError} + onChange={this.handleTableIn} + /> <Button - className="shuttle-button" + className="table__button" hasIconOnly - onClick={()=>{alert('yo!')}} - renderIcon={Shuttle32}></Button> + onClick={()=>this.props.chooseTable(tableIn)} + renderIcon={Login32} + iconDescription="" + disabled={tableError || !name || name==''} + /> </div> ); }; +} + +Lobby.propTypes = { + setName: PropTypes.func, + chooseTable: PropTypes.func, + name: PropTypes.string } \ No newline at end of file diff --git a/assets/components/Table.js b/assets/components/Table.js diff --git a/package-lock.json b/package-lock.json @@ -127,6 +127,19 @@ "semver": "^5.5.0" } }, + "@babel/helper-create-class-features-plugin": { + "version": "7.8.6", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.6.tgz", + "integrity": "sha512-klTBDdsr+VFFqaDHm5rR69OpEQtO2Qv8ECxHS1mNhJJvaHArR6a1xTf5K/eZW7eZpJbhCx3NW1Yt/sKsLXLblg==", + "requires": { + "@babel/helper-function-name": "^7.8.3", + "@babel/helper-member-expression-to-functions": "^7.8.3", + "@babel/helper-optimise-call-expression": "^7.8.3", + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/helper-replace-supers": "^7.8.6", + "@babel/helper-split-export-declaration": "^7.8.3" + } + }, "@babel/helper-create-regexp-features-plugin": { "version": "7.8.8", "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz", @@ -324,6 +337,15 @@ "@babel/plugin-syntax-async-generators": "^7.8.0" } }, + "@babel/plugin-proposal-class-properties": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz", + "integrity": "sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==", + "requires": { + "@babel/helper-create-class-features-plugin": "^7.8.3", + "@babel/helper-plugin-utils": "^7.8.3" + } + }, "@babel/plugin-proposal-dynamic-import": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz", diff --git a/package.json b/package.json @@ -5,6 +5,7 @@ "devDependencies": {}, "dependencies": { "@babel/core": "^7.9.0", + "@babel/plugin-proposal-class-properties": "^7.8.3", "@babel/preset-env": "^7.9.0", "@babel/preset-react": "^7.9.4", "babel-loader": "^8.1.0", diff --git a/webpack.config.js b/webpack.config.js @@ -47,7 +47,10 @@ if (process.env.WEBPACK_RULE_FOR_JS) { use: { loader: 'babel-loader', options: { - presets: ['@babel/react'] + presets: ['@babel/react'], + plugins: [ + '@babel/plugin-proposal-class-properties' + ] } } });