noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

npm run format

Browse Source
This commit is contained in:
Dennis Postma 2024-06-02 02:35:42 +02:00
parent 8329afe897
commit 86b80f8244
28 changed files with 572 additions and 562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.json
View File

@ -3,6 +3,6 @@
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"printWidth": 300,
"trailingComma": "none"
}

33
src/App.vue
View File

@ -15,20 +15,23 @@ import Register from '@/components/screens/Register.vue'
import Characters from '@/components/screens/Characters.vue'
import Game from '@/components/Game.vue'
const screen:Ref<string> = ref('login');
const socket = useSocketStore();
const screen: Ref<string> = ref('login')
const socket = useSocketStore()
socket.$subscribe((mutation, state) => {
if (!state.connection) {
screen.value = 'login';
}
if (state.connection){
screen.value = 'characters';
if (state.character) {
screen.value = 'game';
socket.$subscribe(
(mutation, state) => {
if (!state.connection) {
screen.value = 'login'
}
}
}, { detached: true })
</script>
if (state.connection) {
screen.value = 'characters'
if (state.character) {
screen.value = 'game'
}
}
},
{ detached: true }
)
</script>

4
src/assets/scss/_variables.scss
View File

@ -2,10 +2,10 @@
$white: #fff;
$black: #000;
$purple: #4741e6;
$lilac: #7B76FF;
$lilac: #7b76ff;
$light-blue: #00c2ff;
$red: #ff0000;
$gray: #7f7f7f;
$gray-2: #696969;
$dark-gray: #454545;
$light-gray: #b1b2b5;
$light-gray: #b1b2b5;

13
src/assets/scss/login.scss
View File

@ -96,10 +96,17 @@
text-align: center;
font-size: 3rem;
color: $white;
text-shadow: -1px -1px 0 $gray, 1px -1px 0 $gray, -1px 1px 0 $gray, 1px 1px 0 $gray;
text-shadow:
-1px -1px 0 $gray,
1px -1px 0 $gray,
-1px 1px 0 $gray,
1px 1px 0 $gray;
}
p, a, li, label {
p,
a,
li,
label {
font-family: Arial, sans-serif;
color: $white;
}
@ -111,4 +118,4 @@ button {
a {
text-decoration: none;
}
}

35
src/assets/scss/main.scss
View File

@ -1,27 +1,32 @@
@import "@/assets/scss/_variables";
@import '@/assets/scss/_variables';
// Fonts
@font-face {
font-family: GentiumPlus;
src: url('@/assets/fonts/Gentium_plus.ttf');
font-family: GentiumPlus;
src: url('@/assets/fonts/Gentium_plus.ttf');
}
body {
-ms-overflow-style: none;
scrollbar-width: none;
background: $black;
margin: 0;
-ms-overflow-style: none;
scrollbar-width: none;
background: $black;
margin: 0;
// 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 */
// 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 */
}
h1, h2, h3, h4, h5, h6 {
font-family: GentiumPlus, serif;
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: GentiumPlus, serif;
}
::-webkit-scrollbar {
display: none;
}
display: none;
}

42
src/components/Controls.vue
View File

@ -7,55 +7,55 @@ import { ref } from 'vue'
import config from '@/config'
const scene = useScene()
const pointer_tile = ref(undefined);
const pointer_tile = ref(undefined)
const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer
})
const waypoint = ref({
visible: false,
x: 0,
y: 0,
y: 0
})
function onPointerMove(pointer: Phaser.Input.Pointer) {
const px = scene.cameras.main.worldView.x + pointer.x;
const py = scene.cameras.main.worldView.y + pointer.y;
const px = scene.cameras.main.worldView.x + pointer.x
const py = scene.cameras.main.worldView.y + pointer.y
pointer_tile.value = getTile(px, py, props.layer);
pointer_tile.value = getTile(px, py, props.layer)
if (pointer_tile.value) {
waypoint.value.visible = true;
waypoint.value.visible = true
// Convert tile coordinates to world coordinates
const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y);
waypoint.value.x = worldPoint.x + config.tile_size.y;
waypoint.value.y = worldPoint.y + config.tile_size.y;
const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
waypoint.value.x = worldPoint.x + config.tile_size.y
waypoint.value.y = worldPoint.y + config.tile_size.y
} else {
waypoint.value.visible = false;
waypoint.value.visible = false
}
}
scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove);
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);
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);
if (!tile) {
return undefined;
return undefined
}
return tile;
return tile
}
function getTileAt (iX: number, iY: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAt(iX, iY);
if (tile) return tile;
else return undefined;
function getTileAt(iX: number, iY: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAt(iX, iY)
if (tile) return tile
else return undefined
}
function getDepth(tile: Phaser.Tilemaps.Tile): number {
return 32;
return 32
}
</script>
</script>

40
src/components/Game.vue
View File

@ -18,7 +18,7 @@
</template>
<script setup lang="ts">
import 'phaser';
import 'phaser'
import { Game, Scene } from 'phavuer'
import World from '@/components/World.vue'
import Pointer = Phaser.Input.Pointer
@ -28,10 +28,10 @@ import Chat from '@/components/game/Chat.vue'
import Menubar from '@/components/game/Menu.vue'
import { onUnmounted } from 'vue'
const socket = useSocketStore();
const socket = useSocketStore()
onUnmounted(() => {
socket.disconnectSocket();
socket.disconnectSocket()
})
const gameConfig = {
@ -39,13 +39,13 @@ const gameConfig = {
width: window.innerWidth,
height: window.innerHeight,
type: Phaser.WEBGL,
pixelArt: true,
pixelArt: true
}
const bootGame = (game: Phaser.Game) => {
window.addEventListener('resize', () => {
game.scale.resize(window.innerWidth, window.innerHeight);
});
game.scale.resize(window.innerWidth, window.innerHeight)
})
}
const preloadScene = (scene: Phaser.Scene) => {
@ -54,19 +54,22 @@ const preloadScene = (scene: Phaser.Scene) => {
* Write logic that downloads all assets from out websocket or http server in base64 format
* Don't forget to check how intensive that operation is with sockets for performance
*/
scene.load.image('tiles', '/assets/tiles/default.png');
scene.load.image('waypoint', '/assets/waypoint.png');
scene.textures.addBase64('player', 'data:image/png;base64,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')
scene.load.image('tiles', '/assets/tiles/default.png')
scene.load.image('waypoint', '/assets/waypoint.png')
scene.textures.addBase64(
'player',
'data:image/png;base64,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'
)
}
const bootScene = (scene: Phaser.Scene) => {
// Camera drag system
let cam = scene.cameras.main;
scene.input.on("pointermove", function (pointer: Pointer) {
if (!pointer.isDown) return;
cam.scrollX -= (pointer.x - pointer.prevPosition.x) / cam.zoom;
cam.scrollY -= (pointer.y - pointer.prevPosition.y) / cam.zoom;
});
let cam = scene.cameras.main
scene.input.on('pointermove', function (pointer: Pointer) {
if (!pointer.isDown) return
cam.scrollX -= (pointer.x - pointer.prevPosition.x) / cam.zoom
cam.scrollY -= (pointer.y - pointer.prevPosition.y) / cam.zoom
})
// const grid = scene.add.grid(0, 0, window.innerWidth, window.innerHeight, 64, 32, 0, 0, 0xff0000, 0.5).setOrigin(0, 0);
//
@ -82,10 +85,11 @@ const bootScene = (scene: Phaser.Scene) => {
justify-content: center;
align-items: center;
height: 100vh;
padding:30px;
padding: 30px;
position: relative;
}
.top-ui, .bottom-ui {
.top-ui,
.bottom-ui {
display: flex;
position: absolute;
left: 0;
@ -101,4 +105,4 @@ const bootScene = (scene: Phaser.Scene) => {
bottom: 6.25rem;
height: 6.25rem;
}
</style>
</style>

42
src/components/World.vue
View File

@ -19,18 +19,18 @@ import { useZoneStore } from '@/stores/zone'
// Phavuer logic
let scene = useScene()
let tilemapLayer = ref();
let tilemapLayer = ref()
let zoneData = new Phaser.Tilemaps.MapData({
width: 10, // @TODO : get this from the server
height: 10, // @TODO : get this from the server
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D,
});
let tileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData);
let tileset: any = tileMap.addTilesetImage('default', 'tiles');
let layer: (typeof TilemapLayer|null) = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y);
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
let tileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
let tileset: any = tileMap.addTilesetImage('default', 'tiles')
let layer: typeof TilemapLayer | null = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y)
// center camera
const centerY = (tileMap.height * tileMap.tileHeight) / 2
@ -38,24 +38,28 @@ const centerX = (tileMap.width * tileMap.tileWidth) / 2
scene.cameras.main.centerOn(centerX, centerY)
// Multiplayer / server logics
const zoneStore = useZoneStore();
const socket = useSocketStore();
const zoneStore = useZoneStore()
const socket = useSocketStore()
// Watch for changes in the zoneStore and update the layer
watch (() => zoneStore.tiles, () => { // @TODO : change to tiles for when loading other maps
zoneStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
}, { deep: true })
watch(
() => zoneStore.tiles,
() => {
// @TODO : change to tiles for when loading other maps
zoneStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
},
{ deep: true }
)
// Load the zone from the server
onBeforeMount(() => {
socket.getConnection.emit('character:connect');
socket.getConnection.emit('character:zone:load');
socket.getConnection.emit('character:connect')
socket.getConnection.emit('character:zone:load')
})
// Listen for the zone event from the server and load the zone
socket.getConnection.on('character:zone:load', (data) => {
console.log('character:zone:load', data);
console.log('character:zone:load', data)
zoneStore.loadTiles(data.zone.tiles)
/**
* @TODO
@ -75,10 +79,10 @@ socket.getConnection.on('character:zone:load', (data) => {
socket.getConnection.on('player_join', (data) => {
console.log('player_join', data)
if (data.id === socket.getConnection.id) {
console.log('self');
return;
console.log('self')
return
}
zoneStore.addPlayer(data);
zoneStore.addPlayer(data)
})
socket.getConnection.on('ping', (data) => {
@ -100,4 +104,4 @@ socket.getConnection.on('ping', (data) => {
* https://github.com/itsezc/CycloneIO/blob/next/packages/client/games/HabboEngine.ts
* https://github.com/daan93/phaser-isometric-demo/tree/main
*/
</script>
</script>

16
src/components/game/Chat.vue
View File

@ -1,13 +1,11 @@
<template>
<div class="chat-wrapper">
<input placeholder="Type something..." />
<img src="/assets/icons/submit-icon.svg">
</div>
<div class="chat-wrapper">
<input placeholder="Type something..." />
<img src="/assets/icons/submit-icon.svg" />
</div>
</template>
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
@ -29,7 +27,6 @@
background-color: rgba($white, 0.85);
border: 2px solid $white;
color: black;
}
img {
@ -39,5 +36,4 @@
height: 1.875rem;
}
}
</style>
</style>

88
src/components/game/Hud.vue
View File

@ -1,54 +1,52 @@
<template>
<div class="hud-wrapper">
<div class="profile">
<img src="/assets/avatar/default/head.png">
</div>
<div class="hud">
<div class="stats"></div>
</div>
<div class="hud-wrapper">
<div class="profile">
<img src="/assets/avatar/default/head.png" />
</div>
<div class="hud">
<div class="stats"></div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.hud-wrapper {
position: relative;
.profile {
position: absolute;
left: 0;
top: 0;
width: 4rem;
height: 4rem;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 2px solid $white;
z-index: 1;
img {
width: 2rem;
position: absolute;
left: calc(50% - 1rem);
top: 50%;
transform: translateY(-50%);
}
}
.hud {
position: absolute;
left: 2rem;
top: 2rem;
width: 15rem;
height: 5rem;
background-image: url('/assets/clouds.png');
background-position: center;
background-size: cover;
// background-color: rgba(127, 127, 127, 0.7);
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
border-radius: 1rem;
border: 2px solid $white;
}
.hud-wrapper {
position: relative;
.profile {
position: absolute;
left: 0;
top: 0;
width: 4rem;
height: 4rem;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 2px solid $white;
z-index: 1;
img {
width: 2rem;
position: absolute;
left: calc(50% - 1rem);
top: 50%;
transform: translateY(-50%);
}
</style>
}
.hud {
position: absolute;
left: 2rem;
top: 2rem;
width: 15rem;
height: 5rem;
background-image: url('/assets/clouds.png');
background-position: center;
background-size: cover;
// background-color: rgba(127, 127, 127, 0.7);
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
border-radius: 1rem;
border: 2px solid $white;
}
}
</style>

190
src/components/game/Menu.vue
View File

@ -1,106 +1,104 @@
<template>
<div class="menu-wrapper">
<ul class="menu">
<li class="menu-item">
<p>Chat</p>
<a>
<img src="/assets/icons/chat.png">
</a>
</li>
<li class="menu-item">
<p>World</p>
<a>
<img src="/assets/icons/world.png">
</a>
</li>
<li class="menu-item">
<p>Users</p>
<a>
<img src="/assets/icons/users.png">
</a>
</li>
<li class="menu-item">
<p>Inventory</p>
<a>
<img src="/assets/icons/treasure-chest.png">
</a>
</li>
</ul>
</div>
<div class="menu-wrapper">
<ul class="menu">
<li class="menu-item">
<p>Chat</p>
<a>
<img src="/assets/icons/chat.png" />
</a>
</li>
<li class="menu-item">
<p>World</p>
<a>
<img src="/assets/icons/world.png" />
</a>
</li>
<li class="menu-item">
<p>Users</p>
<a>
<img src="/assets/icons/users.png" />
</a>
</li>
<li class="menu-item">
<p>Inventory</p>
<a>
<img src="/assets/icons/treasure-chest.png" />
</a>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
@import '@/assets/scss/main';
.menu-wrapper {
.menu {
list-style: none;
display: flex;
gap: 1.25rem;
.menu-wrapper {
.menu {
list-style: none;
display: flex;
gap: 1.25rem;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 3.125rem;
width: 4rem;
text-align: center;
background-color: #B1B2B5;
border: 2px solid $white;
border-radius: 1.5rem;
height: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: none;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 3.125rem;
width: 4rem;
text-align: center;
background-color: #b1b2b5;
border: 2px solid $white;
border-radius: 1.5rem;
height: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: none;
&::after {
content: '';
position: absolute;
top: 100%;
background-color: $white;
height: 0.5rem;
width: 0.875rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: calc(50% - 0.4375rem);
}
}
a {
padding: 0.5rem;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 100%;
display: block;
width: 1.875rem;
height: 1.875rem;
img {
width: inherit;
height: inherit;
}
}
&:hover {
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
-webkit-filter: drop-shadow(0px 3px 6px $black);
filter: drop-shadow(0px 3px 6px $black);
}
}
}
}
&::after {
content: '';
position: absolute;
top: 100%;
background-color: $white;
height: 0.5rem;
width: 0.875rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: calc(50% - 0.4375rem);
}
}
a {
padding: 0.5rem;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 100%;
display: block;
width: 1.875rem;
height: 1.875rem;
img {
width: inherit;
height: inherit;
}
}
&:hover {
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
-webkit-filter: drop-shadow(0px 3px 6px $black);
filter: drop-shadow(0px 3px 6px $black);
}
}
}
}
}
</style>
}
</style>

127
src/components/screens/Characters.vue
View File

@ -1,50 +1,50 @@
<template>
<div class="character-select-screen">
<div class="ui-wrapper">
<div class="characters-wrapper">
<div v-for="character in characters" :key="character.id" class="character" :class="{active: selected_character == character.id}">
<input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label :for="character.id">{{ character.name }}</label>
<div class="sprite-container">
<img src="/assets/avatar/default/base_right_down.png" />
<div class="character-select-screen">
<div class="ui-wrapper">
<div class="characters-wrapper">
<div v-for="character in characters" :key="character.id" class="character" :class="{ active: selected_character == character.id }">
<input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label :for="character.id">{{ character.name }}</label>
<div class="sprite-container">
<img src="/assets/avatar/default/base_right_down.png" />
</div>
<span>Lvl. </span>
</div>
<div class="character new-character">
<button @click="isModalOpen = true">
<img src="/assets/icons/plus-icon.svg" />
<span>Create new</span>
</button>
</div>
<span>Lvl. </span>
</div>
<div class="character new-character">
<button @click="isModalOpen = true">
<img src="/assets/icons/plus-icon.svg" />
<span>Create new</span>
</button>
<div class="buttons-wrapper">
<button v-if="selected_character" @click="select_character()">Play</button>
<!-- @TODO : Add a confirmation dialog -->
<button v-if="selected_character" @click="delete_character()">Delete</button>
</div>
</div>
<div class="buttons-wrapper">
<button v-if="selected_character" @click="select_character()">Play</button>
<!-- @TODO : Add a confirmation dialog -->
<button v-if="selected_character" @click="delete_character()">Delete</button>
</div>
</div>
</div>
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<template #modal-header>
<h2 class="modal-title">Create your character</h2>
</template>
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<template #modal-header>
<h2 class="modal-title">Create your character</h2>
</template>
<template #modal-body>
<form method="post" @submit.prevent="create" class="modal-form">
<div class="form-fields">
<label for="name">Name</label>
<input v-model="name" name="name" id="name">
</div>
<div class="submit">
<button @click="create">Create</button>
</div>
</form>
<button @click="isModalOpen = false">Cancel</button>
</template>
</Modal>
<template #modal-body>
<form method="post" @submit.prevent="create" class="modal-form">
<div class="form-fields">
<label for="name">Name</label>
<input v-model="name" name="name" id="name" />
</div>
<div class="submit">
<button @click="create">Create</button>
</div>
</form>
<button @click="isModalOpen = false">Cancel</button>
</template>
</Modal>
</template>
<script setup lang="ts">
@ -53,38 +53,38 @@ import { ref } from 'vue'
import type { Character } from '../../../env'
import Modal from '@/components/utilities/Modal.vue'
const socket = useSocketStore();
const socket = useSocketStore()
// Fetch characters
socket.getConnection.emit('character:list');
socket.getConnection.emit('character:list')
socket.getConnection.on('character:list', (data: any) => {
console.log(data);
characters.value = data;
});
console.log(data)
characters.value = data
})
// Select character logics
const characters = ref([]);
const selected_character = ref(null);
const characters = ref([])
const selected_character = ref(null)
function select_character() {
console.log(selected_character.value);
if (!selected_character.value) return;
socket.getConnection.emit('character:connect', {character_id: selected_character.value});
socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data));
console.log(selected_character.value)
if (!selected_character.value) return
socket.getConnection.emit('character:connect', { character_id: selected_character.value })
socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data))
}
// Delete character logics
function delete_character() {
if (!selected_character.value) return;
socket.getConnection.emit('character:delete', {character_id: selected_character.value});
if (!selected_character.value) return
socket.getConnection.emit('character:delete', { character_id: selected_character.value })
}
// Create character logics
const isModalOpen = ref(false);
let name: any = ref('');
const isModalOpen = ref(false)
let name: any = ref('')
function create() {
socket.getConnection.emit('character:create', { name: name.value });
name.value = '';
isModalOpen.value = false;
socket.getConnection.emit('character:create', { name: name.value })
name.value = ''
isModalOpen.value = false
}
</script>
@ -92,7 +92,7 @@ function create() {
@import '@/assets/scss/main';
.character-select-screen {
background-image: url("/assets/bglogin.png");
background-image: url('/assets/bglogin.png');
.ui-wrapper {
// vertical and vertical center
height: 100vh;
@ -104,7 +104,6 @@ function create() {
padding: 0 5rem;
&::before {
content: '';
}
.characters-wrapper {
@ -139,7 +138,6 @@ function create() {
text-align: center;
&::before {
content: '';
}
img {
width: 100px;
@ -155,7 +153,8 @@ function create() {
cursor: pointer;
}
}
&::before, &::after {
&::before,
&::after {
display: none;
}
}
@ -181,12 +180,11 @@ function create() {
}
// hide the radio buttons
input[type="radio"] {
input[type='radio'] {
opacity: 0;
height: 100%;
width: 100%;
position: absolute;
}
label {
@ -251,7 +249,4 @@ function create() {
margin: 0;
}
}
</style>
</style>

34
src/components/screens/Login.vue
View File

@ -6,11 +6,11 @@
<form method="post">
<div class="form-field">
<label for="username">Username</label>
<input id="username" v-model="username" type="text" name="username" required autofocus>
<input id="username" v-model="username" type="text" name="username" required autofocus />
</div>
<div class="form-field">
<label for="password">Password</label>
<input id="password" v-model="password" type="password" name="password" required>
<input id="password" v-model="password" type="password" name="password" required />
</div>
</form>
</div>
@ -28,10 +28,10 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useSocketStore } from '@/stores/socket.ts'
import {login, register} from '@/services/authentication.ts'
import { login, register } from '@/services/authentication.ts'
import { useNotificationStore } from '@/stores/notifications'
const bgm = ref('bgm');
const bgm = ref('bgm')
if (bgm.value.paused) {
window.addEventListener('click', () => bgm.value.play())
window.addEventListener('keydown', () => bgm.value.play())
@ -39,22 +39,22 @@ if (bgm.value.paused) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const notifications = useNotificationStore()
const socket = useSocketStore();
const username = ref('');
const password = ref('');
const socket = useSocketStore()
const username = ref('')
const password = ref('')
async function loginFunc() {
// check if username and password are valid
if (username.value === '' || password.value === '') {
notifications.addNotification({ message: 'Please enter a valid username and password' });
return;
notifications.addNotification({ message: 'Please enter a valid username and password' })
return
}
// send login event to server
const success = await login(username.value, password.value);
const success = await login(username.value, password.value)
if (!success) {
notifications.addNotification({ message: 'Invalid username or password' });
notifications.addNotification({ message: 'Invalid username or password' })
}
// if (success) {}
@ -63,15 +63,15 @@ async function loginFunc() {
async function registerFunc() {
// check if username and password are valid
if (username.value === '' || password.value === '') {
notifications.addNotification({ message: 'Please enter a valid username and password' });
return;
notifications.addNotification({ message: 'Please enter a valid username and password' })
return
}
// send register event to server
const success = await register(username.value, password.value);
const success = await register(username.value, password.value)
if (!success) {
notifications.addNotification({ message: 'Username already exists' });
notifications.addNotification({ message: 'Username already exists' })
}
// if (success) {}
@ -79,5 +79,5 @@ async function registerFunc() {
</script>
<style scoped lang="scss">
@import "@/assets/scss/login";
</style>
@import '@/assets/scss/login';
</style>

4
src/components/screens/Register.vue
View File

@ -1,3 +1 @@
<template>
</template>
<template></template>

61
src/components/sprites/Character.vue
View File

@ -11,7 +11,8 @@
fontStyle: 'bold',
strokeThickness: 8,
stroke: '#213547'
}" />
}"
/>
<Sprite ref="sprite" texture="player" :x="position.x" :y="position.y" />
</Container>
</template>
@ -22,14 +23,14 @@ import { reactive, type Ref, ref } from 'vue'
import config from '@/config'
import { useSocketStore } from '@/stores/socket'
const socket = useSocketStore();
const socket = useSocketStore()
const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer,
player: {
type: Object,
default: undefined
},
}
})
const scene = useScene()
@ -38,64 +39,64 @@ const scene = useScene()
// console.log(time, delta);
// })
const position = reactive({ x: 0, y: 0 });
const position = reactive({ x: 0, y: 0 })
if (props.player !== undefined) {
console.log('player', props.player);
position.x = props.player?.coords.x;
position.y = props.player?.coords.y;
console.log('player', props.player)
position.x = props.player?.coords.x
position.y = props.player?.coords.y
}
const pointer_tile = ref(undefined);
const pointer_tile = ref(undefined)
function onPointerClick(pointer: Phaser.Input.Pointer) {
const px = scene.cameras.main.worldView.x + pointer.x;
const py = scene.cameras.main.worldView.y + pointer.y;
const px = scene.cameras.main.worldView.x + pointer.x
const py = scene.cameras.main.worldView.y + pointer.y
pointer_tile.value = getTile(px, py, props.layer);
pointer_tile.value = getTile(px, py, props.layer)
if (pointer_tile.value) {
const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y);
position.x = worldPoint.x + config.tile_size.y;
position.y = worldPoint.y;
const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
position.x = worldPoint.x + config.tile_size.y
position.y = worldPoint.y
socket.getConnection.emit('move', { x: position.x, y: position.y });
socket.getConnection.emit('move', { x: position.x, y: position.y })
}
//Directions for player sprites + animations
if (px < 0 && py > 0) {
console.log('down left');
console.log('down left')
} else if (px < 0 && py < 0) {
console.log('top left');
console.log('top left')
} else if (px > 0 && py > 0) {
console.log('down right');
console.log('down right')
} else if (px > 0 && py < 0) {
console.log('top right');
console.log('top right')
}
}
if (!props.player) {
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick);
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
}
socket.getConnection.on('player_moved', (data: any) => {
console.log('player_moved', data);
console.log('player_moved', data)
if (data.id !== props.player?.id) {
console.log('not you');
return;
console.log('not you')
return
}
position.x = data.coords.x;
position.y = data.coords.y;
position.x = data.coords.x
position.y = data.coords.y
})
function getTile (x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y);
function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
if (!tile) {
return undefined;
return undefined
}
return tile;
return tile
}
</script>
</script>

2
src/components/sprites/MapEntity.vue
View File

@ -1 +1 @@
<template></template>
<template></template>

2
src/components/sprites/NPC.vue
View File

@ -1 +1 @@
<template></template>
<template></template>

99
src/components/utilities/Modal.vue
View File

@ -1,14 +1,14 @@
<template>
<Teleport to="body">
<div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
<div class="modal-header" @mousedown="startDrag">
<slot name="modal-header"/>
<button @click="close"><img src="/assets/icons/close-button-white.svg"></button>
<div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
<div class="modal-header" @mousedown="startDrag">
<slot name="modal-header" />
<button @click="close"><img src="/assets/icons/close-button-white.svg" /></button>
</div>
<div class="modal-body">
<slot name="modal-body" />
</div>
</div>
<div class="modal-body">
<slot name="modal-body"/>
</div>
</div>
</Teleport>
</template>
@ -20,64 +20,67 @@ const properties = defineProps({
type: Boolean,
default: false
}
});
})
watch(() => properties.isModalOpen, (value) => {
isModalOpenRef.value = value;
});
watch(
() => properties.isModalOpen,
(value) => {
isModalOpenRef.value = value
}
)
const isModalOpenRef = ref(properties.isModalOpen);
const emit = defineEmits(["modal:close", "character:create"]);
const isModalOpenRef = ref(properties.isModalOpen)
const emit = defineEmits(['modal:close', 'character:create'])
function close () {
emit('modal:close');
function close() {
emit('modal:close')
}
// make modal draggable
let startX = 0;
let startY = 0;
let initialX = 0;
let initialY = 0;
const x = ref(0);
const y = ref(0);
const isDragging = ref(false);
let startX = 0
let startY = 0
let initialX = 0
let initialY = 0
const x = ref(0)
const y = ref(0)
const isDragging = ref(false)
// set modal position center of the screen
onMounted(() => {
x.value = (window.innerWidth / 2) - 150;
y.value = (window.innerHeight / 2) - 100;
});
x.value = window.innerWidth / 2 - 150
y.value = window.innerHeight / 2 - 100
})
const startDrag = (event: MouseEvent) => {
isDragging.value = true;
startX = event.clientX;
startY = event.clientY;
initialX = x.value;
initialY = y.value;
event.preventDefault();
};
isDragging.value = true
startX = event.clientX
startY = event.clientY
initialX = x.value
initialY = y.value
event.preventDefault()
}
const drag = (event: MouseEvent) => {
if (!isDragging.value) return;
const dx = event.clientX - startX;
const dy = event.clientY - startY;
x.value = initialX + dx;
y.value = initialY + dy;
};
if (!isDragging.value) return
const dx = event.clientX - startX
const dy = event.clientY - startY
x.value = initialX + dx
y.value = initialY + dy
}
const stopDrag = () => {
isDragging.value = false;
};
isDragging.value = false
}
onMounted(() => {
addEventListener('mousemove', drag);
addEventListener('mouseup', stopDrag);
});
addEventListener('mousemove', drag)
addEventListener('mouseup', stopDrag)
})
onUnmounted(() => {
removeEventListener('mousemove', drag);
removeEventListener('mouseup', stopDrag);
});
removeEventListener('mousemove', drag)
removeEventListener('mouseup', stopDrag)
})
</script>
<style lang="scss">
@ -185,4 +188,4 @@ onUnmounted(() => {
}
}
}
</style>
</style>

14
src/components/utilities/Notifications.vue
View File

@ -1,10 +1,6 @@
<template>
<div class="notifications">
<Modal v-for="notification in notifications.getNotifications"
:key="notification.id"
:isModalOpen="true"
@modal:close="closeNotification(notification.id)"
>
<Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
<template #modal-body>
<p>{{ notification.message }}</p>
</template>
@ -30,7 +26,7 @@ function setupNotificationListener(connection: any) {
notifications.addNotification({
id: Math.random().toString(16),
message: data.message
});
})
})
}
@ -40,7 +36,9 @@ onMounted(() => {
setupNotificationListener(connection)
} else {
// Watch for changes in the socket connection
watch(() => socket.getConnection, (newConnection) => {
watch(
() => socket.getConnection,
(newConnection) => {
if (newConnection) setupNotificationListener(newConnection)
}
)
@ -53,4 +51,4 @@ onUnmounted(() => {
connection.off('notification')
}
})
</script>
</script>

16
src/engine/Map/IMap.ts
View File

@ -1,10 +1,10 @@
import Player from '../Player/Player';
import Player from '../Player/Player'
export default interface IMap {
readonly id: number;
name: string;
width: number;
height: number;
data: any;
players: Array<Player>|[];
}
readonly id: number
name: string
width: number
height: number
data: any
players: Array<Player> | []
}

60
src/engine/Map/Map.ts
View File

@ -1,37 +1,37 @@
import type IMap from '@/engine/Map/IMap';
import Player from '@/engine/Player/Player';
import type IMap from '@/engine/Map/IMap'
import Player from '@/engine/Player/Player'
export default class Map implements IMap {
id: number;
name: string;
width: number;
height: number;
data: any;
players: Array<Player>|[];
id: number
name: string
width: number
height: number
data: any
players: Array<Player> | []
constructor(id: number, name: string, width: number, height: number, data: any, players: Array<Player>|[]) {
this.id = id;
this.name = name;
this.width = width;
this.height = height;
this.data = data;
this.players = players;
}
constructor(id: number, name: string, width: number, height: number, data: any, players: Array<Player> | []) {
this.id = id
this.name = name
this.width = width
this.height = height
this.data = data
this.players = players
}
public addPlayer(player: Player) {
// @ts-ignore
this.players.push(player);
}
public addPlayer(player: Player) {
// @ts-ignore
this.players.push(player)
}
public removePlayer(player: Player) {
this.players = this.players.filter(p => p.id !== player.id);
}
public removePlayer(player: Player) {
this.players = this.players.filter((p) => p.id !== player.id)
}
public movePlayer(player: Player, x: number, y: number) {
const playerIndex = this.players.findIndex(p => p.id === player.id);
if (playerIndex !== -1) {
this.players[playerIndex].coords.x = x;
this.players[playerIndex].coords.y = y;
}
public movePlayer(player: Player, x: number, y: number) {
const playerIndex = this.players.findIndex((p) => p.id === player.id)
if (playerIndex !== -1) {
this.players[playerIndex].coords.x = x
this.players[playerIndex].coords.y = y
}
}
}
}

12
src/engine/Player/IPlayer.ts
View File

@ -1,8 +1,8 @@
export default interface IPlayer {
readonly id: number;
name: string;
readonly id: number
name: string
coords: {
x: number;
y: number;
};
}
x: number
y: number
}
}

20
src/engine/Player/Player.ts
View File

@ -1,13 +1,13 @@
import type IPlayer from '@/engine/Player/IPlayer';
import type IPlayer from '@/engine/Player/IPlayer'
export default class Player implements IPlayer {
id: number;
name: string;
coords: { x: number; y: number; };
id: number
name: string
coords: { x: number; y: number }
constructor(id: number, name: string, coords: { x: number; y: number; }) {
this.id = id;
this.name = name;
this.coords = coords;
}
}
constructor(id: number, name: string, coords: { x: number; y: number }) {
this.id = id
this.name = name
this.coords = coords
}
}

28
src/services/authentication.ts
View File

@ -1,32 +1,32 @@
import axios from 'axios';
import config from '@/config';
import { useSocketStore } from '@/stores/socket';
import axios from 'axios'
import config from '@/config'
import { useSocketStore } from '@/stores/socket'
import { useCookies } from '@vueuse/integrations/useCookies'
export async function register(username: string, password: string, socketStore = useSocketStore()) {
try {
const response = await axios.post(`${config.server_endpoint}/register`, { username, password });
const response = await axios.post(`${config.server_endpoint}/register`, { username, password })
if (response.status === 200) {
useCookies().set('token', response.data.token as string)
await socketStore.setupSocketConnection();
return true;
await socketStore.setupSocketConnection()
return true
}
} catch (error) {
console.error('Error registering user:', error);
return false;
console.error('Error registering user:', error)
return false
}
}
export async function login(username: string, password: string, socketStore = useSocketStore()) {
try {
const response = await axios.post(`${config.server_endpoint}/login`, { username, password });
const response = await axios.post(`${config.server_endpoint}/login`, { username, password })
if (response.status === 200) {
useCookies().set('token', response.data.token as string)
await socketStore.setupSocketConnection();
return true;
await socketStore.setupSocketConnection()
return true
}
} catch (error) {
console.error('Login failed:', error);
return false;
console.error('Login failed:', error)
return false
}
}
}

6
src/stores/notifications.ts
View File

@ -10,10 +10,10 @@ export const useNotificationStore: StoreDefinition = defineStore('notifications'
},
actions: {
addNotification(notification: Notification) {
this.notifications.push(notification);
this.notifications.push(notification)
},
removeNotification(id: string) {
this.notifications = this.notifications.filter((notification: Notification) => notification.id !== id);
this.notifications = this.notifications.filter((notification: Notification) => notification.id !== id)
}
}
});
})

48
src/stores/socket.ts
View File

@ -1,7 +1,7 @@
import { defineStore, type StoreDefinition } from 'pinia'
import { io, Socket } from 'socket.io-client';
import {useCookies} from '@vueuse/integrations/useCookies'
import config from '@/config';
import { io, Socket } from 'socket.io-client'
import { useCookies } from '@vueuse/integrations/useCookies'
import config from '@/config'
import type { Character, User } from '@/types'
import { useNotificationStore } from '@/stores/notifications'
@ -9,58 +9,58 @@ export const useSocketStore: StoreDefinition = defineStore('socket', {
state: () => ({
connection: null as Socket | null,
user: null as User | null,
character: null as Character | null,
character: null as Character | null
}),
getters: {
getConnection: (state: any) => state.connection as Socket,
getUser: (state: any) => state.user as User,
getCharacter: (state: any) => state.character as Character,
getCharacter: (state: any) => state.character as Character
},
actions: {
setupSocketConnection() {
this.connection = io(config.server_endpoint, {
withCredentials: true,
transports: ['websocket'],
reconnectionAttempts: 5,
});
reconnectionAttempts: 5
})
// Let the server know the user is logged in
this.connection.emit('login');
this.connection.emit('login')
// set user
this.connection.on('login', (user: User) => {
this.setUser(user);
});
this.setUser(user)
})
// When we can't reconnect, disconnect
this.connection.on('reconnect_failed', () => {
console.log("Reconnect failed")
this.disconnectSocket();
console.log('Reconnect failed')
this.disconnectSocket()
})
},
disconnectSocket() {
if (!this.connection) return;
if (!this.connection) return
this.connection.disconnect();
this.connection = null;
this.connection.disconnect()
this.connection = null
this.user = null;
this.character = null;
this.user = null
this.character = null
useCookies().remove('token');
useCookies().remove('token')
},
setUser(user: User|null) {
this.user = user;
setUser(user: User | null) {
this.user = user
},
setCharacter(character: Character|null) {
this.character = character;
setCharacter(character: Character | null) {
this.character = character
}
}
});
})
/**
* Resources:
* https://www.dynetisgames.com/2017/03/06/how-to-make-a-multiplayer-online-game-with-phaser-socket-io-and-node-js/
* https://runthatline.com/pinia-watch-state-getters-inside-vue-components/
* https://pinia.vuejs.org/
*/
*/

16
src/stores/zone.ts
View File

@ -1,4 +1,4 @@
import { defineStore } from 'pinia';
import { defineStore } from 'pinia'
export const useZoneStore = defineStore('zone', {
state: () => ({
@ -13,18 +13,18 @@ export const useZoneStore = defineStore('zone', {
},
actions: {
loadTiles(tiles: any) {
this.tiles = tiles;
this.loaded = true;
this.tiles = tiles
this.loaded = true
},
addPlayers(player: any) {
this.players = player;
this.players = player
},
addPlayer(player: any) {
this.players[player.id] = player;
console.log('Player added:', player);
this.players[player.id] = player
console.log('Player added:', player)
},
removePlayer(playerId: any) {
delete this.players[playerId];
delete this.players[playerId]
}
}
});
})

80
src/types.ts
View File

@ -1,49 +1,49 @@
export type Notification = {
id: string;
message: string;
};
id: string
message: string
}
export type User = {
id: number;
username: string;
password: string;
characters: Character[];
};
id: number
username: string
password: string
characters: Character[]
}
export type Character = {
id: number;
userId: number;
user: User;
name: string;
hitpoints: number;
mana: number;
level: number;
experience: number;
role: string;
position_x: number;
position_y: number;
rotation: number;
zoneId: number;
zone: Zone;
chats: Chat[];
};
id: number
userId: number
user: User
name: string
hitpoints: number
mana: number
level: number
experience: number
role: string
position_x: number
position_y: number
rotation: number
zoneId: number
zone: Zone
chats: Chat[]
}
export type Zone = {
id: number;
name: string;
width: number;
height: number;
tiles: Record<string, any>;
characters: Character[];
chats: Chat[];
};
id: number
name: string
width: number
height: number
tiles: Record<string, any>
characters: Character[]
chats: Chat[]
}
export type Chat = {
id: number;
characterId: number;
character: Character;
zoneId: number;
zone: Zone;
message: string;
createdAt: Date;
};
id: number
characterId: number
character: Character
zoneId: number
zone: Zone
message: string
createdAt: Date
}