worked on character selection

src/assets/login.scss

@@ -96,3 +96,17 @@
   color: #FFF;
   text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
 }
+
+p, a, li, label {
+  font-family: Arial, sans-serif;
+  color: #FFF;
+}
+
+button {
+  background-color: transparent;
+  border: none;
+}
+
+a {
+  text-decoration: none;
+}

src/assets/main.scss

@@ -14,20 +14,6 @@ body {
     user-select: none; /* Standard syntax */
 }
 
-p, a, li, label {
-    font-family: Arial, sans-serif;
-    color: #FFF;
-}
-
-button {
-    background-color: transparent;
-    border: none;
-}
-
-a {
-    text-decoration: none;
-}
-
 h1, h2, h3, h4, h5, h6 {
     font-family: GentiumPlus, serif;
 }

src/components/World.vue

@@ -55,8 +55,8 @@ onBeforeMount(() => {
 
 // Listen for the zone event from the server and load the zone
 socket.socket?.on('character:zone:load', (data) => {
+  console.log('character:zone:load', data);
   zoneStore.loadTiles(data.zone.tiles)
-
   /**
    * @TODO
    * bug , when 2nd player joins, the first player is not added to the zone

src/components/screens/Characters.vue

@@ -1,3 +1,47 @@
 <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>
 
+     <button>Play</button>
+   </div>
+  </div>
+
+</div>
 </template>
+
+<script setup lang="ts">
+import { useSocketStore } from '@/stores/socket'
+
+const socket = useSocketStore();
+socket.getSocket.emit('characters:get');
+</script>
+
+<style lang="scss">
+#characters-wrapper {
+  // vertical and vertical center
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#characters {
+  background: #FFFFFF;
+  padding:30px;
+  color:black;
+}
+</style>

src/stores/zone.ts

@@ -12,7 +12,7 @@ export const useZoneStore = defineStore('zone', {
     getPlayers: (state) => state.players
   },
   actions: {
-    loadTiles(tiles) {
+    loadTiles(tiles: any) {
       this.tiles = tiles;
       this.loaded = true;
     },