From ed10aaf710c3a397d5a7d9a1efa6195fb7bef692 Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Sun, 18 Jun 2023 11:46:21 -0400
Subject: [PATCH] Progress update!

---
 src/components/ArcadeCard.vue          |  14 +-
 src/components/CardBoxWidget.vue       |   4 +-
 src/components/Cards/CardBoxArcade.vue |  16 +-
 src/components/Tables/TableGoals.vue   |  82 ++++
 src/components/UserCard.vue            |   8 +-
 src/constants/area.js                  |  77 +++
 src/constants/index.js                 | 649 +++++++++++++++++++++----
 src/router/index.js                    |   8 +
 src/views/Arcade/ArcadeView.vue        |  56 ++-
 src/views/Arcade/EventView.vue         | 101 +++-
 src/views/HomeView.vue                 |  26 +
 src/views/Profile/GoalsView.vue        | 211 ++++++++
 12 files changed, 1145 insertions(+), 107 deletions(-)
 create mode 100644 src/components/Tables/TableGoals.vue
 create mode 100644 src/constants/area.js
 create mode 100644 src/views/Profile/GoalsView.vue

diff --git a/src/components/ArcadeCard.vue b/src/components/ArcadeCard.vue
index ed11227..7f1f068 100644
--- a/src/components/ArcadeCard.vue
+++ b/src/components/ArcadeCard.vue
@@ -1,10 +1,11 @@
 <script setup>
 import { mdiTestTube, mdiStoreOutline, mdiHomeOutline } from "@mdi/js";
+import { getArea } from "@/constants/area";
 import BaseLevel from "@/components/BaseLevel.vue";
 import CardBox from "@/components/CardBox.vue";
 import PillTag from "@/components/PillTag.vue";
 
-defineProps({
+const props = defineProps({
   useSmall: {
     type: Boolean,
     required: false,
@@ -25,6 +26,8 @@ function getCardStyle(game) {
     `;
   }
 }
+
+const areaData = getArea(props.arcadeData.area);
 </script>
 
 <template>
@@ -35,7 +38,14 @@ function getCardStyle(game) {
     >
       <div class="space-y-3 text-center">
         <h1 class="text-2xl lg:text-3xl font-bold">{{ arcadeData.name }}</h1>
-        <h2 class="text-xl md:text-2xl font-bold">{{ arcadeData.area }}</h2>
+        <div class="flex gap-2 justify-center items-center">
+          <h2 class="text-2xl md:text-3xl font-bold lg:hidden">
+            {{ areaData.flag }}
+          </h2>
+          <h2 class="text-xl md:text-2xl font-bold">
+            {{ areaData.name }}
+          </h2>
+        </div>
         <hr class="border-t border-1 w-full" />
         <p class="text-lg">
           Managed by
diff --git a/src/components/CardBoxWidget.vue b/src/components/CardBoxWidget.vue
index 91fd9ab..e5d6b73 100644
--- a/src/components/CardBoxWidget.vue
+++ b/src/components/CardBoxWidget.vue
@@ -28,7 +28,7 @@ defineProps({
   },
   color: {
     type: String,
-    default: null,
+    default: "text-gray-500 dark:text-slate-400",
   },
   trend: {
     type: String,
@@ -48,7 +48,7 @@ defineProps({
     </BaseLevel>
     <BaseLevel mobile>
       <div>
-        <h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
+        <h3 :class="color" class="text-lg leading-tight">
           {{ label }}
         </h3>
         <h1 class="text-3xl leading-tight font-semibold">
diff --git a/src/components/Cards/CardBoxArcade.vue b/src/components/Cards/CardBoxArcade.vue
index 0490edc..c065584 100644
--- a/src/components/Cards/CardBoxArcade.vue
+++ b/src/components/Cards/CardBoxArcade.vue
@@ -1,5 +1,6 @@
 <script setup>
 import CardBox from "@/components/CardBox.vue";
+import { getArea } from "@/constants/area";
 import { useRouter } from "vue-router";
 
 const props = defineProps({
@@ -26,17 +27,24 @@ function getCardStyle() {
 function openArcadeView() {
   router.push(`/arcade/${arcadeData.id}`);
 }
+
+const areaData = getArea(arcadeData.area);
 </script>
 
 <template>
-  <button class="text-left" @click="openArcadeView">
-    <CardBox class="mb-2" :style="getCardStyle()" has-table>
+  <button class="text-left h-full" @click="openArcadeView">
+    <CardBox class="mb-2 h-full" :style="getCardStyle()" has-table>
       <div
         class="outline outline-slate-800/75 hover:outline hover:outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950/90 bg-white dark:bg-slate-900/90 rounded-xl p-4 h-full w-full transition-all duration-50"
       >
         <h1 class="text-xl font-bold">{{ arcadeData.name }}</h1>
-        <p class="text-lg">{{ arcadeData.area }}</p>
-        <p class="text-lg">{{ arcadeData.address }}</p>
+        <p class="text-lg">
+          <span class="lg:hidden text-xl">{{ areaData.flag }}</span>
+          {{ areaData.name }}
+        </p>
+        <p v-if="arcadeData.show_address" class="text-lg">
+          {{ arcadeData.address }}
+        </p>
         <hr class="pb-1 my-1" />
         <p class="text-lg">
           Managed by
diff --git a/src/components/Tables/TableGoals.vue b/src/components/Tables/TableGoals.vue
new file mode 100644
index 0000000..19ad0e1
--- /dev/null
+++ b/src/components/Tables/TableGoals.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { computed, ref } from "vue";
+import BaseLevel from "@/components/BaseLevel.vue";
+import BaseButtons from "@/components/BaseButtons.vue";
+import BaseButton from "@/components/BaseButton.vue";
+
+const props = defineProps({
+  goals: {
+    type: Object,
+    required: true,
+  },
+  isPast: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const perPage = ref(5);
+
+const currentPage = ref(0);
+
+const itemsPaginated = computed(() =>
+  props.goals.slice(
+    perPage.value * currentPage.value,
+    perPage.value * (currentPage.value + 1)
+  )
+);
+const numPages = computed(() => Math.ceil(props.goals.length / perPage.value));
+
+const currentPageHuman = computed(() => currentPage.value + 1);
+const pagesList = computed(() => {
+  const pagesList = [];
+
+  for (let i = 0; i < numPages.value; i++) {
+    pagesList.push(i);
+  }
+
+  return pagesList;
+});
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Game</th>
+        <th>Goal</th>
+        <th v-if="!isPast">Status</th>
+        <th v-else>Result</th>
+        <th v-if="!isPast">Time Remaining</th>
+        <th v-else>Deadline</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="goal of itemsPaginated" :key="goal.id">
+        <td data-label="Game">{{ goal.game }}</td>
+        <td data-label="Goal">{{ goal.goal.replace("# of", goal.value) }}</td>
+        <td v-if="!isPast" data-label="Status">{{ goal.status }}</td>
+        <td v-else data-label="Result">{{ goal.status }}</td>
+
+        <td v-if="!isPast" data-label="Time Remaining">{{ goal.deadline }}</td>
+        <td v-else data-label="Deadline">{{ goal.deadline }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
+    <BaseLevel>
+      <BaseButtons>
+        <BaseButton
+          v-for="page in pagesList"
+          :key="page"
+          :active="page === currentPage"
+          :label="page + 1"
+          :color="page === currentPage ? 'lightDark' : 'whiteDark'"
+          small
+          @click="currentPage = page"
+        />
+      </BaseButtons>
+      <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
+    </BaseLevel>
+  </div>
+</template>
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index 8180e17..2374ca7 100644
--- a/src/components/UserCard.vue
+++ b/src/components/UserCard.vue
@@ -19,6 +19,11 @@ defineProps({
     required: false,
     default: false,
   },
+  evenSmaller: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 import { GetRandomMessage } from "@/constants";
@@ -60,12 +65,13 @@ function getCardStyle(game) {
           <h1 v-if="useSmall" class="text-3xl md:text-4xl">
             <b>{{ mainStore.userName }}</b>
           </h1>
-          <p v-if="useSmall" class="text-md md:text-lg">
+          <p v-if="useSmall && !evenSmaller" class="text-md md:text-lg">
             Last seen playing <b>{{ last.game }} {{ last.version }}</b> at
             <b>{{ last.arcade }}</b>
           </p>
         </div>
         <div
+          v-if="!evenSmaller"
           class="md:grid md:grid-flow-col md:auto-cols-max md:grid-rows-2 flex flex-wrap gap-4 md:place-content-start place-content-center"
         >
           <PillTag label="System Admin" color="danger" :icon="mdiSecurity" />
diff --git a/src/constants/area.js b/src/constants/area.js
new file mode 100644
index 0000000..4b1b8b5
--- /dev/null
+++ b/src/constants/area.js
@@ -0,0 +1,77 @@
+class AreaConstants {
+  static areaData = [
+    { id: "US-AL", name: "Alabama", flag: "🇺🇸" },
+    { id: "US-AK", name: "Alaska", flag: "🇺🇸" },
+    { id: "US-AZ", name: "Arizona", flag: "🇺🇸" },
+    { id: "US-AR", name: "Arkansas", flag: "🇺🇸" },
+    { id: "US-CA", name: "California", flag: "🇺🇸" },
+    { id: "US-CO", name: "Colorado", flag: "🇺🇸" },
+    { id: "US-CT", name: "Connecticut", flag: "🇺🇸" },
+    { id: "US-DE", name: "Delaware", flag: "🇺🇸" },
+    { id: "US-FL", name: "Florida", flag: "🇺🇸" },
+    { id: "US-GA", name: "Georgia", flag: "🇺🇸" },
+    { id: "US-HI", name: "Hawaii", flag: "🇺🇸" },
+    { id: "US-ID", name: "Idaho", flag: "🇺🇸" },
+    { id: "US-IL", name: "Illinois", flag: "🇺🇸" },
+    { id: "US-IN", name: "Indiana", flag: "🇺🇸" },
+    { id: "US-IA", name: "Iowa", flag: "🇺🇸" },
+    { id: "US-KS", name: "Kansas", flag: "🇺🇸" },
+    { id: "US-KY", name: "Kentucky", flag: "🇺🇸" },
+    { id: "US-LA", name: "Louisiana", flag: "🇺🇸" },
+    { id: "US-ME", name: "Maine", flag: "🇺🇸" },
+    { id: "US-MD", name: "Maryland", flag: "🇺🇸" },
+    { id: "US-MA", name: "Massachusetts", flag: "🇺🇸" },
+    { id: "US-MI", name: "Michigan", flag: "🇺🇸" },
+    { id: "US-MN", name: "Minnesota", flag: "🇺🇸" },
+    { id: "US-MS", name: "Mississippi", flag: "🇺🇸" },
+    { id: "US-MO", name: "Missouri", flag: "🇺🇸" },
+    { id: "US-MT", name: "Montana", flag: "🇺🇸" },
+    { id: "US-NE", name: "Nebraska", flag: "🇺🇸" },
+    { id: "US-NV", name: "Nevada", flag: "🇺🇸" },
+    { id: "US-NH", name: "New Hampshire", flag: "🇺🇸" },
+    { id: "US-NJ", name: "New Jersey", flag: "🇺🇸" },
+    { id: "US-NM", name: "New Mexico", flag: "🇺🇸" },
+    { id: "US-NY", name: "New York", flag: "🇺🇸" },
+    { id: "US-NC", name: "North Carolina", flag: "🇺🇸" },
+    { id: "US-ND", name: "North Dakota", flag: "🇺🇸" },
+    { id: "US-OH", name: "Ohio", flag: "🇺🇸" },
+    { id: "US-OK", name: "Oklahoma", flag: "🇺🇸" },
+    { id: "US-OR", name: "Oregon", flag: "🇺🇸" },
+    { id: "US-PA", name: "Pennsylvania", flag: "🇺🇸" },
+    { id: "US-RI", name: "Rhode Island", flag: "🇺🇸" },
+    { id: "US-SC", name: "South Carolina", flag: "🇺🇸" },
+    { id: "US-SD", name: "South Dakota", flag: "🇺🇸" },
+    { id: "US-TN", name: "Tennessee", flag: "🇺🇸" },
+    { id: "US-TX", name: "Texas", flag: "🇺🇸" },
+    { id: "US-UT", name: "Utah", flag: "🇺🇸" },
+    { id: "US-VT", name: "Vermont", flag: "🇺🇸" },
+    { id: "US-VA", name: "Virginia", flag: "🇺🇸" },
+    { id: "US-WA", name: "Washington", flag: "🇺🇸" },
+    { id: "US-WV", name: "West Virginia", flag: "🇺🇸" },
+    { id: "US-WI", name: "Wisconsin", flag: "🇺🇸" },
+    { id: "US-WY", name: "Wyoming", flag: "🇺🇸" },
+    { id: "CA", name: "Canada", flag: "🇨🇦" },
+    { id: "MX", name: "Mexico", flag: "🇲🇽" },
+    { id: "GB", name: "United Kingdom", flag: "🇬🇧" },
+    { id: "FR", name: "France", flag: "🇫🇷" },
+    { id: "DE", name: "Germany", flag: "🇩🇪" },
+    { id: "IT", name: "Italy", flag: "🇮🇹" },
+    { id: "JP", name: "Japan", flag: "🇯🇵" },
+    { id: "CN", name: "China", flag: "🇨🇳" },
+    { id: "IN", name: "India", flag: "🇮🇳" },
+    { id: "BR", name: "Brazil", flag: "🇧🇷" },
+    { id: "AU", name: "Australia", flag: "🇦🇺" },
+  ];
+}
+
+export function listCodes() {
+  var areaCodes = [];
+  for (const object of AreaConstants.areaData) {
+    areaCodes.push(object.id);
+  }
+  return areaCodes;
+}
+
+export function getArea(Code) {
+  return AreaConstants.areaData.find((x) => x.id == Code);
+}
diff --git a/src/constants/index.js b/src/constants/index.js
index ae110e9..14253d0 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -281,6 +281,45 @@ export function GetRandomMessage() {
   return selected;
 }
 
+const GITADORA_VERSION_DATA = [
+  {
+    id: VersionConstants.GITADORA,
+    name: "Original",
+  },
+  {
+    id: VersionConstants.GITADORA_OVERDRIVE,
+    name: "OverDrive",
+  },
+  {
+    id: VersionConstants.GITADORA_TRIBOOST,
+    name: "Tri-Boost",
+  },
+  {
+    id: VersionConstants.GITADORA_TRIBOOST_RE_EVOLVE,
+    name: "Tri-Boost RE:Evolve",
+  },
+  {
+    id: VersionConstants.GITADORA_MATIXX,
+    name: "Matixx",
+  },
+  {
+    id: VersionConstants.GITADORA_EXCHAIN,
+    name: "EXCHAIN",
+  },
+  {
+    id: VersionConstants.GITADORA_NEXTAGE,
+    name: "Nex+Age",
+  },
+  {
+    id: VersionConstants.GITADORA_HIGH_VOLTAGE,
+    name: "HIGH-VOLTAGE",
+  },
+  {
+    id: VersionConstants.GITADORA_FUZZUP,
+    name: "FUZZUP",
+  },
+];
+
 export const gameData = [
   {
     id: GameConstants.BEATSTREAM,
@@ -300,40 +339,22 @@ export const gameData = [
   },
   {
     id: GameConstants.BISHI_BASHI,
-    name: "BishiBashi",
+    name: "The ⭐ Bishi Bashi",
     icon: null,
     cardBG: null,
-    versions: [
-      {
-        id: VersionConstants.THE_STAR_BISHI_BASHI,
-        name: "The ⭐ Bishi Bashi",
-      },
-    ],
   },
   {
     id: GameConstants.BISHI_BASHI_NEW,
-    name: "BishiBashi (New)",
+    name: "BishiBashi Channel",
     icon: null,
     cardBG: null,
     skip: true,
-    versions: [
-      {
-        id: VersionConstants.BISHI_BASHI_CHANNEL,
-        name: "Channel",
-      },
-    ],
   },
   {
     id: GameConstants.DANCE_EVOLUTION,
     name: "DanceEvolution",
     icon: null,
     cardBG: null,
-    versions: [
-      {
-        id: VersionConstants.DANCE_EVOLUTION,
-        name: "DanceEvolution",
-      },
-    ],
   },
   {
     id: GameConstants.DANCE_RUSH,
@@ -677,24 +698,14 @@ export const gameData = [
     name: "GITADORA (Drums)",
     icon: null,
     cardBG: null,
-    versions: [
-      {
-        id: VersionConstants,
-        name: "",
-      },
-    ],
+    versions: GITADORA_VERSION_DATA,
   },
   {
     id: GameConstants.GITADORA_GF,
     name: "GITADORA (Guitar)",
     icon: null,
     cardBG: null,
-    versions: [
-      {
-        id: VersionConstants,
-        name: "",
-      },
-    ],
+    versions: GITADORA_VERSION_DATA,
   },
   {
     id: GameConstants.GUITARFREAKS,
@@ -703,8 +714,80 @@ export const gameData = [
     cardBG: null,
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.GUITARFREAKS_1ST,
+        name: "1ST MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_2ND,
+        name: "2ND MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_3RD,
+        name: "3RD MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_4TH,
+        name: "4TH MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_5TH,
+        name: "5TH MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_6TH,
+        name: "6TH MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_7TH,
+        name: "7TH MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_8TH,
+        name: "8TH MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_9TH,
+        name: "9TH MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_10TH,
+        name: "10TH MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_11TH,
+        name: "11TH MIX",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_V,
+        name: "V",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_V2,
+        name: "V2",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_V3,
+        name: "V3",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_V4,
+        name: "V4",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_V5,
+        name: "V5",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_V6,
+        name: "V6",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_V7,
+        name: "V7",
+      },
+      {
+        id: VersionConstants.GUITARFREAKS_V8,
+        name: "V8",
       },
     ],
   },
@@ -715,8 +798,124 @@ export const gameData = [
     cardBG: "/assets/card/iidx.png",
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.IIDX,
+        name: "1st Style",
+      },
+      {
+        id: VersionConstants.IIDX_2ND_STYLE,
+        name: "2nd Style",
+      },
+      {
+        id: VersionConstants.IIDX_3RD_STYLE,
+        name: "3rd Style",
+      },
+      {
+        id: VersionConstants.IIDX_4TH_STYLE,
+        name: "4th Style",
+      },
+      {
+        id: VersionConstants.IIDX_5TH_STYLE,
+        name: "5th Style",
+      },
+      {
+        id: VersionConstants.IIDX_6TH_STYLE,
+        name: "6th Style",
+      },
+      {
+        id: VersionConstants.IIDX_7TH_STYLE,
+        name: "7th Style",
+      },
+      {
+        id: VersionConstants.IIDX_8TH_STYLE,
+        name: "8th Style",
+      },
+      {
+        id: VersionConstants.IIDX_9TH_STYLE,
+        name: "9th Style",
+      },
+      {
+        id: VersionConstants.IIDX_10TH_STYLE,
+        name: "10th Style",
+      },
+      {
+        id: VersionConstants.IIDX_RED,
+        name: "RED",
+      },
+      {
+        id: VersionConstants.IIDX_HAPPY_SKY,
+        name: "HAPPY SKY",
+      },
+      {
+        id: VersionConstants.IIDX_DISTORTED,
+        name: "DistorteD",
+      },
+      {
+        id: VersionConstants.IIDX_GOLD,
+        name: "GOLD",
+      },
+      {
+        id: VersionConstants.IIDX_DJ_TROOPERS,
+        name: "DJ TROOPERS",
+      },
+      {
+        id: VersionConstants.IIDX_EMPRESS,
+        name: "EMPRESS",
+      },
+      {
+        id: VersionConstants.IIDX_SIRIUS,
+        name: "SIRIUS",
+      },
+      {
+        id: VersionConstants.IIDX_RESORT_ANTHEM,
+        name: "Resort Anthem",
+      },
+      {
+        id: VersionConstants.IIDX_LINCLE,
+        name: "Lincle",
+      },
+      {
+        id: VersionConstants.IIDX_TRICORO,
+        name: "tricoro",
+      },
+      {
+        id: VersionConstants.IIDX_SPADA,
+        name: "SPADA",
+      },
+      {
+        id: VersionConstants.IIDX_PENDUAL,
+        name: "PENDUAL",
+      },
+      {
+        id: VersionConstants.IIDX_COPULA,
+        name: "COPULA",
+      },
+      {
+        id: VersionConstants.IIDX_SINOBUZ,
+        name: "SINOBUZ",
+      },
+      {
+        id: VersionConstants.IIDX_CANNON_BALLERS,
+        name: "CANNON BALLERS",
+      },
+      {
+        id: VersionConstants.IIDX_ROOTAGE,
+        name: "ROOTAGE",
+      },
+      {
+        id: VersionConstants.IIDX_HEROIC_VERSE,
+        name: "HEROIC VERSE",
+      },
+      {
+        id: VersionConstants.IIDX_BISTROVER,
+        name: "BISTROVER",
+      },
+      {
+        id: VersionConstants.IIDX_CASTHOUR,
+        name: "CastHour",
+      },
+      {
+        id: VersionConstants.IIDX_RESIDENT,
+        name: "RESIDENT",
       },
     ],
   },
@@ -727,8 +926,80 @@ export const gameData = [
     cardBG: "/assets/card/iidx.png",
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.IIDX,
+        name: "1st Style",
+      },
+      {
+        id: VersionConstants.IIDX_2ND_STYLE,
+        name: "2nd Style",
+      },
+      {
+        id: VersionConstants.IIDX_3RD_STYLE,
+        name: "3rd Style",
+      },
+      {
+        id: VersionConstants.IIDX_4TH_STYLE,
+        name: "4th Style",
+      },
+      {
+        id: VersionConstants.IIDX_5TH_STYLE,
+        name: "5th Style",
+      },
+      {
+        id: VersionConstants.IIDX_6TH_STYLE,
+        name: "6th Style",
+      },
+      {
+        id: VersionConstants.IIDX_7TH_STYLE,
+        name: "7th Style",
+      },
+      {
+        id: VersionConstants.IIDX_8TH_STYLE,
+        name: "8th Style",
+      },
+      {
+        id: VersionConstants.IIDX_9TH_STYLE,
+        name: "9th Style",
+      },
+      {
+        id: VersionConstants.IIDX_10TH_STYLE,
+        name: "10th Style",
+      },
+      {
+        id: VersionConstants.IIDX_RED,
+        name: "RED",
+      },
+      {
+        id: VersionConstants.IIDX_HAPPY_SKY,
+        name: "HAPPY SKY",
+      },
+      {
+        id: VersionConstants.IIDX_DISTORTED,
+        name: "DistorteD",
+      },
+      {
+        id: VersionConstants.IIDX_GOLD,
+        name: "GOLD",
+      },
+      {
+        id: VersionConstants.IIDX_DJ_TROOPERS,
+        name: "DJ TROOPERS",
+      },
+      {
+        id: VersionConstants.IIDX_EMPRESS,
+        name: "EMPRESS",
+      },
+      {
+        id: VersionConstants.IIDX_SIRIUS,
+        name: "SIRIUS",
+      },
+      {
+        id: VersionConstants.IIDX_RESORT_ANTHEM,
+        name: "Resort Anthem",
+      },
+      {
+        id: VersionConstants.IIDX_LINCLE,
+        name: "Lincle",
       },
     ],
   },
@@ -739,8 +1010,60 @@ export const gameData = [
     cardBG: null,
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.JUBEAT,
+        name: "Original",
+      },
+      {
+        id: VersionConstants.JUBEAT_RIPPLES,
+        name: "Ripples",
+      },
+      {
+        id: VersionConstants.JUBEAT_RIPPLES_APPEND,
+        name: "Ripples (Append)",
+      },
+      {
+        id: VersionConstants.JUBEAT_KNIT,
+        name: "Knit",
+      },
+      {
+        id: VersionConstants.JUBEAT_KNIT_APPEND,
+        name: "Knit (Append)",
+      },
+      {
+        id: VersionConstants.JUBEAT_COPIOUS,
+        name: "Copious",
+      },
+      {
+        id: VersionConstants.JUBEAT_COPIOUS_APPEND,
+        name: "Copious (Append)",
+      },
+      {
+        id: VersionConstants.JUBEAT_SAUCER,
+        name: "Saucer",
+      },
+      {
+        id: VersionConstants.JUBEAT_SAUCER_FULFILL,
+        name: "Saucer Fulfill",
+      },
+      {
+        id: VersionConstants.JUBEAT_PROP,
+        name: "Prop",
+      },
+      {
+        id: VersionConstants.JUBEAT_QUBELL,
+        name: "Qubell",
+      },
+      {
+        id: VersionConstants.JUBEAT_CLAN,
+        name: "Clan",
+      },
+      {
+        id: VersionConstants.JUBEAT_FESTO,
+        name: "Festo",
+      },
+      {
+        id: VersionConstants.JUBEAT_AVE,
+        name: "Avenue",
       },
     ],
   },
@@ -767,12 +1090,6 @@ export const gameData = [
     icon: null,
     cardBG: null,
     skip: true,
-    versions: [
-      {
-        id: VersionConstants,
-        name: "",
-      },
-    ],
   },
   {
     id: GameConstants.MUSECA,
@@ -781,8 +1098,12 @@ export const gameData = [
     cardBG: null,
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.MUSECA,
+        name: "Original",
+      },
+      {
+        id: VersionConstants.MUSECA_1_PLUS,
+        name: "1 + 1/2",
       },
     ],
   },
@@ -793,8 +1114,20 @@ export const gameData = [
     cardBG: null,
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.NOSTALGIA,
+        name: "Original",
+      },
+      {
+        id: VersionConstants.NOSTALGIA_FORTE,
+        name: "Forte",
+      },
+      {
+        id: VersionConstants.NOSTALGIA_OP_2,
+        name: "OP.2",
+      },
+      {
+        id: VersionConstants.NOSTALGIA_OP_3,
+        name: "OP.3",
       },
     ],
   },
@@ -804,12 +1137,6 @@ export const gameData = [
     icon: null,
     cardBG: null,
     skip: true,
-    versions: [
-      {
-        id: VersionConstants,
-        name: "",
-      },
-    ],
   },
   {
     id: GameConstants.OTOCA,
@@ -817,12 +1144,6 @@ export const gameData = [
     icon: null,
     cardBG: null,
     skip: true,
-    versions: [
-      {
-        id: VersionConstants,
-        name: "",
-      },
-    ],
   },
   {
     id: GameConstants.POPN_HELLO,
@@ -830,12 +1151,6 @@ export const gameData = [
     icon: "/assets/icon/popn.png",
     cardBG: "/assets/card/popn.png",
     skip: true,
-    versions: [
-      {
-        id: VersionConstants,
-        name: "",
-      },
-    ],
   },
   {
     id: GameConstants.POPN_MUSIC,
@@ -844,8 +1159,108 @@ export const gameData = [
     cardBG: "/assets/card/popn.png",
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.POPN_MUSIC,
+        name: "Original",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_2,
+        name: "2",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_3,
+        name: "3",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_4,
+        name: "4",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_5,
+        name: "5",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_6,
+        name: "6",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_7,
+        name: "7",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_8,
+        name: "8",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_9,
+        name: "9",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_10,
+        name: "10",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_11,
+        name: "11",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_IROHA,
+        name: "いろは (Iroha)",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_CARNIVAL,
+        name: "カーニバル (Carnival)",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_FEVER,
+        name: "FEVER!",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_ADVENTURE,
+        name: "ADVENTURE",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_PARTY,
+        name: "PARTY♪",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_THE_MOVIE,
+        name: "THE MOVIE",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_SENGOKU_RETSUDEN,
+        name: "せんごく列伝 (Sengoku Retsuden)",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_TUNE_STREET,
+        name: "TUNE STREET",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_FANTASIA,
+        name: "fantasia",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_SUNNY_PARK,
+        name: "Sunny Park",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_LAPISTORIA,
+        name: "ラピストリア (Lapistoria)",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_ECLALE,
+        name: "éclale",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_USANEKO,
+        name: "うさぎと猫と少年の夢 (Usaneko)",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_PEACE,
+        name: "peace",
+      },
+      {
+        id: VersionConstants.POPN_MUSIC_KAIMEI_RIDDLES,
+        name: "解明リドルズ (Kaimei riddles)",
       },
     ],
   },
@@ -855,12 +1270,6 @@ export const gameData = [
     icon: null,
     cardBG: null,
     skip: true,
-    versions: [
-      {
-        id: VersionConstants,
-        name: "",
-      },
-    ],
   },
   {
     id: GameConstants.REFLEC_BEAT,
@@ -869,8 +1278,28 @@ export const gameData = [
     cardBG: null,
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.REFLEC_BEAT,
+        name: "Original",
+      },
+      {
+        id: VersionConstants.REFLEC_BEAT_LIMELIGHT,
+        name: "Limelight",
+      },
+      {
+        id: VersionConstants.REFLEC_BEAT_COLETTE,
+        name: "Colette",
+      },
+      {
+        id: VersionConstants.REFLEC_BEAT_GROOVIN,
+        name: "groovin'!!",
+      },
+      {
+        id: VersionConstants.REFLEC_BEAT_VOLZZA,
+        name: "VOLZZA",
+      },
+      {
+        id: VersionConstants.REFLEC_BEAT_VOLZZA_2,
+        name: "VOLZZA 2",
       },
     ],
   },
@@ -880,12 +1309,6 @@ export const gameData = [
     icon: null,
     cardBG: null,
     skip: true,
-    versions: [
-      {
-        id: VersionConstants,
-        name: "",
-      },
-    ],
   },
   {
     id: GameConstants.SDVX,
@@ -894,8 +1317,28 @@ export const gameData = [
     cardBG: null,
     versions: [
       {
-        id: VersionConstants,
-        name: "",
+        id: VersionConstants.SDVX_BOOTH,
+        name: "BOOTH",
+      },
+      {
+        id: VersionConstants.SDVX_INFINITE_INFECTION,
+        name: "-II- Infinite Infection",
+      },
+      {
+        id: VersionConstants.SDVX_GRAVITY_WARS,
+        name: "GRAVITY WARS",
+      },
+      {
+        id: VersionConstants.SDVX_HEAVENLY_HAVEN,
+        name: "HEAVENLY HAVEN",
+      },
+      {
+        id: VersionConstants.SDVX_VIVID_WAVE,
+        name: "VIVID WAVE",
+      },
+      {
+        id: VersionConstants.SDVX_EXCEED_GEAR,
+        name: "EXCEED GEAR",
       },
     ],
   },
@@ -909,8 +1352,12 @@ export const arcadeList = [
     image:
       "https://scontent-ord5-2.xx.fbcdn.net/v/t39.30808-6/345607186_2854756104656166_4038613677498709113_n.png?stp=dst-jpg&_nc_cat=103&ccb=1-7&_nc_sid=8631f5&_nc_ohc=ps88GQTw7pYAX_kG-ZY&_nc_ht=scontent-ord5-2.xx&oh=00_AfCeXwmodvTitMUxzk9EDGb-Rl2lGN9PdLFYQPPjD-iphw&oe=6492362F",
     address: null,
+    show_address: false,
     public: false,
     beta: true,
+    paseli: true,
+    infinite_paseli: true,
+    maintenance: false,
     admins: ["Trmazi", "SpeakEZ", "kohai"],
   },
   {
@@ -920,19 +1367,27 @@ export const arcadeList = [
     image:
       "https://scontent-ord5-2.xx.fbcdn.net/v/t1.6435-9/118871039_2818450415068886_7737385160957713953_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=8bfeb9&_nc_ohc=W8tEpuL3C14AX8XL09Z&_nc_ht=scontent-ord5-2.xx&oh=00_AfAneLjV1pukiSgE7S0Q6e-g6VFYEHSyFVk-kQh5elofJw&oe=64B49BD7",
     address: "6020 E. 82nd St, Indianapolis, Indiana 46250",
+    show_address: true,
     public: true,
     beta: true,
+    paseli: true,
+    infinite_paseli: false,
+    maintenance: false,
     admins: ["Trmazi", "Pat", "Jeff"],
   },
   {
     id: 2,
     name: "BladeCN",
-    area: "UK",
+    area: "GB",
     image:
       "https://media.discordapp.net/attachments/717595745275871232/1119697819020824616/image.png",
     address: "6020 E. 82nd St",
+    show_address: false,
     public: true,
     beta: false,
+    paseli: true,
+    infinite_paseli: true,
+    maintenance: false,
     admins: ["blade"],
   },
 ];
@@ -940,6 +1395,11 @@ export const arcadeList = [
 export function getGameInfo(game) {
   var requestedData = gameData.find((item) => item.id === game);
 
+  // try finding by game's name.
+  if (!requestedData) {
+    requestedData = gameData.find((item) => item.name === game);
+  }
+
   if (!requestedData) {
     return null;
   }
@@ -952,3 +1412,18 @@ export function getGameInfo(game) {
   }
   return requestedData;
 }
+
+export function getGameTitle(game, version) {
+  const gameObject = gameData.find((x) => x.id == game);
+  var output = gameObject.name;
+
+  const versions = gameObject.versions;
+  if (versions !== null) {
+    const thisVersion = versions.find((x) => x.id == version);
+    if (thisVersion !== undefined) {
+      output += ` ${thisVersion.name}`;
+    }
+  }
+
+  return output;
+}
diff --git a/src/router/index.js b/src/router/index.js
index 674dcc3..9342c1d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -74,6 +74,14 @@ const routes = [
     name: "profile_integrations",
     component: () => import("@/views/Profile/IntegrationView.vue"),
   },
+  {
+    meta: {
+      title: "Goals",
+    },
+    path: "/goals",
+    name: "profile_goals",
+    component: () => import("@/views/Profile/GoalsView.vue"),
+  },
   {
     meta: {
       title: "View Profile",
diff --git a/src/views/Arcade/ArcadeView.vue b/src/views/Arcade/ArcadeView.vue
index e283758..787d520 100644
--- a/src/views/Arcade/ArcadeView.vue
+++ b/src/views/Arcade/ArcadeView.vue
@@ -6,12 +6,15 @@ import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import ArcadeCard from "@/components/ArcadeCard.vue";
 import CardBox from "@/components/CardBox.vue";
+import FormField from "@/components/FormField.vue";
 import FormFilePicker from "@/components/FormFilePicker.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
+import FormControl from "@/components/FormControl.vue";
 import PillTag from "@/components/PillTag.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import CardBoxWidget from "@/components/CardBoxWidget.vue";
 import { arcadeList } from "@/constants";
+import { listCodes } from "@/constants/area";
 
 const $route = useRoute();
 const arcadeID = parseInt($route.params.id);
@@ -31,24 +34,32 @@ const thisArcade = arcadeList.find((x) => x.id === arcadeID);
         <div class="grid gap-4 grid-cols-2 md:grid-cols-4 mb-4">
           <FormCheckRadio
             :model-value="thisArcade.public"
+            :input-value="thisArcade.public"
+            name="public"
             type="switch"
             label="Public Arcade"
             class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
           />
           <FormCheckRadio
             :model-value="thisArcade.paseli"
+            :input-value="thisArcade.paseli"
+            name="paseli"
             type="switch"
-            label="PASELI Enabled"
+            label="PASELI"
             class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
           />
           <FormCheckRadio
-            :model-value="thisArcade.paseli_infinite"
+            :model-value="thisArcade.infinite_paseli"
+            :input-value="thisArcade.infinite_paseli"
+            name="infinite_paseli"
             type="switch"
             label="Infinite PASELI"
             class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
           />
           <FormCheckRadio
             :model-value="thisArcade.maintenance"
+            :input-value="thisArcade.maintenance"
+            name="maintenance"
             type="switch"
             label="Maintenance Mode"
             class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
@@ -76,7 +87,46 @@ const thisArcade = arcadeList.find((x) => x.id === arcadeID);
           <p class="pb-1 dark:text-white/50">
             NSFW = BAN. Children use this server. 60MB max.
           </p>
-          <FormFilePicker label="Upload" accept="image/*" />
+          <FormFilePicker label="Upload" name="upload" accept="image/*" />
+
+          <BaseButton
+            :small="false"
+            color="success"
+            class="mt-4"
+            label="Save"
+          />
+        </CardBox>
+
+        <CardBox>
+          <h1 class="text-lg md:text-xl mb-2">Location Settings</h1>
+
+          <FormField label="Area" help="Set your arcade's area.">
+            <FormControl
+              v-model="thisArcade.area"
+              name="area"
+              :options="listCodes()"
+            />
+          </FormField>
+
+          <FormField label="Address" help="Set your arcade's address.">
+            <FormControl
+              v-model="thisArcade.address"
+              name="address"
+              placeholder="No address"
+            />
+          </FormField>
+
+          <FormField
+            label="Show Address"
+            help="Allow your arcade's address to be seen publicly."
+          >
+            <FormCheckRadio
+              :model-value="thisArcade.show_address"
+              :input-value="thisArcade.show_address"
+              name="show_address"
+              type="switch"
+            />
+          </FormField>
 
           <BaseButton
             :small="false"
diff --git a/src/views/Arcade/EventView.vue b/src/views/Arcade/EventView.vue
index edcaedd..37c069d 100644
--- a/src/views/Arcade/EventView.vue
+++ b/src/views/Arcade/EventView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { reactive, watch } from "vue";
 import { useRoute } from "vue-router";
 import { mdiNewspaperVariantMultiple } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
@@ -9,11 +10,11 @@ import ArcadeCard from "@/components/ArcadeCard.vue";
 import FormField from "@/components/FormField.vue";
 import FormControl from "@/components/FormControl.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
-import { arcadeList } from "@/constants";
+import BaseButton from "@/components/BaseButton.vue";
+import { arcadeList, getGameTitle, getGameInfo } from "@/constants";
 
 const $route = useRoute();
 const arcadeID = parseInt($route.params.id);
-
 const thisArcade = arcadeList.find((x) => x.id === arcadeID);
 
 function multiSelectOptions(Options) {
@@ -64,7 +65,7 @@ const eventSettings = [
   },
   {
     game: "dm",
-    version: 19,
+    version: 18,
     settings: [
       {
         id: 0,
@@ -77,6 +78,55 @@ const eventSettings = [
     ],
   },
 ];
+
+const filterForm = reactive({
+  game: null,
+  version: null,
+});
+
+function listGames() {
+  var games = [];
+  for (const object of eventSettings) {
+    const gameName = getGameInfo(object.game).name;
+    if (games[gameName] == undefined) {
+      games.push(gameName);
+    }
+  }
+
+  return games;
+}
+
+function listVersions() {
+  var versions = [];
+  for (const object of eventSettings) {
+    if (object.game == getGameInfo(filterForm.game).id) {
+      const gameObject = getGameInfo(object.game);
+      const version = object.version;
+      if (versions[version] == undefined) {
+        versions.push(gameObject.versions.find((x) => x.id == version).name);
+      }
+    }
+  }
+
+  return versions;
+}
+
+function getGameSettings() {
+  const gameObject = getGameInfo(filterForm.game);
+  const version = gameObject.versions.find((x) => x.name == filterForm.version);
+  const data = eventSettings.find(
+    (x) => x.game == gameObject.id && x.version == version.id
+  );
+
+  return data;
+}
+
+watch(
+  () => filterForm.game,
+  () => {
+    filterForm.version = null; // Reset selected version to null
+  }
+);
 </script>
 
 <template>
@@ -90,14 +140,43 @@ const eventSettings = [
       />
 
       <CardBox class="mb-6">
-        <div v-for="entry in eventSettings" :key="entry.id">
-          <h2 class="text-xl font-bold mb-2">
-            Settings for {{ entry.game }} {{ entry.version }}
+        <div class="mb-4">
+          <FormField
+            label="Select Game"
+            help="Pick a game and version to get started."
+          >
+            <div class="grid md:grid-cols-2 gap-4">
+              <div>
+                <p class="pb-2 text-lg">Game</p>
+                <FormControl
+                  v-model="filterForm.game"
+                  name="game"
+                  :options="listGames()"
+                />
+              </div>
+              <div v-if="filterForm.game">
+                <p class="pb-2 text-lg">Version</p>
+                <FormControl
+                  v-model="filterForm.version"
+                  name="version"
+                  :options="listVersions()"
+                />
+              </div>
+            </div>
+          </FormField>
+        </div>
+
+        <div v-if="filterForm.game && filterForm.version">
+          <h2 class="text-xl">
+            Settings for
+            <b>{{
+              getGameTitle(getGameSettings().game, getGameSettings().version)
+            }}</b>
           </h2>
-          <hr class="pb-1 my-1" />
+          <hr class="pb-1 my-2" />
 
           <FormField
-            v-for="setting in entry.settings"
+            v-for="setting in getGameSettings().settings"
             :key="setting.id"
             :label="setting.name"
             :help="setting.tooltip"
@@ -124,6 +203,12 @@ const eventSettings = [
               placeholder="Select..."
             />
           </FormField>
+          <BaseButton
+            color="success"
+            type="submit"
+            label="Save"
+            :small="false"
+          />
         </div>
       </CardBox>
     </SectionMain>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index cfe05b1..9ae09ad 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -7,6 +7,7 @@ import {
   mdiChartBellCurveCumulative,
   mdiGamepad,
   mdiTestTube,
+  mdiFlagCheckered,
 } from "@mdi/js";
 import UserCard from "@/components/UserCard.vue";
 import * as chartConfig from "@/components/Charts/chart.config.js";
@@ -20,6 +21,7 @@ import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import PillTag from "@/components/PillTag.vue";
 import TableRivalsFull from "@/components/Tables/TableRivalsFull.vue";
+import TableGoals from "@/components/Tables/TableGoals.vue";
 import NotificationBar from "@/components/NotificationBar.vue";
 import { GameConstants } from "@/constants";
 
@@ -32,6 +34,23 @@ const fillChartData = () => {
 onMounted(() => {
   fillChartData();
 });
+
+const setGoals = [
+  {
+    game: "DanceDance Revolution",
+    type: "Rank",
+    goal: "Top 10 Ranking",
+    status: "#10 of 132",
+    deadline: "3 Weeks",
+  },
+  {
+    game: "pop'n music",
+    type: "Plays",
+    goal: "100 Plays",
+    status: "2 Plays Since Creation",
+    deadline: "1 Week",
+  },
+];
 </script>
 
 <template>
@@ -107,6 +126,13 @@ onMounted(() => {
         />
       </div>
 
+      <SectionTitleLine :icon="mdiFlagCheckered" title="Active Goals" main />
+      <div class="mb-6">
+        <CardBox has-table>
+          <TableGoals :goals="setGoals" />
+        </CardBox>
+      </div>
+
       <SectionTitleLine
         :icon="mdiChartBellCurveCumulative"
         title="Play Trends"
diff --git a/src/views/Profile/GoalsView.vue b/src/views/Profile/GoalsView.vue
new file mode 100644
index 0000000..5feec77
--- /dev/null
+++ b/src/views/Profile/GoalsView.vue
@@ -0,0 +1,211 @@
+<script setup>
+import { mdiFlagCheckered, mdiFlagOff, mdiFlagOutline } from "@mdi/js";
+import { reactive } from "vue";
+import SectionMain from "@/components/SectionMain.vue";
+import CardBox from "@/components/CardBox.vue";
+import CardBoxWidget from "@/components/CardBoxWidget.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import FormControl from "@/components/FormControl.vue";
+import TableGoals from "@/components/Tables/TableGoals.vue";
+
+const goalData = [
+  {
+    game: "DanceDance Revolution",
+    types: [
+      {
+        id: "Combo",
+        needValue: true,
+      },
+      {
+        id: "Grade",
+        needValue: true,
+      },
+      {
+        id: "Ranking",
+        needValue: false,
+      },
+      {
+        id: "Score",
+        needValue: false,
+      },
+    ],
+    combo: ["# of LIFE 4 FCs", "# of PFCs", "# of MFCs"],
+    grade: ["# of AAA", "# of AA", "# of A", "# of B", "# of C"],
+    ranking: ["1st place", "top 10", "top 100"],
+    score: ["1 million points", "2 million points", "3 million points"],
+  },
+];
+
+const games = ["DanceDance Revolution"];
+
+var formData = reactive({
+  id: 0,
+  game: "...",
+  type: "...",
+  goal: "...",
+  value: null,
+  deadline: "...",
+});
+
+function getGoal() {
+  const goal = goalData.find((x) => x.game == formData.game);
+  var types = [];
+  for (const type of goal.types) {
+    types.push(type.id);
+  }
+  goal["listTypes"] = types;
+
+  return goal;
+}
+
+function createGoal() {
+  if (formData.goal == "...") {
+    return false;
+  } else if (formData.game == "...") {
+    return false;
+  } else if (formData.deadline == "...") {
+    return false;
+  }
+
+  const goal = `I want ${formData.goal} on ${formData.game} in ${formData.deadline}`;
+  return goal;
+}
+
+const setGoals = [
+  {
+    game: "DanceDance Revolution",
+    type: "Rank",
+    goal: "Top 10 Ranking",
+    status: "#10 of 132",
+    deadline: "3 Weeks",
+  },
+  {
+    game: "pop'n music",
+    type: "Plays",
+    goal: "100 Plays",
+    status: "2 Plays Since Creation",
+    deadline: "1 Week",
+  },
+];
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <SectionTitleLine :icon="mdiFlagOutline" title="Your Goals" main />
+
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 mb-6">
+        <CardBoxWidget
+          :number="1"
+          label="Active Goals"
+          color="text-yellow-500 dark:text-yellow-400"
+        />
+        <CardBoxWidget
+          :number="3"
+          label="Completed Goals"
+          color="text-green-500 dark:text-green-400"
+        />
+        <CardBoxWidget
+          :number="2"
+          label="Abandoned Goals"
+          color="text-red-500 dark:text-red-400"
+        />
+      </div>
+
+      <SectionTitleLine :icon="mdiFlagCheckered" title="Active Goals" />
+      <div class="mb-6">
+        <CardBox has-table>
+          <TableGoals :goals="setGoals" />
+        </CardBox>
+      </div>
+
+      <SectionTitleLine :icon="mdiFlagOff" title="Past Goals" />
+      <div class="mb-12">
+        <CardBox has-table>
+          <TableGoals :goals="setGoals" is-past />
+        </CardBox>
+      </div>
+
+      <div>
+        <CardBox>
+          <h1 class="text-xl md:text-2xl font-bold">Goal Creator</h1>
+          <p class="pb-4 dark:text-white/50">
+            Follow these steps and set some goals!
+          </p>
+
+          <div class="grid md:grid-cols-3 gap-6">
+            <div>
+              <h2 class="text-lg mb-2">Game</h2>
+              <FormControl
+                v-model="formData.game"
+                :options="games"
+                input-value=""
+                name="game"
+              />
+            </div>
+            <div v-if="formData.game !== '...'">
+              <h2 class="text-lg mb-2">Goal Type</h2>
+              <FormControl
+                v-model="formData.type"
+                :options="getGoal().listTypes"
+                input-value=""
+                name="type"
+              />
+            </div>
+            <div v-if="formData.type !== '...'">
+              <h2 class="text-lg mb-2">Goals</h2>
+              <FormControl
+                v-model="formData.goal"
+                :options="getGoal()[formData.type.toLowerCase()]"
+                input-value=""
+                name="goal"
+              />
+            </div>
+            <div
+              v-if="
+                formData.goal !== '...' &&
+                getGoal().types.find((x) => x.id == formData.type).needValue
+              "
+            >
+              <h2 class="text-lg mb-2">Value</h2>
+              <FormControl
+                v-model="formData.value"
+                :placeholder="formData.goal"
+                name="goal"
+              />
+            </div>
+            <div v-if="formData.goal !== '...' || formData.value">
+              <h2 class="text-lg mb-2">Deadline</h2>
+              <FormControl
+                v-model="formData.deadline"
+                :options="['24Hrs', '5 Days', '15 Days', '1 Week', '2 Weeks']"
+                input-value=""
+                name="deadline"
+              />
+            </div>
+          </div>
+
+          <div v-if="formData.deadline !== '...'">
+            <h1 class="pt-4 text-xl md:text-2xl font-bold">Compiled Goal</h1>
+            <p class="text-lg dark:text-white/75">
+              {{ createGoal() }}
+            </p>
+          </div>
+
+          <template v-if="createGoal()" #footer>
+            <div class="space-x-2">
+              <BaseButton
+                type="submit"
+                color="success"
+                label="Create"
+                :small="false"
+              />
+            </div>
+          </template>
+        </CardBox>
+      </div>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>