fix: improve npm scripts and fix localhost detection

.github/workflows/main.yml

@@ -15,10 +15,7 @@ jobs:
       - name: Install and Build
         run: |
           npm ci
-          npx tsc
-          mkdir dist
-          mv *.js dist/
-          mv *.html dist/
+          npm run build
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-*.js
+dist/
+

README.md

@@ -2,20 +2,16 @@
 
 Two players tic-tac-joe implemented with an HTML canvas and websockets
 
-![](screenshot.png)
+![Screenshot](screenshot.png)
 
 ## How to run
 
-```
-// compilation of .mts files in watch mode
-$ tsc -w
-
+```shell
+$ npm run build:watch
 // serve static files (localhost:8000)
-$ python serve.py
-
+$ npm run serve
 // run server
-$ node server.mjs
+$ npm run start:watch
 ```
 
-Go to http://localhost:8000
-
+Go to [](http://localhost:8000)

client.ts

@@ -4,10 +4,9 @@ const ANIMATE_DURATION = 500; // ms
 const GRID_PADDING = 10;
 const MESSAGE_PADDING = 20;
 
-let address = "ws://localhost:1234";
-if (window.location.hostname !== "localhost") {
-    address = "wss://tic-tac-toe-ws-production.up.railway.app";
-}
+const address = ["127.0.0.1", "localhost"].includes(window.location.hostname)
+    ? "ws://localhost:1234"
+    : "wss://tic-tac-toe-ws-production.up.railway.app";
 const ws = new WebSocket(address);
 
 interface Point {

common.ts

@@ -1,5 +1,3 @@
-export type MessageKind = "click" | "hello" | "update" | "endgame" | "reset" | "spectate";
-
 export type Message =
   | { kind: "click", data: Click }
   | { kind: "hello", data: Hello }

package.json

@@ -5,8 +5,11 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-      "build": "tsc",
-      "start": "node server.js"
+    "build": "tsc && cp index.html dist/",
+    "build:watch": "tsc --watch && cp index.html dist/",
+    "start": "node dist/server.js",
+    "start:watch": "node --watch dist/server.js",
+    "serve": "python serve.py"
   },
   "author": "",
   "license": "ISC",

serve.py

@@ -1,11 +1,7 @@
 import http.server
+from functools import partial
 
-HandlerClass = http.server.SimpleHTTPRequestHandler
-
-# Patch in the correct extensions
-HandlerClass.extensions_map['.js'] = 'text/javascript'
-HandlerClass.extensions_map['.mjs'] = 'text/javascript'
-
+HandlerClass = partial(http.server.SimpleHTTPRequestHandler, directory="dist/")
 # Run the server (like `python -m http.server` does)
 http.server.test(HandlerClass, port=8000)
 

tsconfig.json

@@ -55,7 +55,7 @@
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
@@ -104,5 +104,7 @@
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["node_modules", "dist"]
 }