forked from didirus/AstralRinth
Prospector
@@ -266,13 +266,6 @@
|
|||||||
<span class="contents md:hidden">Modrinth App</span>
|
<span class="contents md:hidden">Modrinth App</span>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</ButtonStyled>
|
</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>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-1">
|
<div class="flex items-center gap-1">
|
||||||
|
|||||||
@@ -1,283 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -16,9 +16,9 @@
|
|||||||
|
|
||||||
--color-red: #fa3d3d;
|
--color-red: #fa3d3d;
|
||||||
--color-orange: #e08325;
|
--color-orange: #e08325;
|
||||||
--color-green: #249d3f;
|
--color-green: #249D3F;
|
||||||
--color-blue: #1f68c0;
|
--color-blue: #1f68c0;
|
||||||
--color-purple: #a379c9;
|
--color-purple: #A379C9;
|
||||||
--color-gray: #595b61;
|
--color-gray: #595b61;
|
||||||
|
|
||||||
--color-red-highlight: rgba(203, 34, 69, 0.25);
|
--color-red-highlight: rgba(203, 34, 69, 0.25);
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
--color-blue-bg: rgba(31, 104, 192, 0.1);
|
--color-blue-bg: rgba(31, 104, 192, 0.1);
|
||||||
--color-purple-bg: rgba(142, 50, 243, 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-highlight: rgba(242, 101, 53, 0.25);
|
||||||
--color-brand-shadow: rgba(242, 101, 53, 0.7);
|
--color-brand-shadow: rgba(242, 101, 53, 0.7);
|
||||||
|
|
||||||
@@ -138,9 +138,9 @@ html {
|
|||||||
|
|
||||||
--color-red: #fa3d3d;
|
--color-red: #fa3d3d;
|
||||||
--color-orange: #edbb22;
|
--color-orange: #edbb22;
|
||||||
--color-green: #249d3f;
|
--color-green: #249D3F;
|
||||||
--color-blue: #4f9cff;
|
--color-blue: #4f9cff;
|
||||||
--color-purple: #a379c9;
|
--color-purple: #A379C9;
|
||||||
--color-gray: #9fa4b3;
|
--color-gray: #9fa4b3;
|
||||||
|
|
||||||
--color-red-highlight: rgba(255, 73, 110, 0.25);
|
--color-red-highlight: rgba(255, 73, 110, 0.25);
|
||||||
@@ -156,7 +156,7 @@ html {
|
|||||||
--color-blue-bg: rgba(79, 156, 255, 0.2);
|
--color-blue-bg: rgba(79, 156, 255, 0.2);
|
||||||
--color-purple-bg: rgba(199, 138, 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-highlight: rgba(242, 101, 53, 0.25);
|
||||||
--color-brand-shadow: rgba(242, 101, 53, 0.7);
|
--color-brand-shadow: rgba(242, 101, 53, 0.7);
|
||||||
|
|
||||||
@@ -272,5 +272,5 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
border-radius: 0 !important;
|
border-radius: 0!important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -134,7 +134,7 @@ function hash(str) {
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.circle {
|
&.circle {
|
||||||
border-radius: 50% !important;
|
border-radius: 50%!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.no-shadow) {
|
&:not(.no-shadow) {
|
||||||
|
|||||||
Reference in New Issue
Block a user