diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue index 0c7337a..ad882b3 100644 --- a/src/components/screens/Characters.vue +++ b/src/components/screens/Characters.vue @@ -3,12 +3,12 @@

Select your character

-
+
@@ -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; + } +} \ No newline at end of file diff --git a/src/stores/socket.ts b/src/stores/socket.ts index 153b586..781d20e 100644 --- a/src/stores/socket.ts +++ b/src/stores/socket.ts @@ -28,6 +28,12 @@ export const useSocketStore: StoreDefinition = 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;