updated packages, updated websocket to socket.io, moved login styling to its own scss file

package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@vueuse/core": "^10.9.0",
+        "phaser": "^3.80.1",
         "pinia": "^2.1.7",
+        "socket.io-client": "^4.7.5",
         "vue": "^3.4.21"
       },
       "devDependencies": {
@@ -17,7 +19,6 @@
         "@tsconfig/node20": "^20.1.2",
         "@types/jsdom": "^21.1.6",
         "@types/node": "^20.11.28",
-        "@types/ws": "^8.5.10",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/eslint-config-typescript": "^12.0.0",
@@ -28,7 +29,6 @@
         "eslint-plugin-vue": "^9.17.0",
         "jsdom": "^24.0.0",
         "npm-run-all2": "^6.1.2",
-        "phaser": "^3.80.1",
         "phaser3-rex-plugins": "^1.80.2",
         "phavuer": "^0.15.7",
         "prettier": "^3.0.3",
@@ -37,8 +37,7 @@
         "vite": "^5.1.6",
         "vite-plugin-vue-devtools": "^7.0.18",
         "vitest": "^1.4.0",
-        "vue-tsc": "^2.0.6",
+        "vue-tsc": "^2.0.6"
-        "ws": "^8.17.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1598,6 +1597,11 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+    },
     "node_modules/@tsconfig/node20": {
       "version": "20.1.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node20/-/node20-20.1.4.tgz",
@@ -1653,15 +1657,6 @@
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
       "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
-    "node_modules/@types/ws": {
-      "version": "8.5.10",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
-      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -2877,7 +2872,6 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -3056,6 +3050,46 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/engine.io-client": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
+      "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.11.0",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "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/engine.io-parser": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
+      "integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -3371,8 +3405,7 @@
     "node_modules/eventemitter3": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
-      "dev": true
     },
     "node_modules/execa": {
       "version": "8.0.1",
@@ -4437,8 +4470,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-      "dev": true
     },
     "node_modules/muggle-string": {
       "version": "0.4.1",
@@ -4843,7 +4875,6 @@
       "version": "3.80.1",
       "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.80.1.tgz",
       "integrity": "sha512-VQGAWoDOkEpAWYkI+PUADv5Ql+SM0xpLuAMBJHz9tBcOLqjJ2wd8bUhxJgOqclQlLTg97NmMd9MhS75w16x1Cw==",
-      "dev": true,
       "dependencies": {
         "eventemitter3": "^5.0.1"
       }
@@ -5458,6 +5489,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.7.5",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
+      "integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -6435,6 +6492,14 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -16,14 +16,15 @@
   "dependencies": {
     "@vueuse/core": "^10.9.0",
     "pinia": "^2.1.7",
-    "vue": "^3.4.21"
+    "socket.io-client": "^4.7.5",
+    "vue": "^3.4.21",
+    "phaser": "^3.80.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.11.28",
-    "@types/ws": "^8.5.10",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -34,7 +35,6 @@
     "eslint-plugin-vue": "^9.17.0",
     "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.2",
-    "phaser": "^3.80.1",
     "phaser3-rex-plugins": "^1.80.2",
     "phavuer": "^0.15.7",
     "prettier": "^3.0.3",
@@ -43,7 +43,6 @@
     "vite": "^5.1.6",
     "vite-plugin-vue-devtools": "^7.0.18",
     "vitest": "^1.4.0",
-    "vue-tsc": "^2.0.6",
+    "vue-tsc": "^2.0.6"
-    "ws": "^8.17.0"
   }
 }

src/App.vue

@@ -1,20 +1,18 @@
 <template>
-  <Login />
+  <Login v-if="screen === 'login'" />
+<!--  <Register v-if="screen === 'register'" />-->
+  <Game v-if="screen === 'game'" />
 </template>
 
 <script setup lang="ts">
 import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
-import { useWebSocket } from '@vueuse/core'
 import config from '@/config'
+import { onMounted, type Ref, ref } from 'vue'
+const screen:Ref<string> = ref('login');
 
-const { status, data, close } = useWebSocket(config.websocket_url, {
+import SocketioService from '@/services/socketio.service';
-  autoReconnect: {
+onMounted(() => {
-    retries: 3,
+  SocketioService.setupSocketConnection();
-    delay: 1000,
+});
-    onFailed() {
-      alert('Failed to connect WebSocket after 3 retries')
-    },
-  },
-})
 </script>

src/assets/login.scss

@@ -0,0 +1,102 @@
+#bg-img {
+  height: 100vh;
+  position: absolute;
+  z-index: -1;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.content-wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+
+  .login-form {
+    position: absolute;
+    bottom: 9rem;
+    width: 100%;
+
+    form {
+      display: grid;
+      gap: 1.5rem;
+      width: inherit;
+
+      .form-field {
+        display: flex;
+        flex-direction: column;
+        background-color: rgba(255, 255, 255, 0.5);
+        border-radius: 3px;
+        width: 30%;
+        margin: 0 auto;
+
+        label {
+          color: #000;
+          background-color: rgba(255, 255, 255, 0.5);
+          padding: 0.25rem 0.5rem;
+        }
+        input {
+          background-color: transparent;
+          border: none;
+          padding: 0.5rem 0.25rem;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
+  .row-buttons {
+    display: flex;
+    gap: 0.5rem;
+    position: absolute;
+    bottom: 5rem;
+
+    .button {
+      padding: 1.2rem 0;
+      min-width: 6rem;
+      text-align: center;
+      position: relative;
+      font-size: 12px;
+
+      &.button-1 {
+        background-image: url('/assets/Button_1.png');
+      }
+      &.button-2 {
+        background-image: url('/assets/Button_2.png');
+      }
+      &.button-3 {
+        background-image: url('/assets/Button_3.png');
+      }
+      &.button-4 {
+        background-image: url('/assets/Button_4.png');
+      }
+
+      background-color: transparent;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      border: none;
+      cursor: pointer;
+      overflow: hidden;
+      outline: none;
+      color:white;
+
+      &:hover {
+        filter: brightness(60%);
+      }
+    }
+  }
+}
+
+.main-title {
+  position: absolute;
+  text-align: center;
+  top: 40%;
+  font-size: 3rem;
+  color: #FFF;
+  text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
+}

src/components/screens/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
+<!--  <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>-->
   <img src="/assets/Leaf_BG_standalone.png" id="bg-img" alt="New Quest login background" />
   <div class="content-wrapper">
     <h1 class="main-title">NEW QUEST</h1>
@@ -18,21 +18,15 @@
     </div>
 
     <div class="row-buttons">
-      <a class="button button-1" href="/" id="submit">
+      <button class="button button-1" id="submit">
         LOGIN
-      </a>
+      </button>
-
+      <button class="button button-2">
-      <a class="button button-2" href="/">
         REGISTER
-      </a>
+      </button>
-
+      <button class="button button-3">
-      <a class="button button-3" href="/">
         CREDITS
-      </a>
+      </button>
-
-      <a class="button button-4" href="/">
-        EXIT
-      </a>
     </div>
   </div>
 </template>
@@ -40,113 +34,20 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 
-const bgm = ref('bgm');
-const bgmStart = () => bgm.value.play();
 
-onMounted(() => {
+// const bgm = ref('bgm');
-  // check if bgm is playing already and do nothing
+// const bgmStart = () => bgm.value.play();
-  if (bgm.value.paused) {
-    window.addEventListener('click', () => bgm.value.play())
-    window.addEventListener('keydown', () => bgm.value.play())
-  }
 
-})
+// onMounted(() => {
+//   // check if bgm is playing already and do nothing
+//   if (bgm.value.paused) {
+//     window.addEventListener('click', () => bgm.value.play())
+//     window.addEventListener('keydown', () => bgm.value.play())
+//   }
+//
+// })
 </script>
 
 <style scoped lang="scss">
-#bg-img {
+@import "@/assets/login";
-  height: 100vh;
-  position: absolute;
-  z-index: -1;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-.content-wrapper {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  position: relative;
-
-  .login-form {
-    position: absolute;
-    bottom: 7rem;
-    width: 100%;
-
-    form {
-      display: grid;
-      gap: 1.5rem;
-      width: inherit;
-
-      .form-field {
-        display: flex;
-        flex-direction: column;
-        background-color: rgba(255, 255, 255, 0.5);
-        border-radius: 3px;
-        width: 30%;
-        margin: 0 auto;
-
-        label {
-          color: #000;
-          background-color: rgba(255, 255, 255, 0.5);
-          padding: 0.25rem 0.5rem;
-        }
-        input {
-          background-color: transparent;
-          border: none;
-          padding: 0.5rem 0.25rem;
-          font-size: 16px;
-        }
-      }
-    }
-  }
-
-  .row-buttons {
-    display: flex;
-    gap: 0.5rem;
-    position: absolute;
-    bottom: 2.5rem;
-
-    .button {
-      padding: 1.2rem 0;
-      min-width: 8.2rem;
-      text-align: center;
-      position: relative;
-
-      &.button-1 {
-        background-image: url('/assets/Button_1.png');
-      }
-      &.button-2 {
-        background-image: url('/assets/Button_2.png');
-      }
-      &.button-3 {
-        background-image: url('/assets/Button_3.png');
-      }
-      &.button-4 {
-        background-image: url('/assets/Button_4.png');
-      }
-      background-position: center;
-      background-size: 100%;
-      background-repeat: no-repeat;
-
-      &:hover {
-        filter: brightness(60%);
-      }
-    }
-  }
-}
-
-.main-title {
-  position: absolute;
-  text-align: center;
-  top: 40%;
-  font-size: 3rem;
-  color: #FFF;
-  text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
-}
-
 </style>

src/components/sprites/player/Player.vue

@@ -25,7 +25,6 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
 
   pointer_tile.value = getTile(px, py, props.layer);
   if (pointer_tile.value) {
-
     // Convert tile coordinates to world coordinates
     const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y);
     x.value = worldPoint.x + config.tile_size.y;

src/config.ts

@@ -1,6 +1,6 @@
 export default {
   name: 'New Quest',
-  websocket_url: 'ws://localhost:3000',
+  server_endpoint: 'http://localhost:3000',
   development: true,
   width: 960,
   height: 540,

src/services/socketio.service.ts

@@ -0,0 +1,13 @@
+import { io, Socket } from 'socket.io-client'
+import config from '@/config';
+
+class SocketioService {
+  socket: Socket | undefined;
+  constructor() {}
+
+  setupSocketConnection(): void {
+    this.socket = io(config.server_endpoint as string);
+  }
+}
+
+export default new SocketioService();