#9 Automatic faction and alphabetically sorting inside factions on the home screen.

Author: CephalonCosmic

pages/credits.vue

@@ -13,23 +13,23 @@
     <div>
       <h3 class="text-4xl font-semibold py-4">Development Branch</h3>
       <MembersSection>
-        <template v-for="id in members.filter(m => m.faction.endsWith('development')).map(m => m.id).sort(nameSort)" :key="id">
+        <template v-for="id in members.filter(m => m.faction.endsWith('development')).map(m => m.id).sort(alphabeticalSort)" :key="id">
           <MemberCard :id="id" :is-live="true" />
         </template>
       </MembersSection>
     </div>
     <div>
       <h3 class="text-4xl font-semibold py-4">Creative Branch</h3>
       <MembersSection>
-        <template v-for="id in members.filter(m => m.faction.endsWith('creative')).map(m => m.id).sort(nameSort)" :key="id">
+        <template v-for="id in members.filter(m => m.faction.endsWith('creative')).map(m => m.id).sort(alphabeticalSort)" :key="id">
           <MemberCard :id="id" :is-live="true" />
         </template>
       </MembersSection>
     </div>
     <div>
       <h3 class="text-4xl font-semibold py-4">Acting Branch</h3>
       <MembersSection>
-        <template v-for="id in members.filter(m => m.faction.endsWith('acting')).map(m => m.id).sort(nameSort)" :key="id">
+        <template v-for="id in members.filter(m => m.faction.endsWith('acting')).map(m => m.id).sort(alphabeticalSort)" :key="id">
           <MemberCard :id="id" :is-live="true" />
         </template>
       </MembersSection>
@@ -63,22 +63,10 @@ import MembersSection from "~/components/members/MembersSection.vue";
 import MemberCard from "~/components/members/MemberCard.vue";
 
 import membersData from '~/assets/members.json';
+import alphabeticalSort from "~/utils/alphabeticalSort";
 
 const members = ref(membersData.filter(m => m.faction.startsWith('unity_team')))
 
-function nameSort(a: string, b: string): number {
-  if (a < b) {
-    return -1
-  }
-
-  if (a > b) {
-    return 1
-  }
-
-  return 0
-}
-
-
 definePageMeta({
     name: 'Credits'
 });

pages/index.vue

@@ -1,34 +1,42 @@
 <template>
-    <main class="w-full py-8">
-        <Title>Home</Title>
-
-        <h2 class="text-center text-5xl pb-3 font-semibold">Member</h2>
-        
-        <div class="py-3">
-            <h3 class="text-center text-4xl pb-3 text-(--text-live)">
-                <span class="material-symbols-outlined">circle</span> Currently Live
-            </h3>
-            <MembersSection v-if="status !== 'pending'">
-                <template v-for="id in members.filter(a => (live ?? []).includes(a.id)).map(a => a.id)" :key="id">
-                    <MemberCard :id="id" :isLive="true"></MemberCard>
-                </template>
-            </MembersSection>
-        </div>
-        <div class="py-3">
-            <h3 class="text-center text-4xl pb-3">
-                <span class="material-symbols-outlined">bedtime</span> Currently Offline
-            </h3>
-            <MembersSection v-if="status !== 'pending'">
-                <template v-for="id in members.filter(a => !(live ?? []).includes(a.id)).map(a => a.id)" :key="id">
-                    <MemberCard :id="id"></MemberCard>
-                </template>
-            </MembersSection>
-        </div>
-    </main>
+  <main class="w-full py-8">
+    <Title>Home</Title>
+
+    <h2 class="text-center text-5xl pb-3 font-semibold">Member</h2>
+
+    <div class="py-3">
+      <h3 class="text-center text-4xl pb-3 text-(--text-live)">
+        <span class="material-symbols-outlined">circle</span> Currently Live
+      </h3>
+
+      <MembersSection v-if="status !== 'pending'">
+        <template v-for="factions in members.reduce(sortGroup, [[], [], []])" :key="factions">
+          <template v-for="id in factions.filter(a => (live ?? []).includes(a.id)).map(a => a.id)" :key="id">
+            <MemberCard :id="id" :isLive="true"></MemberCard>
+          </template>
+        </template>
+      </MembersSection>
+    </div>
+
+    <div class="py-3">
+      <h3 class="text-center text-4xl pb-3">
+        <span class="material-symbols-outlined">bedtime</span> Currently Offline
+      </h3>
+
+      <MembersSection v-if="status !== 'pending'">
+        <template v-for="factions in members.reduce(sortGroup, [[], [], []])" :key="factions">
+          <template v-for="id in factions.filter(a => !(live ?? []).includes(a.id)).map(a => a.id).sort(alphabeticalSort)" :key="id">
+            <MemberCard :id="id"></MemberCard>
+          </template>
+        </template>
+      </MembersSection>
+    </div>
+  </main>
 </template>
 
 <script setup lang="ts">
 import MemberCard from "~/components/members/MemberCard.vue";
+import alphabeticalSort from "~/utils/alphabeticalSort";
 
 import membersData from '~/assets/members.json';
 
@@ -43,4 +51,19 @@ const live = ref(check_live)
 watch(check_live, (newLive) => {
   live.value = newLive
 })
+
+function sortGroup(group, member) {
+  switch (member.faction) {
+    case "emberhold":
+      group[0].push(member);
+      break;
+    case "suncrest":
+      group[1].push(member);
+      break;
+    case "fernfall":
+      group[2].push(member);
+      break;
+  }
+  return group;
+}
 </script>

utils/alphabeticalSort.ts

@@ -0,0 +1,11 @@
+export default function (a: string, b: string): number {
+    if (a < b) {
+        return -1
+    }
+
+    if (a > b) {
+        return 1
+    }
+
+    return 0
+}