Merge pull request #11 from NielsOverkamp/make_port_and_host_variable

Modify backend to take Host & Port from envvars and frontend to set them depending on location and NODE_ENV

frontend/keezen-frontend/src/css/lobby.css

@@ -3,7 +3,7 @@
     height: 50px;
     border-radius: 50%;
     border: #1d2124 2px solid;
-    opacity: 50%;
+    opacity: 0.5;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 19pt;
@@ -12,7 +12,7 @@
 }
 
 .color-pick.mine {
-    opacity: 100%;
+    opacity: 1;
 }
 
 .color-pick.mine:before,
@@ -21,7 +21,7 @@
 }
 
 .color-pick.selectable:hover {
-    opacity: 100%;
+    opacity: 1;
 }
 
 .color-pick.selectable:hover:before {

frontend/keezen-frontend/src/util/useWebsocket.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
 export const WebsocketStatus = {
     CONNECTING: "CONNECTING",
@@ -9,9 +9,13 @@ export const WebsocketStatus = {
     DISCONNECTED: "DISCONNECTED",
 }
 
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+
 const RETRY_TIMEOUT = 1000;
-const ADDRESS = "127.0.0.1";
-const PORT = 6789;
+const ADDRESS = window.location.hostname;
+const PORT = IS_PRODUCTION ? 443 : 6789;
+const PROTOCOL = IS_PRODUCTION ? "wss" : "ws";
+const PATH = IS_PRODUCTION ? "/websocket" : "/";
 
 export default function useWebsocket() {
     const [status, setStatus] = useState(WebsocketStatus.DISCONNECTED);
@@ -25,7 +29,7 @@ export default function useWebsocket() {
             return
         }
 
-        const ws = new WebSocket(`ws://${ADDRESS}:${PORT}`);
+        const ws = new WebSocket(`${PROTOCOL}://${ADDRESS}:${PORT}${PATH}`);
         ws_ref.current = ws;
         setStatus(WebsocketStatus.CONNECTING);
 

webserver.py

@@ -11,12 +11,13 @@ import random
 import websockets
 from http import HTTPStatus
 
-
-from color import Color
 from option import OptionCode, Option
 from game import Game
 from player import ErrorCode, StateCode, Player
 
+HOST = os.environ.get("KEEZEN_HOST") or "localhost"
+PORT = os.environ.get("KEEZEN_PORT") or 6789
+
 logging.basicConfig()
 
 games = dict()   # code -> game
@@ -151,9 +152,9 @@ if __name__ == "__main__":
 
     static_handler = functools.partial(process_request, os.path.join(os.getcwd(), 'ui'))
 
-    start_server = websockets.serve(handler, "localhost", 6789, process_request=static_handler)
+    start_server = websockets.serve(handler, HOST, PORT, process_request=static_handler)
 
-    print("Running server at http://127.0.0.1:6789/")
+    print(f"Running server at {HOST}:{PORT}")
 
     asyncio.get_event_loop().run_until_complete(start_server)
     asyncio.get_event_loop().run_forever()