Upgrade webpack config and inline svg-s

frontend/src/index.html

@@ -50,20 +50,20 @@
       <section id="settings">
         <label for="enable-relative-movement">
           <input id="enable-relative-movement" type="checkbox" />
-          <img alt="a dashed circle" src="static/circle.svg" />
+          <img alt="a dashed circle" src="../static/circle.svg" />
         </label>
 
         <label for="enable-vibration">
           <input id="enable-vibration" type="checkbox" />
-          <img alt="vibrating mobile" src="static/vibrate.svg" />
+          <img alt="vibrating mobile" src="../static/vibrate.svg" />
         </label>
 
         <label for="enable-sounds">
           <input id="enable-sounds" type="checkbox" />
-          <img alt="speaker with sound waves" src="static/volume.svg" />
+          <img alt="speaker with sound waves" src="../static/volume.svg" />
         </label>
 
-        <img id="logout" alt="logout" src="static/logout.svg" />
+        <img id="logout" alt="logout" src="../static/logout.svg" />
       </section>
     </div>
 
@@ -72,7 +72,7 @@
         id="toggle-settings"
         class="icon"
         alt="toggle-settings"
-        src="static/settings.svg"
+        src="../static/settings.svg"
       />
     </div>
 
@@ -80,13 +80,13 @@
       class="full-screen-controllers"
       id="minimize"
       alt="minimize-application"
-      src="static/minimize.svg"
+      src="../static/minimize.svg"
     />
     <img
       class="full-screen-controllers"
       id="maximize"
       alt="maximize-application"
-      src="static/maximize.svg"
+      src="../static/maximize.svg"
     />
   </body>
 </html>

frontend/src/index.ts

@@ -11,15 +11,12 @@ import { CharacterView } from './scripts/objects/character-view';
 import { LampView } from './scripts/objects/lamp-view';
 import { ProjectileView } from './scripts/objects/projectile-view';
 import { PlanetView } from './scripts/objects/planet-view';
-import './styles/main.scss';
+import './main.scss';
 import { LandingPageBackground } from './scripts/landing-page-background';
 import { JoinFormHandler } from './scripts/join-form-handler';
 import { handleFullScreen } from './scripts/handle-full-screen';
 import { Game } from './scripts/game';
 import { PlayerCharacterView } from './scripts/objects/player-character-view';
-import '../static/settings.svg';
-import '../static/minimize.svg';
-import '../static/maximize.svg';
 import { handleInsights } from './scripts/handle-insights';
 import { getInsightsFromRenderer } from './scripts/get-insights-from-renderer';
 import { Renderer } from 'sdf-2d';
@@ -90,7 +87,6 @@ const toggleSettings = () =>
 
 const applyServerContainerShadows = () => {
   const { scrollHeight, clientHeight, scrollTop } = serverContainer;
-  console.log(scrollHeight, clientHeight, scrollTop);
   if (scrollHeight > clientHeight) {
     serverContainer.className = 'scroll';
     if (scrollTop === 0) {

frontend/src/main.scss

@@ -1,8 +1,8 @@
-@import './vars.scss';
-@import './button.scss';
-@import './form.scss';
-@import './mixins.scss';
-@import './settings.scss';
+@import './styles/vars.scss';
+@import './styles/button.scss';
+@import './styles/form.scss';
+@import './styles/mixins.scss';
+@import './styles/settings.scss';
 
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
 
@@ -148,13 +148,14 @@ body {
     &::-webkit-scrollbar-track,
     &::-webkit-scrollbar {
       background-color: transparent;
-      width: 2px;
+      width: 3px;
     }
     &::-webkit-scrollbar-thumb {
       background-color: $accent;
       border-radius: $border-radius;
     }
 
+    transition: box-shadow $animation-time;
     &.scroll {
       box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4),
         inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);

frontend/src/styles/settings.scss

@@ -6,7 +6,6 @@
   position: absolute;
   display: flex;
   justify-content: center;
-
   top: 0;
   right: 0;
 }
@@ -16,17 +15,17 @@
   cursor: pointer;
 
   #toggle-settings {
-    @include square($large-icon);
-    @media (max-width: $breakpoint) {
-      @include square($small-icon);
-    }
-
     animation: spin 32s linear infinite;
     @keyframes spin {
       100% {
         transform: rotate(360deg);
       }
     }
+
+    @include square($large-icon);
+    @media (max-width: $breakpoint) {
+      @include square($small-icon);
+    }
   }
 }
 
@@ -59,10 +58,12 @@
     opacity: 1;
   }
 
-  img {
+  img,
+  svg {
     cursor: pointer;
     transition: opacity $animation-time;
     margin-bottom: $small-padding;
+    margin-left: 0;
     @include square($large-icon);
     @media (max-width: $breakpoint) {
       @include square($small-icon);
@@ -73,49 +74,49 @@
 
   label {
     position: relative;
-  }
 
-  input[type='checkbox'] {
-    width: 0;
-    height: 0;
-    appearance: none;
-    cursor: pointer;
-
-    &:not(:checked) + img {
-      opacity: 0.4;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:after {
-      content: ' ';
-      background: white;
-      position: absolute;
-
-      $height: 4px;
-      width: $height;
-      top: $height / 2;
-
-      right: 0;
-      transform-origin: top right;
-      border-radius: 100px;
+    input[type='checkbox'] {
+      width: 0;
       height: 0;
-      transform: rotate(45deg) translateY(17%);
-      transition: height $animation-time;
+      appearance: none;
+      cursor: pointer;
 
-      @media (max-width: $breakpoint) {
-        $height: 2px;
+      &:not(:checked) + * {
+        opacity: 0.4;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:after {
+        content: '';
+        background: white;
+        position: absolute;
+
+        $height: 4px;
         width: $height;
         top: $height / 2;
-      }
-    }
 
-    &:not(:checked):after {
-      height: $large-icon;
-      @media (max-width: $breakpoint) {
-        height: $small-icon;
+        right: 0;
+        transform-origin: top right;
+        border-radius: 100px;
+        height: 0;
+        transform: rotate(45deg) translateY(17%);
+        transition: height $animation-time;
+
+        @media (max-width: $breakpoint) {
+          $height: 2px;
+          width: $height;
+          top: $height / 2;
+        }
+      }
+
+      &:not(:checked):after {
+        height: $large-icon;
+        @media (max-width: $breakpoint) {
+          height: $small-icon;
+        }
       }
     }
   }