V3.1.6, finish new timeline and update components

.env.development

@@ -1,4 +1,4 @@
-VITE_APP_VERSION="3.1.5"
+VITE_APP_VERSION="3.1.6"
 VITE_API_URL="http://localhost:8000/"
 VITE_API_KEY="your_api_key_should_be_here"
 VITE_ASSET_PATH="/assets"

.env.production

@@ -1,4 +1,4 @@
-VITE_APP_VERSION="3.1.5"
+VITE_APP_VERSION="3.1.6"
 VITE_API_URL="https://restfulsleep.phaseii.network"
 VITE_API_KEY="your_api_key_should_be_here"
 VITE_ASSET_PATH="https://cdn.phaseii.network/file/PhaseII/web-assets"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phaseweb3",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",

public/data-sources/changelog.json

@@ -51,5 +51,6 @@
     "3.1.2": ["- (Major) Add initial code for oAuth pages", "- (Major) Add redirect to target page after login", "- (Minor) Add quick links to navbar", "- (Minor) Add new greetings", "- (Minor) Replace login page background", "- (Minor) Add animation to loading modal", "- (Bugfix) Refactor loading modal", "- (Bugfix) Refactor overlay layer", "- (Bugfix) Optimize main layouts", "- (Bugfix) Fix loading states around site", "- (Bugfix) Optimize news read api calls", "- (Minor) Add simple auth checkers to router, blocking access at webui level"],
     "3.1.3": ["- (Major) Add better error popups, add new buttons on errors", "- (Major) Finish initial authorization page for internal apps", "- (Minor) Add more greetings", "- (Bugfix) Fix overlay layer transparency when saving", "- (Bugfix) Fix remaining missing colors"],
     "3.1.4": ["- (Major) Add QR game login support", "- (Minor) Add initial CCJ support and events"],
-    "3.1.5": ["- (Minor) Add DDR SN2 information message support"]
+    "3.1.5": ["- (Minor) Add DDR SN2 information message support"],
+    "3.1.6": ["- (Major) Add Song Record Cards for all games that support scores", "- (Major) Update layout and design of a core component, CardBoxStat", "- (Major) Overhaul the game timeline", "- (Bugfix) Various fixes over the past week", "- (Greetings) Add new greetings from superaustin7"]
 }

src/components/CardBoxWidget.vue

@@ -75,10 +75,10 @@ defineProps({
         </BaseLevel>
         <BaseLevel mobile>
           <div>
-            <h3 :class="color" class="text-lg leading-tight mb-1.5">
+            <h3 :class="color" class="text-md md:text-lg leading-tight mb-1.5">
               {{ label }}
             </h3>
-            <h1 class="text-3xl leading-tight font-semibold">
+            <h1 class="text-2xl md:text-3xl leading-tight font-semibold">
               <NumberDynamic
                 v-if="number"
                 :class="numColor"

src/components/Cards/RecordCardBox.vue

@@ -1,53 +1,64 @@
 <script setup>
+import { ref } from "vue";
 import CardBox from "@/components/CardBox.vue";
+import BaseButton from "@/components/BaseButton.vue";
 
 import { formatDifficulty } from "@/constants/scoreDataFilters";
 import { getNestedValue } from "@/constants/values";
+import { PhCaretDown } from "@phosphor-icons/vue";
 
 defineProps({
-  thisGame: {
-    type: Object,
-    required: true,
-  },
-  chart: {
-    type: Object,
-    required: true,
-  },
-  record: {
-    type: Object,
-    required: true,
-  },
+  thisGame: Object,
+  chart: Object,
+  record: Object,
   showUser: {
     type: Boolean,
     default: false,
   },
 });
+
+const isOpen = ref(false);
 </script>
 
 <template>
   <CardBox has-table>
-    <div class="pt-4 px-4">
-      <span
-        v-if="chart.data?.difficulty != 0 && thisGame.chartTable[chart.chart]"
-        class="text-md md:text-lg p-2 text-slate-400"
-      >
-        {{ thisGame.chartTable[chart.chart] }} -
-        {{ formatDifficulty(chart.data?.difficulty, thisGame.difficultyDenom) }}
-      </span>
+    <div class="px-4 pt-4">
+      <div class="flex items-center gap-2">
+        <BaseButton
+          :icon="PhCaretDown"
+          color="info"
+          class="md:hidden transition-transform duration-200"
+          :class="{ 'rotate-180': isOpen }"
+          @click="isOpen = !isOpen"
+        />
+
+        <span
+          v-if="chart.data?.difficulty != 0 && thisGame.chartTable[chart.chart]"
+          class="p-2 text-md md:text-lg text-slate-400"
+        >
+          {{ thisGame.chartTable[chart.chart] }} -
+          {{
+            formatDifficulty(chart.data?.difficulty, thisGame.difficultyDenom)
+          }}
+        </span>
+      </div>
+
       <span v-if="showUser">{{ record.username }}</span>
+
       <div
-        class="pt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-6 justify-items-center-safe place-items-center text-center"
+        class="pt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-6 place-items-center text-center"
+        :class="{ hidden: !isOpen, 'md:grid': true }"
       >
         <div>
-          <h1 class="font-light text-sm">Points</h1>
+          <h1 class="text-sm font-light">Points</h1>
           <p class="text-md lg:text-lg font-bold text-white">
             {{ record?.points.toLocaleString() }}
           </p>
         </div>
 
-        <template v-for="header of thisGame?.scoreHeaders" :key="header">
+        <template v-for="header in thisGame?.scoreHeaders" :key="header.value">
           <div v-if="getNestedValue(record, header.value)">
-            <h1 class="font-light text-sm">
+            <h1 class="text-sm font-light">
               {{ header.text }}
             </h1>
             <p class="text-md lg:text-lg font-bold text-white">
@@ -56,6 +67,7 @@ defineProps({
           </div>
         </template>
       </div>
+
       <div class="p-2 pb-4 font-light text-slate-300">
         <span>Updated {{ record.timestamp }}</span>
       </div>

src/constants/greetings.json

@@ -675,5 +675,75 @@
         "author": "superaustin7",
         "header": "THE <username> HAS AWAKENED",
         "comment": "BE VERY SCARED"
+    },
+    {
+        "author": "superaustin7",
+        "header": "Welcome, PhaseII Rhythm Gamer \"<username>\"",
+        "comment": "A message from PhaseII"
+    },
+    {
+        "author": "superaustin7",
+        "header": "Back from a long session, <username>?",
+        "comment": "Or looking to get started?"
+    },
+    {
+        "author": "superaustin7",
+        "header": "By your fire, <username> will erase every star in the sky.",
+        "comment": "For the future of mankind, THE WORLD ENDS NOW"
+    },
+    {
+        "author": "superaustin7",
+        "header": "Friendly Reminder to <username>:",
+        "comment": "Thank your local arcade operator. They deserve it!"
+    },
+    {
+        "author": "superaustin7",
+        "header": "Amazing, <username>, Awesome!",
+        "comment": "AMAZING AND AWESOME!"
+    },
+    {
+        "author": "superaustin7",
+        "header": "It's just <username>, the music, and the world to conquer!",
+        "comment": "Getting up, and getting down!"
+    },
+    {
+        "author": "superaustin7",
+        "header": "Remember to wash your hands, <username>.",
+        "comment": "That's what the Taiko no Tatsujin machine tells me, anyway."
+    },
+    {
+        "author": "superaustin7",
+        "header": "<username>, may your Full Combos be many...",
+        "comment": "...and your misses few."
+    },
+    {
+        "author": "superaustin7",
+        "header": "<username> = W + Good Scores + Had Fun",
+        "comment": "The math just works!"
+    },
+    {
+        "author": "superaustin7",
+        "header": "I wish <username> a very",
+        "comment": "FULL COMBO! Oh yeah! Uh huh!"
+    },
+    {
+        "author": "superaustin7",
+        "header": "<username>, welcome to Phase...11?",
+        "comment": ""
+    },
+    {
+        "author": "superaustin7",
+        "header": "Better Call <username>!",
+        "comment": "Did you know you have scores? PhaseII says you do, and so do I!"
+    },
+    {
+        "author": "superaustin7",
+        "header": "Are you an angel, <username>?",
+        "comment": "They live on the moons of Iego, I think."
+    },
+    {
+        "author": "superaustin7",
+        "header": "Stop refreshing the page, <username>!",
+        "comment": "I assure you your greeting is in the mix. Probably."
     }
 ]

src/views/Game/PlayerView.vue

@@ -817,29 +817,28 @@ const groupedTimeline = computed(() => {
                   :key="`${session.start}-${session.arcade}`"
                   class="relative shrink-0"
                 >
-                  <div class="w-56 rounded-xl bg-slate-800 p-4 shadow-sm">
-                    <div class="flex items-center gap-3">
-                      <div>
-                        <h4 class="font-semibold text-base">
-                          {{ session.arcade }}
-                        </h4>
+                  <div
+                    class="w-full rounded-xl bg-slate-800 p-4 shadow-sm space-y-4"
+                  >
+                    <div>
+                      <h4 class="font-semibold text-base">
+                        {{ session.arcade }}
+                      </h4>
 
-                        <p class="text-xs text-neutral-500">
-                          {{ session.day }}
-                        </p>
-                      </div>
+                      <p class="text-xs text-neutral-500">
+                        {{ session.day }}
+                      </p>
                     </div>
 
-                    <div class="mt-4 flex items-center justify-between gap-2">
+                    <div class="flex items-center justify-between gap-2">
                       <span class="text-xs font-medium text-primary-700">
                         {{ session.count }}
                         {{ session.count === 1 ? "play" : "plays" }}
                       </span>
 
                       <div class="text-xs text-neutral-500">
-                        <span> Start: {{ session.start }}</span>
-                        <br />
-                        <span> End: {{ session.end }}</span>
+                        <p>Start: {{ session.start }}</p>
+                        <p>End: {{ session.end }}</p>
                       </div>
                     </div>
                   </div>

src/views/Game/SongView.vue

@@ -53,7 +53,6 @@ const chartSelector = reactive({
 onMounted(async () => {
   try {
     const data = await APIGetTopScore(gameId, songId);
-
     songData.value = hydrateScoreData(thisGame, data);
 
     const personalData = await APIGetRecordData(