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

This commit is contained in:
2024-05-04 00:27:55 +02:00
parent f63cc93454
commit b16863a363
18 changed files with 206 additions and 78 deletions

View File

@ -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;

View File

@ -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',

View File

@ -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({

View File

@ -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>

View File

@ -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