feat(minecraft): add instructions modal (#8)

Greasy-Projects · Apr 5, 2024 · ba413cc · ba413cc
2 parents 715c90c + f25d6bf
commit ba413cc
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 58 deletions.
diff --git a/components/AccordionMenu.vue b/components/AccordionMenu.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from "vue";
+
+defineProps({
+	title: { type: String, required: true },
+	ariaTitle: { type: String, required: true },
+});
+
+const showPanel = ref(false);
+
+const togglePanel = () => {
+	showPanel.value = !showPanel.value;
+};
+</script>
+
+<template>
+	<div class="border-2 rounded-lg">
+		<button
+			:id="'accordion-control-' + ariaTitle"
+			:arial-controls="'accordion-content-' + ariaTitle"
+			class="font-poppins py-4 w-full font-medium text-gray-500 flex flex-row items-center justify-between bg-transparent border-solid border-t-2 border-b-0 border-x-0 border-gray-100"
+			@click.prevent="togglePanel"
+		>
+			{{ title }}
+			<FontAwesomeIcon
+				v-if="showPanel"
+				class="rotate-180"
+				:icon="['fas', 'chevron-down']"
+			/>
+			<FontAwesomeIcon v-else :icon="['fas', 'chevron-down']" />
+		</button>
+		<Transition>
+			<div
+				v-if="showPanel"
+				:id="'content-' + ariaTitle"
+				:aria-hidden="!showPanel"
+				class="p-4"
+			>
+				<slot></slot>
+			</div>
+		</Transition>
+	</div>
+</template>
diff --git a/pages/minecraft.vue b/pages/minecraft.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 const downloadURL = "https://cdn.greasygang.co/greasycraft/";
-const files = ["curseforge.zip", "prism.zip", "modrinth.mrpack	"];
+const files = ["curseforge.zip", "prism.zip"];
+
+const showModal = ref<string | null>(null);
 </script>
+
 <template>
 	<main>
 		<NuxtImg
@@ -17,36 +20,146 @@ const files = ["curseforge.zip", "prism.zip", "modrinth.mrpack	"];
 					class="w-full overflow-hidden object-cover"
 					:src="$ContentImage('minecraft/greasycraft.png')"
 				></NuxtImg>
-				<NuxtLink
-					v-for="file in files"
-					:key="file"
-					:href="downloadURL + file"
-					:style="$BGContentImage('minecraft/button.png')"
-					class="mc-button bg-cover bg-center"
-				>
-					<div class="relative title flex h-10 justify-center items-center">
+				<div class="space-y-2">
+					<div v-for="file in files" :key="file" class="gap-2 flex">
 						<div
-							class="font-600 h-full flex justify-center w-full items-center text-lg tracking-widest uppercase"
+							class="mc-button mc-font size-11 bg-cover bg-center"
+							:style="$BGContentImage('minecraft/button.png')"
+							@click="showModal = file"
 						>
-							{{ file }}
+							<div class="h-full title flex justify-center items-center">
+								<FontAwesomeIcon :icon="['fas', 'info']" class="size-4" />
+							</div>
 						</div>
-						<FontAwesomeIcon
-							:icon="['fas', 'download']"
-							class="size-5 absolute right-2.5"
-						/>
+						<NuxtLink
+							:href="downloadURL + file"
+							download
+							class="mc-button mc-font w-90% bg-cover bg-center"
+							:style="$BGContentImage('minecraft/button.png')"
+						>
+							<div class="relative title flex h-10 justify-center items-center">
+								<div
+									class="font-600 h-full flex justify-center w-full items-center text-lg tracking-widest uppercase"
+								>
+									{{ file }}
+								</div>
+								<FontAwesomeIcon
+									:icon="['fas', 'download']"
+									class="size-5 absolute right-2.5"
+								/>
+							</div>
+						</NuxtLink>
 					</div>
-				</NuxtLink>
+				</div>
 			</div>
 		</div>
+
+		<!-- Prism Modal -->
+		<Transition>
+			<div
+				v-if="showModal"
+				class="fixed inset-0 h-dvh flex justify-center items-center"
+			>
+				<div
+					class="absolute w-full h-100vh bg-gray-900 bg-opacity-50 transition-opacity"
+					@click="showModal = null"
+				></div>
+				<div class="mc-font mc-modal max-w-lg z-10 transition-all">
+					<div class="flex items-center justify-center">
+						<div
+							class="bg-repeat p-6 rounded-lg border-solid border-3 border-white shadow-inner shadow-gray-900"
+							aria-labelledby="modal-title"
+							role="dialog"
+							aria-modal="true"
+							:style="
+								$BGContentImage('minecraft/dirt.png', 100, 100, {
+									darken: 0.3,
+								})
+							"
+						>
+							<div class="flex justify-between items-center">
+								<h2 id="modal-title" class="text-lg font-medium text-white">
+									Install instructions
+								</h2>
+								<button class="text-white hover:text-gray-300 bg-transparent">
+									<FontAwesomeIcon
+										:icon="['fas', 'xmark']"
+										class="h-5 w-5 my-auto"
+										@click="showModal = null"
+									/>
+								</button>
+							</div>
+							<div class="mt-4 text-sm text-white">
+								<p v-if="showModal === 'curseforge.zip'">
+									1. Download and install Curseforge from
+									<a href="https://www.curseforge.com">curseforge.com</a><br />
+									2. Click "Minecraft" (it may need to install)<br />
+									3. In the Minecraft tab, click Create Custom Profile in the
+									top right.<br />
+									4. Click "Import"<br />
+									5. Browse to the downloaded file
+									<a href="https://cdn.greasygang.co/greasycraft/curseforge.zip"
+										>(CurseForge.zip)</a
+									><br />
+									6. After it's done initializing, launch the modpack.<br />
+									7. Log into the Minecraft launcher with your Microsoft account
+									if it isn't already<br />
+									8. Click Play.
+								</p>
+								<p v-if="showModal === 'prism.zip'">
+									1. Download and install Prism from
+									<a href="https://prismlauncher.org">prismlauncher.org</a
+									><br />
+									2. Log in to Prism with your Microsoft account.<br />
+									3. Drag and drop the downloaded ZIP file
+									<a href="https://cdn.greasygang.co/greasycraft/prism.zip"
+										>(Prism.zip)</a
+									>
+									onto the main window.<br />
+									4. Launch the modpack by double clicking the GreasyCraft icon
+									or clicking the GreasyCraft icon and then pressing Launch on
+									the right sidebar.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Transition>
 	</main>
 </template>
+
 <style>
+.mc-modal {
+	a {
+		color: #55ffff;
+		font-weight: 700;
+		&:hover {
+			color: #32d1c4;
+		}
+	}
+}
+.v-enter-active,
+.v-leave-active {
+	transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
+}
 @font-face {
 	font-family: "Minecraft";
 	src: url("https://cdn.greasygang.co/fonts/minecraft.woff") format("woff");
 }
-.mc-button {
+
+.mc-font {
 	font-family: "Minecraft";
+	color: #ddd;
+	text-shadow: 2px 2px #000a;
+}
+
+.mc-button {
 	cursor: pointer;
 	overflow: hidden;
 	white-space: nowrap;
@@ -75,43 +188,8 @@ const files = ["curseforge.zip", "prism.zip", "modrinth.mrpack	"];
 			inset -2px -4px #0006,
 			inset 2px 2px #fff7;
 	}
-}
-.mcbutton {
-	&::before {
-		content: "";
-		position: absolute;
-		background-color: #e75d20;
-		height: 5px;
-		width: 100%;
-		bottom: 100%;
-		left: 0;
-	}
-	&::after {
-		content: "";
-		position: absolute;
-		background-color: #9b3101;
-		height: 5px;
-		width: 100%;
-		top: 100%;
-		left: 0;
-	}
-	span::before {
-		content: "";
-		position: absolute;
-		background-color: #9b3101;
-		height: 100%;
-		width: 4px;
-		left: 100%;
-		top: 0;
-	}
-	span::after {
-		content: "";
-		position: absolute;
-		background-color: #9b3101;
-		height: 100%;
-		width: 4px;
-		top: 0;
-		right: 100%;
+	.title > svg {
+		filter: drop-shadow(2px 2px #000a);
 	}
 }
 </style>
diff --git a/plugins/content.ts b/plugins/content.ts
@@ -5,12 +5,28 @@ export default defineNuxtPlugin(() => {
 		provide: {
 			ContentImage: (path: string) =>
 				`${config.apiBase}/image/${config.branch}/website/images/${path}`,
-			BGContentImage: (path: string, width?: number, height?: number) => {
+			BGContentImage: (
+				path: string,
+				width?: number,
+				height?: number,
+				options?: {
+					darken: number | boolean;
+				}
+			) => {
 				const img = useImage();
 				const { $ContentImage } = useNuxtApp();
 
 				const imgUrl = img($ContentImage(path), { width, height });
-				return { backgroundImage: `url('${imgUrl}')` };
+				const filters = [];
+				if (options?.darken) {
+					const amount = `${options.darken === true ? 0.5 : options.darken}`;
+					filters.push(
+						`linear-gradient(rgba(0, 0, 0, ${amount}), rgba(0, 0, 0, ${amount}))`
+					);
+				}
+				return {
+					backgroundImage: `${filters.length > 0 ? filters.join(",") + "," : ""} url('${imgUrl}')`,
+				};
 			},
 		},
 	};

diff --git a/plugins/fontawesome.ts b/plugins/fontawesome.ts
@@ -1,6 +1,12 @@
 import { library, config } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faDollarSign, faDownload } from "@fortawesome/free-solid-svg-icons";
+import {
+	faDollarSign,
+	faDownload,
+	faXmark,
+	faChevronDown,
+	faInfo,
+} from "@fortawesome/free-solid-svg-icons";
 import {
 	faDiscord,
 	faTwitch,
@@ -20,7 +26,10 @@ library.add(
 	faYoutube,
 	faTiktok,
 	faTwitter,
-	faSpotify
+	faSpotify,
+	faXmark,
+	faChevronDown,
+	faInfo
 );
 
 export default defineNuxtPlugin(nuxtApp => {