euchre-live

commit 885b5659143591480025682a18b573da0a91d33a (patch)
parent 7cabe7380183b198a8e167b3b88209dfe05736b6
Author: Chris Karle <chriskarle@hotmail.com>
Date:   Mon, 22 Jun 2020 23:13:34 -0400

CardTable, ChatPanel, Lobby, MainHand

Adds functionality for the "Hide errors" menu item by programmatically
updating the style for error posts.

Adds enter key detection on the ChatPanel text input and also on the
Lobby name input.

Fix some React warnings by adding key attribute (CardTable) and by
changing href on MainHand.

Diffstat:
M
assets/app.scss
 | 
2
++
M
assets/components/CardTable.js
 | 
16
+++++++++++++---
M
assets/components/ChatPanel.js
 | 
13
+++++++++++++
M
assets/components/Lobby.js
 | 
12
++++++++++++
M
assets/components/MainHand.js
 | 
7
+++++--

5 files changed, 45 insertions(+), 5 deletions(-)
diff --git a/assets/app.scss b/assets/app.scss
@@ -1,3 +1,5 @@
+// this class is manipulated dynamically by the app,
+//  so keep it first, before any imports
 .err__post {
     color: red;
 }
diff --git a/assets/components/CardTable.js b/assets/components/CardTable.js
@@ -577,7 +577,17 @@ export default class CardTable extends React.Component {
     }
 
     toggleErrorDisplay = () => {
-        console.log('coming soon :-)');
+        // NOTE this trick requires that .err__post is the first selector of all,
+        //  so requires it first in our .scss, even before imports
+        const { showErrors } = this.state;
+        let stylesheet = document.styleSheets[0];
+        const nextShowErrors = !showErrors;
+        const rule = nextShowErrors ? 'inherit' : 'none';
+        stylesheet.cssRules[0].style.display = rule;
+        this.setState({
+            showErrors: nextShowErrors
+        })
+        console.log('toggleErrorDisplay');
     }
 
     genGameOver = () => {
@@ -586,7 +596,7 @@ export default class CardTable extends React.Component {
         const instMsg = amSpectator ? 'You can take a seat if one becomes empty, or you can return to the lobby...'
         : 'You can play again at this table, or return to the lobby to change your table or player name...';
         retVal.push(
-        <div className="gover__outer">
+        <div className="gover__outer" key="gom1">
             <div className="gover__inwin">{innerWinMsg}</div>
             <div className="gover__inst">
                {instMsg} 
@@ -633,7 +643,7 @@ export default class CardTable extends React.Component {
             midClass += ' partner';
         }
         retVal.push (
-            <div className="trick__outer">
+            <div className="trick__outer" key="gt1">
                 <Grid className="trick__grid">
                     <Row className="trick__row">
                         <Column>
diff --git a/assets/components/ChatPanel.js b/assets/components/ChatPanel.js
@@ -16,6 +16,17 @@ class ChatPanel extends React.Component {
         }
     };
 
+    componentDidMount () {
+        this.chatIn.onkeydown = this.checkKey;
+    }
+
+    checkKey = event => {
+        const code = event.keyCode || event.which;
+        if (code == 13) {
+            this.handleSendPost();
+        }
+    }
+
     componentDidUpdate (prevProps) {
         const { receivedChat } = this.props;
         const { postArray, numPosts } = this.state;
@@ -83,6 +94,8 @@ class ChatPanel extends React.Component {
                         id="chat__in"
                         light
                         className="chat__in__input"
+                        labelText="text input for chat"
+                        hideLabel={true}
                         placeholder="enter chat posts here"
                         size="sm"
                         onChange={this.handleChatIn}
diff --git a/assets/components/Lobby.js b/assets/components/Lobby.js
@@ -19,6 +19,7 @@ export default class Lobby extends React.Component {
     componentDidMount () {
         if (this.nameText) {
             this.nameText.focus();
+            this.nameText.onkeydown = this.checkKey;
         }
     }
 
@@ -29,6 +30,17 @@ export default class Lobby extends React.Component {
         }
     }
 
+    checkKey = event => {
+        const code = event.keyCode || event.which;
+        if (code == 13) {
+            const { nameIn } = this.state;
+            if (nameIn != ''){
+                this.props.setName(nameIn);
+                this.nameText.blur();
+            }
+        }
+    }
+
     handlePlayerIn = event => {
         const value = event.target.value;
         const error = this.checkName(value);
diff --git a/assets/components/MainHand.js b/assets/components/MainHand.js
@@ -16,8 +16,11 @@ class MainHand extends React.Component {
                     className="mh__card__div">
                     <Link
                         className="mh__card__link"
-                        href="javascript:void(0)"
-                        onClick={()=> this.props.cardClick(index)}>
+                        href="#"
+                        onClick={(e)=> {
+                            e.preventDefault();
+                            this.props.cardClick(index)}
+                        }>
                         <img className="mh__card" src={cardSrc} />
                     </Link>
                 </div>