Converted the pug to html

components/AboutUsOverlay.vue

@@ -1,10 +1,14 @@
-<template lang="pug">
-div.fixed.w-full.h-full.inset-0.bg-black.bg-opacity-80.flex(style="z-index: 2")
-    div.rounded-lg.p-2.bg-white(style="width: 500px; height: 400px; margin: auto;")
-        div.w-min.h-min.text-black(style="margin-left: auto;")
-            p.cursor-pointer(@click="emitClose") X
-        p.w-full.text-center About Us
-        p Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia numquam atque sed dolorem laudantium minus ullam totam voluptatem hic doloremque aut temporibus impedit distinctio architecto eveniet quos sit ducimus, veniam tenetur qui consequuntur accusamus dolore consectetur. Atque mollitia quaerat deleniti rerum aliquid suscipit nulla facere quia pariatur at autem dolorem officia eius rem ea delectus non veniam facilis hic, doloribus, nisi dolor dicta illo iure. Dolorum ut expedita recusandae distinctio commodi nam accusantium. Accusamus eius repellendus distinctio at dolore ducimus? Natus, at vel? Quaerat, at, nemo repudiandae labore itaque dolorem provident sequi voluptatum nostrum quasi facere cum asperiores deleniti quisquam?
+<template>
+<div class="fixed w-full h-full inset-0 bg-black bg-opacity-80 flex" style="z-index: 2;">
+    <div class="rounded-lg p-2 bg-white" style="width: 500px; height: 400px; margin: auto;">
+        <div class="w-min h-min text-black" style="margin-left: auto;">
+            <p class="cursor-pointer" @click="emitClose">X</p>
+        </div>
+        <p class="w-full text-center">About Us</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia numquam atque sed dolorem laudantium minus ullam totam voluptatem hic doloremque aut temporibus impedit distinctio architecto eveniet quos sit ducimus, veniam tenetur qui consequuntur accusamus dolore consectetur. Atque mollitia quaerat deleniti rerum aliquid suscipit nulla facere quia pariatur at autem dolorem officia eius rem ea delectus non veniam facilis hic, doloribus, nisi dolor dicta illo iure. Dolorum ut expedita recusandae distinctio commodi nam accusantium. Accusamus eius repellendus distinctio at dolore ducimus? Natus, at vel? Quaerat, at, nemo repudiandae labore itaque dolorem provident sequi voluptatum nostrum quasi facere cum asperiores deleniti quisquam?</p>
+    </div>
+</div>
+
 </template>
 
 <script setup lang="ts">

components/HelpOverlay.vue

@@ -1,10 +1,14 @@
-<template lang="pug">
-div.fixed.w-full.h-full.inset-0.bg-black.bg-opacity-80.flex(style="z-index: 2")
-    div.rounded-lg.p-2.bg-white(style="width: 500px; height: 400px; margin: auto;")
-        div.w-min.h-min.text-black(style="margin-left: auto;")
-            p.cursor-pointer(@click="emitClose") X
-        p.w-full.text-center Help
-        p Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia numquam atque sed dolorem laudantium minus ullam totam voluptatem hic doloremque aut temporibus impedit distinctio architecto eveniet quos sit ducimus, veniam tenetur qui consequuntur accusamus dolore consectetur. Atque mollitia quaerat deleniti rerum aliquid suscipit nulla facere quia pariatur at autem dolorem officia eius rem ea delectus non veniam facilis hic, doloribus, nisi dolor dicta illo iure. Dolorum ut expedita recusandae distinctio commodi nam accusantium. Accusamus eius repellendus distinctio at dolore ducimus? Natus, at vel? Quaerat, at, nemo repudiandae labore itaque dolorem provident sequi voluptatum nostrum quasi facere cum asperiores deleniti quisquam?
+<template>
+<div class="fixed w-full h-full inset-0 bg-black bg-opacity-80 flex" style="z-index: 2;">
+    <div class="rounded-lg p-2 bg-white" style="width: 500px; height: 400px; margin: auto;">
+        <div class="w-min h-min text-black" style="margin-left: auto;">
+            <p class="cursor-pointer" @click="emitClose">X</p>
+        </div>
+        <p class="w-full text-center">Help</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia numquam atque sed dolorem laudantium minus ullam totam voluptatem hic doloremque aut temporibus impedit distinctio architecto eveniet quos sit ducimus, veniam tenetur qui consequuntur accusamus dolore consectetur. Atque mollitia quaerat deleniti rerum aliquid suscipit nulla facere quia pariatur at autem dolorem officia eius rem ea delectus non veniam facilis hic, doloribus, nisi dolor dicta illo iure. Dolorum ut expedita recusandae distinctio commodi nam accusantium. Accusamus eius repellendus distinctio at dolore ducimus? Natus, at vel? Quaerat, at, nemo repudiandae labore itaque dolorem provident sequi voluptatum nostrum quasi facere cum asperiores deleniti quisquam?</p>
+    </div>
+</div>
+
 </template>
 
 <script setup lang="ts">

components/HowToPlayOverlay.vue

@@ -1,10 +1,14 @@
-<template lang="pug">
-div.fixed.w-full.h-full.inset-0.bg-black.bg-opacity-80.flex(style="z-index: 2")
-    div.rounded-lg.p-2.bg-white(style="width: 500px; height: 400px; margin: auto;")
-        div.w-min.h-min.text-black(style="margin-left: auto;")
-            p.cursor-pointer(@click="emitClose") X
-        p.w-full.text-center(style="font-size: 28px;") How to Play
-        p Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia numquam atque sed dolorem laudantium minus ullam totam voluptatem hic doloremque aut temporibus impedit distinctio architecto eveniet quos sit ducimus, veniam tenetur qui consequuntur accusamus dolore consectetur. Atque mollitia quaerat deleniti rerum aliquid suscipit nulla facere quia pariatur at autem dolorem officia eius rem ea delectus non veniam facilis hic, doloribus, nisi dolor dicta illo iure. Dolorum ut expedita recusandae distinctio commodi nam accusantium. Accusamus eius repellendus distinctio at dolore ducimus? Natus, at vel? Quaerat, at, nemo repudiandae labore itaque dolorem provident sequi voluptatum nostrum quasi facere cum asperiores deleniti quisquam?
+<template>
+<div class="fixed w-full h-full inset-0 bg-black bg-opacity-80 flex" style="z-index: 2;">
+    <div class="rounded-lg p-2 bg-white" style="width: 500px; height: 400px; margin: auto;">
+        <div class="w-min h-min text-black" style="margin-left: auto;">
+            <p class="cursor-pointer" @click="emitClose">X</p>
+        </div>
+        <p class="w-full text-center" style="font-size: 28px;">How to Play</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia numquam atque sed dolorem laudantium minus ullam totam voluptatem hic doloremque aut temporibus impedit distinctio architecto eveniet quos sit ducimus, veniam tenetur qui consequuntur accusamus dolore consectetur. Atque mollitia quaerat deleniti rerum aliquid suscipit nulla facere quia pariatur at autem dolorem officia eius rem ea delectus non veniam facilis hic, doloribus, nisi dolor dicta illo iure. Dolorum ut expedita recusandae distinctio commodi nam accusantium. Accusamus eius repellendus distinctio at dolore ducimus? Natus, at vel? Quaerat, at, nemo repudiandae labore itaque dolorem provident sequi voluptatum nostrum quasi facere cum asperiores deleniti quisquam?</p>
+    </div>
+</div>
+
 </template>
 
 <script setup lang="ts">

components/LogInOverlay.vue

@@ -1,12 +1,17 @@
-<template lang="pug">
-div.fixed.w-full.h-full.inset-0.bg-black.bg-opacity-80.flex(style="z-index: 2")
-    div.w-min.h-min.rounded-lg.p-2.bg-white(style="margin: auto;")
-        div.w-min.h-min.text-black(style="margin-left: auto;")
-            p.cursor-pointer(@click="emitClose") X
-        p.text-black Log In
-        form(@submit.prevent="handleSubmit")
-            label.text-black Username
-            input.text-black.border-2.border-black(type="text" v-model="username" required)
+<template>
+<div class="fixed w-full h-full inset-0 bg-black bg-opacity-80 flex" style="z-index: 2;">
+    <div class="w-min h-min rounded-lg p-2 bg-white" style="margin: auto;">
+        <div class="w-min h-min text-black" style="margin-left: auto;">
+            <p class="cursor-pointer" @click="emitClose">X</p>
+        </div>
+        <p class="text-black">Log In</p>
+        <form @submit.prevent="handleSubmit">
+            <label class="text-black">Username</label>
+            <input class="text-black border-2 border-black" type="text" v-model="username" required>
+        </form>
+    </div>
+</div>
+
 </template>
 
 <script setup lang="ts">

components/SignUpOverlay.vue

@@ -1,12 +1,17 @@
-<template lang="pug">
-div.fixed.w-full.h-full.inset-0.bg-black.bg-opacity-80.flex(style="z-index: 2")
-    div.w-min.h-min.rounded-lg.p-2.bg-white(style="margin: auto;")
-        div.w-min.h-min.text-black(style="margin-left: auto;")
-            p.cursor-pointer(@click="emitClose") X
-        p.text-black Sign Up
-        form(@submit.prevent="handleSubmit")
-            label.text-black Username
-            input.text-black.border-2.border-black(type="text" v-model="username" required)
+<template>
+<div class="fixed w-full h-full inset-0 bg-black bg-opacity-80 flex" style="z-index: 2;">
+    <div class="w-min h-min rounded-lg p-2 bg-white" style="margin: auto;">
+        <div class="w-min h-min text-black" style="margin-left: auto;">
+            <p class="cursor-pointer" @click="emitClose">X</p>
+        </div>
+        <p class="text-black">Sign Up</p>
+        <form @submit.prevent="handleSubmit">
+            <label class="text-black">Username</label>
+            <input class="text-black border-2 border-black" type="text" v-model="username" required>
+        </form>
+    </div>
+</div>
+
 </template>
 
 <script setup lang="ts">