Character mirror

src/components/screens/Characters.vue

@@ -1,11 +1,18 @@
 <template>
-<div>
+  <div>
     <div id="characters-wrapper">
       <div id="characters">
         <h1>Select your character</h1>
         <div id="list">
           <div v-for="character in characters" :key="character.id">
-          <input type="radio" :id="character.id" name="character" :value="character.id">
+            <input
+              type="radio"
+              :id="character.id"
+              name="character"
+              :value="character.id"
+              v-model="selectedCharacterId"
+              @change="characterSelected"
+            />
             <label :for="character.id">
               {{ character.name }}
               <img src="/assets/avatar/default/base_right_down.png" />
@@ -13,30 +20,58 @@
           </div>
         </div>
 
-     <button>Play</button>
+        <button @click="onPlayButton">Play</button>
 
-     <hr>
+        <hr />
         <Create />
       </div>
     </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'
+import { usePlayerStore } from '@/stores/player'
 
-const socket = useSocketStore();
+const socket = useSocketStore()
-const characters = ref([]);
+const characters = ref([])
-socket.getConnection.emit('character:list');
+const selectedCharacterId = ref<number | null>(null)
+
+socket.getConnection.emit('character:list')
 
 socket.getConnection.on('character:list', (data: any) => {
-  console.log(data);
+  console.log(data)
-  characters.value = data;
+  characters.value = data
-});
+})
+
+//Get selected character
+const characterSelected = () => {
+  const selectedCharacter = characters.value.find(
+    (character) => character.id === selectedCharacterId.value
+  )
+  if (selectedCharacter) {
+    console.log(`Selected character ID: ${selectedCharacterId.value}`)
+    console.log(`Selected character name: ${selectedCharacter.name}`)
+  }
+}
+
+const onPlayButton = () => {
+  if (selectedCharacterId.value !== null) {
+    //Store locally
+    usePlayerStore().setCharacter(selectedCharacterId.value)
+
+    //Send to server
+    socket.getConnection.emit('character:playselected', {
+      characterId: selectedCharacterId.value,
+      playerId: usePlayerStore().player?.id,
+      playerUsername: usePlayerStore().player?.username
+    })
+  } else {
+    alert('Please select a valid character!')
+  }
+}
 </script>
 
 <style lang="scss">
@@ -50,9 +85,9 @@ socket.getConnection.on('character:list', (data: any) => {
 }
 
 #characters {
-  background: #FFFFFF;
+  background: #ffffff;
-  padding:30px;
+  padding: 30px;
-  color:black;
+  color: black;
 }
 
 #list {
@@ -66,7 +101,7 @@ socket.getConnection.on('character:list', (data: any) => {
   }
 
   // hide the radio buttons
-  input[type="radio"] {
+  input[type='radio'] {
     display: none;
   }
 
@@ -79,7 +114,7 @@ socket.getConnection.on('character:list', (data: any) => {
   }
 
   // for selected radio, give bg color
-  input[type="radio"]:checked + label {
+  input[type='radio']:checked + label {
     background: #ff0000;
     padding: 5px;
   }

src/stores/player.ts

@@ -1,14 +1,18 @@
-import { defineStore } from 'pinia';
+import { defineStore } from 'pinia'
 import Player from '@/engine/Player/Player'
 
 export const usePlayerStore = defineStore('player', {
   state: () => ({
     player: null as Player | null,
+    character: null as integer | null //Saving the character ID???
   }),
 
   actions: {
     setPlayer(player: Player) {
-      this.player = player;
+      this.player = player
     },
+    setCharacter(character: integer) {
+      this.character = character
     }
-});
+  }
+})