added a bit of styling to character screen, listen for socket notifications

src/components/screens/Characters.vue

@@ -3,12 +3,12 @@
   <div id="characters-wrapper">
    <div id="characters">
      <h1>Select your character</h1>
-     <div>
+     <div id="list">
        <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 }}
+            <img src="/assets/avatar/default/base_right_down.png" />
           </label>
        </div>
      </div>
@@ -54,4 +54,34 @@ socket.getConnection.on('character:list', (data: any) => {
   padding:30px;
   color:black;
 }
+
+#list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  // make all the divs same width
+  div {
+    width: 100px;
+  }
+
+  // hide the radio buttons
+  input[type="radio"] {
+    display: none;
+  }
+
+  // img under the label
+  label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 10px;
+  }
+
+  // for selected radio, give bg color
+  input[type="radio"]:checked + label {
+    background: #ff0000;
+    padding: 5px;
+  }
+}
 </style>

src/stores/socket.ts

@@ -28,6 +28,12 @@ export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
         console.log("Reconnect failed")
         this.disconnectSocket();
       })
+
+      this.connection.on('notification', (data: any) => {
+        if(data.error) console.error(data.error);
+        if (data.success) console.log(data.success);
+        if (data.message) console.log(data.message);
+      });
     },
     disconnectSocket() {
       if (!this.connection) return;