various multiplayer mode bug fixes

Author: Bot

server/rooms.js

@@ -111,10 +111,15 @@ module.exports = (http) => {
     });
 
     socket.on('start', () => {
+      rooms[roomName].playersCompleted = 0;
       io.in(roomName).emit('reset');
       socket.to(roomName).emit('start');
     });
 
+    socket.on('requestNewGame', () => {
+      socket.to(roomName).emit('requestNewGame');
+    });
+
     socket.on('completed', () => {
       console.log(`player "${rooms[roomName].players[socket.id].name} completed`);
 
@@ -143,8 +148,6 @@ module.exports = (http) => {
     });
 
     socket.on('reset', () => {
-      rooms[roomName].playersCompleted = 0;
-
       if (rooms[roomName].players[socket.id].owner) {
         console.warn(`room "${roomName}" reset`);
         io.in(roomName).emit('reset');

src/App.vue

@@ -34,7 +34,8 @@ export default {
     isThin() {
       console.log('UPDATE');
       const { path } = this.$route;
-      return path === '/run' || (this.innerWidth < 1300 && !this.room.connected && path !== '/');
+      // newGameRequest exception because of webkit bug with position: fixed and transfrom http://code.google.com/p/chromium/issues/detail?id=20574
+      return !this.room.newGameRequest && (path === '/run' || (this.innerWidth < 1300 && !this.room.connected && path !== '/'));
     },
   },
   created() {

src/components/NavBar.vue

@@ -7,7 +7,7 @@
     <div class="sticky-container">
       <div class="links" :class="{'room-connected': room.connected}">
         <button class="link" @click="mainPage(true)">
-          <fa :icon="['fas', 'play']" :class="{flip: $route.path === '/run'}" />
+          <fa :icon="['fas', $route.path === '/' ? 'play' : 'home']" />
           <span class="btn-text">
             Start
           </span>
@@ -89,7 +89,7 @@ export default {
   methods: {
     mainPage(action = false) {
       if (this.$route.path === '/') {
-        if (action && this.language.name && !this.room.connected) {
+        if (action && this.language.name) {
           this.$emit('start');
         }
       } else {

src/components/PlayersList.vue

@@ -95,19 +95,22 @@ export default {
       // dont mutate original
       return [...this.playersArray].sort((p1, p2) => {
         console.log(p1.name, p2.name);
-        if (p1.place && p2.place) {
-          if (this.options.selectedMode === 0) {
-            return p1.place - p2.place;
+        if (this.$route.path === '/results') {
+          if (p1.place && p2.place) {
+            if (this.options.selectedMode === 0) {
+              return p1.place - p2.place;
+            }
+            return p2.stats.correct - p1.stats.correct;
+          }
+          if (!p2.place) {
+            return -1;
           }
-          return p2.stats.correct - p1.stats.correct;
         }
         if (p1.owner) {
           console.log('owner');
           return -1;
         }
-        if (this.$route.path === '/results') {
-          return 1;
-        }
+
         return 0;
       });
     },

src/components/RoomPanel.vue

@@ -52,7 +52,7 @@
               @keydown.enter="handleEnter"
             >
           </div>
-          <p v-if="roomInfoMsg" class="info">
+          <p v-if="roomInfoMsg && popUp" class="info">
             {{ roomInfoMsg }}
           </p>
           <div class="buttons">
@@ -117,7 +117,7 @@
 
     <PlayersList v-if="room.connected && $route.path !== '/run'" class="playersList" />
 
-    <div v-if="requestNewGame && $route.path !== '/' && !room.owner" class="moveToLobby popUp">
+    <div v-if="room.newGameRequest && !room.owner" class="moveToLobby popUp">
       <div class="wrapper">
         <h2>Room owner wants to start a new game.</h2>
         <h3>If you want to stay on current page {{ $route.path === '/results' ? 'and continue reading the results' : '' }} you have to leave the room. You can always join again later.</h3>
@@ -156,7 +156,6 @@ export default {
       origin: window.location.origin,
       popUp: false,
       hidePopUp: false,
-      requestNewGame: false,
     };
   },
   computed: {
@@ -203,11 +202,6 @@ export default {
       console.error('PLAYER NAME TAKEN');
       this.roomInfoMsg = `Nick "${this.playerName}" is already taken.`;
     },
-    reset() {
-      if (this.$route.path === '/results' || this.$route.path === '/run') {
-        this.requestNewGame = true;
-      }
-    },
   },
   mounted() {
     if (this.$route.params.roomName) {
@@ -281,7 +275,7 @@ export default {
       this.roomInfoMsg = '';
     },
     acceptNewGame() {
-      this.requestNewGame = false;
+      this.$store.commit('SET_ROOM_PROPERTY', ['newGameRequest', false]);
       this.$router.push('/');
     },
   },
@@ -312,33 +306,33 @@ input
 
 
 .popUp
+  display: flex
+  align-items: center
+  justify-content: space-around
+  position: fixed
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  background-color: rgba($navy-grey, .7)
+  transition: opacity 2s ease-in-out
+  z-index: 10
+  user-select: none
+  pointer-events: all
+
+  &.hide-popUp
+    opacity: 0
+
+  .wrapper
     display: flex
     align-items: center
-    justify-content: space-around
-    position: fixed
-    top: 0
-    bottom: 0
-    left: 0
-    right: 0
-    background-color: rgba($navy-grey, .7)
-    transition: opacity 2s ease-in-out
-    z-index: 10
-    user-select: none
-    pointer-events: all
-
-    &.hide-popUp
-      opacity: 0
-
-    .wrapper
-      display: flex
-      align-items: center
-      flex-direction: column
-      flex-wrap: wrap
-      text-align: center
-      width: 50vw
-
-    h2
-      font-size: 2.5rem
+    flex-direction: column
+    flex-wrap: wrap
+    text-align: center
+    width: 50vw
+
+  h2
+    font-size: 2.5rem
 
 
 .roomNotConnected

src/main.js

@@ -6,7 +6,7 @@ import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome
 
 // import only used icons to reduce bundle size
 import {
-  faUsers, faPlay, faInfo, faFileCode, faShareAlt, faTimes, faLink, faHeart, faServer, faUser, faSignOutAlt, faCopy, faUserCog, faCheck, faHourglassEnd, faSignal, faSlash, faCompressAlt, faExpandAlt,
+  faUsers, faPlay, faHome, faInfo, faFileCode, faShareAlt, faTimes, faLink, faHeart, faServer, faUser, faSignOutAlt, faCopy, faUserCog, faCheck, faHourglassEnd, faSignal, faSlash, faCompressAlt, faExpandAlt,
 } from '@fortawesome/free-solid-svg-icons';
 
 import {
@@ -17,7 +17,7 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
-library.add(faUsers, faPlay, faInfo, faFileCode, faShareAlt, faTimes, faLink, faFacebookF, faFacebookMessenger, faTwitter, faHeart, faServer, faUser, faSignOutAlt, faCopy, faUserCog, faCheck, faHourglassEnd, faSignal, faSlash, faCompressAlt, faExpandAlt);
+library.add(faUsers, faPlay, faHome, faInfo, faFileCode, faShareAlt, faTimes, faLink, faFacebookF, faFacebookMessenger, faTwitter, faHeart, faServer, faUser, faSignOutAlt, faCopy, faUserCog, faCheck, faHourglassEnd, faSignal, faSlash, faCompressAlt, faExpandAlt);
 
 Vue.component('fa', FontAwesomeIcon);
 Vue.component('faStack', FontAwesomeLayers);

src/store/modules/room.js

@@ -51,7 +51,7 @@ const actions = {
     commit('SET_ROOM_PROPERTY', ['players', playersObject]);
 
     if (roomState.languageIndex) {
-      commit('SET_LANGUAGE', rootState.other.languagesList[roomState.languageIndex]);
+      commit('SET_LANGUAGE', rootState.misc.languagesList[roomState.languageIndex]);
     } else {
       commit('SET_LANGUAGE', {
         index: null,
@@ -84,7 +84,7 @@ const actions = {
     commit('SET_OPTION', option);
   },
   socket_languageChange({ commit, rootState }, languageIndex) {
-    commit('SET_LANGUAGE', rootState.other.languagesList[languageIndex]);
+    commit('SET_LANGUAGE', rootState.misc.languagesList[languageIndex]);
   },
   socket_fileIndex({ dispatch }, fileIndex) {
     dispatch('generateCodeInfo', fileIndex);
@@ -100,6 +100,11 @@ const actions = {
       commit('RESET_PLAYER', playerName);
     });
   },
+  socket_requestNewGame({ commit, state }) {
+    if (!state.room.players[state.room.myName].inLobby) {
+      commit('SET_ROOM_PROPERTY', ['newGameRequest', true]);
+    }
+  },
 };
 
 const mutations = {

src/views/Run.vue

@@ -106,6 +106,8 @@ export default {
     }
   },
   beforeRouteUpdate(to, from, next) {
+    console.red('routeUpdate');
+
     if (to.path === '/results') {
       setTimeout(() => {
         this.$refs.results.scrollIntoView({
@@ -122,6 +124,10 @@ export default {
     if (this.intervalId) {
       window.clearInterval(this.intervalId);
     }
+    if (this.room.connected) {
+      // reset players locally but let them finish and view results until admin clicks start again
+      this.$store.dispatch('socket_reset');
+    }
   },
   methods: {
     reset() {

src/views/Start.vue

@@ -174,8 +174,8 @@ export default {
       }
 
       if (this.room.connected && !this.playersInLobby) {
-        this.error = 'To start a new game all of the players must be in lobby';
-        this.$socket.client.emit('reset');
+        this.error = 'To start a new game all players must be in lobby';
+        this.$socket.client.emit('requestNewGame');
         return;
       }
 
@@ -276,6 +276,8 @@ export default {
   width: 150px
   height: 47px
   max-width: 250px
+  &:disabled
+    cursor: not-allowed
 
 .start-btn, .ready-btn
   background: linear-gradient(to right, $purple, $dark-pink 50%, $navy-grey 50% 100%)