User can join if game is started already

Fixed css for mobile devices

Webservice/Game.js

@@ -53,7 +53,7 @@ class Game {
     }
 
     add_player(name) {
-        let canAddPlayer = this.players.length < Game.MAX_PLAYERS;
+        let canAddPlayer = this.players.length < Game.MAX_PLAYERS && this.currentStatus === Game.STATUS.SETTING_UP;
         if (canAddPlayer) this.players.push(new Player(name));
         return canAddPlayer;
     }

public/css/chat.css

@@ -103,7 +103,7 @@
     white-space: pre;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 980px) {
     #chat {
         flex-flow: column-reverse;
         border-top: #7d7d7d solid 2px;

public/css/components.css

@@ -101,7 +101,7 @@ main {
     height: calc(100% - 50px);
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 980px) {
     #main {
         display: grid;
         grid-template-columns: unset;

public/css/game.css

@@ -28,7 +28,7 @@
     background-color: #FFDDA1;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 980px) {
     #game {
         height: auto;
         width: auto;

public/css/header.css

@@ -45,7 +45,7 @@ header {
     flex-direction: column;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 980px) {
     header {
         height: 5em;
 

public/css/index.css

@@ -54,7 +54,7 @@
     color: #ffffff;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 980px) {
     #login {
         align-items: flex-start;
     }