proposition frontend

frontend/src/composables/ipColor.ts

@@ -0,0 +1,15 @@
+/** Couleurs assignées de façon déterministe à chaque adresse IP */
+const PALETTE = ['#666688', '#00ddff', '#ff00cc', '#00ee77', '#ff8844'] as const;
+
+export function getIpColor(ip: string): string {
+  // djb2 hash
+  let hash = 5381;
+  for (let i = 0; i < ip.length; i++) {
+    hash = ((hash << 5) + hash + ip.charCodeAt(i)) & 0xffffffff;
+  }
+  return PALETTE[Math.abs(hash) % PALETTE.length];
+}
+
+export function getIpGlow(color: string): string {
+  return color === '#666688' ? 'none' : `0 0 8px ${color}80`;
+}

frontend/src/composables/useMessages.ts

@@ -0,0 +1,55 @@
+import { ref, onMounted } from 'vue';
+
+export interface Reply {
+  id: string;
+  content: string;
+  authorIp: string;
+  createdAt: string;
+}
+
+export interface Message extends Reply {
+  parentId: string | null;
+  replies: Reply[];
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export function useMessages() {
+  const messages = ref<Message[]>([]);
+  const loading = ref(false);
+  const sending = ref(false);
+
+  async function fetchMessages(): Promise<void> {
+    loading.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/messages`);
+      if (res.ok) {
+        // L'API renvoie du plus récent au plus ancien ; on inverse pour affichage chronologique
+        messages.value = ((await res.json()) as Message[]).reverse();
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function postMessage(content: string): Promise<boolean> {
+    if (!content.trim()) return false;
+    sending.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: content.trim() }),
+      });
+      if (!res.ok) return false;
+      await fetchMessages();
+      return true;
+    } finally {
+      sending.value = false;
+    }
+  }
+
+  onMounted(fetchMessages);
+
+  return { messages, loading, sending, postMessage };
+}