chore: shuffle on client

Author: ubugeeei

app/pages/_components/SectionStaff.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { HOME_HEADING_ID } from "~/constant";
-import { useI18n, useFetch, useBreakpoint, computed } from "#imports";
+import { useI18n, useFetch, useBreakpoint, computed, onMounted } from "#imports";
 import { VFSection } from "#components";
 
 import StaffGrid from "./StaffGrid.vue";
+import type { Staff } from "~~/server/api/staffs/index.get";
 
 const { t } = useI18n();
 const bp = useBreakpoint();
 
-const { data: staffList } = await useFetch("/api/staffs");
+const { data: staffList } = await useFetch("/api/staffs", { deep: true });
 
 const leaderColumns = computed(() => {
   return bp.value === "pc" ? 3 : 2;
@@ -17,6 +18,27 @@ const leaderColumns = computed(() => {
 const coreColumns = computed(() => {
   return bp.value === "pc" ? 4 : 3;
 });
+
+onMounted(() => {
+  if (!staffList.value) return;
+  staffList.value.leaders = shuffleNonPinned(staffList.value.leaders);
+  staffList.value.cores = shuffleNonPinned(staffList.value.cores);
+});
+function shuffleArray<T>(array: T[]): T[] {
+  const shuffled = [...array];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i]!, shuffled[j]!] = [shuffled[j]!, shuffled[i]!];
+  }
+  return shuffled;
+}
+
+function shuffleNonPinned(staffArray: Staff[]): Staff[] {
+  const pinned = staffArray.filter(staff => staff.pinned);
+  const nonPinned = staffArray.filter(staff => !staff.pinned);
+  const shuffledNonPinned = shuffleArray(nonPinned);
+  return [...pinned, ...shuffledNonPinned];
+}
 </script>
 
 <template>