feat: initial bulma restructuring

src/index.js

@@ -1,50 +1,7 @@
 import i18next from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import HttpApi from "i18next-http-backend";
-
-
-///////////////
-// CAGE DATA //
-///////////////
-
-const cages_dict = [
-    {
-        "name": "SavicSuiteRoyal95Double",
-        "dimensions": {
-            "width": 95,
-            "depth": 63,
-            "height": 120
-        },
-        "description": {
-            "en": "A european cage that (with added floors) is suitable for 4-7 rats",
-            "de": "Ein eurpäischer Käfig der mit zwei zusätzliche Ebenen für 4-7 Ratten geeignet ist. Oft lässt sich der Käfig auch gebraucht kaufen"
-        },
-        "images": {
-            "1": {
-                "path": "assets/img/savic-95-double.jpg",
-                "alt": "Bild eines Gitterkäfigs mit Türen die die gesamte Front öffnen."
-            }
-        }
-    },
-    {
-        "name": "SavicSuiteRoyalXL",
-        "dimensions": {
-            "width": 115,
-            "depth": 67.5,
-            "height": 153
-        },
-        "description": {
-            "en": "A european cage that (with added floors) is suitable for 4-9 rats",
-            "de": "Ein eurpäischer Käfig der mit zwei zusätzliche Ebenen für 4-9 Ratten geeignet ist. Oft lässt sich der Käfig auch gebraucht kaufen"
-        },
-        "images": {
-            "1": {
-                "path": "assets/img/savic-xl.jpeg",
-                "alt": "Bild eines Gitterkäfigs mit Türen die die gesamte Front öffnen."
-            }
-        }
-    }
-]
+import './main.scss';
 
 /////////////////
 // TRANSLATION //
@@ -60,7 +17,7 @@ async function initI18next() {
             fallbackLng: "en",
             debug: true,
             backend: {
-                loadPath: "/lang/{{lng}}.json",
+                loadPath: "/i18n/{{lng}}.json",
             },
         });
 }
@@ -221,98 +178,6 @@ inputDepth.onchange = updateViaManualMeasurements;
 const inputHeight = document.getElementById("height");
 inputHeight.onchange = updateViaManualMeasurements;
 
-function createCageCard(cageName, cageImages) {
-    console.log(cageImages);
-    // Create the card div
-    const cardDiv = document.createElement('div');
-    cardDiv.className = 'card';
-    cardDiv.id = 'card-'+cageName;
-
-    // Create the label element
-    const label = document.createElement('label');
-    label.setAttribute('for', cageName);
-
-    // Create the checkbox input element
-    const checkbox = document.createElement('input');
-    checkbox.type = 'checkbox';
-    checkbox.id = cageName;
-
-    const cardImageDiv = document.createElement('div');
-    cardImageDiv.className = 'card-photo';
-
-    const img = document.createElement('img');
-    img.setAttribute("alt-i18n-key", 'alt-savic-xl');
-    img.src = cageImages[1].path;
-
-    // Append image to card-photo div
-    cardImageDiv.appendChild(img);
-
-    // Create the info-container div and heading
-    const infoContainerDiv = document.createElement('div');
-    infoContainerDiv.className = 'info-container';
-
-    const heading = document.createElement('h4');
-    heading.innerHTML = '<b>'+ cageName + '</b>';
-
-    // Append heading to info-container div
-    infoContainerDiv.appendChild(heading);
-
-    // Append elements to label
-    label.appendChild(checkbox);
-    label.appendChild(cardImageDiv);
-    label.appendChild(infoContainerDiv);
-
-    // Append label to cardDiv
-    cardDiv.appendChild(label);
-
-    // Append cardDiv to the body or a specific element
-    let containerForCages = document.getElementById("container-cages");
-    containerForCages.appendChild(cardDiv); // Change to a specific parent element if needed
-}
-
-
-const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
-const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
-const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
-
-const cardSavicSuiteRoyaleXL = document.getElementById("card-SavicSuiteRoyaleXL");
-const cardSavicSuiteRoyale95Double = document.getElementById("card-SavicSuiteRoyale95Double");
-const cardTiakiKleintierkäfigEtagere = document.getElementById("card-TiakiKleintierkäfigEtagere");
-
-
-function markActiveCage(cageName) {
-
-    cardSavicSuiteRoyaleXL.classList.remove("card-active");
-    cardSavicSuiteRoyale95Double.classList.remove("card-active");
-    cardTiakiKleintierkäfigEtagere.classList.remove("card-active");
-    if (cageName != "") {
-        const activeCage = document.getElementById("card-" + cageName);
-        activeCage.classList.add("card-active")
-    }
-
-}
-
-function updateCage(event) {
-    selectSavicSuiteRoyaleXL.checked = false;
-    selectSavicSuiteRoyale95Double.checked = false;
-    selectTiakiKleintierkäfigEtagere.checked = false;
-    const selectedCage = event.currentTarget
-    selectedCage.checked = true;
-    const cageName = selectedCage.id;
-
-    var dim = getCageDimensions(cageName);
-    inputWidth.value = dim.width;
-    inputDepth.value = dim.depth;
-    inputHeight.value = dim.height;
-
-    markActiveCage(cageName);
-
-    update();
-}
-
-selectSavicSuiteRoyaleXL.onchange = updateCage;
-selectSavicSuiteRoyale95Double.onchange = updateCage;
-selectTiakiKleintierkäfigEtagere.onchange = updateCage;
 
 
 var labelNumRats = document.getElementById("labelNumRats");
@@ -326,17 +191,6 @@ ratSlider.oninput = function () {
 // Full floor functions
 var fullFloorNum = document.getElementById("numFullFloors");
 
-function getCageDimensions(cageName) {
-    if (cageName == "SavicSuiteRoyaleXL") {
-        return new Dimensions(115, 67.5, 153);
-    }
-    if (cageName == "SavicSuiteRoyale95Double") {
-        return new Dimensions(95, 63, 120);
-    }
-    if (cageName == "TiakiKleintierkäfigEtagere") {
-        return new Dimensions(93.5, 63, 141.2);
-    }
-}
 
 function getResultFromChecks(checks) {
     if (Object.keys(checks).length > 0) {
@@ -356,7 +210,6 @@ function getResultFromChecks(checks) {
 }
 
 function updateViaManualMeasurements() {
-    markActiveCage("ManualMeasurements");
     update();
 }
 
@@ -394,9 +247,3 @@ function increaseFloorNum() {
     update();
 }
 
-
-cages_dict.forEach((cage) => {
-    console.log(cage.images);
-    createCageCard(cage.name, cage.images);
-});
-

src/main.scss

@@ -0,0 +1,20 @@
+// Set your brand colors
+$purple: #8a4d76;
+$pink: #7c95fa;
+$brown: #757763;
+$beige-light: #d0d1cd;
+$beige-lighter: #eff0eb;
+
+// Path to Bulma's sass folder
+@use "bulma/sass" with (
+  $family-primary: '"Nunito", sans-serif',
+  $grey-dark: $brown,
+  $grey-light: $beige-light,
+  $primary: $purple,
+  $link: $pink,
+  $control-border-width: 2px,
+  $input-shadow: none
+);
+
+// Import the Google Font
+@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");