stretch random lang btn to fill empty cells

Author: Bot

src/App.vue

@@ -32,7 +32,6 @@ export default {
   computed: {
     ...mapGetters(['room', 'trackedContainers', 'smallScreen']),
     isThin() {
-      console.log('UPDATE');
       const { path } = this.$route;
       // 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 !== '/'));

src/components/LanguagesList.vue

@@ -26,8 +26,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 +71,7 @@ export default {
     return {
       searchText: '',
       forceStats: false,
+      randomBtnColSpan: 1,
     };
   },
   computed: {
@@ -85,6 +87,10 @@ export default {
       }
       return [...Array(29)].map(() => ({ name: 'Loading...' }));
     },
+    fillEmptyCellsReference() {
+      // .bind spawns new reference and will not work with removeEventListener without saving it here
+      return this.fillEmptyCells.bind(this);
+    },
   },
   watch: {
     'room.owner': {
@@ -106,12 +112,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 +159,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 +249,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