Fixed a bug in client when a challenge is sent just before time ends.

Updated the colors for player 1 and 2 to not be confused with rejection. Changed the structure of history table entry to be more readable. Updated Screenshot.
yahiaetman · Nov 12, 2018 · e3e6b51 · e3e6b51
1 parent fcec8d9
commit e3e6b51
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 35 deletions.
diff --git a/docs/screenshot.png b/docs/screenshot.png
diff --git a/examples/client.js b/examples/client.js
@@ -271,7 +271,13 @@ ws.on('message', (data) => {
       state = States.THINKING;
     }
   } else if (state === States.AWAIT_CHALLENGE_RESPONSE) {
-    if (data[0] === MessageTypes.CHALLENGE_ACCEPTED) {
+    if (data[0] === MessageTypes.NO_CHALLENGE) {
+      console.log('Challenge Time Out.');
+      const info = Structs.TypeWithTimeStruct.unpack(data);
+      displayTime(info);
+      displayCurrentGameState();
+      state = States.THINKING;
+    } else if (data[0] === MessageTypes.CHALLENGE_ACCEPTED) {
       console.log('Challenge Accepted.');
       const info = Structs.TypeWithTimeStruct.unpack(data);
       displayTime(info);

diff --git a/main/server.js b/main/server.js
@@ -252,67 +252,69 @@ class Server {
         case MessageTypes.START:
           return {
             player: 2,
-            turn: '-',
-            text: 'Game Start',
+            turn: '',
+            text: 'START',
             result: '',
           };
         case MessageTypes.END: {
           let resultText;
           if (result.end) {
-            resultText = _.isNull(result.winner) ? 'Draw' : `Player${result.winner + 1} won`;
+            resultText = _.isNull(result.winner) ? '<span class="tag light">Draw</span>' : `<span class="tag player-${result.winner + 1}">P-${result.winner + 1} won</span>`;
           } else {
-            resultText = 'Game Ended Abruptly';
+            resultText = '<span class="tag alert">Game Ended Abruptly<span>';
           }
           return {
             player: 3,
-            turn: '-',
-            text: 'Game End',
+            turn: '',
+            text: 'END',
             result: resultText,
           };
         }
         case MessageTypes.PASS:
           return {
             player: result.player,
             turn: result.state.turn.toString(),
-            text: `Player${result.player + 1}: PASS`,
+            text: `<b>P-${result.player + 1}:</b> PASS`,
             result: '',
           };
-        case MessageTypes.EXCHANGE:
+        case MessageTypes.EXCHANGE: {
+          const count = _.filter(move.tiles, tile => tile !== 0).length;
           return {
             player: result.player,
             turn: result.state.turn.toString(),
-            text: `Player${result.player + 1}: EXCHANGE ${
-              _.filter(move.tiles, tile => tile !== 0).length
-            } Tile(s)`,
+            text: `<b>P-${result.player + 1}:</b> EXCHANGE <b>${count}</b> tile${count > 1 ? 's' : ''}`,
             result: '',
           };
+        }
         case MessageTypes.PLAY:
           return {
             player: result.player,
             turn: result.state.turn.toString(),
-            text: `Player${result.player + 1}: ${String.fromCharCode(64 + move.col)}${move.row} ${
+            text: `<b>P-${result.player + 1}:</b> <span class="tag light">${String.fromCharCode(64 + move.col)}${move.row}-${
               move.dir === 0 ? 'RIGHT' : 'DOWN'
-            } ${ScrabbleUtils.convertPlayableTilesToString(move.tiles)}`,
-            result: `${result.score > 0 ? '+' : ''}${result.score}`,
+            }</span> ${
+              ScrabbleUtils.convertPlayableTilesToString(move.tiles).split(',').map(tile => `<span class="tag tile-tag ${tile.toLowerCase() === tile ? 'blank' : ''}">${tile}</span>`).join(' ')
+            }`,
+            result: `<span class="tag success">${result.score > 0 ? '+' : ''}${result.score}</span>`,
           };
         case MessageTypes.NO_CHALLENGE:
           return {
             player: result.player,
-            turn: '-',
-            text: `Player${result.player + 1}: APPROVE`,
-            result: result.missed ? 'Challenge Missed' : '',
+            turn: '',
+            text: `<b>P-${result.player + 1}:</b> APPROVE`,
+            result: result.missed ? '<span class="tag alert">Challenge Missed</span>' : '',
           };
         case MessageTypes.CHALLENGE:
           return {
             player: result.player,
-            turn: '-',
-            text: `Player${result.player + 1}: CHALLENGE`,
-            result: result.accepted ? 'Challenge Accepted' : 'Challenge Rejected',
+            turn: '',
+            text: `<b>P-${result.player + 1}:</b> CHALLENGE`,
+            result: result.accepted ? '<span class="tag success">Challenge Accepted</span>' : '<span class="tag failure">Challenge Rejected</span>',
           };
         default:
           return {
-            player: null,
-            turn: '-',
+            player: 3,
+            turn: '',
             text: '',
             result: '',
           };
@@ -579,6 +581,7 @@ class Server {
         });
         this.updateServerUI();
       } else if (event.type === EventTypes.START) {
+        _.times(3).forEach(() => { this.logger.info(_.repeat('*', 100)); });
         if (event.data.useCheckPoint && !_.isNull(this.checkpoint)) {
           // If user pressed pause, start from a checkpoint if any exists
           this.logger.info('Starting game from a Checkpoint');

diff --git a/main/utils/structs.js b/main/utils/structs.js
@@ -1,3 +1,8 @@
+/**
+ * The structs defines how to pack objects to buffers and how to unpack buffers to objects
+ * The main structures, defined in the communication document, were reduced to 9 common structures
+ */
+
 const stfu = require('struct-fu');
 
 const TypeStruct = stfu.struct([

diff --git a/renderer/components/History.vue b/renderer/components/History.vue
@@ -10,8 +10,8 @@
         <div :class="['turn', {'start':(move.player==2)}, {'turn-1':(move.player==0)}, {'turn-2':(move.player==1)}, {'end':(move.player==3)}]">
           {{ move.turn }}
         </div>
-        <div class="move-text">{{ move.text }}</div>
-        <div class="result">{{ move.result }}</div>
+        <div class="move-text"><span v-html="move.text"/></div>
+        <div class="result"><span v-html="move.result"/></div>
       </div>
     </div>
   </div>
@@ -96,19 +96,19 @@ export default {
 }
 
 .start {
-  background-color: rgb(52, 199, 73);
+  background-color: darkgrey;
 }
 
 .turn-1 {
-  background-color: rgb(252, 86, 82);
+  background-color: $player-1-color;
 }
 
 .turn-2 {
-  background-color: rgb(254, 195, 66);
+  background-color: $player-2-color;
 }
 
 .end {
-  background-color: rgb(52, 91, 199);
+  background-color: darkgrey;
 }
 
 .move-text {
@@ -124,8 +124,56 @@ export default {
   grid-area: result;
   font-family: "Roboto", sans-serif;
   padding: 5px;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 300;
   color: white;
 }
+
+.tag {
+  padding: 2px 5px;
+  border-radius: 5px;
+  font-family: "Roboto", sans-serif;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+.tag.light {
+  background-color: darkgrey;
+  color: $background-color;
+}
+
+.tag.tile-tag {
+  padding: 2px 2px;
+  background-color: antiquewhite;
+  color: $background-color;
+}
+
+.tag.tile-tag.blank {
+  text-decoration: underline;
+}
+
+.tag.failure {
+  background-color: rgb(252, 86, 82);
+  color: $background-color;
+}
+
+.tag.alert {
+  background-color: rgb(254, 195, 66);
+  color: $background-color;
+}
+
+.tag.success {
+  background-color: rgb(52, 199, 73);
+  color: $background-color;
+}
+
+.tag.player-1 {
+  background-color: $player-1-color;
+  color: $background-color;
+}
+
+.tag.player-2 {
+  background-color: $player-2-color;
+  color: $background-color;
+}
 </style>
diff --git a/renderer/components/ScoreBoard.vue b/renderer/components/ScoreBoard.vue
@@ -108,9 +108,6 @@ export default {
   font-weight: 100;
   overflow: hidden;
   text-overflow: ellipsis;
-  //max-width: 95%;
-  //max-height: 95%;
-  //padding: 2.5%;
 }
 
 .player-turn {
@@ -123,11 +120,11 @@ export default {
 }
 
 .player-turn-1 {
-  background-color: rgb(252, 86, 82);
+  background-color: $player-1-color;
 }
 
 .player-turn-2 {
-  background-color: rgb(254, 195, 66);
+  background-color: $player-2-color;
 }
 
 .player-name {

diff --git a/renderer/variables.scss b/renderer/variables.scss
@@ -3,4 +3,7 @@ $box-color: rgb(61, 61, 61);
 $border-color: rgb(134, 134, 134);
 $border-width: 1px;
 
+$player-1-color: #89B6A5;
+$player-2-color: #845A6D;
+
 $font-color: white;