From 3d2cef40d535eb5b44957a44a1daf0009b586f55 Mon Sep 17 00:00:00 2001
From: Sticks <sticks@teamhydra.dev>
Date: Mon, 31 Mar 2025 23:34:49 -0400
Subject: [PATCH] more improvements (#3449)

* more improvements

* fix: apply pnpm run fix
---
 apps/frontend/src/layouts/default.vue      |   7 +
 apps/frontend/src/pages/pizza/index.vue    | 283 +++++++++++++++++++++
 packages/assets/styles/variables.scss      |  14 +-
 packages/ui/src/components/base/Avatar.vue |   2 +-
 4 files changed, 298 insertions(+), 8 deletions(-)
 create mode 100644 apps/frontend/src/pages/pizza/index.vue

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index fd707b8c4..9f258588d 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -266,6 +266,13 @@
               <span class="contents md:hidden">Modrinth App</span>
             </nuxt-link>
           </ButtonStyled>
+          <ButtonStyled type="transparent" :highlighted="route.name === 'app'">
+            <nuxt-link to="/pizza">
+              <ArrowBigUpDashIcon aria-hidden="true" />
+              <span class="hidden md:contents">Modrinth Pizza</span>
+              <span class="contents md:hidden">Modrinth Pizza</span>
+            </nuxt-link>
+          </ButtonStyled>
         </template>
       </div>
       <div class="flex items-center gap-1">
diff --git a/apps/frontend/src/pages/pizza/index.vue b/apps/frontend/src/pages/pizza/index.vue
new file mode 100644
index 000000000..b4883cbb5
--- /dev/null
+++ b/apps/frontend/src/pages/pizza/index.vue
@@ -0,0 +1,283 @@
+<template>
+  <NewModal ref="modal" header="Build your pizza">
+    <div class="flex flex-col gap-4">
+      <!-- Pizza Name -->
+      <div class="flex flex-col gap-2">
+        <label for="pizza-name">
+          <span class="text-lg font-semibold text-contrast">
+            Pizza Name
+            <span class="text-brand-red">*</span>
+          </span>
+        </label>
+        <input
+          id="pizza-name"
+          v-model="name"
+          type="text"
+          maxlength="64"
+          placeholder="Ex: Creeper Crust Deluxe"
+          autocomplete="off"
+        />
+      </div>
+
+      <!-- Crust Type Dropdown -->
+      <div class="flex flex-col gap-2">
+        <label for="crust">
+          <span class="text-lg font-semibold text-contrast">
+            Crust Type
+            <span class="text-brand-red">*</span>
+          </span>
+        </label>
+        <DropdownSelect
+          id="crust"
+          v-model="crust"
+          :options="crustOptions"
+          :display-name="(x: any) => x.display"
+          name="Crust Type"
+        />
+      </div>
+
+      <!-- Toppings (text only display) -->
+      <div class="flex flex-col gap-2">
+        <span class="text-lg font-semibold text-contrast">Toppings</span>
+        <span
+          >Your preselected topping choice. Our advanced AI determined these top 3 toppings for
+          you.</span
+        >
+        <div>
+          {{ toppingOptions.join(", ") }}
+        </div>
+      </div>
+
+      <!-- Pizza Description -->
+      <div class="flex flex-col gap-2">
+        <label for="description" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast"> Description </span>
+          <span> Describe your pizza (mods, flavor, lore...) </span>
+        </label>
+        <div class="textarea-wrapper">
+          <textarea id="description" v-model="description" maxlength="256" />
+        </div>
+      </div>
+
+      <!-- If the order contains pineapple, show a warning -->
+      <div v-if="toppingOptions.includes('Pineapple Ore')" class="flex flex-col gap-2">
+        <span class="text-lg font-semibold text-contrast">Order validation</span>
+        <div class="flex flex-row gap-2">
+          <span class="text-yellow-500"
+            ><b>Warning!</b> Pineapple detected. This may cause unknown side effects.</span
+          >
+        </div>
+      </div>
+
+      <!-- If no pineapple, say everything is okay -->
+      <div v-else class="flex flex-col gap-2">
+        <span class="text-lg font-semibold text-contrast">Order validation</span>
+        <span class="text-green-500"
+          ><b>Success!</b> No pineapple detected. Your order is safe.</span
+        >
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="flex gap-2">
+        <ButtonStyled color="brand">
+          <button @click="orderPizza">
+            <PlusIcon aria-hidden="true" />
+            Order Pizza
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="cancel">
+            <XIcon aria-hidden="true" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+
+  <div
+    v-if="isPreapring"
+    class="fixed left-0 top-0 flex h-full w-full items-center justify-center bg-black bg-opacity-50"
+  >
+    <div class="rounded-lg bg-zinc-800 p-8 shadow-lg">
+      <h2 class="mb-4 text-2xl font-semibold">Your pizza is being prepared...</h2>
+      <p class="text-lg">
+        Your chef, <span class="font-semibold">{{ whoIsPreparing }}</span
+        >, is preparing your pizza. Please wait warmly.
+      </p>
+      <p class="mt-2 text-lg">
+        Estimated time left: <span class="font-semibold">{{ preparingTime }} seconds</span>
+      </p>
+    </div>
+  </div>
+
+  <main class="flex flex-1 flex-col items-center justify-center px-6 py-16 text-center">
+    <img class="mb-4 h-auto w-48 md:w-64" src="https://i.hep.gg/RRLj-WEql" alt="Modrinth Pizza" />
+
+    <h2 class="mb-4 text-4xl font-bold md:text-5xl">Welcome to Modrinth Pizza</h2>
+    <p class="mb-6 max-w-xl text-lg">
+      Say hello to <span class="text-green-400 font-semibold">Modrinth Pizza</span> — the world's
+      first modded pizza delivery service. Pick your loader (Forge, Fabric, or Quilt crust), and get
+      delicious slices shipped straight to your server.
+    </p>
+
+    <p class="mb-8 max-w-lg text-base">
+      Compatible with all Minecraft flavors, auto-updates via <code>cheese.toml</code>, and is
+      <span class="text-green-400 font-semibold">fully open sauce</span>.
+    </p>
+
+    <ButtonStyled color="brand">
+      <button @click="modal.show">
+        <svg class="h-5 w-5 fill-current">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+            />
+          </svg>
+        </svg>
+        Order now
+      </button>
+    </ButtonStyled>
+
+    <p class="mt-4 max-w-lg text-sm text-gray-500">
+      Disclaimer: Modrinth Pizza is not responsible for any mod conflicts, crashes, or server
+      outages caused by our pizza. Eat at your own risk. By ordering, you agree to this and to allow
+      us to collect your data to sell to the highest bidder. Bon appétit! 🍕
+    </p>
+  </main>
+</template>
+<script setup lang="ts">
+import { NewModal, ButtonStyled, DropdownSelect } from "@modrinth/ui";
+import { XIcon, PlusIcon } from "@modrinth/assets";
+
+const modal = ref();
+const name = ref("");
+const crust = ref({ value: "fabric", display: "Fabric" });
+const toppings = ref([]);
+const description = ref("");
+const pineapple_opinions = ref([]);
+
+const crustOptions = [
+  { value: "fabric", display: "Fabric" },
+  { value: "forge", display: "Forge" },
+  { value: "quilt", display: "Quilt" },
+];
+
+const toppingOptions = ref([
+  "Pineapple Ore",
+  "Redstone Pepperoni",
+  "Netherite Bacon",
+  "Glow Lichen",
+  "Ender Anchovies",
+]);
+
+const modrinthTeamMembers = [
+  "Tanner",
+  "Ben",
+  "coolbot",
+  "François",
+  "Jai",
+  "Prospector",
+  "Kchem",
+  "Jade",
+  "Jasmine",
+  "Michael",
+];
+
+const isPreapring = ref(false);
+const whoIsPreparing = ref(
+  modrinthTeamMembers[Math.floor(Math.random() * modrinthTeamMembers.length)],
+);
+
+// Derive the preparing time from the index of whoIsPreparing
+const preparingTime = ref(5 + modrinthTeamMembers.indexOf(whoIsPreparing.value) * 2);
+
+function cancel() {
+  modal.value.hide();
+}
+
+function show(event: MouseEvent) {
+  name.value = "";
+  crust.value = crustOptions[0];
+  toppings.value = [];
+  description.value = "";
+  modal.value.show(event);
+}
+
+function orderPizza() {
+  // If any value is empty, show an error notification
+  if (!name.value || !crust.value || !description.value) {
+    addNotification({
+      title: "Error!",
+      text: "Please fill out all required fields.",
+      type: "error",
+    });
+    return;
+  }
+
+  // Make sure the math problem is solved, if incorrect, redirect to rickroll
+  if (toppingOptions.value.includes("Pineapple Ore") && pineapple_opinions.value.length !== 1) {
+    // Roll a random number between 1 and 100, if above 50, redirect to rickroll
+    if (Math.floor(Math.random() * 100) > 50) {
+      addNotification({
+        title: "Warning!",
+        text: "pizza_create: create(0) failed: Pineapple detected. Recovery process initiated.",
+        type: "error",
+      });
+
+      setTimeout(() => {
+        window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+      }, 2000);
+      return;
+    }
+  }
+
+  modal.value.hide();
+
+  // Show the preparing modal
+  isPreapring.value = true;
+  addNotification({
+    title: "Success!",
+    text: "Order successfully placed. Your pizza is being prepared.",
+    type: "success",
+  });
+
+  const inter = setInterval(() => {
+    preparingTime.value--;
+    if (preparingTime.value === 0) {
+      addNotification({
+        title: "Success!",
+        text: "Your pizza is ready! 🍕 You will be redirected to the delivery page.",
+        type: "success",
+      });
+
+      clearInterval(inter);
+
+      // Redirect to funny video :)
+      setTimeout(() => {
+        window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+      }, 2000);
+    }
+  }, 1000);
+}
+
+defineExpose({
+  show,
+});
+
+// on page load, shuffle the toppings, slice to top 3, and set them as preselected
+onMounted(() => {
+  const shuffledArray = [...toppingOptions.value].sort(() => 0.5 - Math.random());
+  // Replace the contents of toppingOptions with the shuffled array
+  toppingOptions.value = shuffledArray.slice(0, 3);
+});
+</script>
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 3e8e91cfa..e4d0b98a4 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -16,9 +16,9 @@
 
   --color-red: #fa3d3d;
   --color-orange: #e08325;
-  --color-green: #249D3F;
+  --color-green: #249d3f;
   --color-blue: #1f68c0;
-  --color-purple: #A379C9;
+  --color-purple: #a379c9;
   --color-gray: #595b61;
 
   --color-red-highlight: rgba(203, 34, 69, 0.25);
@@ -34,7 +34,7 @@
   --color-blue-bg: rgba(31, 104, 192, 0.1);
   --color-purple-bg: rgba(142, 50, 243, 0.1);
 
-  --color-brand: #F16436;
+  --color-brand: #f16436;
   --color-brand-highlight: rgba(242, 101, 53, 0.25);
   --color-brand-shadow: rgba(242, 101, 53, 0.7);
 
@@ -138,9 +138,9 @@ html {
 
   --color-red: #fa3d3d;
   --color-orange: #edbb22;
-  --color-green: #249D3F;
+  --color-green: #249d3f;
   --color-blue: #4f9cff;
-  --color-purple: #A379C9;
+  --color-purple: #a379c9;
   --color-gray: #9fa4b3;
 
   --color-red-highlight: rgba(255, 73, 110, 0.25);
@@ -156,7 +156,7 @@ html {
   --color-blue-bg: rgba(79, 156, 255, 0.2);
   --color-purple-bg: rgba(199, 138, 255, 0.2);
 
-  --color-brand: #F16436;
+  --color-brand: #f16436;
   --color-brand-highlight: rgba(242, 101, 53, 0.25);
   --color-brand-shadow: rgba(242, 101, 53, 0.7);
 
@@ -272,5 +272,5 @@ html {
 }
 
 * {
-  border-radius: 0!important;
+  border-radius: 0 !important;
 }
diff --git a/packages/ui/src/components/base/Avatar.vue b/packages/ui/src/components/base/Avatar.vue
index 872df9ab3..2588c8a77 100644
--- a/packages/ui/src/components/base/Avatar.vue
+++ b/packages/ui/src/components/base/Avatar.vue
@@ -134,7 +134,7 @@ function hash(str) {
   position: relative;
 
   &.circle {
-    border-radius: 50%!important;
+    border-radius: 50% !important;
   }
 
   &:not(.no-shadow) {