Removed unused deps, added new ones, created a few types and moved some files

pac-man-board-game/ClientApp/package-lock.json

@@ -8,32 +8,22 @@
       "name": "pac_man_board_game",
       "version": "0.1-Testing",
       "dependencies": {
-        "jquery": "^3.7.0",
+        "@headlessui/react": "^1.7.14",
+        "@heroicons/react": "^2.0.18",
         "merge": "^2.1.1",
         "oidc-client": "^1.11.5",
         "process": "^0.11.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.9.0",
-        "rimraf": "^3.0.2",
         "web-vitals": "^2.1.4",
-        "workbox-background-sync": "^6.5.4",
+        "ws": "^8.13.0"
-        "workbox-broadcast-update": "^6.5.4",
-        "workbox-cacheable-response": "^6.5.4",
-        "workbox-core": "^6.5.4",
-        "workbox-expiration": "^6.5.4",
-        "workbox-google-analytics": "^6.5.4",
-        "workbox-navigation-preload": "^6.5.4",
-        "workbox-precaching": "^6.5.4",
-        "workbox-range-requests": "^6.5.4",
-        "workbox-routing": "^6.5.4",
-        "workbox-strategies": "^6.5.4",
-        "workbox-streams": "^6.5.4"
       },
       "devDependencies": {
         "@types/jest": "^29.5.1",
         "@types/react": "^18.2.6",
         "@types/react-dom": "^18.2.4",
+        "@types/ws": "^8.5.4",
         "@vitejs/plugin-react": "^4.0.0",
         "ajv": "^8.12.0",
         "autoprefixer": "^10.4.14",
@@ -2411,6 +2401,29 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.14",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.14.tgz",
+      "integrity": "sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -3052,6 +3065,15 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "node_modules/@types/ws": {
+      "version": "8.5.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
+      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.24",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
@@ -3757,7 +3779,8 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -3791,6 +3814,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3967,6 +3991,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3985,7 +4014,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/confusing-browser-globals": {
       "version": "1.0.11",
@@ -5126,7 +5156,8 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "node_modules/fsevents": {
       "version": "2.3.2",
@@ -5219,6 +5250,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -5401,11 +5433,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/idb": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
-    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -5444,6 +5471,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -5452,7 +5480,8 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "node_modules/internal-slot": {
       "version": "1.0.5",
@@ -6155,11 +6184,6 @@
         "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
-      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
-    },
     "node_modules/js-sdsl": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz",
@@ -6369,6 +6393,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -6620,6 +6645,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -6714,6 +6740,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7241,6 +7268,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -8075,111 +8103,31 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/workbox-background-sync": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz",
-      "integrity": "sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==",
-      "dependencies": {
-        "idb": "^7.0.1",
-        "workbox-core": "6.5.4"
-      }
-    },
-    "node_modules/workbox-broadcast-update": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz",
-      "integrity": "sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==",
-      "dependencies": {
-        "workbox-core": "6.5.4"
-      }
-    },
-    "node_modules/workbox-cacheable-response": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz",
-      "integrity": "sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==",
-      "dependencies": {
-        "workbox-core": "6.5.4"
-      }
-    },
-    "node_modules/workbox-core": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.5.4.tgz",
-      "integrity": "sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q=="
-    },
-    "node_modules/workbox-expiration": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.4.tgz",
-      "integrity": "sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==",
-      "dependencies": {
-        "idb": "^7.0.1",
-        "workbox-core": "6.5.4"
-      }
-    },
-    "node_modules/workbox-google-analytics": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz",
-      "integrity": "sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==",
-      "dependencies": {
-        "workbox-background-sync": "6.5.4",
-        "workbox-core": "6.5.4",
-        "workbox-routing": "6.5.4",
-        "workbox-strategies": "6.5.4"
-      }
-    },
-    "node_modules/workbox-navigation-preload": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz",
-      "integrity": "sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==",
-      "dependencies": {
-        "workbox-core": "6.5.4"
-      }
-    },
-    "node_modules/workbox-precaching": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.5.4.tgz",
-      "integrity": "sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==",
-      "dependencies": {
-        "workbox-core": "6.5.4",
-        "workbox-routing": "6.5.4",
-        "workbox-strategies": "6.5.4"
-      }
-    },
-    "node_modules/workbox-range-requests": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz",
-      "integrity": "sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==",
-      "dependencies": {
-        "workbox-core": "6.5.4"
-      }
-    },
-    "node_modules/workbox-routing": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.5.4.tgz",
-      "integrity": "sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==",
-      "dependencies": {
-        "workbox-core": "6.5.4"
-      }
-    },
-    "node_modules/workbox-strategies": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.4.tgz",
-      "integrity": "sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==",
-      "dependencies": {
-        "workbox-core": "6.5.4"
-      }
-    },
-    "node_modules/workbox-streams": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.5.4.tgz",
-      "integrity": "sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==",
-      "dependencies": {
-        "workbox-core": "6.5.4",
-        "workbox-routing": "6.5.4"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/ws": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
     },
     "node_modules/yallist": {
       "version": "3.1.1",

pac-man-board-game/ClientApp/package.json

@@ -3,32 +3,22 @@
   "version": "0.1-Testing",
   "private": true,
   "dependencies": {
-    "jquery": "^3.7.0",
+    "@headlessui/react": "^1.7.14",
+    "@heroicons/react": "^2.0.18",
     "merge": "^2.1.1",
     "oidc-client": "^1.11.5",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
-    "rimraf": "^3.0.2",
     "web-vitals": "^2.1.4",
-    "workbox-background-sync": "^6.5.4",
+    "ws": "^8.13.0"
-    "workbox-broadcast-update": "^6.5.4",
-    "workbox-cacheable-response": "^6.5.4",
-    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.5.4",
-    "workbox-google-analytics": "^6.5.4",
-    "workbox-navigation-preload": "^6.5.4",
-    "workbox-precaching": "^6.5.4",
-    "workbox-range-requests": "^6.5.4",
-    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.4",
-    "workbox-streams": "^6.5.4"
   },
   "devDependencies": {
     "@types/jest": "^29.5.1",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "@types/ws": "^8.5.4",
     "@vitejs/plugin-react": "^4.0.0",
     "ajv": "^8.12.0",
     "autoprefixer": "^10.4.14",

pac-man-board-game/ClientApp/src/App.tsx

@@ -4,7 +4,7 @@ import {Layout} from "./components/Layout";
 import AppRoutes from "./AppRoutes";
 import "./index.css";
 
-export const App = () => (
+export const App: Component = () => (
   <Layout>
     <Routes>
       {AppRoutes.map((route, index) => {

pac-man-board-game/ClientApp/src/AppRoutes.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import {Counter} from "./components/Counter";
+import {Counter} from "./pages/Counter";
-import {FetchData} from "./components/FetchData";
+import {FetchData} from "./pages/FetchData";
-import {Home} from "./components/Home";
+import {Home} from "./pages/Home";
 
 const AppRoutes = [
   {

pac-man-board-game/ClientApp/src/components/Home.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-
-export const Home = () =>
-  (
-    <div>
-      <h1 className={"debug w-fit"}>Hello, world!</h1>
-      <p className={"text-cyan-900"}>Welcome to your new single-page application, built with:</p>
-      <ul>
-        <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a
-          href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side
-          code
-        </li>
-        <li><a href="https://facebook.github.io/react/">React</a> for client-side code</li>
-      </ul>
-      <p>To help you get started, we have also set up:</p>
-      <ul>
-        <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to
-          return here.
-        </li>
-        <li><strong>Development server integration</strong>. In development mode, the development server
-          from <code>create-react-app</code> runs in the background automatically, so your client-side
-          resources are dynamically built on demand and the page refreshes when you modify any file.
-        </li>
-        <li><strong>Efficient production builds</strong>. In production mode, development-time features are
-          disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled
-          JavaScript files.
-        </li>
-      </ul>
-      <p>The <code>ClientApp</code> subdirectory is a standard React application based on
-        the <code>create-react-app</code> template. If you open a command prompt in that directory, you can
-        run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
-    </div>
-  );

pac-man-board-game/ClientApp/src/components/Layout.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import {NavMenu} from "./NavMenu";
 
-export const Layout = ({children}: { children: React.ReactNode }) => (
+export const Layout: Component<ChildProps> = ({children}) => (
-    <div>
+  <div>
-        <NavMenu/>
+    <NavMenu/>
-        <main>
+    <main>
-            {children}
+      {children}
-        </main>
+    </main>
-    </div>
+  </div>
 );

pac-man-board-game/ClientApp/src/components/NavMenu.tsx

@@ -12,7 +12,7 @@ export const NavMenu = () => {
     return (
         <header>
             <nav className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3">
-                <Link to="/">pac_man_board_game</Link>
+                <Link to="/">Pac-Man Board Game</Link>
                 <div onClick={toggleNavbar} className="mr-2"/>
                 <div className="d-sm-inline-flex flex-sm-row-reverse">
                     <ul className="navbar-nav flex-grow">

pac-man-board-game/ClientApp/src/index.tsx

@@ -3,8 +3,6 @@ import {createRoot} from 'react-dom/client';
 import {BrowserRouter} from 'react-router-dom';
 import {App} from './App';
 // @ts-ignore
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-// @ts-ignore
 import reportWebVitals from './reportWebVitals';
 
 const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
@@ -17,11 +15,6 @@ root.render(
         <App/>
     </BrowserRouter>);
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.unregister();
-
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

pac-man-board-game/ClientApp/src/pages/Counter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const Counter = () => {
+export const Counter: Component = () => {
 
   const [currentCount, setCurrentCount] = React.useState(0);
 

pac-man-board-game/ClientApp/src/pages/FetchData.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const FetchData = () => {
+export const FetchData: Component = () => {
 
   const [forecasts, setForecasts] = React.useState<any>([]);
   const [loading, setLoading] = React.useState(true);

pac-man-board-game/ClientApp/src/pages/Home.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export const Home: Component = () => (
+  <div>
+    <h1 className={"debug w-fit"}>Hello, world!</h1>
+    <p className={"text-cyan-900"}>Welcome to your new single-page application, built with:</p>
+    <ul>
+      <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a
+        href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side
+        code
+      </li>
+      <li><a href="https://facebook.github.io/react/">React</a> for client-side code</li>
+    </ul>
+    <p>To help you get started, we have also set up:</p>
+    <ul>
+      <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to
+        return here.
+      </li>
+      <li><strong>Development server integration</strong>. In development mode, the development server
+        from <code>create-react-app</code> runs in the background automatically, so your client-side
+        resources are dynamically built on demand and the page refreshes when you modify any file.
+      </li>
+      <li><strong>Efficient production builds</strong>. In production mode, development-time features are
+        disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled
+        JavaScript files.
+      </li>
+    </ul>
+    <p>The <code>ClientApp</code> subdirectory is a standard React application based on
+      the <code>create-react-app</code> template. If you open a command prompt in that directory, you can
+      run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
+  </div>
+);

pac-man-board-game/ClientApp/src/service-worker.js

@@ -1,72 +0,0 @@
-/* eslint-disable no-restricted-globals */
-
-// This service worker can be customized!
-// See https://developers.google.com/web/tools/workbox/modules
-// for the list of available Workbox modules, or add any other
-// code you'd like.
-// You can also remove this file if you'd prefer not to use a
-// service worker, and the Workbox build step will be skipped.
-
-import { clientsClaim } from 'workbox-core';
-import { ExpirationPlugin } from 'workbox-expiration';
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
-import { registerRoute } from 'workbox-routing';
-import { StaleWhileRevalidate } from 'workbox-strategies';
-
-clientsClaim();
-
-// Precache all of the assets generated by your build process.
-// Their URLs are injected into the manifest variable below.
-// This variable must be present somewhere in your service worker file,
-// even if you decide not to use precaching. See https://cra.link/PWA
-precacheAndRoute(self.__WB_MANIFEST);
-
-// Set up App Shell-style routing, so that all navigation requests
-// are fulfilled with your index.html shell. Learn more at
-// https://developers.google.com/web/fundamentals/architecture/app-shell
-const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
-registerRoute(
-  // Return false to exempt requests from being fulfilled by index.html.
-  ({ request, url }) => {
-    // If this isn't a navigation, skip.
-    if (request.mode !== 'navigate') {
-      return false;
-    } // If this is a URL that starts with /_, skip.
-
-    if (url.pathname.startsWith('/_')) {
-      return false;
-    } // If this looks like a URL for a resource, because it contains // a file extension, skip.
-
-    if (url.pathname.match(fileExtensionRegexp)) {
-      return false;
-    } // Return true to signal that we want to use the handler.
-
-    return true;
-  },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
-);
-
-// An example runtime caching route for requests that aren't handled by the
-// precache, in this case same-origin .png requests like those from in public/
-registerRoute(
-  // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
-  new StaleWhileRevalidate({
-    cacheName: 'images',
-    plugins: [
-      // Ensure that once this runtime cache reaches a maximum size the
-      // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: 50 }),
-    ],
-  })
-);
-
-// This allows the web app to trigger skipWaiting via
-// registration.waiting.postMessage({type: 'SKIP_WAITING'})
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-// Any other custom service worker logic can go here.

pac-man-board-game/ClientApp/src/serviceWorkerRegistration.js

@@ -1,137 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://cra.link/PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://cra.link/PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then((registration) => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://cra.link/PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch((error) => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then((response) => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then((registration) => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log('No internet connection found. App is running in offline mode.');
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then((registration) => {
-        registration.unregister();
-      })
-      .catch((error) => {
-        console.error(error.message);
-      });
-  }
-}

pac-man-board-game/ClientApp/src/types/props.d.ts

@@ -0,0 +1,14 @@
+type Setter<T> = React.Dispatch<React.SetStateAction<T>>;
+
+type Component<T = ComponentProps> = (props: T) => React.JSX.Element;
+
+interface ComponentProps {
+  className?: string,
+  style?: React.CSSProperties,
+  id?: string,
+  title?: string,
+}
+
+interface ChildProps extends ComponentProps {
+  children?: React.JSX.Element,
+}

pac-man-board-game/Controllers/WsController.cs

@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace pac_man_board_game.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+public class WsController : ControllerBase
+{
+    [HttpGet]
+    public void TestGet()
+    {
+        // TODO test websocket https://learn.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-7.0
+    }
+}

pac-man-board-game/Properties/launchSettings.json

@@ -8,7 +8,7 @@
     }
   },
   "profiles": {
-    "pac_man_board_game": {
+    "default": {
       "commandName": "Project",
       "launchBrowser": true,
       "applicationUrl": "https://localhost:7095;http://localhost:5164",

pac-man-board-game/pac-man-board-game.csproj

@@ -29,6 +29,12 @@
         <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
     </ItemGroup>
 
+    <ItemGroup>
+      <TypeScriptCompile Remove="ClientApp\src\components\Counter.tsx" />
+      <TypeScriptCompile Remove="ClientApp\src\components\FetchData.tsx" />
+      <TypeScriptCompile Remove="ClientApp\src\components\Home.tsx" />
+    </ItemGroup>
+
     <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
         <!-- Ensure Node.js is installed -->
         <Exec Command="node --version" ContinueOnError="true">

package.json

@@ -1,8 +0,0 @@
-{
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.0",
-    "vite": "^4.3.6",
-    "vite-plugin-svgr": "^3.2.0",
-    "vite-tsconfig-paths": "^4.2.0"
-  }
-}