From 8cd0e9254a68972c6446584e4f7731a7077be767 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 28 May 2024 23:46:55 +0200
Subject: [PATCH] Worked on creating new characters

---
 src/components/World.vue                      | 14 ++++-----
 src/components/screens/Characters.vue         | 30 ++++++++++++-------
 src/components/screens/Login.vue              |  2 +-
 .../screens/partials/characters/Create.vue    | 28 +++++++++++++++++
 src/components/sprites/player/Player.vue      |  5 ++--
 .../{authService.ts => authentication.ts}     |  0
 src/stores/socket.ts                          |  2 +-
 src/types/TCharacter.ts                       |  9 ++++++
 src/types/{user.ts => TUser.ts}               |  4 +--
 9 files changed, 70 insertions(+), 24 deletions(-)
 create mode 100644 src/components/screens/partials/characters/Create.vue
 rename src/services/{authService.ts => authentication.ts} (100%)
 create mode 100644 src/types/TCharacter.ts
 rename src/types/{user.ts => TUser.ts} (51%)

diff --git a/src/components/World.vue b/src/components/World.vue
index 4ea3ff7..17e1056 100644
--- a/src/components/World.vue
+++ b/src/components/World.vue
@@ -49,12 +49,12 @@ watch (() => zoneStore.tiles, () => { // @TODO : change to tiles for when loadin
 
 // Load the zone from the server
 onBeforeMount(() => {
-  socket.connection?.emit('character:connect');
-  socket.connection?.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.connection?.on('character:zone:load', (data) => {
+socket.getConnection.on('character:zone:load', (data) => {
   console.log('character:zone:load', data);
   zoneStore.loadTiles(data.zone.tiles)
   /**
@@ -66,22 +66,22 @@ socket.connection?.on('character:zone:load', (data) => {
   // console.log(data.players[1]); // key is user id
   //
   // // remove self from the players list
-  // delete data.players[socket.connection?.id];
+  // delete data.players[socket.getConnection.id];
   //
   // zoneStore.addPlayers(data.players);
 })
 
 // Listen for player join events
-socket.connection?.on('player_join', (data) => {
+socket.getConnection.on('player_join', (data) => {
   console.log('player_join', data)
-  if (data.id === socket.connection?.id) {
+  if (data.id === socket.getConnection.id) {
     console.log('self');
     return;
   }
   zoneStore.addPlayer(data);
 })
 
-socket.connection?.on('ping', (data) => {
+socket.getConnection.on('ping', (data) => {
   console.log('ping', data)
 })
 
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index d6ef903..0c7337a 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -1,32 +1,42 @@
 <template>
 <div>
-  <!-- radio controls with characters that belongs to user in plain html -->
   <div id="characters-wrapper">
    <div id="characters">
      <h1>Select your character</h1>
      <div>
-       <input type="radio" id="character1" name="character" value="character1">
-       <label for="character1">
-         Weed
-       </label>
-       <input type="radio" id="character2" name="character" value="character2">
-       <label for="character2">
-         Ethereal
-       </label>
+       <div v-for="character in characters" :key="character.id">
+          <input type="radio" :id="character.id" name="character" :value="character.id">
+          <label :for="character.id">
+            <img src="/assets/avatar/default/base_right_down.png" />
+            {{ character.name }}
+          </label>
+       </div>
      </div>
 
      <button>Play</button>
+
+     <hr>
+     <Create />
    </div>
   </div>
 
+
 </div>
 </template>
 
 <script setup lang="ts">
 import { useSocketStore } from '@/stores/socket'
+import { ref } from 'vue'
+import Create from '@/components/screens/partials/characters/Create.vue'
 
 const socket = useSocketStore();
-socket.connection.emit('characters:get');
+const characters = ref([]);
+socket.getConnection.emit('character:list');
+
+socket.getConnection.on('character:list', (data: any) => {
+  console.log(data);
+  characters.value = data;
+});
 </script>
 
 <style lang="scss">
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index b7b0f69..bae9e28 100644
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@@ -28,7 +28,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useSocketStore } from '@/stores/socket.ts'
-import {login, register} from '@/services/authService'
+import {login, register} from '@/services/authentication.ts'
 import { useCookies } from '@vueuse/integrations/useCookies'
 
 const bgm = ref('bgm');
diff --git a/src/components/screens/partials/characters/Create.vue b/src/components/screens/partials/characters/Create.vue
new file mode 100644
index 0000000..989d325
--- /dev/null
+++ b/src/components/screens/partials/characters/Create.vue
@@ -0,0 +1,28 @@
+<template>
+<form method="post" @submit.prevent="create">
+  <h1>Create your character</h1>
+  <div>
+    <label for="name">Name</label>
+    <input v-model="name" type="text" name="name" id="name">
+  </div>
+  <div>
+    <button>Create</button>
+  </div>
+</form>
+</template>
+
+<script setup lang="ts">
+import { useSocketStore } from '@/stores/socket'
+import { ref, defineEmits } from 'vue'
+
+const socket = useSocketStore();
+
+// const emit = defineEmits(['character:create']);
+let name: any = ref('');
+
+function create() {
+  socket.getConnection.emit('character:create', { name: name.value });
+  // emit('character:create');
+  name.value = '';
+}
+</script>
\ No newline at end of file
diff --git a/src/components/sprites/player/Player.vue b/src/components/sprites/player/Player.vue
index 8945cbe..46f3044 100644
--- a/src/components/sprites/player/Player.vue
+++ b/src/components/sprites/player/Player.vue
@@ -44,7 +44,7 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
     position.x = worldPoint.x + config.tile_size.y;
     position.y = worldPoint.y;
 
-    socket.connection?.emit('move', { x: position.x, y: position.y });
+    socket.getConnection.emit('move', { x: position.x, y: position.y });
   }
 
   //Directions for player sprites + animations
@@ -57,14 +57,13 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
   } else if (px > 0 && py < 0) {
     console.log('top right');
   }
-
 }
 
 if (!props.player) {
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick);
 }
 
-socket.connection?.on('player_moved', (data) => {
+socket.getConnection.on('player_moved', (data: any) => {
   console.log('player_moved', data);
 
   if (data.id !== props.player?.id) {
diff --git a/src/services/authService.ts b/src/services/authentication.ts
similarity index 100%
rename from src/services/authService.ts
rename to src/services/authentication.ts
diff --git a/src/stores/socket.ts b/src/stores/socket.ts
index c85df0b..153b586 100644
--- a/src/stores/socket.ts
+++ b/src/stores/socket.ts
@@ -9,7 +9,7 @@ export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
     character: null as any,
   }),
   getters: {
-    getConnection: (state: any) => state.connection,
+    getConnection: (state: any) => state.connection as Socket,
     getCharacter: (state: any) => state.character,
   },
   actions: {
diff --git a/src/types/TCharacter.ts b/src/types/TCharacter.ts
new file mode 100644
index 0000000..3cfb2ef
--- /dev/null
+++ b/src/types/TCharacter.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+const CharacterObject = z.object({
+  name: z.string(),
+});
+
+type TCharacter = z.infer<typeof CharacterObject>;
+
+export { CharacterObject, type TCharacter };
\ No newline at end of file
diff --git a/src/types/user.ts b/src/types/TUser.ts
similarity index 51%
rename from src/types/user.ts
rename to src/types/TUser.ts
index 91bec0b..f95ed88 100644
--- a/src/types/user.ts
+++ b/src/types/TUser.ts
@@ -4,6 +4,6 @@ const UserObject = z.object({
   username: z.string(),
 });
 
-type UserType = z.infer<typeof UserObject>;
+type TUser = z.infer<typeof UserObject>;
 
-export { UserObject, type UserType };
\ No newline at end of file
+export { UserObject, type TUser };
\ No newline at end of file