Fixed czar related issues

Worked on sidebar

backend/src/rooms/GameRoom/GameRoomState.ts

@@ -60,8 +60,12 @@ export class Player extends Schema {
   @type("boolean")
   isOwner: boolean = false;
 
+  @type("boolean")
+  played: boolean = false;
+
   timesCzar: number = 0;
 
+  @type("string")
   id: string;
 }
 
@@ -88,6 +92,9 @@ export class GameRoomState extends Schema {
   @type("boolean")
   gameRunning: boolean = false;
 
+  @type("string")
+  roundWinner: string;
+
   @type("string")
   winner: string;
 

backend/src/rooms/GameRoom/commands/CzarVoteCommand.ts

@@ -13,12 +13,14 @@ export class CzarVoteCommand extends Command<GameRoomState, {sessionId: string,
     this.state.cardsPlayed[index].chosenByCzar = true;
     this.state.czarDidVote = true;
     let winnerId: string = this.state.cardsPlayed[index].playedBy;
+    this.state.roundWinner = winnerId;
     let winner = this.state.players.get(winnerId);
     winner.score ++;
     if (winner.score >= this.state.pointsToWin)
       return [new DisplayWinnerCommand().setPayload({wait: 5000, winnerId: winnerId})]
-    else
+    else{
       return [new NewRoundCommand().setPayload({wait: 5000})]
+    }
 
   }
 

backend/src/rooms/GameRoom/commands/FinishRoundCommand.ts

@@ -10,7 +10,7 @@ export class FinishRoundCommand extends Command<GameRoomState> {
         this.state.players.forEach((player, id) => {
             if (!player.connected || player.isCzar)
                 return
-            everybodyOnlinePlayed = everybodyOnlinePlayed && ( this.state.cardsPlayed.some(cardStack => (cardStack.playedBy === id && cardStack.cards.length === this.state.blackCard.blanks)) || player.cards.length === 0);
+            everybodyOnlinePlayed = everybodyOnlinePlayed && player.played;
         })
         return everybodyOnlinePlayed
     }

backend/src/rooms/GameRoom/commands/NewOwnerCommand.ts

@@ -6,16 +6,13 @@ export class NewOwnerCommand extends Command<GameRoomState, {lastOwnerId: string
   execute({lastOwnerId} = this.payload) {
     if(this.state.players.get(lastOwnerId).connected) // owner returned
         return;
-    console.log("didn't return, searching new")
     let newOwner: string;
     this.state.players.forEach((player, id) => {
         console.log(id +" : "+ player.connected)
         if(player.connected)
         newOwner = id
     })
-    console.log(newOwner)
     if (newOwner){
-        console.log("found new owner: "+newOwner)
         this.state.players.get(newOwner).isOwner = true;
         this.state.players.get(lastOwnerId).isOwner = false;
     }

backend/src/rooms/GameRoom/commands/NewRoundCommand.ts

@@ -18,6 +18,8 @@ export class NewRoundCommand extends Command<GameRoomState, {wait: number}> {
         this.state.czarsTurn = false;
         this.state.czarDidVote = false;
 
+        this.state.roundWinner = null;
+
         //determine new card czar. Not allowed to be the same as last round
         var possibleCzars: Player[] = [];
 
@@ -30,6 +32,8 @@ export class NewRoundCommand extends Command<GameRoomState, {wait: number}> {
             player.isCzar = false;
 
           minTimesCzar = Math.min(minTimesCzar, player.timesCzar);
+
+          player.played = false;
         })
 
         possibleCzars = possibleCzars.filter(player => player.timesCzar === minTimesCzar);

backend/src/rooms/GameRoom/commands/PlayCardCommand.ts

@@ -24,6 +24,7 @@ export class PlayCardCommand extends Command<GameRoomState, {sessionId: string,
     card.mark = handCard.mark;
     playedCardStack.cards.push(card)
     this.state.players.get(sessionId).cards.deleteAt(index);
+    this.state.players.get(sessionId).played = true;
 
     return [new FinishRoundCommand()]
   }

backend/src/rooms/GameRoom/commands/ReplaceHandCommand.ts

@@ -6,12 +6,13 @@ export class ReplaceHandCommand extends Command<GameRoomState, {sessionId: strin
 
   validate({sessionId} = this.payload){
     return this.state.gameRunning && !this.state.players.get(sessionId).isCzar && 
-            !this.state.czarsTurn && !this.state.cardsPlayed.some(cardStack => cardStack.playedBy == sessionId)
+            !this.state.czarsTurn && !this.state.cardsPlayed.some(cardStack => cardStack.playedBy == sessionId);
   }
 
   execute({sessionId} = this.payload) {
-    this.state.players.get(sessionId).cards.clear()
-    return [new FinishRoundCommand()]
+    this.state.players.get(sessionId).cards.clear();
+    this.state.players.get(sessionId).played = true;
+    return [new FinishRoundCommand()];
   }
 
 }

frontend/src/components/Card.css

@@ -9,6 +9,8 @@
     outline: none;
     transition-duration: .1s;
     overflow-wrap: break-word;
+    word-break: break-word;
+    word-wrap: break-word;
     hyphens: auto;
 }
 .card.white {

frontend/src/components/Card.js

@@ -4,7 +4,7 @@ import './Card.css'
 export class Card extends React.Component {
 
   render() {
-    let text = this.props.text? this.props.text.replace('[[BLANK]]', '________'):null
+    let text = this.props.text? this.props.text.replaceAll('[[BLANK]]', '____'):null
     return (
       <button className={`card aspect-ratio-box ${this.props.type} ${this.props.chosen ? 'chosen' : ''} ${this.props.sticky ? 'sticky' : ''}`} onClick={this.props.onclick}>
         <div className='aspect-ratio-box-inner'>

frontend/src/components/Game.js

@@ -146,6 +146,10 @@ class Game extends React.Component {
 
     let playedCards = this.state.game.winner ? [{cards: [{content: this.state.game.players[this.state.game.winner].name, mark: "WIN"}], chosenByCzar: true}] : this.state.game.cardsPlayed
 
+    console.log("Winners")
+    console.log(this.state.game.winner)
+    console.log(this.state.game.roundWinner)
+
     return (
 
       <CardArea
@@ -156,9 +160,9 @@ class Game extends React.Component {
         whiteCardClicked={ index => this.playCard(this, index)}
         playedCards={playedCards}
         playedCardsClicked={index => this.czarVote(this, index)}
-        sidebar={<Scoreboard players={Array.from(this.state.game.players.values())}/>}
+        sidebar={<Scoreboard players={Array.from(this.state.game.players.values())} gameRunning={this.state.game.gameRunning} winner={this.state.game.winner || this.state.game.roundWinner}/>}
         trustPlayedCards={!this.state.game.winner}
-        additionalSpace={<button hidden={!this.state.game.gameRunning} className='replaceHandButton' onClick={_=>this.replaceHand()} disabled={this.state.game.czarsTurn || player.isCzar || player.cards.length == 0}>Replace hand instead of playing a card</button>}/>
+        additionalSpace={<button hidden={!this.state.game.gameRunning} className='replaceHandButton' onClick={_=>this.replaceHand()} disabled={this.state.game.czarsTurn || player.isCzar || player.cards.length === 0}>Replace hand instead of playing a card</button>}/>
     );
   }
 }

frontend/src/components/Header.js

@@ -10,7 +10,7 @@ class Header extends React.Component {
       <div className="header">
         {this.props.showHome &&
           <div className="homeContainer" onClick={_ => this.props.history.push("/")}>
-            <img className="home" src={home}></img>
+            <img alt="Home" className="home" src={home}></img>
           </div>
         }
         <span>Yet another <a href="https://cardsagainsthumanity.com/">Cards against Humanity</a> clone.</span>

frontend/src/components/MainMenu.js

@@ -6,7 +6,7 @@ class MainMenu extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { name: localStorage.getItem("name") || "Anonymous"};
+    this.state = { name: localStorage.getItem("name") || "Anonymous", displayGreeting: false};
   }
 
   whiteCardClicked(me, index){
@@ -41,16 +41,26 @@ class MainMenu extends React.Component {
     }
   }
 
+  saveNameToState(me, name) {
+    me.setState({...this.state, name: name});
+  }
+
+  saveName(me) {
+    me.setState({...this.state, displayGreeting: true});
+    localStorage.setItem("name", this.state.name)
+  }
+
   render() {
 
-    let whiteCards = [{content: "Join a public game"}, {content: "Join a private game"}, {content: "Create a new game"}]
+    let whiteCards = [{content: "Join a public ga fa a conversationist ga"}, {content: "Join a private game"}, {content: "Create a new game"}]
     if (localStorage.getItem("roomId"))
       whiteCards.push({content: "Rejoin the last game (might be closed already)"})
 
     let sidebar = (
       <div>
         <span>Set your name:</span>
-        <input value={this.state.name} onChange={e => {this.setState({...this.state, name: e.target.value})}}/><button onClick={_=>localStorage.setItem("name", this.state.name)}>Set</button>
+        <input value={this.state.name} onChange={e => {this.saveNameToState(this, e.target.value)}}/><button onClick={_=>this.saveName(this)}>Set</button>
+        {this.state.displayGreeting && <span className="greeting">Hi, {this.state.name}!</span>}
       </div>
     )
 

frontend/src/components/Scoreboard.css

@@ -1,4 +1,21 @@
 .scoreboard {
     display: flex;
     flex-direction: column;
+}
+
+.player {
+    padding: 0.5%;
+    border-bottom: 1px solid black;
+}
+
+.player:last-child {
+    border-bottom: unset;
+}
+
+.name {
+    font-weight: bold;
+}
+
+.winner {
+    background-color: gold;
 }

frontend/src/components/Scoreboard.js

@@ -4,13 +4,36 @@ import React from 'react';
 import './Scoreboard.css'
 export default class Scoreboard extends React.Component {
 
+  getAnnotation(me, player){
+    let annotations = ""
+    if (player.isOwner)
+      annotations += "(Owner) "
+    if (!player.connected)
+      if (player.left)
+        annotations += "(Left) "
+      else
+        annotations += "(Disconnected) "
+    if (me.props.gameRunning && !player.played && !player.isCzar)
+      annotations += "Waiting "
+    if (player.isCzar)
+      annotations += "Card-Czar "
+    return annotations
+  }
+
   render() {
-      console.log(this.props.players)
+    console.log(this.props.winner)
     return (
       <div className="scoreboard">
           {this.props.players.map((player, index) => {
               return (
-              <div className="player" key={player.name+index}>{player.name}{player.isOwner?" (Owner)": ""}: {player.score} {!player.connected?player.left?'(Left)':'(Disconnected)':''}</div>
+              <div className={`player ${(player.id === this.props.winner) ? 'winner': ''}`} key={player.name+index}>
+                <span className="name">
+                  {player.name}: {player.score}
+                </span>
+                <span>
+                  {this.getAnnotation(this, player)}
+                </span>
+              </div>
               )
           })}
       </div>