fix(Windows): Broken styles on Windows. Closes #140

CHANGELOG.md

@@ -1,6 +1,6 @@
 # 📈 LIST OF CHANGES FOR WEREWOLVES ASSISTANT WEB
 
-## 1.0.0-beta.11 (2021-03-??)
+## 1.0.0-beta.11 (2021-03-03)
 
 ### 🚀 New features
 
@@ -33,6 +33,7 @@
 * [#119](https://github.com/antoinezanardi/werewolves-assistant-web/issues/119) - Adapt home page to smaller screens.
 * [#122](https://github.com/antoinezanardi/werewolves-assistant-web/issues/122) - No targets for big bad wolf.
 * [#139](https://github.com/antoinezanardi/werewolves-assistant-web/issues/139) - Broken styles on GameLobby.
+* [#140](https://github.com/antoinezanardi/werewolves-assistant-web/issues/140) - Broken styles on Windows.
 
 ### ♻️ Refactoring
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "werewolves-assistant-web",
     "description": "Werewolves Assistant Web is a Vue web app using the Werewolves Assistant API. Thanks to this app, being the game master of the Werewolves of Millers Hollow game is so easy !",
-    "version": "1.0.0-beta.11",
+    "versioan": "1.0.0-beta.11",
     "private": true,
     "scripts": {
         "start": "npm run serve",

src/assets/scss/_scrollbars.scss

@@ -2,7 +2,7 @@ $scrollbar-color: rgba(234, 234, 234, 0.5);
 $scrollbar-background-color: #1A1C1D;
 
 .visible-scrollbar {
-    scrollbar-color: $scrollbar-background-color $scrollbar-color;
+    scrollbar-color: $scrollbar-color $scrollbar-background-color;
 
     &::-webkit-scrollbar {
         width: 3px;

src/assets/scss/_vue-select.scss

@@ -13,7 +13,7 @@
         background-color: $bg-color;
         border: 1px solid $dark-color;
         max-height: 170px;
-        overflow-y: scroll;
+        overflow-y: auto;
         @extend .visible-scrollbar;
 
         .vs__dropdown-option {

src/classes/AudioManager.js

@@ -109,6 +109,11 @@ class AudioManager {
         }
     }
 
+    stopAllMusics() {
+        this.stopDayMusic();
+        this.stopNightMusic();
+    }
+
     playSoundEffect(soundEffect) {
         if (this.soundEffects.sounds[soundEffect]) {
             this.soundEffects.sounds[soundEffect].play();

src/components/Game/Game.vue

@@ -37,14 +37,22 @@ export default {
     async beforeRouteLeave(to, from, next) {
         if (this.game.status === "playing") {
             const { value: confirmLeaveGame } = await this.confirmLeaveGame();
-            return confirmLeaveGame ? next() : next(false);
+            if (confirmLeaveGame) {
+                this.audioManager.stopAllMusics();
+                return next();
+            }
+            return next(false);
         }
+        this.audioManager.stopAllMusics();
         return next();
     },
     data() {
         return { loading: { getGame: true } };
     },
-    computed: { ...mapGetters("game", { game: "game" }) },
+    computed: {
+        ...mapGetters("game", { game: "game" }),
+        ...mapGetters("audioManager", { audioManager: "audioManager" }),
+    },
     created() {
         this.getGame();
     },

src/components/Game/GameCanceled/GameCanceled.vue

@@ -45,7 +45,13 @@ import GameReviewModal from "@/components/shared/Game/GameReview/GameReviewModal
 export default {
     name: "GameCanceled",
     components: { GameReviewModal, GameReviewButton },
-    computed: { ...mapGetters("game", { game: "game" }) },
+    computed: {
+        ...mapGetters("game", { game: "game" }),
+        ...mapGetters("audioManager", { audioManager: "audioManager" }),
+    },
+    created() {
+        this.audioManager.stopAllMusics();
+    },
     methods: {
         confirmRestartGame() {
             return Swal.fire({

src/components/Game/GameContent/GamePlayField/GamePlayField.vue

@@ -145,7 +145,7 @@ export default {
 
 <style scoped lang="scss">
     #game-content-play-field {
-        overflow-y: scroll;
+        overflow-y: auto;
         width: 100%;
         flex-grow: 1;
     }

src/components/Game/GameWinners/GameWinners.vue

@@ -63,8 +63,7 @@ export default {
         ...mapGetters("audioManager", { audioManager: "audioManager" }),
     },
     created() {
-        this.audioManager.stopNightMusic();
-        this.audioManager.stopDayMusic();
+        this.audioManager.stopAllMusics();
     },
     methods: {
         confirmRestartGame() {
@@ -97,7 +96,7 @@ export default {
 
 <style scoped>
     #game-winners-content {
-        overflow-y: scroll;
+        overflow-y: auto;
         width: 100%;
         flex-grow: 1;
     }

src/components/GameLobby/GameLobby.vue

@@ -57,7 +57,7 @@
                         <hr class="bg-dark mt-3 mb-2"/>
                     </div>
                 </div>
-                <div id="game-lobby-players-container" class="d-flex flex-column flex-grow-1">
+                <div id="game-lobby-players-container" class="d-flex flex-column flex-grow-1 visible-scrollbar">
                     <transition mode="out-in" name="fade">
                         <div v-if="!game.players.length" class="d-flex flex-column justify-content-center flex-grow-1">
                             <h3 id="no-player-text"
@@ -349,6 +349,10 @@ export default {
     @import "../../../node_modules/bootstrap/scss/bootstrap";
     @import "../../assets/scss/_variables";
 
+    #game-lobby {
+        overflow-x: hidden;
+    }
+
     #game-lobby-title {
         font-size: 1.25rem;
         @include media-breakpoint-up(sm) {
@@ -362,7 +366,6 @@ export default {
     }
 
     #players {
-        overflow-y: scroll;
         overflow-x: hidden !important;
     }
 
@@ -371,7 +374,7 @@ export default {
     }
 
     #game-lobby-players-container {
-        overflow-y: scroll;
+        overflow-y: auto;
         min-height: 75px;
     }
 </style>

src/components/GameLobby/GameLobbyRolePickerModal/GameLobbyRolePickerModal.vue

@@ -296,7 +296,7 @@ export default {
     }
 
     #selected-role-panel {
-        overflow-y: scroll;
+        overflow-y: auto;
         height: 40%;
         @include media-breakpoint-up(lg) {
             height: 100%;

src/components/Statistics/Statistics.vue

@@ -174,7 +174,7 @@ export default {
     @import "../../assets/scss/variables";
 
     #statistics-container {
-        overflow-y: scroll;
+        overflow-y: auto;
 
         li {
             @include font-size(1.5rem);