worked on character selection

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>
 
-</template>
+     <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>