Spaces:

fast72
/

calc

Sleeping

App Files Files Community

fast72 commited on Jun 26, 2025

Commit

1bb525a

verified ·

1 Parent(s): 75d34d9

Update index.js

Browse files

Files changed (1) hide show

index.js +27 -15

index.js CHANGED Viewed

@@ -64,8 +64,9 @@ function calcValue(name, weight, rarity = "Normal", mutations = []) {
 }
 app.get("/", (req, res) => {
-  const fruitOptions = fruits.map(f => f[0]).sort().map(name => `<option>${name}</option>`).join("")
-  const mutationOptions = Object.keys(mutationMultiplier).map(m => `<option>${m}</option>`).join("")
   res.send(`
     <!DOCTYPE html>
     <html lang='en'>
@@ -77,21 +78,30 @@ app.get("/", (req, res) => {
       <style>
         .fade-in { animation: fadeIn 0.6s ease-in-out; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
       </style>
     </head>
     <body class="bg-gradient-to-br from-[#0f0f1a] to-[#0c1b2a] text-white flex items-center justify-center min-h-screen px-4">
       <div class="w-full max-w-lg fade-in">
         <h1 class="text-3xl font-bold text-center mb-4 text-blue-300">Grow a Garden</h1>
-        <h2 class="text-lg text-center text-blue-400 mb-6">Calculate your fruit's price based on weight, rarity, and mutations</h2>
         <form id="form" class="bg-[#1a1d2c] p-6 rounded-2xl shadow-xl space-y-4">
-          <select name="fruit" required class="w-full p-3 rounded bg-[#2c3144] text-white focus:outline-none focus:ring-2 focus:ring-blue-400">
-            <option disabled selected>Select Fruit</option>${fruitOptions}
-          </select>
-          <input name="weight" type="number" step="0.01" placeholder="Weight (kg)" required class="w-full p-3 rounded bg-[#2c3144] text-white focus:outline-none focus:ring-2 focus:ring-blue-400">
-          <select name="rarity" class="w-full p-3 rounded bg-[#2c3144] text-white focus:outline-none focus:ring-2 focus:ring-blue-400">
-            <option>Normal</option><option>Gold</option><option>Rainbow</option>
-          </select>
-          <select name="mutations" multiple size="6" class="w-full p-3 rounded bg-[#2c3144] text-white focus:outline-none focus:ring-2 focus:ring-blue-400">${mutationOptions}</select>
           <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 p-3 rounded font-bold transition-all">Calculate</button>
           <div id="result" class="text-center text-blue-300 font-semibold"></div>
         </form>
@@ -102,11 +112,12 @@ app.get("/", (req, res) => {
           const form = e.target
           const data = new URLSearchParams()
           const fruit = form.fruit.value
           data.append("fruit", fruit)
           data.append("weight", form.weight.value)
-          data.append("rarity", form.rarity.value)
-          let selected = Array.from(form.mutations.selectedOptions).map(o => o.value)
           if (selected.includes("Frozen") || (selected.includes("Wet") && selected.includes("Chilled"))) {
             selected = selected.filter(m => !["Wet", "Chilled"].includes(m))
             if (!selected.includes("Frozen")) selected.push("Frozen")
@@ -129,9 +140,10 @@ app.get("/", (req, res) => {
             headers: { "Content-Type": "application/x-www-form-urlencoded" },
             body: data
           })
           const json = await res.json()
-          document.getElementById("result").innerHTML = \`
-            <p>Total: <span class='text-blue-400'>\${json.value}</span></p>\`
         }
       </script>
     </body>

 }
 app.get("/", (req, res) => {
+  const fruitOptions = fruits.map(f => f[0]).sort().map(name => `<option value="${name}">${name}</option>`).join("")
+  const mutationOptions = Object.keys(mutationMultiplier).map(m => `<option value="${m}">${m}</option>`).join("")
+  const rarityOptions = ["Normal", "Gold", "Rainbow"].map(r => `<option value="${r}">${r}</option>`).join("")
   res.send(`
     <!DOCTYPE html>
     <html lang='en'>
       <style>
         .fade-in { animation: fadeIn 0.6s ease-in-out; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg fill='white' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12l-4-4h8l-4 4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; }
       </style>
     </head>
     <body class="bg-gradient-to-br from-[#0f0f1a] to-[#0c1b2a] text-white flex items-center justify-center min-h-screen px-4">
       <div class="w-full max-w-lg fade-in">
         <h1 class="text-3xl font-bold text-center mb-4 text-blue-300">Grow a Garden</h1>
+        <h2 class="text-lg text-center text-blue-400 mb-6">Calculate your fruit's price</h2>
         <form id="form" class="bg-[#1a1d2c] p-6 rounded-2xl shadow-xl space-y-4">
+          <div>
+            <label class="block mb-1 text-sm">Fruit</label>
+            <select name="fruit" id="fruit" required class="w-full p-3 rounded bg-[#2c3144] text-white focus:outline-none focus:ring-2 focus:ring-blue-400">${fruitOptions}</select>
+          </div>
+          <div>
+            <label class="block mb-1 text-sm">Weight (kg)</label>
+            <input name="weight" type="number" step="0.01" placeholder="0.00" required class="w-full p-3 rounded bg-[#2c3144] text-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+          </div>
+          <div>
+            <label class="block mb-1 text-sm">Rarity</label>
+            <select name="rarity" id="rarity" required class="w-full p-3 rounded bg-[#2c3144] text-white focus:outline-none focus:ring-2 focus:ring-blue-400">${rarityOptions}</select>
+          </div>
+          <div>
+            <label class="block mb-1 text-sm">Mutations</label>
+            <select name="mutations" id="mutations" multiple size="6" class="w-full p-3 rounded bg-[#2c3144] text-white focus:outline-none focus:ring-2 focus:ring-blue-400">${mutationOptions}</select>
+          </div>
           <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 p-3 rounded font-bold transition-all">Calculate</button>
           <div id="result" class="text-center text-blue-300 font-semibold"></div>
         </form>
           const form = e.target
           const data = new URLSearchParams()
           const fruit = form.fruit.value
+          const rarity = form.rarity.value.trim()
           data.append("fruit", fruit)
           data.append("weight", form.weight.value)
+          data.append("rarity", rarity)
+          let selected = Array.from(form.mutations.selectedOptions).map(o => o.value)
           if (selected.includes("Frozen") || (selected.includes("Wet") && selected.includes("Chilled"))) {
             selected = selected.filter(m => !["Wet", "Chilled"].includes(m))
             if (!selected.includes("Frozen")) selected.push("Frozen")
             headers: { "Content-Type": "application/x-www-form-urlencoded" },
             body: data
           })
           const json = await res.json()
+          const output = json.value ? \`<p>Total: <span class='text-blue-400'>\${json.value}</span></p>\` : \`<p class='text-red-400'>Invalid input</p>\`
+          document.getElementById("result").innerHTML = output
         }
       </script>
     </body>