From 38bcba6bdf89f5e813944012c78d6c610a259d80 Mon Sep 17 00:00:00 2001
From: flykhan <liubo666666@outlook.com>
Date: Sun, 12 Mar 2023 10:43:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=88=98=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=94=A8=E6=88=B7=E6=8C=87=E7=A4=BA=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/UserIndicator.vue | 59 ++++++++++++++++++++++++++++
 web/src/views/pk/PkIndexView.vue     |  5 ++-
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/UserIndicator.vue

diff --git a/web/src/components/UserIndicator.vue b/web/src/components/UserIndicator.vue
new file mode 100644
index 0000000..30a6d8e
--- /dev/null
+++ b/web/src/components/UserIndicator.vue
@@ -0,0 +1,59 @@
+// 用户指示标签
+<template>
+    <div class="playground">
+        <div class="user_state_config" v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">
+            <div style="color: #4876ec; ">
+                左下角: {{ $store.state.user.username }}
+                &ensp;
+                <img :src="$store.state.user.photo" alt="" class="pk_photo">
+            </div>
+            <div style="color: #f94848;">
+                右上角:{{ $store.state.pk.opponent_username }}
+                &ensp;
+                <img :src="$store.state.pk.opponent_photo" alt="" class="pk_photo">
+            </div>
+        </div>
+
+        <div class="user_state_config" v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">
+            <div style="color: #4876ec;">
+                左下角: {{ $store.state.pk.opponent_username }}
+                &ensp;
+                <img :src="$store.state.pk.opponent_photo" alt="" class="pk_photo">
+            </div>
+            <div style="color: #f94848;">
+                右上角:{{ $store.state.user.username }}
+                &ensp;
+                <img :src="$store.state.user.photo" alt="" class="pk_photo">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+.playground {
+    /* 60% 浏览器宽度, 70% 浏览器高度 */
+    width: 40vw;
+    /* 背景色 */
+    /* background: lightblue; */
+    /* 距上边距40px,左右居中 */
+    margin: 10px auto;
+}
+
+.user_state_config {
+    text-align: center;
+    color: white;
+    font-size: 30;
+    font-weight: 600;
+    margin-top: auto;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.pk_photo {
+    border-radius: 50%;
+    width: 3vw;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/pk/PkIndexView.vue b/web/src/views/pk/PkIndexView.vue
index 09bf63a..afc8640 100644
--- a/web/src/views/pk/PkIndexView.vue
+++ b/web/src/views/pk/PkIndexView.vue
@@ -1,5 +1,6 @@
 <template>
   <PlayGround v-if="$store.state.pk.status === 'playing'" />
+  <UserIndicator v-if="$store.state.pk.status === 'playing'" />
   <MatchGround v-else-if="$store.state.pk.status === 'matching'" />
   <ResultBoard v-if="$store.state.pk.loser !== 'none'" />
 </template>
@@ -8,6 +9,7 @@
 import PlayGround from "../../components/PlayGround.vue";
 import MatchGround from "../../components/MatchGround.vue";
 import ResultBoard from "../../components/ResultBoard.vue";
+import UserIndicator from "../../components/UserIndicator.vue"
 
 // onMounted 用于组件被挂载时, onUnmounted 用于组件被解除挂载时
 import { onMounted, onUnmounted } from "vue";
@@ -18,7 +20,8 @@ export default {
   components: {
     PlayGround,
     MatchGround,
-    ResultBoard
+    ResultBoard,
+    UserIndicator
   },
   // 创建前后端连接:当当前页面组件被加载时,建立连接,故使用 onMounted 函数
   setup() {