Master

src/components/event/homecoming/GuestbookWordCloud.jsx

@@ -1,17 +1,8 @@
 'use client';
 
-const hashString = (value) => {
-    let hash = 0;
-    for (let i = 0; i < value.length; i += 1) {
-        hash = value.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return hash;
-};
+import { useMemo } from "react";
 
-const mapToRange = (value, min, max) => {
-    const normalized = Math.abs(value % 1000) / 1000;
-    return min + normalized * (max - min);
-};
+const mapToRange = (value, min, max) => min + value * (max - min);
 
 const defaultColors = {
     highlight: "text-cblue",
@@ -20,28 +11,35 @@ const defaultColors = {
 };
 
 export default function GuestbookWordCloud({ entries, isLoading, recentCount = 5, className = "", style = {}, colorScheme = defaultColors }) {
-    const words = (entries ?? []).map((entry, idx) => {
-        const key = entry.id ?? `${entry.wristbandSerial ?? "unknown"}-${idx}`;
-        const baseHash = hashString(`${key}-${entry.name}`);
-        const top = mapToRange(baseHash, 12, 88);
-        const left = mapToRange(baseHash * 3, 10, 90);
-        const fontSize = mapToRange(baseHash * 5, 1.2, 3.2);
-        const rotate = mapToRange(baseHash * 7, -10, 10);
-        const opacity = mapToRange(baseHash * 11, 0.45, 0.95);
+    const words = useMemo(() => {
+        if (!entries?.length) {
+            return [];
+        }
+
+        return entries.map((entry, idx) => {
+            const key = entry.id ?? `${entry.wristbandSerial ?? "unknown"}-${idx}`;
+            const goldenRatio = 0.61803398875;
+            const base = Math.random() + idx * goldenRatio;
+            const top = mapToRange(base % 1, 12, 88);
+            const left = mapToRange((base * goldenRatio) % 1, 10, 90);
+            const fontSize = mapToRange(Math.random(), 1.2, 3.2);
+            const rotate = mapToRange(Math.random(), -10, 10);
+            const opacity = mapToRange(Math.random(), 0.45, 0.95);
 
-        return {
-            key,
-            label: entry.name,
-            isRecent: idx >= Math.max(entries.length - recentCount, 0),
-            style: {
-                top: `${top}%`,
-                left: `${left}%`,
-                fontSize: `${fontSize}rem`,
-                opacity,
-                transform: `translate(-50%, -50%) rotate(${rotate}deg)`,
-            },
-        };
-    });
+            return {
+                key,
+                label: entry.name,
+                isRecent: idx >= Math.max(entries.length - recentCount, 0),
+                style: {
+                    top: `${top}%`,
+                    left: `${left}%`,
+                    fontSize: `${fontSize}rem`,
+                    opacity,
+                    transform: `translate(-50%, -50%) rotate(${rotate}deg)`,
+                },
+            };
+        });
+    }, [entries, recentCount]);
 
     return (
         <div className={`absolute inset-0 pointer-events-none select-none ${className}`} style={style}>