renamed forum comments to reply for better naming

singharaj-usai · Oct 7, 2024 · a48b87c · a48b87c
1 parent 1417a73
commit a48b87c
Show file tree

Hide file tree

Showing 18 changed files with 137 additions and 97 deletions.
diff --git a/client/html/components/footer.html b/client/html/components/footer.html
@@ -30,9 +30,12 @@ <h4 class="text-muted">Valkyrie</h4>
     margin-bottom: 160px; /* Adjust this value based on your footer's height */
   }
   .footer {
-    position: absolute;
+    position: fixed;
     bottom: 0;
     width: 100%;
+    height: 60px;
+    background-color: rgba(249, 249, 249, 0.8);
+    z-index: 1000;
   }
   .custom-shadow {
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

diff --git a/client/html/pages/authentication/login.html b/client/html/pages/authentication/login.html
@@ -51,12 +51,37 @@
             align-items: center;
             z-index: 9999;
         }
+        #background-video {
+            position: fixed;
+            right: 0;
+            bottom: 0;
+            min-width: 100%;
+            min-height: 100%;
+            width: auto;
+            height: auto;
+            z-index: -1000;
+            object-fit: cover;
+        }
+        @media (max-aspect-ratio: 16/9) {
+            #background-video {
+                width: 100%;
+                height: auto;
+            }
+        }
+        @media (max-width: 767px) {
+            #content {
+                margin-top: 20px;
+            }
+        }
     </style>
 </head>
 <body>
     <div id="loading">Loading...</div>
-    <div id="particles-js"></div>
-
+    <video autoplay muted loop id="background-video">
+        <source src="/video/valkyrie-background-trailer.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+
     <div id="content" style="display: none;">
         <div class="container" style="margin-top: 50px;">
             <div id="navbar-container"></div>
@@ -109,11 +134,23 @@ <h2 class="panel-title">Login</h2>
     <script src="/js/particles-config.js"></script>
     <script src="/js/theme-loader.js"></script>
     <script src="/js/auth/auth.js"></script>
-    <script>
-        $(document).ready(function() {
-            App.init();
-            App.initForms();
+<script>
+    $(document).ready(function() {
+        const video = document.getElementById('background-video');
+        video.addEventListener('loadeddata', function() {
+            $('#loading').hide();
+            $('#content').show();
+        });
+
+        video.addEventListener('error', function(e) {
+            console.error('Error loading video:', e);
+            $('#loading').hide();
+            $('#content').show();
         });
-    </script>
+
+        App.init();
+        App.initForms();
+    });
+</script>
 </body>
 </html>
diff --git a/client/html/pages/forum/home.html b/client/html/pages/forum/home.html
@@ -79,6 +79,6 @@ <h2>All Sections</h2>
     <script src="../js/forum/ui.js"></script>
     <script src="../js/forum/sections.js"></script>
     <script src="../js/forum/posts.js"></script>
-    <script src="../js/forum/comments.js"></script>
+    <script src="../js/forum/replies.js"></script>
     <script src="../js/forum/init.js"></script></body></body>
 </html>
diff --git a/client/html/pages/forum/new/post.html b/client/html/pages/forum/new/post.html
@@ -56,6 +56,6 @@ <h2 class="panel-title">Create New Post</h2>
     <script src="../../js/forum/ui.js"></script>
     <script src="../../js/forum/sections.js"></script>
     <script src="../../js/forum/posts.js"></script>
-    <script src="../../js/forum/comments.js"></script>
+    <script src="../../js/forum/replies.js"></script>
     <script src="../../js/forum/init.js"></script></body>
 </html>
diff --git a/client/html/pages/forum/new/reply.html b/client/html/pages/forum/new/reply.html
@@ -39,6 +39,6 @@ <h3 class="panel-title">Reply to Post</h3>
     <script src="../../js/forum/ui.js"></script>
     <script src="../../js/forum/sections.js"></script>
     <script src="../../js/forum/posts.js"></script>
-    <script src="../../js/forum/comments.js"></script>
+    <script src="../../js/forum/replies.js"></script>
     <script src="../../js/forum/init.js"></script></body></body>
 </html>
diff --git a/client/html/pages/forum/post.html b/client/html/pages/forum/post.html
@@ -12,7 +12,7 @@
         .vote-button {
             cursor: pointer;
         }
-        .comment {
+        .reply {
             margin-bottom: 15px;
             border-bottom: 1px solid #eee;
             padding-bottom: 15px;
@@ -28,7 +28,7 @@
     <div class="container" style="margin-top: 70px;">
         <ol class="breadcrumb" id="post-breadcrumb"></ol>
         <div id="post-container"></div>
-        <div id="comments-container"></div>
+        <div id="replies-container"></div>
         <div id="reply-form-container"></div>
     </div>
 
@@ -40,7 +40,7 @@
     <script src="../js/forum/ui.js"></script>
     <script src="../js/forum/sections.js"></script>
     <script src="../js/forum/posts.js"></script>
-    <script src="../js/forum/comments.js"></script>
+    <script src="../js/forum/replies.js"></script>
     <script src="../js/forum/init.js"></script>
 </body>
 </html>
diff --git a/client/html/pages/forum/sections/section.html b/client/html/pages/forum/sections/section.html
@@ -60,6 +60,6 @@ <h2 id="section-title"></h2>
     <script src="../../js/forum/ui.js"></script>
     <script src="../../js/forum/sections.js"></script>
     <script src="../../js/forum/posts.js"></script>
-    <script src="../../js/forum/comments.js"></script>
+    <script src="../../js/forum/replies.js"></script>
     <script src="../../js/forum/init.js"></script></body></body>
 </html>
diff --git a/client/html/pages/game/game.html b/client/html/pages/game/game.html
@@ -36,6 +36,6 @@
     <script src="./js/game/api.js"></script>
     <script src="./js/game/display.js"></script>
     <script src="./js/game/actions.js"></script>
-    <script src="./js/game/comments.js"></script>
+    <script src="./js/game/replies.js"></script>
     <script src="./js/game/init.js"></script></body>
 </html>
diff --git a/client/js/admin/forum.js b/client/js/admin/forum.js
@@ -53,7 +53,7 @@ function displayForumPosts(posts) {
         `);
 
         const repliesList = postElement.find('.replies-list');
-        post.comments.forEach(reply => {
+        post.replies.forEach(reply => {
             repliesList.append(`
                 <div class="panel panel-info mb-2">
                     <div class="panel-body">

diff --git a/client/js/forum/posts.js b/client/js/forum/posts.js
@@ -26,12 +26,12 @@ function loadPost(postId) {
                 success: function(postCount) {
                     post.author.postCount = postCount;
                     displayPost(post);
-                    loadComments(postId);
+                    loadReplies(postId);
                 },
                 error: function(xhr, status, error) {
                     console.error('Error fetching author post count:', error);
                     displayPost(post);
-                    loadComments(postId);
+                    loadReplies(postId);
                 }
             });
         },
@@ -102,8 +102,8 @@ function displayPost(post) {
         $(`#user-status-${post.author._id}`).html(onlineStatus);
     });
 
-    // Load comments
-    loadComments(post._id);
+    // Load replies
+    loadReplies(post._id);
 }
 
 function loadPostForReply(postId) {

diff --git a/client/js/forum/comments.js → client/js/forum/replies.js b/client/js/forum/comments.js → client/js/forum/replies.js
@@ -1,12 +1,12 @@
-function loadComments(postId) {
+function loadReplies(postId) {
     $.ajax({
-        url: `/api/forum/posts/${postId}/comments`,
+        url: `/api/forum/posts/${postId}/replies`,
         method: 'GET',
-        success: function(comments) {
-            const commentsContainer = $('#comments-container');
+        success: function(replies) {
+            const repliesContainer = $('#replies-container');
 
-            // Fetch post counts for all comment authors
-            const authorIds = [...new Set(comments.map(comment => comment.author._id))];
+            // Fetch post counts for all replies authors
+            const authorIds = [...new Set(replies.map(reply => reply.author._id))];
             const postCountPromises = authorIds.map(authorId => 
                 $.ajax({
                     url: `/api/forum/user-post-count/${authorId}`,
@@ -17,37 +17,37 @@ function loadComments(postId) {
             Promise.all(postCountPromises).then(postCounts => {
                 const postCountMap = Object.fromEntries(postCounts.map((count, index) => [authorIds[index], count]));
 
-                comments.forEach(comment => {
-                    comment.author.postCount = postCountMap[comment.author._id];
+                replies.forEach(reply => {
+                    reply.author.postCount = postCountMap[reply.author._id];
                 });
 
-                commentsContainer.html(displayComments(comments, postId));
+                repliesContainer.html(displayReplies(replies, postId));
 
                 // Add event listeners for reply buttons
                 $('.reply-button').on('click', function() {
-                    const commentId = $(this).data('comment-id');
-                    $(`#reply-form-${commentId}`).toggle();
+                    const replyId = $(this).data('reply-id');
+                    $(`#reply-form-${replyId}`).toggle();
                 });
 
                 $('.submit-reply').on('click', function() {
-                    const commentId = $(this).data('comment-id');
+                    const replyId = $(this).data('reply-id');
                     const content = $(this).siblings('textarea').val();
-                    submitComment(postId, content, commentId);
+                    submitReply(postId, content, replyId);
                 });
             });
         },
         error: function(xhr, status, error) {
-            console.error('Error loading comments:', error);
-            $('#comments-container').html('<p class="text-danger">Error loading comments. Please try again later.</p>');
+            console.error('Error loading replies:', error);
+            $('#replies-container').html('<p class="text-danger">Error loading replies. Please try again later.</p>');
         }
     });
 }
 
-function submitComment(postId, content, parentCommentId = null) {
+function submitReply(postId, content, parentReplyId = null) {
     $.ajax({
-        url: `/api/forum/posts/${postId}/comments`,
+        url: `/api/forum/posts/${postId}/replies`,
         method: 'POST',
-        data: JSON.stringify({ content, parentCommentId }),
+        data: JSON.stringify({ content, parentReplyId }),
         contentType: 'application/json',
         headers: {
             'Authorization': `Bearer ${localStorage.getItem('token')}`
@@ -57,47 +57,47 @@ function submitComment(postId, content, parentCommentId = null) {
             window.location.href = `/forum/post?id=${postId}`;
         },
         error: function(xhr, status, error) {
-            console.error('Error submitting comment:', error);
+            console.error('Error submitting reply:', error);
             console.error('Server response:', xhr.responseText);
-            alert('Error submitting comment. Please try again later.');
+            alert('Error submitting reply. Please try again later.');
         }
     });
 }
 
-function displayComments(comments, postId, parentId = null, level = 0) {
+function displayReplies(replies, postId, parentId = null, level = 0) {
     let html = '';
-    comments.forEach(comment => {
-        if (comment.parentComment === parentId) {
+    replies.forEach(reply => {
+        if (reply.parentReply === parentId) {
             html += `
                 <div class="panel panel-default" style="margin-left: ${level * 20}px; margin-bottom: 15px;">
                     <div class="panel-heading">
                         <span>
                             <h3 class="panel-title" style="display: inline-block; margin-right: 10px;">Reply:</h3>
-                            <small">Posted on ${new Date(comment.createdAt).toLocaleString()}</small>
+                            <small">Posted on ${new Date(reply.createdAt).toLocaleString()}</small>
                         </span>
                     </div>
                     <div class="panel-body">
                         <div class="row">
                             <div class="col-md-2 col-sm-3 text-center">
                                 <img src="https://www.nicepng.com/png/full/146-1466409_roblox-bacon-hair-png-roblox-bacon-hair-head.png" alt="Avatar" class="img-circle" width="64" height="64">
-                                <h5><a href="/user-profile?username=${comment.author.username}">${escapeHtml(comment.author.username)}</a></h5>
-                                <p id="comment-user-status-${comment.author._id}" class="small">Loading status...</p>
-                                <p class="small">Posts: ${comment.author.postCount || 0}</p>
+                                <h5><a href="/user-profile?username=${reply.author.username}">${escapeHtml(reply.author.username)}</a></h5>
+                                <p id="reply-user-status-${reply.author._id}" class="small">Loading status...</p>
+                                <p class="small">Posts: ${reply.author.postCount || 0}</p>
                             </div>
                             <div class="col-md-10 col-sm-9">
-                                <p style="white-space: pre-wrap;">${formatContent(comment.content)}</p>
+                                <p style="white-space: pre-wrap;">${formatContent(reply.content)}</p>
                             </div>
                         </div>
                     </div>
                     <div class="panel-footer">
-                        <button class="btn btn-sm btn-primary reply-button" data-comment-id="${comment._id}">Reply to Comment</button>
-                        <div class="reply-form" id="reply-form-${comment._id}" style="display: none; margin-top: 10px;">
+                        <button class="btn btn-sm btn-primary reply-button" data-reply-id="${reply._id}">Reply to Reply</button>
+                        <div class="reply-form" id="reply-form-${reply._id}" style="display: none; margin-top: 10px;">
                             <textarea class="form-control" rows="3" style="white-space: pre-wrap;"></textarea>
-                            <button class="btn btn-sm btn-success submit-reply" data-comment-id="${comment._id}" style="margin-top: 5px;">Submit Reply</button>
+                            <button class="btn btn-sm btn-success submit-reply" data-reply-id="${reply._id}" style="margin-top: 5px;">Submit Reply</button>
                         </div>
                     </div>
                 </div>
-                ${displayComments(comments, postId, comment._id, level + 1)}
+                ${displayReplies(replies, postId, reply._id, level + 1)}
             `;
         }
     });

diff --git a/client/js/forum/ui.js b/client/js/forum/ui.js
@@ -46,9 +46,9 @@ function displayPosts(posts, containerId = '#recent-posts') {
 
             sectionPosts.forEach(post => {
                 const replyCount = post.replyCount || 0;
-                const lastComment = post.lastComment || post; 
-                const lastPostDate = new Date(lastComment.createdAt).toLocaleString();
-                const lastPostAuthor = lastComment.author ? lastComment.author.username : post.author.username;
+                const lastReply = post.lastReply || post; 
+                const lastPostDate = new Date(lastReply.createdAt).toLocaleString();
+                const lastPostAuthor = lastReply.author ? lastReply.author.username : post.author.username;
 
                 const row = $(`
                     <tr>
@@ -215,6 +215,6 @@ function setupReplyForm(postId) {
     $('#reply-form').on('submit', function(e) {
         e.preventDefault();
         const content = $('#reply-content').val();
-        submitComment(postId, content);
+        submitReply(postId, content);
     });
 }
diff --git a/client/video/valkyrie-background-trailer.mp4 b/client/video/valkyrie-background-trailer.mp4
diff --git a/server/functions/api/models/ForumPost.js b/server/functions/api/models/ForumPost.js
@@ -51,9 +51,9 @@ const forumPostSchema = new mongoose.Schema({
         default: []
     },
 
-    comments: [{
+    replies: [{
         type: mongoose.Schema.Types.ObjectId,
-        ref: 'Comment'
+        ref: 'Reply'
     }],
     createdAt: {
         type: Date,

diff --git a/server/functions/api/models/Comment.js → server/functions/api/models/Reply.js b/server/functions/api/models/Comment.js → server/functions/api/models/Reply.js
@@ -1,6 +1,6 @@
 const mongoose = require('mongoose');
 
-const commentSchema = new mongoose.Schema({
+const replySchema = new mongoose.Schema({
     content: {
         type: String,
         required: true,
@@ -17,9 +17,9 @@ const commentSchema = new mongoose.Schema({
         ref: 'ForumPost',
         required: true
     },
-    parentComment: {
+    parentReply: {
         type: mongoose.Schema.Types.ObjectId,
-        ref: 'Comment',
+        ref: 'Reply',
         default: null
     },
     createdAt: {
@@ -32,4 +32,4 @@ const commentSchema = new mongoose.Schema({
     }
 });
 
-module.exports = mongoose.model('Comment', commentSchema);
+module.exports = mongoose.model('Reply', replySchema);