From fd103786440507650c83614c24a3326e3d843a34 Mon Sep 17 00:00:00 2001 From: Chris Karle Date: Fri, 3 Apr 2020 00:58:31 -0400 Subject: [PATCH] App, Lobby, CardTable: add styles, grid layout Note requires npm install for new modules to enable sass processing by webpack. Adds a grid to CardTable which will anchor various game elements, changes Lobby to progressive-reveal on inputs. --- assets/app.css | 3 --- assets/app.js | 3 +-- assets/app.scss | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ assets/components/CardTable.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++-------- assets/components/Lobby.js | 87 +++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------- gloat.pl | 2 +- package-lock.json | 1128 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- package.json | 2 ++ webpack.config.js | 6 ++++-- 9 files changed, 1292 insertions(+), 56 deletions(-) delete mode 100644 assets/app.css create mode 100644 assets/app.scss diff --git a/assets/app.css b/assets/app.css deleted file mode 100644 index a3e8077..0000000 --- a/assets/app.css +++ /dev/null @@ -1,3 +0,0 @@ -h3 { - color: red; -} diff --git a/assets/app.js b/assets/app.js index 3934df6..ba158fa 100644 --- a/assets/app.js +++ b/assets/app.js @@ -1,4 +1,4 @@ -import './app.css'; +import './app.scss'; import React from 'react'; import ReactDOM from 'react-dom'; import Lobby from './components/Lobby'; @@ -35,7 +35,6 @@ class App extends React.Component { const {showTable, playerName, tableName} = this.state; return (
-

the app page

{!showTable && ( -

{welcomeMsg}

-

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

- + + + +

{welcomeMsg}

+
+ + Exit + + +
+ + +
yo!
+
+ +
yo!
+
+ +
yo!
+
+
+ + +
yo!
+
+ +
yo!
+
+ +
yo!
+
+
+ + +
yo!
+
+ +
yo!
+
+ +
yo!
+
+
+
+ +
); }; diff --git a/assets/components/Lobby.js b/assets/components/Lobby.js index 3a7a2a1..5a0ff72 100644 --- a/assets/components/Lobby.js +++ b/assets/components/Lobby.js @@ -43,45 +43,56 @@ export default class Lobby extends React.Component { const {nameIn, nameError, tableIn, tableError} = this.state; return (
-

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 <

- -


- -