New login design, added basic logic for multiplayer (WIP)
This commit is contained in:
@ -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;
|
||||
|
@ -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',
|
||||
|
@ -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({
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user