Update script.js

board/script.js

@@ -1,72 +1,76 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
+    const BACKEND_URL = 'https://milk.servemp3.com/board-backend/'; // Replace with your actual URL
+
     function generateRandomUsername() {
         const randomNum = Math.floor(Math.random() * 1000);
         return `milkenjoyer[${randomNum.toString().padStart(3, '0')}]`;
     }
 
-    // Check if username is already saved in localStorage
     let username = localStorage.getItem('username');
     if (!username) {
-        username = generateRandomUsername();  // Temporary username until the first post
+        username = generateRandomUsername(); // Temporary
     }
     document.getElementById('username').innerText = username;
 
-    // Retrieve stored posts from localStorage or initialize as an empty array
+    function renderPosts(posts) {
-    let posts = JSON.parse(localStorage.getItem('posts')) || [];
+        const postsSection = document.getElementById('posts-section');
+        postsSection.innerHTML = '';
+        posts.forEach(post => {
+            const postDiv = document.createElement('div');
+            postDiv.classList.add('post');
 
-    // Function to render posts
+            const postUsername = document.createElement('p');
-    function renderPosts() {
+            postUsername.classList.add('username');
-        postsSection.innerHTML = ''; // Clear current posts
+            postUsername.innerText = post.username;
-        posts
-            .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)) // Sort by descending date
-            .forEach(post => {
-                const postDiv = document.createElement('div');
-                postDiv.classList.add('post');
 
-                const postUsername = document.createElement('p');
+            const postContent = document.createElement('p');
-                postUsername.classList.add('username');
+            postContent.classList.add('content');
-                postUsername.innerText = post.username;
+            postContent.innerText = post.content;
-                postDiv.appendChild(postUsername);
 
-                const postContent = document.createElement('p');
+            postDiv.appendChild(postUsername);
-                postContent.classList.add('content');
+            postDiv.appendChild(postContent);
-                postContent.innerText = post.content;
+            postsSection.appendChild(postDiv);
-                postDiv.appendChild(postContent);
+        });
-
-                postsSection.prepend(postDiv); // Add post at the beginning
-            });
     }
 
-    // Initial render of posts
+    function loadPosts() {
-    const postsSection = document.getElementById('posts-section');
+        fetch(`${BACKEND_URL}/posts`)
-    renderPosts();
+            .then(res => res.json())
+            .then(data => renderPosts(data))
+            .catch(err => console.error('Failed to load posts', err));
+    }
+
+    loadPosts();
 
-    // Handle post submission
     const postForm = document.getElementById('post-form');
     const postContent = document.getElementById('post-content');
 
-    postForm.addEventListener('submit', function(event) {
+    postForm.addEventListener('submit', function (e) {
-        event.preventDefault();
+        e.preventDefault();
-
         const content = postContent.value.trim();
         if (!content) return;
 
-        // Create a new post with a timestamp
         const newPost = {
-            username: username,
+            username,
-            content: content,
+            content,
-            timestamp: new Date().toISOString() // Store timestamp for sorting
+            timestamp: new Date().toISOString()
         };
 
-        posts.push(newPost);
+        fetch(`${BACKEND_URL}/posts`, {
-        localStorage.setItem('posts', JSON.stringify(posts)); // Save posts to localStorage
+            method: 'POST',
-
+            headers: {
-        // After the first post, save the username permanently in localStorage
+                'Content-Type': 'application/json'
-        if (!localStorage.getItem('username')) {
+            },
-            localStorage.setItem('username', username);
+            body: JSON.stringify(newPost)
-        }
+        })
-
+            .then(res => res.json())
-        renderPosts(); // Re-render posts
+            .then(() => {
-        postContent.value = ''; // Clear the post content field
+                if (!localStorage.getItem('username')) {
+                    localStorage.setItem('username', username);
+                }
+                loadPosts();
+                postContent.value = '';
+            })
+            .catch(err => console.error('Failed to post', err));
     });
 });