try cdn version of socket library

mongodb-developer · Aug 27, 2024 · bd28ffe · bd28ffe
1 parent 7b9077d
commit bd28ffe
Show file tree

Hide file tree

Showing 11 changed files with 262 additions and 270 deletions.
diff --git a/api/socket.io.js b/api/socket.io.js
diff --git a/api/socketio.js b/api/socketio.js
@@ -0,0 +1,28 @@
+import { Server } from "socket.io";
+import { setupSocketHandlers } from "../src/utils/socketHandlers";
+
+const ioHandler = (req, res) => {
+  if (!res.socket.server.io) {
+    console.log("*First use, starting socket.io");
+
+    const io = new Server(res.socket.server, {
+      path: "/api/socketio",
+      addTrailingSlash: false,
+    });
+
+    setupSocketHandlers(io);
+
+    res.socket.server.io = io;
+  } else {
+    console.log("socket.io already running");
+  }
+  res.end();
+};
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+export default ioHandler;
diff --git a/public/admin.html b/public/admin.html
@@ -3,52 +3,49 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin Dashboard - Multiplayer Drawing Game</title>
+    <title>Admin Dashboard</title>
     <link rel="stylesheet" href="/css/styles.css">
-    <script src="/socket.io/socket.io.js"></script>
-    <script src="/js/workflowCards.js"></script>
-    <script src="/js/game.js"></script>
 </head>
 <body>
     <div id="admin-container">
         <h1>Admin Dashboard</h1>
-
-        <!-- <div id="prompts-container"></div> -->
-
+
         <div id="waiting-players">
             <h2>Waiting Players</h2>
             <ul id="player-list"></ul>
         </div>
-    
+
         <div id="game-control">
             <h2>Game Control</h2>
             <select id="prompt-select">
                 <option value="">Select a prompt</option>
             </select>
-            <button id="start-game" disabled>Start Game</button>
+            <button id="start-game">Start Game</button>
         </div>
-    
+
         <div id="active-game" style="display: none;">
             <h2>Active Game</h2>
             <p id="current-prompt"></p>
             <button id="end-game">End Game</button>
         </div>
-    
+
         <div id="game-results" style="display: none;">
             <h2>Game Results</h2>
-            <ol id="results-list"></ol>
+            <ul id="results-list"></ul>
         </div>
-    
+
         <a id="leaderboard-link" href="/leaderboard" target="_blank">View Leaderboard</a>
-    
+
         <button id="sync-button">Sync Game Sessions</button>
+
         <div id="ongoing-games"></div>
+
         <div id="recent-results"></div>
     </div>
-    
+
     <div id="workflow-cards-container"></div>
 
-    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
     <script src="/js/workflowCards.js"></script>
     <script src="/js/admin.js"></script>
 </body>

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -21,6 +21,7 @@ body {
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
     width: 100%;
     max-width: 500px;
+    align-self: flex-start;
 }
 
 h1 {

diff --git a/public/index.html b/public/index.html
@@ -2,26 +2,25 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Multiplayer Drawing Game</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI MongoDB / AWS Drawing Game</title>
     <link rel="stylesheet" href="/css/styles.css">
-    <script src="/socket.io/socket.io.js"></script>
-    <script src="/js/workflowCards.js"></script>
-    <script src="/js/game.js"></script>
-
 </head>
 <body>
     <div id="game-container">
         <h1>AI MongoDB / AWS Drawing Game</h1>
-        <button id="info-button" class="info-button">ℹ️ How It Works</button>
+        <button id="info-button">ℹ️ How It Works</button>
+
         <div id="login-screen">
             <input type="text" id="player-name" placeholder="Enter your name">
             <button id="join-game">Join Game</button>
         </div>
+
         <div id="waiting-room" style="display: none;">
             <h2>Waiting for players...</h2>
             <ul id="player-list"></ul>
         </div>
+
         <div id="game-screen" style="display: none;">
             <h2 id="prompt"></h2>
             <canvas id="drawing-canvas"></canvas>
@@ -31,6 +30,7 @@ <h2 id="prompt"></h2>
                 <button id="submit-drawing">Submit Drawing</button>
             </div>
         </div>
+
         <div id="results-screen" style="display: none;">
             <h2>Game Results</h2>
             <div id="results"></div>
@@ -39,7 +39,7 @@ <h2>Game Results</h2>
 
     <div id="workflow-cards-container"></div>
 
-    <div id="info-modal" class="modal"  style="display: none;"">
+    <div id="info-modal" class="modal" style="display: none;">
         <div class="modal-content">
             <span class="close">&times;</span>
             <h2>How It Works</h2>
@@ -53,10 +53,9 @@ <h3>AWS Rekognition</h3>
         </div>
     </div>
 
-    <script src="/socket.io/socket.io.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
+
     <script src="/js/workflowCards.js"></script>
     <script src="/js/game.js"></script>
-    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
-
 </body>
 </html>