New login design, added basic logic for multiplayer (WIP)

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@vueuse/core": "^10.9.0",
+        "axios": "^1.6.8",
         "phaser": "^3.80.1",
         "pinia": "^2.1.7",
         "socket.io-client": "^4.7.5",
@@ -2497,8 +2498,17 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
@@ -2746,7 +2756,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -2952,7 +2961,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -3551,6 +3559,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -3571,7 +3598,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -4387,7 +4413,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -4396,7 +4421,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -5108,6 +5132,11 @@
       "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
       "dev": true
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

package.json

@@ -15,10 +15,11 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.9.0",
+    "axios": "^1.6.8",
+    "phaser": "^3.80.1",
     "pinia": "^2.1.7",
     "socket.io-client": "^4.7.5",
-    "vue": "^3.4.21",
-    "phaser": "^3.80.1"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/App.vue

@@ -7,16 +7,24 @@
 <script setup lang="ts">
 import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
-import { onMounted, onUnmounted, type Ref, ref } from 'vue'
-import SocketioService from '@/services/socketio.service';
+import { onMounted, onUnmounted, type Ref, ref, watch } from 'vue'
+import { useSocketStore } from '@/stores/socket'
+import { storeToRefs } from 'pinia'
 
 const screen:Ref<string> = ref('login');
+const socket = useSocketStore();
 
 onMounted(() => {
-  SocketioService.setupSocketConnection();
+  // SocketioService.setupSocketConnection();
 });
 
-onUnmounted(() => {
-  SocketioService.disconnect();
+const { isAuthenticated } = storeToRefs(socket);
+
+watch(isAuthenticated, (isAuthenticated) => {
+  if (isAuthenticated) {
+    screen.value = 'game';
+  } else {
+    screen.value = 'login';
+  }
 });
 </script>

src/assets/login.scss

@@ -1,5 +1,6 @@
 #bg-img {
   height: 100vh;
+  width: 100%;
   position: absolute;
   z-index: -1;
   left: 50%;
@@ -40,7 +41,7 @@
           label {
             color: #000;
             background-color: rgba(255, 255, 255, 0.5);
-            padding: 0.25rem 0.5rem;
+            padding: 0.25rem 0.25rem;
             font-size: 0.875rem;
             border-top-left-radius: 3px;
             border-top-right-radius: 3px;
@@ -65,26 +66,22 @@
       gap: 0.5rem;
 
       .button {
-        padding: 1rem 0;
+        padding: 0.8rem 0;
         min-width: 6.25rem;
         text-align: center;
         position: relative;
         font-size: 0.80rem;
+        background-color: rgba(71, 65, 230, 0.75);
+        border: rgba(255, 255, 255, 0.35) 1px solid;
+        border-radius: 5px;
 
-        p {
+        span {
+          color: white;
           margin: auto;
         }
 
-        img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          z-index: -1;
-        }
-
         &:hover {
-          filter: brightness(60%);
+          background-color: rgba(123, 118, 255, 0.75);
           cursor: pointer;
         }
       }

src/assets/main.scss

@@ -7,6 +7,11 @@ body {
     -ms-overflow-style: none;
     scrollbar-width: none;
     background: black;
+
+    // Disable selection, might wanna comment when debugging
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
 }
 
 p, a, li, label {

src/components/Controls.vue

@@ -39,8 +39,8 @@ scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove);
 function getTile (x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y);
 
-  console.log(x,y);
-  console.log('tile', tile);
+  // console.log(x,y);
+  // console.log('tile', tile);
 
   if (!tile) {
     return undefined;

src/components/Game.vue

@@ -13,6 +13,9 @@ import 'phaser';
 import { Game, Scene } from 'phavuer'
 import World from '@/components/World.vue'
 import Pointer = Phaser.Input.Pointer
+import { useSocketStore } from '@/stores/socket'
+
+const socket = useSocketStore();
 
 const gameConfig = {
   name: 'New Quest',

src/components/World.vue

@@ -2,15 +2,38 @@
   <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="data" />
   <Controls :layer="layer" />
   <Player :layer="layer" />
+  <div v-for="player in playerList">
+    <Player :layer="layer"/>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { refObj, TilemapLayer, useScene } from 'phavuer'
 import Player from '@/components/sprites/player/Player.vue'
 import config from '@/config'
-import type { Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import Tileset = Phaser.Tilemaps.Tileset
 import Controls from '@/components/Controls.vue'
+import { useSocketStore } from '@/stores/socket'
+
+let playerList = ref([]);
+
+const socket = useSocketStore();
+
+socket.socket?.on('playerList', (players) => {
+  playerList.value = players;
+  console.log('players', players);
+  console.log('playerList', playerList.value);
+});
+
+socket.socket?.on('player_moved', (username, coords) => {
+  console.log('player_moved', username, coords);
+  const player = playerList.value.find((player: any) => player.username === username);
+  if (player) {
+    player.x = coords.x;
+    player.y = coords.y;
+  }
+});
 
 const scene = useScene()
 const mapData = new Phaser.Tilemaps.MapData({

src/components/screens/Login.vue

@@ -1,6 +1,6 @@
 <template>
 <!--  <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" />
+  <img src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
   <div class="content-wrapper">
     <h1 class="main-title">NEW QUEST</h1>
 
@@ -11,39 +11,32 @@
             <label for="username">Username</label>
             <input v-model="username" type="text" name="username" required>
           </div>
-
           <div class="form-field">
             <label for="password">Password</label>
             <input v-model="password" type="password" name="password" required>
           </div>
         </form>
       </div>
-
       <div class="row-buttons">
-        <button class="button button-1" id="submit" @click="submit">
-          <p>LOGIN</p>
-          <img src="/assets/Button_1.png" />
+        <button class="button" @click="login">
+          <span>LOGIN</span>
         </button>
-
-        <button class="button button-2" @click="register">
-          <p>REGISTER</p>
-          <img src="/assets/Button_2.png" />
+        <button class="button" @click="register">
+          <span>REGISTER</span>
         </button>
-
-        <button class="button button-3">
-          <p>CREDITS</p>
-          <img src="/assets/Button_3.png" />
+        <button class="button">
+          <span>CREDITS</span>
         </button>
       </div>
     </div>
-    
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import SocketioService from '@/services/socketio.service';
+import { useSocketStore } from '@/stores/socket'
 
+const socket = useSocketStore();
 
 // const bgm = ref('bgm');
 // const bgmStart = () => bgm.value.play();
@@ -57,15 +50,10 @@ import SocketioService from '@/services/socketio.service';
 //
 // })
 
-// on login form submit
-const submit = () => {
-  console.log('submit');
-}
-
 const username = ref('');
 const password = ref('');
 
-function register() {
+async function login() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
     alert('Please enter a valid username and password');
@@ -73,7 +61,29 @@ function register() {
   }
 
   // send register event to server
-  SocketioService.socket.emit('register', username.value, password.value);
+  const success = await socket.login(username.value, password.value);
+  if (!success) {
+    alert('Invalid username or password');
+  }
+}
+
+async function register() {
+  // check if username and password are valid
+  if (username.value === '' || password.value === '') {
+    alert('Please enter a valid username and password');
+    return;
+  }
+
+  // send register event to server
+  const success = await socket.register(username.value, password.value);
+
+  if (!success) {
+    alert('Username already exists');
+  }
+
+  if (success) {
+    alert('User registered successfully');
+  }
 }
 </script>
 

src/components/sprites/player/Player.vue

@@ -6,9 +6,15 @@
 import { Sprite, useScene } from 'phavuer'
 import { type Ref, ref } from 'vue'
 import config from '@/config'
+import { useSocketStore } from '@/stores/socket'
+
+const socket = useSocketStore();
+
+socket.socket?.emit('joinRoom', 'game');
 
 const props = defineProps({
-  layer: Phaser.Tilemaps.TilemapLayer
+  layer: Phaser.Tilemaps.TilemapLayer,
+  player: Object
 })
 
 const scene = useScene()
@@ -16,6 +22,11 @@ const pointer_tile = ref(undefined);
 const x: Ref<number> = ref(0);
 const y: Ref<number> = ref(0);
 
+if (props.player) {
+  x.value = props.player.x;
+  y.value = props.player.y;
+}
+
 function onPointerClick(pointer: Phaser.Input.Pointer) {
   /**
    * @TODO : Check if player was dragging, if so, don't move player

src/services/socketio.service.ts

@@ -1,25 +0,0 @@
-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);
-  }
-
-  disconnect(): void {
-    if (this.socket) {
-      this.socket.disconnect();
-    }
-  }
-
-  registerAccount(account: string): void {
-    if (this.socket) {
-      this.socket.emit('register', account);
-    }
-  }
-}
-
-export default new SocketioService();

src/stores/socket.ts

@@ -0,0 +1,66 @@
+import { defineStore } from 'pinia';
+import { io, Socket } from 'socket.io-client';
+import config from '@/config';
+import axios from 'axios';
+
+export const useSocketStore = defineStore('socket', {
+  state: () => ({
+    isAuthenticated: false,
+    socket: null as Socket | null,
+  }),
+
+  actions: {
+    async register(username: string, password: string) {
+      if ( this.isAuthenticated ) return console.log('User already authenticated');
+
+      try {
+        const response = await axios.post(`${config.server_endpoint}/register`, { username, password });
+        console.log(response.data);
+        return true;
+      } catch (error) {
+        console.error('Error registering user:', error);
+        return false;
+      }
+    },
+
+    async login(username: string, password: string) {
+      if ( this.isAuthenticated ) return console.log('User already authenticated');
+
+      try {
+        const response = await axios.post(`${config.server_endpoint}/login`, { username, password });
+        if (response.status === 200) {
+          this.isAuthenticated = true;
+          this.setupSocketConnection(username, password);
+          return true;
+        }
+      } catch (error) {
+        console.error('Login failed:', error);
+        return false;
+      }
+    },
+
+    setupSocketConnection(username: string, password: string) {
+      this.socket = io(config.server_endpoint as string, {
+        query: { username, password },
+        transports: ['websocket']
+      });
+
+      this.socket.on('connect', () => {
+        console.log('Socket connected!');
+      });
+
+      this.socket.on('message', (message) => {
+        console.log('Received message:', message);
+      });
+
+      // Handle more socket events as needed
+    },
+
+    disconnectSocket() {
+      if (this.socket) {
+        this.socket.disconnect();
+        this.socket = null;
+      }
+    }
+  }
+});