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:
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 <</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'
+ ]
}
}
});
