discord login

app.vue

@@ -1,9 +1,29 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import goStore, { register, setReady } from "@/netcode";
+import goStore, { register, setReady, oauth2_register_discord } from "@/netcode";
+import { isStaticProperty } from "vue/compiler-sfc";
+
+const route = useRoute()
 
 let username = ref<string>("legonzaur");
+
+onMounted(() => {
+  if (route.path != "/login") {
+    return
+  }
+  const code = route.query.code
+  if (!code) { return }
+  if (Array.isArray(code)) { return }
+  oauth2_register_discord(code)
+
+  history.pushState(
+    {},
+    '',
+    '/'
+  )
+})
+
 </script>
 <template>
   <div id="game_status">

components/PlayerSlot.vue

@@ -82,9 +82,14 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
                 </CardPreview>
             </div>
         </template>
-        <div id="player_stats">
-            <PlayerStats :player="props.player"></PlayerStats>
-            <b>{{ props.player.username }}</b>
+        <div id="player_banner">
+            <div id="player_info">
+                <img v-if="props.player.image" :src="props.player.image">
+                <b>{{ props.player.username }}</b>
+            </div>
+            <div id="player_stats">
+                <PlayerStats :player="props.player"></PlayerStats>
+            </div>
         </div>
         <div id="current_player_board">
             <button @click.stop="damage_team(props.player.team)" v-if="isSelfTurn && isPlayerEnemy"
@@ -162,6 +167,7 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
 .discard {
     margin-top: 50px;
     grid-area: discard;
+    justify-content: start;
 }
 
 .player {
@@ -173,6 +179,11 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
         "player_stats   player_stats"
         "stack          player"
         "discard        player";
+    transition: all 1s;
+}
+
+.player.turn {
+    margin-bottom: 75px;
 }
 
 .player.discard_unwrapped {
@@ -190,10 +201,10 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
     position: relative;
 }
 
-#player_stats {
+#player_banner {
     display: flex;
     grid-area: player_stats;
-    flex-direction: row-reverse;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     position: sticky;
@@ -202,6 +213,24 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
     z-index: 1;
 }
 
+#player_info {
+    display: flex;
+    align-items: center;
+}
+
+#player_stats {
+    display: flex;
+    grid-area: player_stats;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: center;
+}
+
+#player_banner img {
+    height: 50px;
+    border-radius: 25px;
+}
+
 .turn_icon img {
     height: 50px;
 }

netcode/Player.ts

@@ -11,6 +11,8 @@ export interface PlayerNetcode extends GameObjectNetcode {
     team: string
     username: string
     turn: string
+    discord_id?: string
+    image?: string
 }
 
 

netcode/index.ts

@@ -119,6 +119,14 @@ socket.onmessage = function (event) {
     }
 };
 
+export async function oauth2_register_discord(code: string){
+    socket.send(JSON.stringify({
+        type:"discord_login",
+        data_type:"code",
+        data:code
+    }))
+}
+
 export async function register(username: string) {
     socket.send(JSON.stringify({
         type: "register",