euchre-live

commit 73349f4b30878eb31b54e3eb171b37562f8e5684 (patch)
parent db3e34565f919a650af74ce1e545520a807cba5b
Author: Chris Karle <chriskarle@hotmail.com>
Date:   Thu, 18 Jun 2020 22:39:43 -0400

ChatPanel, CardTable

CardTable will forward the text of an error message into
the ChatPanel for display.  ChatPanel uses a different className
of 'err__post' to permit for styling differently and (soon, tbd)
hiding the messages.

Diffstat:
M
assets/app.scss
 | 
6
+++++-
M
assets/components/CardTable.js
 | 
23
++++++++++++++++++++++-
M
assets/components/ChatPanel.js
 | 
10
++++++++--

3 files changed, 35 insertions(+), 4 deletions(-)
diff --git a/assets/app.scss b/assets/app.scss
@@ -1,3 +1,7 @@
+.err__post {
+    color: red;
+}
+
 @import 'carbon-components/scss/globals/scss/styles.scss';
 
 .lobby__outer {
@@ -177,7 +181,7 @@
 .chat__input__row {
     display: flex;
 }
-.chat__post {
+.chat__post, .err__post {
     padding-right: 0.3rem;
     padding-left: 0.3rem;
 }
diff --git a/assets/components/CardTable.js b/assets/components/CardTable.js
@@ -58,6 +58,7 @@ export default class CardTable extends React.Component {
             noPass: false,
             amSpectator: false,
             latestPost: '',
+            showErrors: true,
             hard_order: true,
             hard_pick: true,
             stick_dealer: false
@@ -104,6 +105,17 @@ export default class CardTable extends React.Component {
             }
         } else if ('chat' == msg.msg_type) {
             this.processChat(msg);
+        } else if ('error' == msg.msg_type) {
+            this.processError(msg);
+        }
+    };
+
+    processError = msg => {
+        if (msg.msg) {
+            const post = '<<Error: ' + msg.msg;
+            this.setState({
+                latestPost: post
+            });
         }
     };
 
@@ -564,6 +576,10 @@ export default class CardTable extends React.Component {
         }
     }
 
+    toggleErrorDisplay = () => {
+        console.log('coming soon :-)');
+    }
+
     genGameOver = () => {
         const {innerWinMsg, amSpectator} = this.state;
         let retVal = [];
@@ -707,7 +723,7 @@ export default class CardTable extends React.Component {
             partnerHandInfo, partnerTurnInfo, partnerSeat, leftTurnInfo, leftHandInfo, leftSeat,
             rightHandInfo, rightTurnInfo, rightSeat, trumpPlace, trumpNom, turnSeat, spectators,
             dealSeat, trump, handLengths, score, trickWinner, bannerMsg, noPick, noPass, onlyAlone,
-            hard_pick, hard_order, stick_dealer, latestPost } = this.state;
+            hard_pick, hard_order, stick_dealer, latestPost, showErrors } = this.state;
         const {tableName} = this.props;
         const showSeatPicker = phase == 'lobby';
         const showGameOver = phase == 'end';
@@ -724,6 +740,7 @@ export default class CardTable extends React.Component {
         const themLabel = amSpectator ? playerNames[0] + ' & ' + playerNames[2] + ': ' : 'Them: ';
         const hasSpec = spectators.length > 0;
         const specMsgObj = this.genSpecMsgObj();
+        const toggleErrorMsg = showErrors ? 'Hide errors in chat' : 'Show errors in chat';
         return (
             <div id="table" className="table__main">
                 <Grid className="og">
@@ -749,6 +766,10 @@ export default class CardTable extends React.Component {
                                                 itemText="Exit to Lobby"
                                                 onClick={this.sendExit}
                                             />
+                                            <OverflowMenuItem
+                                                itemText={toggleErrorMsg}
+                                                onClick={this.toggleErrorDisplay}
+                                            />
                                         </OverflowMenu>
                                     </div>
                                 )}
diff --git a/assets/components/ChatPanel.js b/assets/components/ChatPanel.js
@@ -23,10 +23,16 @@ class ChatPanel extends React.Component {
         if (receivedChat && (receivedChat != prevProps.receivedChat)){
             const nextNum = numPosts + 1;
             const id = 'post-' + nextNum;
+            let clsName = 'chat__post';
+            let postMsg = receivedChat;
+            if (receivedChat.startsWith('<<Error')){
+                clsName = 'err__post';
+                postMsg = receivedChat.substring(2);
+            }
             nextArray.push(
-                <p className="chat__post"
+                <p className={clsName}
                     key={nextNum}
-                    id={id}>{receivedChat}</p>
+                    id={id}>{postMsg}</p>
             );
             if (nextArray.length > MAX_POSTS){
                 nextArray = nextArray.slice(1);