Merge pull request #51 from encap/dev

Dev

Author: encap

public/code/Python/UrlParser.py

@@ -1,4 +1,4 @@
- @property
+@property
     def port(self):
         port = self._hostinfo[1]
         if port is not None:

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

@@ -32,9 +32,9 @@ export default {
   computed: {
     ...mapGetters(['room', 'trackedContainers', 'smallScreen']),
     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/CodeEditor.vue

@@ -15,7 +15,7 @@
         @blur="onUnFocus"
       />
     </div>
-    <div class="pop-up" :class="{hidden: !showPopUp, clickable: popUpClickable, 'small-font': popUpText.length > 15}">
+    <div class="pop-up" :class="{hidden: !showPopUp || room.newGameRequest, clickable: popUpClickable && !room.newGameRequest, 'small-font': popUpText.length > 15}">
       <div>
         <p v-show="popUpText === 'Try again'" class="hardcore-info">
           We can't generate accurate results from this round.

src/components/LanguagesList.vue

@@ -6,6 +6,7 @@
         type="text"
         placeholder="Search"
         class="searchInput"
+        :disabled="room.connected && !room.admin"
         maxlength="12"
         autofocus
         @keydown.enter.stop="selectFirstFromSearch"
@@ -26,8 +27,9 @@
     >
       <button
         :disabled="room.connected && !room.owner"
-        class="language random"
+        class="language random-btn"
         :class="{'selected': language.index === null}"
+        :style="{'--col-span': randomBtnColSpan}"
         @click="selectRandom"
       >
         <span class="language-name">
@@ -70,6 +72,7 @@ export default {
     return {
       searchText: '',
       forceStats: false,
+      randomBtnColSpan: 1,
     };
   },
   computed: {
@@ -81,9 +84,13 @@ export default {
         const filtered = this.languagesList
           .filter((language) => language.name.toLowerCase().includes(search))
           .sort((a, b) => (b.name.toLowerCase().startsWith(search) ? 1 : -1));
-        return filtered.length > 0 ? filtered : this.languagesList;
+        return filtered.length === 0 ? this.languagesList : filtered;
       }
-      return [...Array(29)].map(() => ({ name: 'Loading...' }));
+      return [...Array(33)].map(() => ({ name: '...' }));
+    },
+    fillEmptyCellsReference() {
+      // .bind spawns new reference and will not work with removeEventListener without saving it here
+      return this.fillEmptyCells.bind(this);
     },
   },
   watch: {
@@ -106,12 +113,18 @@ export default {
         }
       },
     },
+    filteredList() {
+      this.fillEmptyCells();
+    },
   },
   activated() {
     this.$store.commit('ADD_TRACKED_CONTAINER', this.$refs.languagesList);
+    window.addEventListener('resize', this.fillEmptyCellsReference);
   },
   deactivated() {
     this.$store.commit('REMOVE_TRACKED_CONTAINER', this.$refs.languagesList.className);
+    console.log('DEACTIVATED');
+    window.removeEventListener('resize', this.fillEmptyCellsReference);
   },
   methods: {
     clear() {
@@ -147,6 +160,32 @@ export default {
         this.$nextTick(() => this.$socket.client.emit('languageChange', ev.target.getAttribute('data-index')));
       }
     },
+    fillEmptyCells() {
+      // randomBtn prevents shrinking
+      this.randomBtnColSpan = 1;
+
+      this.$nextTick(() => {
+        const gridComputedStyle = window.getComputedStyle(this.$refs.languagesList);
+        console.warn(gridComputedStyle.getPropertyValue('grid-template-columns'));
+
+        const columns = gridComputedStyle.getPropertyValue('grid-template-columns')
+          .replace(/ 0px/g, '') // webkit bug return 0px for non existing columns
+          .split(' ').length;
+
+        console.log(`cells: ${this.filteredList.length + 1}`);
+        console.log(`columns: ${columns}`);
+
+        const mod = (this.filteredList.length + 1) % columns;
+        console.log(`mod: ${mod}`);
+
+        if (mod) {
+          const emptyCells = columns - mod;
+          console.blue(emptyCells);
+
+          this.randomBtnColSpan = emptyCells + 1;
+        }
+      });
+    },
     toggleStats() {
       this.forceStats = !this.forceStats;
     },
@@ -211,12 +250,15 @@ export default {
 .language-radio
   display: none
 
-.showStats .language:hover:not(.random), .forceStats .language:not(.random)
+.showStats .language:hover:not(.random-btn), .forceStats .language:not(.random-btn)
   & > .language-name
     transform: translateX(-25%)
   & > .stat
     opacity: 1
 
+.random-btn
+  grid-column-start: span var(--col-span)
+
 .language
   display: flex
   align-items: center

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) {
@@ -266,6 +260,7 @@ export default {
       this.$store.commit('SET_ROOM_PROPERTY', ['connected', false]);
       this.$store.commit('SET_ROOM_PROPERTY', ['name', '']);
       this.$store.commit('SET_ROOM_PROPERTY', ['owner', false]);
+      this.$store.commit('SET_ROOM_PROPERTY', ['newGameRequest', false]);
       if (action) {
         this.askForPlayerName = false;
         this.roomName = '';
@@ -281,7 +276,7 @@ export default {
       this.roomInfoMsg = '';
     },
     acceptNewGame() {
-      this.requestNewGame = false;
+      this.$store.commit('SET_ROOM_PROPERTY', ['newGameRequest', false]);
       this.$router.push('/');
     },
   },
@@ -312,33 +307,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 = {