Make home squares width relative to screen width instead of height (vh to vw)

_data/i18n.js

@@ -69,6 +69,7 @@ module.exports = {
     by: "by",
     back: "back",
     hideBackground: "Hide background",
+    disableSoundEffects: "Disable sound effects",
     options: "Options",
     alsoAvailableAsVideo: "Also available as video",
     websiteDescription: "Personal website/blog of Adrian Victor.",
@@ -124,6 +125,7 @@ module.exports = {
     by: "por",
     back: "voltar",
     hideBackground: "Esconder imagem de fundo",
+    disableSoundEffects: "Desabilitar efeitos sonoros",
     options: "Opções",
     alsoAvailableAsVideo: "Também disponível em vídeo",
     websiteDescription: "Website/blog pessoal de Adrian Victor.",

_includes/base.njk

@@ -20,6 +20,7 @@
     <script type="module" src="{{ '/static/scripts/music.js' | url }}" defer></script>
     <script type="module" src="{{ '/static/scripts/88x31.js' | url }}" defer></script>
     <script type="module" src="{{ '/static/scripts/tips.js' | url }}" defer></script>
+    <script type="module" src="{{ '/static/scripts/click.js' | url }}" defer></script>
 
     <link rel="apple-touch-icon" sizes="180x180" href="{{ '/static/apple-touch-icon.png' | url }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ '/static/favicon-32x32.png' | url }}">

_includes/header.njk

@@ -12,6 +12,7 @@
                     permissionIssue: "{{ i18n[langKey].permissionIssue | safe }}",
                     permissionIssueNotificationContent: "{{ i18n[langKey].permissionIssueNotificationContent | safe }}",
                     notificationDefaultHint: "{{ i18n[langKey].notificationDefaultHint | safe }}",
+                    disableSoundEffects: "{{ i18n[langKey].disableSoundEffects | safe }}"
                 }
         </script>
     </div>

static/main.css

@@ -256,9 +256,9 @@ li.inlineList {
 #defaultSquare {
     transition: 0.4s;
     border: medium solid white;
-    height: 7vh;
+    height: 3vw;
     overflow: hidden;
-    width: 10vh;
+    width: 6vw;
     opacity: 0.4;
     padding: 0.4em;
     cursor: pointer;
@@ -279,7 +279,7 @@ li.inlineList {
 .headerSquare.selected,
 #defaultSquare.selected {
     opacity: 1;
-    height: 10vh;
+    height: 6vw;
     box-shadow: 2px 7px 5px rgba(0, 0, 0, 0.4), 0px -4px 10px rgba(0, 0, 0, 0.4);
     background-color: rgba(0, 0, 0, 0.3);
 }

static/scripts/click.js

@@ -0,0 +1,26 @@
+/*
+This script plays a sound when user clicks on the page.
+*/
+
+const click = new Audio(`${rootPrefix}static/audio/click.ogg`);
+const hover = new Audio(`${rootPrefix}static/audio/hover.ogg`);
+click.preload = "auto";
+hover.preload = "auto";
+click.volume = 0.5;
+hover.volume = 0.5;
+
+
+document.body.addEventListener("click", () => {
+    if (localStorage.getItem("disablesfx") == 'true') return;
+    
+    click.currentTime = 0;
+    click.play().catch(() => {});
+});
+
+document.querySelectorAll('a').forEach(link => {
+    link.addEventListener("mouseenter", () => {
+        if (localStorage.getItem("disablesfx") == 'true') return;
+        hover.currentTime = 0;
+        hover.play().catch(() => {});
+    })
+})

static/scripts/music.js

@@ -49,6 +49,10 @@ optionsAside.classList.add("metromenu");
             <p>${headeri18n.hideBackground}</p>
             <input id="background" type="checkbox"></input>
         </div>
+        <div class="checkbox">
+            <p>${headeri18n.disableSoundEffects}</p>
+            <input id="soundEffects" type="checkbox"></input>
+        </div>
     </div>
     `
     optionsAside.appendChild(content);
@@ -76,6 +80,12 @@ function toggleBG() {
     localStorage.setItem("bgHidden", bg.classList.contains("invisible"))
 }
 
+const disableSFX = document.querySelector("input#soundEffects");
+if (localStorage.getItem("disablesfx") === "true") disableSFX.checked = true;
+disableSFX.addEventListener("click", () => {
+    localStorage.setItem("disablesfx", disableSFX.checked)
+})
+
 const songsDrawer = document.querySelector("#songDrawer");
 const drawerSongs = [];
 const playlist = document.querySelector("#playlist");