Skip to content

Commit

Permalink
wip: minecraft whitelist frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
veryCrunchy committed Apr 8, 2024
1 parent 7259e5b commit 76ef04d
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 15 deletions.
2 changes: 1 addition & 1 deletion app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const navs: { name: string; path: string }[] = [
v-for="nav in navs"
:key="nav.path"
:href="nav.path"
:class="{ underline: nav.path === route.fullPath }"
:class="{ underline: nav.path === route.path }"
class="text-gray-300 hover:text-gray-200 text-xl underline-offset-6"
>{{ nav.name }}</NuxtLink
>
Expand Down
4 changes: 2 additions & 2 deletions components/otp/input.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default /* #__PURE__ */ defineComponent({
type: String as PropType<
"number" | "tel" | "letter-numeric" | "password"
>,
default: "number",
validator: (value: string) =>
["number", "tel", "letter-numeric", "password"].includes(value),
},
Expand All @@ -54,7 +55,7 @@ export default /* #__PURE__ */ defineComponent({
>,
validator: (value: string) =>
["numeric", "text", "tel", "none"].includes(value),
default: "text",
default: "numeric",
},
shouldAutoFocus: {
type: Boolean,
Expand Down Expand Up @@ -258,7 +259,6 @@ export default /* #__PURE__ */ defineComponent({

<template>
<div style="display: flex" class="otp-input-container">
<!-- To turn off autocomplete when otp-input is password-->
<input
v-if="inputType === 'password'"
autocomplete="off"
Expand Down
160 changes: 148 additions & 12 deletions pages/minecraft.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,35 @@ const downloadURL = "https://cdn.greasygang.co/greasycraft/";
const files = ["curseforge.zip", "prism.zip"];
const showModal = ref<string | null>(null);
const route = useRoute();
const wlHash = "#wl";
if (route.hash === wlHash) {
useSeoMeta({
ogTitle: $ogTitle("GreasyCraft"),
ogDescription: "Get whitelisted on the GreasyCraft SMP",
});
showModal.value = route.hash;
}
import OtpInput from "@/components/otp/input.vue";
const otpInput = ref<InstanceType<typeof OtpInput> | null>(null);
const bindModal = ref("");
const handleOnComplete = (value: string) => {
console.log("OTP completed: ", value);
setTimeout(() => {
otpInput.value?.clearInput();
}, 100);
};
const change = (value: string) => {
console.log("OTP change: ", value);
};
const fillInput = (value: string) => {
console.log(value);
otpInput.value?.fillInput(value);
};
const user = useUser();
</script>

<template>
Expand All @@ -29,6 +58,7 @@ const showModal = ref<string | null>(null);
class="absolute -z-100 size-full op-80 overflow-hidden object-cover"
:src="$ContentImage('GoopBGTransparent.png')"
></NuxtImg>

<div class="flex flex-col justify-center items-center h-dvh">
<div
class="flex flex-col space-y-4 w-90vw max-w-lg p-6 justify-between rounded-xl"
Expand Down Expand Up @@ -68,12 +98,34 @@ const showModal = ref<string | null>(null);
</div>
</NuxtLink>
</div>
<div
:class="{
'h-11': $route.hash === wlHash && showModal !== wlHash,
}"
class="h-0 transition-height"
>
<Transition>
<div
v-if="$route.hash === wlHash && showModal !== wlHash"
key="whitelist"
class="mc-button mc-font size-full bg-cover bg-center"
:style="$BGContentImage('minecraft/button.png')"
@click="showModal = wlHash"
>
<div
class="h-full title font-600 text-[clamp(0rem,4vw,1.125rem)] sm:text-lg flex justify-center items-center"
>
GET WHITELISTED
</div>
</div>
</Transition>
</div>
</div>
</div>
</div>

<!-- Prism Modal -->
<Transition>
<Transition name="modal">
<div
v-if="showModal"
class="fixed inset-0 h-dvh flex justify-center items-center"
Expand All @@ -96,7 +148,18 @@ const showModal = ref<string | null>(null);
"
>
<div class="flex justify-between items-center">
<h2 id="modal-title" class="text-lg font-medium text-white">
<h2
v-if="showModal === wlHash"
id="modal-title"
class="text-lg font-medium text-white"
>
Input the provided code
</h2>
<h2
v-else
id="modal-title"
class="text-lg font-medium text-white"
>
Install instructions
</h2>
<button class="text-white hover:text-gray-300 bg-transparent">
Expand All @@ -107,7 +170,40 @@ const showModal = ref<string | null>(null);
/>
</button>
</div>
<div class="mt-4 text-sm text-white">
<div class="mt-4 text-sm w-min text-white">
<div v-if="showModal === wlHash">
<div v-if="user" class="space-y-2">
<OtpInput
ref="otpInput"
v-model:value="bindModal"
input-classes="otp-input"
:num-inputs="6"
:should-auto-focus="true"
:should-focus-order="true"
@on-change="change"
@on-complete="handleOnComplete"
/>
<p>
<span class="text-gray"
>Your minecraft account will be linked to your twitch
account: </span
>{{ user.me.displayName }}
</p>
</div>
<NuxtLink
v-else
class="mc-button mc-font flex h-10 justify-center items-center bg-cover bg-center"
:to="$login()"
external
:style="$BGContentImage('minecraft/button.png')"
>
<div
class="title size-full text-lg flex justify-center items-center"
>
Login
</div>
</NuxtLink>
</div>
<p v-if="showModal === 'curseforge.zip'">
1. Download and install Curseforge from
<a href="https://www.curseforge.com/download/app"
Expand Down Expand Up @@ -150,6 +246,48 @@ const showModal = ref<string | null>(null);
</template>

<style>
@font-face {
font-family: "Minecraft";
src: url("https://cdn.greasygang.co/fonts/minecraft.woff") format("woff");
}
.otp-input {
width: 40px;
height: 40px;
padding: 5px;
margin: 0 0.25rem;
font-size: 20px;
color: white;
font-family: "Minecraft";
border: 2px solid white;
text-align: center;
-webkit-user-select: none;
user-select: none;
background-color: black;
}
input {
caret-shape: underscore;
}
input:focus-visible {
outline: 0;
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input::selection {
background: transparent;
}
input::placeholder {
-webkit-user-select: none;
user-select: none;
font-size: 15px;
text-align: center;
font-weight: 600;
}
.mc-modal {
a {
color: #55ffff;
Expand All @@ -159,19 +297,16 @@ const showModal = ref<string | null>(null);
}
}
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
.modal-enter-active,
.modal-leave-active {
transition: opacity 0.2s;
}
.v-enter-from,
.v-leave-to {
.modal-enter-from,
.modal-leave-to {
opacity: 0;
}
@font-face {
font-family: "Minecraft";
src: url("https://cdn.greasygang.co/fonts/minecraft.woff") format("woff");
}
.mc-font {
font-family: "Minecraft";
Expand Down Expand Up @@ -207,6 +342,7 @@ const showModal = ref<string | null>(null);
box-shadow:
inset -2px -4px #0006,
inset 2px 2px #fff7;
font-weight: 600;
}
.title > svg {
filter: drop-shadow(2px 2px #000a);
Expand Down
3 changes: 3 additions & 0 deletions server/routes/whitelist.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default defineEventHandler(async event => {
return sendRedirect(event, "/minecraft#wl");
});

0 comments on commit 76ef04d

Please sign in to comment.