finish nakopneme calc page

majak_uistyleguide/templates/patterns/templates/nakopneme/calculator/calculator.html

@@ -28,15 +28,17 @@
         <h2 class="text-center head-9xl mb-4">Sečteno a rozkradeno</h2>
 
         <div class="flex justify-center">
-            <div class="bg-pirati-yellow p-5 head-8xl font-alt justify-center flex min-w-64" id="total" data-value="0">0 Kč</div>
+            <div class="bg-pirati-yellow p-5 head-8xl font-alt justify-center flex min-w-96">
+                <div id="total" data-value="0">0 Kč</div>
+            </div>
         </div>
 
-        <div class="mt-8 text-3xl lg:text-4xl max-w-3xl mx-auto hidden" id="buyable-things-wrapper">
+        <div class="mt-8 text-3xl lg:text-4xl max-w-3xl mx-auto hidden min-h-40" id="buyable-things-wrapper">
             <span>Za to jsme mohli pořídit</span>
             <span id="buyable-things" class="font-bold"></span><span>.</span>
         </div>
 
-        <div class="prose prose-black mt-8 [&_p]:text-lg">
+        <div class="prose prose-black mt-8 [&_p]:text-lg mx-auto">
             <p>
                 {{ after_calc_text }}
             </p>
@@ -55,11 +57,14 @@
         {% endfor %}
     };
 
+    const buyWrapper = document.getElementById("buyable-things-wrapper");
+    const total = document.getElementById("total");
+
     for (const element of document.getElementsByClassName("_calculator_item")) {
         element.addEventListener(
             "change",
             (event) => {
-                let currentValue = Number(document.getElementById("total").dataset.value);
+                let currentValue = Number(total.dataset.value);
                 let targetValue = Number(event.currentTarget.dataset.monetaryValue);
                 let finalValue = 0;
 
@@ -69,33 +74,56 @@
                     finalValue = currentValue - targetValue;
                 }
 
-                document.getElementById("total").dataset.value = finalValue;
-                document.getElementById("total").innerHTML = `${finalValue.toLocaleString()} Kč`
+                total.dataset.value = finalValue;
 
 
                 let buyableThingsText = "";
                 let position = 0;
                 const thingPricesLength = Object.keys(thingPrices).length;
 
-                document.getElementById("buyable-things-wrapper").classList.remove("hidden")
+                let foundAnything = false;
 
                 for (let [key, value] of Object.entries(thingPrices)) {
                     if (finalValue / value > 1) {
                         const actualCount = Math.floor(finalValue / value);
 
                         if (position + 1 == thingPricesLength) {
-                            buyableThingsText += " a ";
+                            buyableThingsText += ", nebo ";
                         } else if (position != 0) {
-                            buyableThingsText += ", ";
+                            buyableThingsText += ", nebo ";
                         }
                         
                         buyableThingsText += `${actualCount} ${key}`;
+                        foundAnything = true;
                     }
 
                     position++;
                 }
 
+                if (!foundAnything) {
+                    document.getElementById("buyable-things-wrapper").classList.add("hidden");
+                    total.innerHTML = `${finalValue.toLocaleString()} Kč`;
+                    return;
+                }
+
+                if (document.getElementById("buyable-things-wrapper").classList.contains("hidden")) {
+                    document.getElementById("buyable-things").innerHTML = buyableThingsText;
+                    document.getElementById("buyable-things-wrapper").classList.remove("hidden");
+                } else {
+                    buyWrapper.animate([ { opacity: [0] } ], { duration: 250 });
+
+                    setTimeout(() => {
                         document.getElementById("buyable-things").innerHTML = buyableThingsText;
+                        buyWrapper.animate([ { opacity: [1] } ], { duration: 250 });
+                    }, 250);
+                }
+
+                total.animate([ { opacity: [0] } ], { duration: 250 });
+
+                setTimeout(() => {
+                    total.animate([ { opacity: [1] } ], { duration: 250 });
+                    total.innerHTML = `${finalValue.toLocaleString()} Kč`;
+                });
             }
         )
     }