added env variables to store hsot and ports

traque-back/index.js

@@ -1,11 +1,16 @@
 import { createServer } from "http";
 import { Server } from "socket.io";
 import Game from "./game.js";
+import { config } from "dotenv";
+//extract admin password from .env file
+config();
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD;
+const HOST = process.env.HOST;
+const PORT = process.env.PORT;
 
 const httpServer = createServer();
 //Password that socket clients will have to send to be able to send admin commands
-//TODO: put this in an environment variable
-const ADMIN_PASSWORD = "admin";
+
 
 //set cors to allow all origins
 const io = new Server(httpServer, {
@@ -191,4 +196,6 @@ io.of("player").on("connection", (socket) => {
   });
 });
 
-httpServer.listen(3000);
+httpServer.listen(PORT, HOST, () => {
+  console.log(`Server running`);
+});

traque-back/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "dotenv": "^16.4.5",
         "socket.io": "^4.7.5"
       }
     },
@@ -94,6 +95,17 @@
         }
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/engine.io": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.4.tgz",

traque-back/package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "type": "module",
   "dependencies": {
+    "dotenv": "^16.4.5",
     "socket.io": "^4.7.5"
   }
 }

traque-front/components/team/actionDrawer.jsx

@@ -8,7 +8,7 @@ export default function ActionDrawer() {
     const { sendCurrentPosition } = useGame();
 
     return (
-        <div className={"absolute w-screen  bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}>
+        <div className={"fixed w-screen  bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}>
             <img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} />
             {visible && <div className="flex flex-col w-full h-full">
                 <div className='shadow-lg mt-0  p-1 flex flex-col text-center mb-1 mt-auto mx-auto w-4/5 rounded'>

traque-front/context/socketContext.jsx

@@ -3,7 +3,7 @@ import { createContext, useContext, useMemo } from "react";
 
 const { io } = require("socket.io-client");
 
-const SOCKET_URL = "http://localhost:3000";
+const SOCKET_URL = 'http://' + process.env.NEXT_PUBLIC_SOCKET_HOST + ':' + process.env.NEXT_PUBLIC_SOCKET_PORT;
 const USER_SOCKET_URL = SOCKET_URL + "/player";
 const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";