From 885b5659143591480025682a18b573da0a91d33a Mon Sep 17 00:00:00 2001
From: Chris Karle <chriskarle@hotmail.com>
Date: Mon, 22 Jun 2020 23:13:34 -0400
Subject: [PATCH] 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.
---
 assets/app.scss                |  2 ++
 assets/components/CardTable.js | 16 +++++++++++++---
 assets/components/ChatPanel.js | 13 +++++++++++++
 assets/components/Lobby.js     | 12 ++++++++++++
 assets/components/MainHand.js  |  7 +++++--
 5 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/assets/app.scss b/assets/app.scss
index 60c6eaf..ac93bd9 100644
--- 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
index 459defc..1c4d3d4 100644
--- 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
index c454d66..16cbdc4 100644
--- 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
index e1d30ab..ed4d755 100644
--- 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
index c1da42b..f5d168f 100644
--- 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>
--
libgit2 1.1.1