From 2d61fe7af70d5fa039017b12efbdf8ce22e01a7c Mon Sep 17 00:00:00 2001 From: Chris Karle Date: Tue, 31 Mar 2020 01:36:45 -0400 Subject: [PATCH] App, Lobby, CardTable basic framework established. also deletes empty placeholder file Table.js (html name conflict, oops!) No websockets used yet but ready... --- assets/app.js | 44 ++++++++++++++++++++++++++++++++++++++++++-- assets/components/CardTable.js | 29 +++++++++++++++++++++++++++++ assets/components/Lobby.js | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------- assets/components/Table.js | 0 package-lock.json | 22 ++++++++++++++++++++++ package.json | 1 + webpack.config.js | 5 ++++- 7 files changed, 179 insertions(+), 10 deletions(-) create mode 100644 assets/components/CardTable.js delete mode 100644 assets/components/Table.js diff --git a/assets/app.js b/assets/app.js index 8e90874..3934df6 100644 --- 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 (
-

top level app

- +

the app page

+ {!showTable && ( + + )} + {showTable && ( + + )}
); }; diff --git a/assets/components/CardTable.js b/assets/components/CardTable.js new file mode 100644 index 0000000..3c92859 --- /dev/null +++ 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 ( +
+

{welcomeMsg}

+

click the leave button to return to the lobby...

+ +
+ ); + }; +} + +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 index 991862e..3a7a2a1 100644 --- 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 (
-

Welcome to the Lobby!

-

using a carbon-react button and icon...

+

Welcome to the Lobby {name}

+

Don't Panic Aya!! :-) much formatting/styling to be done.. also, no sockets engaged yet, but soon!

+

Text validation temp func only checks for <

+ + + onClick={()=>this.props.chooseTable(tableIn)} + renderIcon={Login32} + iconDescription="" + disabled={tableError || !name || name==''} + />
); }; +} + +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 deleted file mode 100644 index e69de29..0000000 --- a/assets/components/Table.js +++ /dev/null diff --git a/package-lock.json b/package-lock.json index 8840c0f..b0027c2 100644 --- 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 index 8b183a6..738d9fd 100644 --- 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 index 09b5ee0..60238c7 100644 --- 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' + ] } } }); -- libgit2 1.1.1