upload place new files

client/html/components/navbar.html

@@ -57,9 +57,7 @@
   transition: top 0.3s ease;
 }
 
-body {
-  padding-top: 150px; /* Increased to accommodate both navbars and announcement */
-}
+
 
 @media (max-width: 767px) {
   #site-wide-announcement {

client/html/pages/home/index.html

@@ -67,7 +67,7 @@
         <div id="navbar-container"></div>
 
             <!-- Ad Banners WIP -->
-            <div class="container-fluid ad-container">
+            <div class="container ad-container" style="margin-top: 70px">
                 <div class="row">
                     <div class="col-md-12">
                         <div id="ad-banner-top" class="text-center">

client/html/pages/my/create/create.html

@@ -37,7 +37,7 @@
     <div id="navbar-container"></div>
 
     <!-- Main Content -->
-    <div class="container-fluid" style="margin-top: 20px;">
+    <div class="container" style="margin-top: 70px;">
         <div class="row">
             <div class="col-md-2">
                 <!-- Sidebar -->

client/html/pages/upload/place.html

@@ -238,8 +238,12 @@ <h3 class="panel-title">Upload Game</h3>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
     <script src="/js/theme-loader.js"></script>
     <script src="/js/auth/auth.js"></script>
-    <script src="/js/upload.js"></script>
-    <script src="/js/particles-config.js"></script>
+<!-- Other script references -->
+<script src="/js/upload/accesskey.js"></script>
+<script src="/js/upload/place/uploadform.js"></script>
+<script src="/js/upload/alert.js"></script>
+<script src="/js/upload/place/init.js"></script>    
+<script src="/js/particles-config.js"></script>
 
 </body>
 </html>

client/js/upload/accessKey.js

@@ -0,0 +1,42 @@
+function getAccessKey() {
+    let accessKey = localStorage.getItem('uploadAccessKey');
+    if (!accessKey) {
+        accessKey = prompt('Please enter the upload access key:');
+        if (accessKey) {
+            localStorage.setItem('uploadAccessKey', accessKey);
+        }
+    }
+    return accessKey;
+}
+
+function showAccessKeyModal() {
+    $('#access-key-modal').modal({
+        backdrop: 'static',
+        keyboard: false,
+        show: true
+    });
+}
+
+function verifyAccessKey(key) {
+    $.ajax({
+        url: '/api/verify-upload-access',
+        method: 'POST',
+        data: JSON.stringify({ accessKey: key }),
+        contentType: 'application/json',
+        success: function (response) {
+            if (response.success) {
+                localStorage.setItem('uploadAccessKey', key);
+                $('#access-key-modal').modal('hide');
+                $('#content-wrapper').show();
+                initializeUploadForm();
+            } else {
+                alert('Invalid access key. Please try again.');
+                showAccessKeyModal();
+            }
+        },
+        error: function () {
+            alert('Error verifying access key. Please try again.');
+            showAccessKeyModal();
+        }
+    });
+}

client/js/upload/alert.js

@@ -0,0 +1,9 @@
+function showAlert(type, message) {
+    const alertHtml = `
+        <div class="alert alert-${type} alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            ${message}
+        </div>
+    `;
+    $('#alert-container').html(alertHtml);
+}

client/js/upload/place/init.js

@@ -0,0 +1,20 @@
+$(document).ready(function () {
+    const accessKey = localStorage.getItem('uploadAccessKey');
+    if (!accessKey) {
+        showAccessKeyModal();
+    } else {
+        verifyAccessKey(accessKey);
+    }
+
+    $('#access-key-form').on('submit', function (e) {
+        e.preventDefault();
+        const enteredKey = $('#access-key').val();
+        verifyAccessKey(enteredKey);
+    });
+
+    $('#access-key-modal').on('hide.bs.modal', function (e) {
+        if (!localStorage.getItem('uploadAccessKey')) {
+            window.location.href = '/';
+        }
+    });
+});

client/js/upload/place/uploadform.js

@@ -0,0 +1,53 @@
+function initializeUploadForm() {
+    $('#upload-form').on('submit', function (e) {
+        e.preventDefault();
+
+        const formData = new FormData(this);
+        formData.append('year', $('input[name="year"]:checked').val());
+        const token = localStorage.getItem('token');
+        const accessKey = localStorage.getItem('uploadAccessKey');
+
+        // Validate file size
+        const thumbnailFile = $('#thumbnail')[0].files[0];
+        const rbxlFile = $('#rbxlFile')[0].files[0];
+
+        if (thumbnailFile && thumbnailFile.size > 20 * 1024 * 1024) {
+            showAlert('danger', 'Thumbnail file size must be less than 20MB');
+            return;
+        }
+
+        if (rbxlFile && rbxlFile.size > 20 * 1024 * 1024) {
+            showAlert('danger', '.rbxl file size must be less than 20MB');
+            return;
+        }
+
+        $.ajax({
+            url: '/api/games/upload',
+            method: 'POST',
+            data: formData,
+            contentType: false,
+            processData: false,
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'X-Access-Token': accessKey
+            },
+            success: function (response) {
+                showAlert('success', `Game uploaded successfully! Asset ID: ${response.assetId}`);
+                setTimeout(() => {
+                    window.location.href = `/game?id=${response.gameId}`;
+                }, 2000);
+            },
+            error: function (xhr, status, error) {
+                let errorMessage = 'Unknown error';
+                if (xhr.responseJSON && xhr.responseJSON.error) {
+                    errorMessage = xhr.responseJSON.error;
+                    if (xhr.responseJSON.details) {
+                        errorMessage += ': ' + xhr.responseJSON.details;
+                    }
+                }
+                console.error('Upload error:', errorMessage);
+                showAlert('danger', 'Error uploading game: ' + errorMessage);
+            }
+        });
+    });
+}

server/functions/api/routes/pages.js

@@ -39,6 +39,8 @@ router.get("/messages/compose", (req, res) => sendHtmlFile(res, "pages/my/compos
 // Upload page
 router.get("/upload/place", (req, res) => sendHtmlFile(res, "pages/upload/place.html"));
 
+router.get("/upload", (req, res) => sendHtmlFile(res, "pages/upload/index.html"));
+
 // Games pages
 router.get("/games", (req, res) => sendHtmlFile(res, "pages/games/games.html"));
 router.get("/game", (req, res) => sendHtmlFile(res, "pages/game/game.html"));