From a9f4f2262299b4e47928d8c986e161e40b636b6b Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Sat, 21 Jun 2025 12:59:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B8=8D=E5=90=8C=E7=BB=83?=
 =?UTF-8?q?=E4=B9=A0=E7=94=9F=E6=88=90=E4=B8=8D=E5=90=8C=E6=88=AA=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis.js                       |   7 +-
 src/components/Container.vue      |   1 +
 src/components/ScorePanel2.vue    |   5 +-
 src/components/ScoreResult.vue    |  14 +++-
 src/pages/first-try.vue           |   1 +
 src/pages/image-share.vue         | 117 +++++++++++++++++-------------
 src/pages/my-growth.vue           |   2 +-
 src/pages/practise-one.vue        |   1 +
 src/pages/practise-two.vue        |   1 +
 src/static/practise-one-title.png | Bin 0 -> 9154 bytes
 src/static/practise-two-title.png | Bin 0 -> 8859 bytes
 src/store.js                      |   1 +
 src/util.js                       |  90 ++++++++++++++++++++++-
 13 files changed, 177 insertions(+), 63 deletions(-)
 create mode 100644 src/static/practise-one-title.png
 create mode 100644 src/static/practise-two-title.png

diff --git a/src/apis.js b/src/apis.js
index d257042..edf3cf0 100644
--- a/src/apis.js
+++ b/src/apis.js
@@ -78,8 +78,11 @@ export const createPractiseAPI = (arrows) => {
   });
 };
 
-export const getPractiseAPI = (id) => {
-  return request("GET", `/user/practice/get?id=${id}`);
+export const getPractiseAPI = async (id) => {
+  const result = await request("GET", `/user/practice/get?id=${id}`);
+  const data = { ...(result.UserPracticeRound || {}) };
+  if (data.arrows) data.arrows = JSON.parse(data.arrows);
+  return data;
 };
 
 export const createRoomAPI = (gameType, teamSize) => {
diff --git a/src/components/Container.vue b/src/components/Container.vue
index 52cc24a..30c7327 100644
--- a/src/components/Container.vue
+++ b/src/components/Container.vue
@@ -48,5 +48,6 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  overflow-x: hidden;
 }
 </style>
diff --git a/src/components/ScorePanel2.vue b/src/components/ScorePanel2.vue
index 28ac59a..df3596a 100644
--- a/src/components/ScorePanel2.vue
+++ b/src/components/ScorePanel2.vue
@@ -20,7 +20,6 @@ const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
     <view
       v-for="(_, index) in new Array(Math.ceil(scores.length / 3)).fill(1)"
       :key="index"
-      class="score-item"
     >
       <text>{{ roundsName[index] }}</text>
       <text>{{
@@ -47,8 +46,8 @@ const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
 .container {
   width: 100vw;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  flex-direction: column;
+  overflow-x: hidden;
 }
 .container > view {
   width: calc(100% - 30px);
diff --git a/src/components/ScoreResult.vue b/src/components/ScoreResult.vue
index cd75482..78b0555 100644
--- a/src/components/ScoreResult.vue
+++ b/src/components/ScoreResult.vue
@@ -2,7 +2,6 @@
 import { ref } from "vue";
 import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
-import ImageShare from "@/components/ImageShare.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import BowData from "@/components/BowData.vue";
 const props = defineProps({
@@ -26,10 +25,13 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  dataType: {
+    type: Number,
+    default: 0,
+  },
 });
 const showPanel = ref(true);
 const showComment = ref(false);
-const showShare = ref(false);
 const showBowData = ref(false);
 const closePanel = () => {
   showPanel.value = false;
@@ -40,6 +42,11 @@ const closePanel = () => {
 setTimeout(() => {
   showPanel.value = true;
 }, 300);
+const toSharePage = () => {
+  uni.navigateTo({
+    url: `image-share?id=${props.result.id}&type=${props.dataType}`,
+  });
+};
 </script>
 
 <template>
@@ -89,7 +96,7 @@ setTimeout(() => {
         <IconButton
           name="分享"
           src="../static/share.png"
-          :onClick="() => (showShare = true)"
+          :onClick="toSharePage"
         />
         <IconButton
           name="教练点评"
@@ -99,7 +106,6 @@ setTimeout(() => {
         <SButton width="70vw" :rounded="30" :onClick="closePanel">完成</SButton>
       </view>
     </view>
-    <ImageShare :show="showShare" :onClose="() => (showShare = false)" />
     <ScreenHint :show="showComment" :onClose="() => (showComment = false)">
       {{ result.adjustmentHint }}
     </ScreenHint>
diff --git a/src/pages/first-try.vue b/src/pages/first-try.vue
index a575400..5c0cf91 100644
--- a/src/pages/first-try.vue
+++ b/src/pages/first-try.vue
@@ -220,6 +220,7 @@ const onClose = () => {
         v-if="step === 4"
         :onClose="onClose"
         :result="practiseResult"
+        :dataType="1"
       />
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
diff --git a/src/pages/image-share.vue b/src/pages/image-share.vue
index f91d280..21aa371 100644
--- a/src/pages/image-share.vue
+++ b/src/pages/image-share.vue
@@ -1,58 +1,55 @@
 <script setup>
-import { onMounted } from "vue";
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
-import { renderText, renderRankTitle, renderLine } from "@/util.js";
+import {
+  renderText,
+  renderRankTitle,
+  renderLine,
+  renderScores,
+  drawRoundImage,
+} from "@/util.js";
+import { getPractiseAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 
-const saveImage = () => {
-  uni.canvasToTempFilePath({
-    canvasId: "shareCanvas",
-    success: (res) => {
-      const tempFilePath = res.tempFilePath;
-
-      // 保存图片到相册
-      uni.saveImageToPhotosAlbum({
-        filePath: tempFilePath,
-        success: () => {
-          uni.showToast({ title: "保存成功" });
-        },
-        fail: () => {
-          uni.showToast({ title: "保存失败", icon: "error" });
-        },
-      });
-    },
-  });
-};
-
-onMounted(() => {
+onLoad(async (options) => {
+  const id = options.id || 462;
+  const data = await getPractiseAPI(id);
+  if (!data.arrows.length) return;
   var ctx = uni.createCanvasContext("shareCanvas");
-  const width = 302;
+  const width = 303;
   const height = 535;
   ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
-  ctx.drawImage("../static/avatar.png", 20, 20, 35, 35);
+  drawRoundImage(ctx, user.value.avatar, 20, 20, 35, 35, 20);
   ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
-  renderText(ctx, "用户名称", 14, "#fff", 70, 35);
-  renderRankTitle(ctx, "钻石1级");
-  ctx.drawImage(
-    "../static/first-try-title.png",
-    (width - 200) / 2,
-    155,
-    200,
-    53
-  );
-  renderText(ctx, "正式开启弓箭手之路", 22, "#fff", 53, 230);
+  renderText(ctx, user.value.nickName, 14, "#fff", 77, 35, "center");
+  renderRankTitle(ctx, user.value.lvlName, "center");
+
+  let titleImage = "../static/first-try-title.png";
+  let subTitle = "正式开启弓箭手之路";
+  if (options.type > 1) {
+    subTitle = `今日弓箭练习打卡 ${data.createdAt
+      .split(" ")[0]
+      .replaceAll("-", ".")}`;
+  }
+  if (options.type == 2) {
+    titleImage = "../static/practise-one-title.png";
+  } else if (options.type == 3) {
+    titleImage = "../static/practise-two-title.png";
+  }
+  ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
+  const subTitleWidth = ctx.measureText(subTitle).width;
+  renderText(ctx, subTitle, 18, "#fff", width / 2 - subTitleWidth + 10, 220);
   renderText(ctx, "共", 16, "#fff", 124, 300);
-  renderText(ctx, "50", 16, "#fed847", 144, 300);
+  const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
+  renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300);
   renderText(ctx, "环", 16, "#fff", 166, 300);
   renderLine(ctx, 80);
   renderLine(ctx, 192);
-  for (let i = 0; i < 6; i++) {
-    ctx.drawImage("../static/score-bg.png", 16 + i * 46, 320, 40, 40);
-    renderText(ctx, "9", 25, "#fed847", 29 + i * 46, 349);
-  }
-  for (let i = 0; i < 6; i++) {
-    ctx.drawImage("../static/score-bg.png", 16 + i * 46, 366, 40, 40);
-    renderText(ctx, "9", 25, "#fed847", 29 + i * 46, 395);
-  }
+  renderScores(ctx, data.arrows);
   ctx.drawImage(
     "../static/device-icon.png",
     width * 0.06,
@@ -80,16 +77,38 @@ onMounted(() => {
   ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
   ctx.draw();
 });
+
+const saveImage = () => {
+  uni.canvasToTempFilePath({
+    canvasId: "shareCanvas",
+    success: (res) => {
+      const tempFilePath = res.tempFilePath;
+
+      // 保存图片到相册
+      uni.saveImageToPhotosAlbum({
+        filePath: tempFilePath,
+        success: () => {
+          uni.showToast({ title: "保存成功" });
+        },
+        fail: () => {
+          uni.showToast({ title: "保存失败", icon: "error" });
+        },
+      });
+    },
+  });
+};
 </script>
 
 <template>
   <Container>
     <view class="content">
-      <canvas
-        style="width: 302px; height: 534px"
-        canvas-id="shareCanvas"
-        id="firstCanvas"
-      ></canvas>
+      <view :style="{ overflow: 'hidden', borderRadius: '10px' }">
+        <canvas
+          style="width: 302px; height: 534px"
+          canvas-id="shareCanvas"
+          id="firstCanvas"
+        ></canvas>
+      </view>
       <view class="footer">
         <view>
           <image src="../static/wechat-outline.png" mode="widthFix" />
diff --git a/src/pages/my-growth.vue b/src/pages/my-growth.vue
index 7f0e6bd..784a0b9 100644
--- a/src/pages/my-growth.vue
+++ b/src/pages/my-growth.vue
@@ -26,7 +26,7 @@ const toMatchDetail = (id) => {
 };
 const getPractiseDetail = async (id) => {
   const result = await getPractiseAPI(id);
-  arrows.value = JSON.parse(result.UserPracticeRound.arrows);
+  arrows.value = result.arrows;
   showBowData.value = true;
 };
 const onMatchLoading = async (page) => {
diff --git a/src/pages/practise-one.vue b/src/pages/practise-one.vue
index bc1cbae..5899a13 100644
--- a/src/pages/practise-one.vue
+++ b/src/pages/practise-one.vue
@@ -111,6 +111,7 @@ onUnmounted(() => {
         :show="showScore"
         :onClose="onComplete"
         :result="practiseResult"
+        :dataType="2"
       />
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
diff --git a/src/pages/practise-two.vue b/src/pages/practise-two.vue
index 232aec7..7487456 100644
--- a/src/pages/practise-two.vue
+++ b/src/pages/practise-two.vue
@@ -111,6 +111,7 @@ onUnmounted(() => {
         :show="showScore"
         :onClose="onComplete"
         :result="practiseResult"
+        :dataType="3"
       />
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
diff --git a/src/static/practise-one-title.png b/src/static/practise-one-title.png
new file mode 100644
index 0000000000000000000000000000000000000000..43ea0ae643d261412f884a8f960ca708206240b6
GIT binary patch
literal 9154
zcmV;zBR$-SP)<h;3K|Lk000e1NJLTq0077U001=z1^@s61XQG100001b5ch_0Itp)
z=>PyA07*naRCr$Poq3!U)tUF7U)^p%#;7d4(9kU1G^nG-sFP@t8A&D)P*4F;5mX}X
ziXwtws|gtwHU$)n8@M21v;`3X0T~0%I3_Vfqo_bPbki&i&7v_POZTnc%Q<zIs=Bq^
z2HuaEO#P$Ht+Ujr^L@7SoKuj0u!~>bcfG_#B-T)Y6DEA|5BB)~s~?wZ#x;|U2Rch5
zN=1wkp_B@wRETo4x&PCqJUpTl;-3575n)O2y=ahw`%XvU!+Rsu`Ne&+g#7o=dzo`S
z+Kl@w^u7o;@QZOL2pejIa=bte2)S4c%#jmv7X#xCdR4*daV_M8_@&;}YtkaL>~RYZ
zu0-pJwNVOl_kGt3SRQz<Des}}1B1ir<DPq87m@D;-1mgE%9$)*#5ao2|F#$|!}0h3
zA*?;W-?``BS489ozU9eh(dNPb2&<oey`!}>wyY3{0-~5Av5ZM=;3BkoU}0EYUcW~J
zWcR(lIy6}0?8D_QsD1-D2(2IbZCFRRXUy@!ob4jgB6+V*-5b&7!P2n$qW;cZ<@bol
z1Ie~h&j9QZVTI&!3XU7U-d-QKkII*vW;^u1sRB$-n~cGO2osgV{-eFYM0p7MqwRxg
zvW8yVea|Qnnd}L0;vXTh0&O1rd01uKeb4(Ma<+TiQ{5#dN}HT=+0ziu7$<w>hS3A9
z?q3zwo-ZJ~%2x{HT>E%A$Bxs`X8avt^^@b8$)1LNA~YQ3?Gwu2&1gOT2~`*Ol%FCE
zV(5BvMWi9og2DaBbH4lJD-Y{~aQoO2$w3t*{n|YN5qTYLAL<`gA-}l$YKh}{$3(RK
zk*=E)(02UYVf97%o!iE>lx7ENL?qAs;x*iA-Wxa#tsh#G2}te^*Bnprq6a-aNi$?_
z@>$&XK#VK^xqFllDL_2?0<J)t@eu$if1k7fN$~D?77>{!ZJL$K?t{L7=<$lN2U?9k
z3_$K)DI({($1gSZlxfHd2Sk_Ob+>vy`CfBUKc|5Q(fXl#6Zh_?NOQOR0<Z>c9y--M
zmm+BpUGeVnRV4q-OE9KLqwE)n=Ob^@--0GBcip{IM0$E@4adL5@IAD8=%XkAgx$m4
zV{RugEn{M&XWMeLozT-=kJ2EF<)k%;dt%vUYpU-qEs~UMdPXM7i%5U8oe)if?7Vvv
zA(Q=-Qlif*&^8(%LZ0oX9ZcawqfLu)*?mCSkNWbwHztP($k>&n1&9*68Dm6FL*B$t
z4Ps6Dv418LW}|bAlaDY5Z6{o*@7+0ezd)Mn|98A6tU=rHhXcr6!)O{a?Gq>^9c^L~
z;FV}QagN`FW!>F*%;h$r<am`&mV?N8<W1-vHu0nU&NTy@NnvRf$zogm&KFPgM*ai^
zuH&)*iS4jU+YHEjw1`_mJK%>hv7!PpW|WAfK~j^|KB=rpwgPP@glmvpW3>ixOv=O)
z>-RyKD0wZ)xqH6_NOBUnVadVa0kU)KN(#?)kE;#JX|afam^;TPL36SHT)=xq-h>}p
zfQ;EMBF!^2y3!zRCmaqS!;cfQWgSIY`gcS(yU56!)Ylh~J!5WSTz=#Id%D{Y+>g8o
zzl;Jv*gdSjYZxIj{U$kpPo>SoQ-Msc)B?oN8YBo3uipbfg4rK!AC9O&6d*D=(3I1F
zOpE}?nD>Q}(jXZEft+aMwJhhZeF+U>8K9ZwnArn)lbdd0?YwIx6DF3s4++6J4SAEI
zX^@>`rcju=H{(44ThVr62Mdt9QYMyDV96S^oz!$dtjb5fM9LNVfgE0FT3<orfaEq5
zqSdr7y(TVq-t{iYfAuS$lJGe^6|En3_yb`ec(%uJhV0zCmLg?dzw4I)xej@g9ojJ^
z$rK<4EECJ)@{@pJeFfPc1yKPRJ&KgcND}PuZ1tNF7)C@u?s}glEhk;8kwp1K-K1zh
zWY;%wrtBW;Y3%I-a+rXO)+UzU_(3oY`4IuBzw0&%AN74l5L5Oy9*g3s`&d6(1Cp9&
z2_*@UHOQYF9T4swew@Uc_p&!?3VsOT?U@~MJ|-wr1mY0_L`xCQq9mdSsft|X1-nIf
zv!k8doIj$~1m$FBb+LZ*Wfb~G)*w<Zdv|q0m*<u0&A7A%F~k>;tU6=68I&vmVaiEY
z@|-TuK$}>3lfyMg{b(J<a+kNdrvG)Kk#}r4ckYdA@N8yXdQw3NmBR#NRN4peY(u6Y
z|KVsFr2fv{6f6l6V4!>#1rLAB`cV!*H27A*HOPNB3qb1bJee^GSzPgp8$_Kp(aXb-
zp=kTa3sGxM-pBeoKO*J3j&ioQ4uj*6H|5uU^=d#sCm^m_1IQMM<)np4W8*y(8RXkn
zHNR-~N5NEI6N@`WohF9SOxFPpp=mk<lM@oH4E`t*yG7sMtYIULpSs5r`1(8Fr^wmv
z^47iD#!LY6b;?Ok!eg%wFpdBq)K0p0=#R@Gn5%zRL0L1=x)q>RWey_mk(c%V?igK4
zF{@Jj^9UV6WFYb%d5!gVI((31`+x%Ekt_i**re6RY$tJ)`vD9^es+Lx=co(BG#A-z
zO-Eal{g7`uq43H2U_i_O4We!IYNKFEY9TegW8@5o=*jADLMRi<9}u&CWUX5GN>1Fs
zMLWmLpqS*~oWiMdS%2q`#l(m9#ar$esR8kRUI>*BQgB>3>%X!AlKB)c*aLY}Q$7fH
zjyOXa<D1cL`pzitll3E08YIg7?t38eB?_jr(tvPaOzMmG+D)g7`@wsVKlLH*80qbU
zC=F6DB^yA7pG+g?TLg#<MgG*RG>Ez5j`xJ}!-R0mcn<((B7e$tK`)5gZ_KA0vm>d8
zJ@2Jd8--JCfQ*;{!jk66%cU%#!n{F%Y#&)GNJrg*U~~7$q*#FLxMP{6E%>sSoP~Ce
zeqaHT@IgEt#scJoa@POVr9oWlCWiEoulW~gi7O~_ty-N28qYxf^bey<c-G&M1|)Dr
z(hp??$W#r8hNS+E&qz7RuWg9TMZwg;+<C`Y(&#qvRa`6fjhD~syAHy-;U^QZZx0}b
z(jd_RX{Z~~BL?|hV)#5}DhV2=qTSR_xqZY>r6B$uF#UjgfGt3p+cb!$Sy*ipKAHxk
z?zS0#0>rKBlha(8M9Rc^%-6&+x8G5F$X`o^rK3!`<UOXCgL4WWvj8E_OEC)kMMMfn
z7W&nvO)Le-jxRF+aqtfLFA+JDOh+{lkDr0|5dqmg!Z(T)=~*FP8U@o*fSB8Fe?tTp
z29*8SD4garwIehX0*LV~0>sD)5N^M183pHgn<h{;`%)A<+MD&mzb7VE3*<|oREQ}r
zO3`EQrQ$mpkVLA9r#jH$ui7Yl%ms)tu>xW=P$pIoAR`U~5M^R1Kt?zKi7+25AEcmF
z0uW#0)UztY%`5>)_#ja_X6cEPOAROu@@QIv?6`drDWd~4$N?#6bu2KhF>-Th2R^fi
zr9of;;x$e|@y#f{cb4T5Qzq79kxVRZyY(zF@JBKg$IN)ZIHhN9(e&lqe%s3=FSl+;
zb_yFIoFlQE7scH76`30r#i};iO}7CuJmG`*KO~6$C<+2(c&!kY2JsbR9?RSm(I!^W
zV{^5Tpq!UYc@h(iLIud4xc3seYbb5z5#r1OklQQ`;$A{mje5Q|ryT|rx`ou)BHqW+
zl;ibe^(zn5L13y_T_U`nUQJKp2YCPmk3E^vy1uGb0V2UsEVbG#A|vf}P~;I2@m&Fj
zh|0lv*wHR<BgsBNWJ53%?IHqFck4Wg_~wKG_ymR1PvfSWN~C$tI+8hFZ3B2yq~TgJ
zk!s>CH`UNq8|`Me0HM<dah28UAVrV+n^<+jRi<y#Of2Q37tNT<?ZYiVvbeMcDQr{D
z?Yjd_EYI;WB|0E=!)+#(mlKkWV{+umL*y>Bn{ErK`wX7eAd-k;`6f;A1Ec8i@7t>|
z>u&vhMjErNJVoZlie@;{vROBL1|?uZX`#TOX!m%i2H~!oPhtbssMJHh`3%7|XgA|I
z?ifCUanpAq1Ne!c@iUsSv<7h~h14H$0K3wU$?u5GHg^gGOH^qmJrIyv4+9XTL6U%^
zeUK=eP~~D3=9P2%t|kD2EC9K6C7Cd>?0GNl1!$M_b!b%oRABE%b#vrV9#DWh9tDsa
zP9{U6Sebxqz2)};|2%&SkjGts+%ki-!lHf`AkhG+yZHrDt_qwCl#h{POlI7CO8ir2
zRvSgXIZHd~rj=@PBrl!r9smfp-SQI2e83Qj*+~SRnE<vvsg(UctG{8I<I&;Ccew4=
zWt1!dfzlv(<*eJ8Js?z0`jgS3Sami)JQhMAtQ5h=?l=b_WkNa4`7Yc(fX6~epuLzb
z4<H*r!lGFGMl3TcbwN-@k$(!9OllY3ru6T+b1F}!t-Tg^dA$x2qCr@9V`mE13w5S{
zw97}6gXR@z|J2JCApWT)k?eGjo<Nj|^<=bMth$?Zs!5;#QTsuPe&bk4=eC;@fCM=)
zuBis4K?=%QSMSKhiZYm>a?+y$a<diY_1wgvGX<u_ik`?=Nsn*4X(Y56pLiyp@~-*i
z`3Ceqy2@J`<cWwH#8go%zet8x2s2|^`*`?T&LwURij<`78K^LCyC(uoEN;E=af&!o
zRHD4u%zJ84w6+vj*{A`DAB9vCC=)9pAX{%3MV-y-B^mWwR(Vn@Q1pZokh&Z16k-g?
zJnIqt%O@RM?Sm8*lyln-ooeE|e99|_S!5M*<Aag+bX}Ao=eC>DCYDD5lG9=xp2`Gd
z%MBv|C_gvi6=j~;MKkU~`zU~Hy5VHzgr%A!D-H@tMR|_!@-U1DfZXsLMVnX3E(wnQ
z1au3KJ5lu16g~AcAg)xCD327<K2*AUR)E+wh<&`Q37~frwtq4s7mK_;S9ZjD)8tiR
z1wxwpZk0;rVimP3=eF%0fMmSywS@7aA@MmVdOFhf;baZmc4HtQP#dOv0nve=kjqbN
z28XU8Mizj?qNbYY<Tcx_m$1%zXqu4nI?UVd>2N2#?z(>#)A%LHOA=W;*>>iy*tfSM
z%3k_P15$NkK3fE(nq*sjLY5mwmVhLZ6}@uat>IsR_D=^UD{|9Kt(X&6*##$gZYLy!
z$_LSa)H(Kp2oen^{uA|m_>B&?TyI6Oykw)^>jF;=!n*6#c8Ld4_1enoY-6&uZwyyU
z5;O{_-)&N|*cByW#;?%s$r<*aJ)eO}gT%~l&qARJ^L7XaBqgCX4?R_o`%4P?tNqGR
zr!gQ8qy00f1t(Trna>t2f}M2AUkRCI8`PhQ$mv0C>TKTPXQKHaTd#}egLHT%JezmR
zb-}q<$_FWGU(T&tgLARej>2}&G<`qFmg`nhaIW7X8%3tYIy@aIn>Y2&)$+#H>vvP6
zm9J|6>@eCt?VCy9A-cU^BRBoxWX58jhPWX6A=qrMA+c-EI*h?vI{Xa+bzp<-Vjd|c
zWc0)#9XJ#nW`$}HcOBe(?P-USRDY#*oY5=v>+E9#jCd*9KbLwY4M=l)s)?%wt9-Rl
zJTtuxviaInvZ5a(I*OGQAn9~>uTAjU2Z;p8wW&SnURs12km7P~-QvGcsKeCgf#Smj
z#Ffo!vx+Q0W@ZJ58f$aQb#IICXF<UekYy;IRmI(dkK?{$R=||0=r~hn24@F|5teF#
z4~*iO&UKK@!!p-F>?o)(Z}BW=n0NCvGbpa)KKDFSVcsSHl9Dc4hMrCu(?m-x2b_sN
zpf>lvg!VIsIDXZDxKmAB<%w#e<E%6wwb#r5lBp)%i0CL*@w3r1NbNAaCp}0b9XbHv
zcMusXG=DC@XMS~aivlDdSy4IZ9g54jWpi*YmKc!$AqO^->f_pF2(DZSJoX0$X2}8G
z@A=FJxd$gc>v`@0w+wrT6xTr?PARCD3_8qufm^PvNSNXRL*~lC_$}!2ykn!EZ~RYd
z5F?Rl;{RqoFp8gb0dh?UAe<X3e$E4suyqh+Vr8#E98-DoumvP9a-?1)!h8TI2G2tK
z=k!`a3M>Ukv*b#8Vz}(1rpqfpp7j7E8N_qNk}aPhOF(QIB!m<Q#-e!EM8|XNyrxL@
z%U~*qL|Xf6HklwDI^JUe;_uKxI9I^w=<vLH-@X^OTyxH$)%^bn>2g*-Logi0vr>M7
z<2h@GT}&`g@Id4li5Y7cH{H7sHv@7tIy{?5at(;{Xh0Ae#j1or?Uznpph_C^Pc?z8
z5<*9aQj?IpK_KS`jgsCl)#16UO{`QK8hH66y~6H#`NZ#xPR}Xd!EtF5D+P$7*Y-cE
zjgHUT02w+1p&C({SWz{|FGd|&TME-4sr~?l287$LZz=J{eiZX6A=Dv#p{LwY@Q_j5
z@jh<e6m_9+gM#H?T;?|K^8DJ2@vFJ!92z{bfIx<$_&IMtw8qcbo=ms$oKui`u}pev
zLz?q4VaQb3xBVWJy>%d1gCJ@YD=Pueq?`3R$YB5yuO0e4gjf5?1Q_fi?Y~(no16bo
z45I)YX1}I7Y5`(jN%tBuRvR5(umN&)0ua9}&qTU=@$5iJ#~s%e$bp8RQshPv{9Dw4
z17s|UpP$IhzgR-Dchqv~K0tmg9XkI9H`hc3L|1QZX*W+t@$8QsVx;D(b7&Yx7!ajF
zya7>do3%sL;&oW&LEx}}@)9~dKO_K<!6#EfQ%$lN`@^~y!lCFiyGa^^TYph3@pu)f
zB!+tpK_7>=Pl)*xs%^7v1hU2GI9n$QYCv-BE9sf#b-H_}*=ay(u1xF)@p@#dypCdZ
z_6CGCLw-oaR2s}bH)S;k2FId!_C(fRoprJzVBRamrQ=y!ofRM&67mdmp6y6Ap#}sN
zAQ`z(iSfx?*72Sz$q=)_;V7Q%sX<i1c<t5CL1bt~CDGge63t>~qVU;`A%Lh<6Mrcf
zZN?v&@;aNhsesg8IhB+V!TohPa$=l<PA`0F0TQ~B{v{y#XiGg0sQ00q8PpyOWn%dN
zQhW6vlGc9gCS1x{M<)fyRZRdy?v&z^X{_DY1VF?a5FBA2#84)dKOl{phFoQc(IjE2
z(&*!YemNaq&}aFE0FsDexsHEH>eO^Dzw0gf90}yO%j@K_<P9F>0i#KPaLZL~ByQG_
za%?tpjUso(I?tJ+0m*5?N_t3RI*Qf#B~KHJwL=Dxn43J3C*z1Dd)*#V5#U&Knlq7`
zh9vfb_`c>0sSX%7OL3Q{Si2z+=1uIc@OvIx`yhM(;s5xCUA?5brxlylHXw(i^Bi9d
z!pgxNq?u7`B~2%#mQ7m)j2}fN#5%p0ih>0L!XPI-Su}X*-hZBCS6+waI=vKGDsaPP
z-NeW_pTOlJ^gl)1r-OhjL#LN|S%4gcm2?%w3IfEGxsh|BTzNIx2ho5Gc4-jznA`uh
z{$E9Lq+{1P+*B1k7c0>|r11=N{;kWz8gvdNc4U1Jkw8GS7T+{vZBVet=e56sP6y5d
zDpK0hACQ{MPNKv<$wulXwsK{zT4(GhfthVy3SeA=PIG35^(S6EXe@wXLh0&xultGJ
zeM?KUePFZJ5|1CpSlqcE#7hDt^>LWINJWax{^<N$e+^<P6DufD)GG~Hhn!82x1!73
zCoDj`(%t=xe!bIffOP7%fSW3#<YGCD5J=nykWeRGWp~?hSy1E?VX`1rVcq}@q5-KH
z@*4_o3Y#zK-?0@fa0UurbewP#pnIcNoxC$%GiVY5_64UbD8V3fnH&0<gzS4D65n{m
zbbz-urL4OQVrEY{c<>{}LQ+kd&=}O7bU#3<2MuEKOsEVS!LKn?BPQjN+wh-gSD}yI
zVf7X2RFlMx!Z30ZQ_ql}OUG{Sux5SWxmaGk0F;yNp+T5%(tU&oavEBqxME+jPHwtl
z4NV=O$h@pIq~Yj1*Vn|dG|1pfXtE-s0;j8){J8-zd!X}gGc?^%0EE69=hJ|25W2i_
zQ~+Vk<rk2$DDs^362$sNVhc=jq?iX+F&2<&;#WST15oMifq>YZbnmxnZ$hV<bbi^H
z?p}R)0uX&n+|EOvcbHF;H~4q$(22+~^ZQbK(rVVM4bH^^7LY36jGa^O70OBX0wmZ;
zM^2*?keWejNFP9~BT&Nu+0w5K8(JuB5SoVv10&FBuIJIE8W2`r_G^=pdeF#|%XOn6
zat1|CiBSGsie!C^sJmX0t8z+Teb)Z(+}5`x_qW__|2R*C{-|5jo`w$~TqNKkbg9sv
zU0_wed>TQiCi;ziMU$yq9s}~DuyKHC_D9zWZxgHfQp-tCTrd!)No$eMhZPvI0-axR
z1F}F2*&mOaFU9t3SSp1bk7Gl#T|tL%KrQl?oK(f?&%L8qiT1U`?NYIdwU_;im@-f(
zmk1gMp!2*;AA}wYg?8sYC+-5|^0Wr=5aEDw(q9SIAk_m4g|SM)CpeR8pG%A`uUz0a
zM|AUM^`)zYaz@07^sTuKA~R9)YR18D=Ei}`MG%_Vdg#E3uY~e83@(y*;}UdzJ>!H$
z3y=t>nv}enUI*EDX?U`tNq;~#UDiiT4imvD0amH}Ds`xI(7@|-_mWqgfN)^U?r^eZ
zU>BO$7+g=RP`Y&A$?DHS&c&hz#37tq?P&p1Gw>Xm!9ECbO(!7Lmj!DOWnz{11HxAa
z#`rJB+d}zCgvt7@QSyo_KQCP>0mwiLkSJzq5NiLQ%j=U7JphSs7?{|W>Cst86=^Ou
zB(_NQ@m-u!;rKS88eHii#~{Dr>y!pT(5WU`s#hB&6=^^=ToRsYq818$G)RV~+<56I
zN`(C&B^AN@L23qkk8#7wHS_V)5&yb{bp1gCt3P$^2TAlQwOA(^fOt&}3y`D_qJsz-
zw;`7vfY8GSvC2a@93>V0Vcwcc@24sHi&D<Zv;8<^e|wZH^xV>50kUDhY7zYXX%O|z
zkCN9iGzcpPp3L;Q!VLmZ2f-=RX)(IY%gh&2AJ}OjKNW-OsGy5PeL%8wo{oiU4FcP#
zCf<WyZIr&|0wg5)Qk{zx8IVgN><7ULl!gFO)&D1i@s7WY!`CRS_zpSF;Knt<8pJ>}
zKq?2GLqqu>e$LvV?5}2U0<vM?8d_Ndwkus8Di_NK5LOT9Nz+g#y}NvmfcAkKP*U-<
z*SJ`KR4G6_OstfYX{smclg%1I?>VKMcl!{|MA!MAXY0nR227`z@5N$ViY^N>zE#4_
z1CNnLv!_t{lhW5pUQ3EctT#&M>4ZxSh#2X!dEHvl5{T7C={y@C17^T|N{ed=LN63{
zogXdTz3P%tMA&{1S%K1d!5U=4fB}bmqu0FllPJLskxeL_*VzK(li>XzG3A529=c(Q
z8j#>*#Y{jhSwl%`5D$%`e2|iP85)F@{X5Xm8ZyrxNYBalj#2uW=NFd~fb{nUBvn_&
zLWb)whOl7R(J8Nekgl%>9zN}mK|3$}j(lbGp&0$el->e$`il2L2t-ar*VorrfT&z7
ze+eXNKS<g9G$57zJobY)%j<Oa$bj@q9NOS7S@icoO6Layva#PSG~sKS0P<&)&OdbC
z?l^-RJ`UC(>LZ?!0O^-bR?INLt$#rCm`j5UNc$l6sg*YGG5{fa<Zwgll_L0&W0X9~
zr+-fg#5fMH7$?uqIB+5XNIxGyf)=WxsDYzfJ_;cGyk8rMnHNe-ZN0_M$n>YDttW6#
zeCzK+*)`*0Wea|70g_BL@e&03yUx`{*#a9N7tH{S#5rGH!a-ZoSppJr?2r1&ZRvtQ
zK;l&w-w%O@ZJv0Sl(&tt*Uz&6`AY~O$_H_35LRB)Q)01wD4G9ma(1w?-#LWxLHw<d
z3_z;-Crm7R8Jme^AQO;{{U*^&p3Uo(F%V=0Q4o{c(dG5W+_TyOr1Ij`BFxeU36ISO
zBXs!XwUh3lLHJqEc9MI{#R7f&=(!{#o|9!CSge83*k6oTYc@*YrXYcA2I6TIZRY%v
z!Xf^LSL<JH5hMP#B|?p_{G3F~%)4k5ZJ&Ymw3U?x=^6|Ot1fz)gs;X`36imHZw%Ie
zRDBe9E*8{BJZ*q*L%(Zi@<|v*Ka|d2>;%Ls7b`K=RN2&K??#Colt$}Z=~!;gEJ-ap
zBqp|Pe(Qz8t_xC{kQ*=ROA~LT_JDYOq&|a>bo<sjz-puG>t}fa!phzqM4G3*+ZIJP
zc->=)IR+x3CJzl6VVFkr#XR2*9ry}mZ#h2L!ph!xl-xS?CGTuLI+NK%RDk{Ni(Vd(
z+35Pl)qam@0it{mFUe?WLA_Ae^^IT?tMa0S6zS`&HT8)g(_-Bg-eCdqVMs0(8lcvW
z((_DhK7!g;gVKdgKt%Z<e%3_TY;!+zVxcer2tV)DS#nyerqE}XWM+9E0YjmAD$3q;
z98?nKJcRY$@q2vzg_9r=R?=w>Lifc-WhGr}#PxmEBA?H<Al&iIY+u}wFArcg$`<+q
zvc9itM`31+RxcEGT^I<6S=skbLOIhj#%nq0<tSS?UISA3=j?K^beEK=0v8~CT*-=2
z$J=je>is*z(RJYr^?7eLKlooFbZq;!CS|%jz_*0>0rgg6|Mmfygsuz6*eCT72Bgm<
zi2pYlk`04As(`Sv?}H@Ev!dI1vobG2x2GOP{f?qqgOn`_0VH@&x?U*kwkQ~o^?lSr
zXyTMb51k2Ii?TOoS%9pznOISuRHdqT0OH8Sa(&?4w`v~^d}zyK5|H@%zK<z$%e#tH
z`5H7FJX4xAe}Lpo)(Mi{kO0^!A1>^KOC>y;H|mhs?~AWJe-ePvVW)~h<mduY)%!;@
zjsH&d&D+<reop;{eL^mWVa$`p_(zN(y>&E7`J~YD@&!Z6!{BU`EeQbR0{=bfsX&YZ
zWU((G{8QhSJkC^$pH87@x9x!oQMTw!3y=?NVcr09(eb=`5ot!TaR2}Va7jc#RId-Z
zEw-6heF6?`h-!v9XCn+5E|l#gUKMrJo&R+Jruk!>xa3c)?0Ysz^@U&CmDxVPUMO3<
zEG5jF0)k%|3y=sJM3jlO^r)FwI@RF2dzG~GJ-tKEXUN}#vgFWd;q#^On<Y49rL}rq
z*}DTx=Xqa8a-7_C!B83`1Q6|m_+MIsbYJ2R$hz}Rq~v@aSO?^6bX)QV4aoXGX1$}(
z8dG=x;^CwR2@QwfO7z$cvH=Cip#@EK!Xm9>W|IOc`G9(#7j8ngMX8VBnCtqi70^0R
z#HW1-7RlDH`{5@mb;RJvnpkUlSsKKBxgwnqWnvvYKveVbb?47j?RX5v7lgcNC{2;G
zcR9MO%=kXK1|%+<eSKp4^Mz>)ub1sAuT8A(Z~1DF_}cSd1XNTk2oMAV@_Fy`Xh=#j
zdesEROK{@yY73A*G!YQ954tT&Ymm=-okK%yn2PFqc=pV(?xs^sy1zApmA(6t#%v)o
z4jqJnIVf9vrDLcoFBn6U6GDX@@IG?mSD?$%nj;TL6dwf2#5%fwaBZ(46nQZrS?VFO
zKuno0dw0HrvsO0*4Uz>29VbSH4(egt0B|<CFY^S1>w1kPWqermdZDoU(f|$8^I8(m
z1VVPeJQm+wzE=aX?)OatL`AVO0D=FO+pq_-X@sPf&|%*0Z|N{Et9o{ocx)bp_HTxK
ziv95)sAq8i^2xs!uvv5U?MJWUep0tWu*C#lGs^ajKB9nd?Rld`Ff8<$fsyFGROQPY
zwTtU|v^AyKFAXC$Pd<F>zwM4!Sfgqkg@z;!kjso1Mce6@Y$d!rfC_Y9dRvC#UDxY;
zk~6KHn)aFEer-Ck^DeqCyUg#|xbD1*Nhk=9hv4`_M|-N&n&Z{qB9e0`xUv@~F4Oz=
z)e)^+*K?~?S7uw@|7P6_gIA*4vK6V`u0Q{DAuV${XsyoveCodBu(=;ySqH)ga!y=2
zC)LKbzAeqK8lQpi3K9IR0rBrQ@4h@E=T3KFZLe1keOhp!W1Jv+Ay{Rqh0>TTN7-AS
z+23B+eEGlM|Cf&d*Yr46{z;BSmzAzFlmEURoa=kt7B{&)=fq{N`U;BmJ%2_M%S8AQ
zz~zmUw{v2#_tYVAUS*D`2KoCM&j0J}KjH|er5dT~-PXOp>^Bzw52$!_Xz75fU;qFB
M07*qoM6N<$f-@{rbN~PV

literal 0
HcmV?d00001

diff --git a/src/static/practise-two-title.png b/src/static/practise-two-title.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c935d2389a698fd5ef3e1969dda54261c4cf0d8
GIT binary patch
literal 8859
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

literal 0
HcmV?d00001

diff --git a/src/store.js b/src/store.js
index 0f40a5f..612fc74 100644
--- a/src/store.js
+++ b/src/store.js
@@ -5,6 +5,7 @@ const defaultUser = {
   nickName: "游客",
   avatar: "../static/avatar.png",
   trio: 0, // 大于1表示完成了新手引导
+  lvlName: "砖石1级",
 };
 
 // 定义游戏相关的 store
diff --git a/src/util.js b/src/util.js
index ad227cf..95cab41 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,3 +1,48 @@
+export function renderScores(ctx, arrows = []) {
+  let rowIndex = 0;
+  arrows.forEach((item, i) => {
+    rowIndex = i;
+    if (arrows.length === 12) {
+      if (i > 5) rowIndex = i - 6;
+      ctx.drawImage(
+        "../static/score-bg.png",
+        16 + rowIndex * 46,
+        i > 5 ? 366 : 320,
+        40,
+        40
+      );
+      renderText(
+        ctx,
+        item.ring,
+        25,
+        "#fed847",
+        36 + rowIndex * 46,
+        i > 5 ? 395 : 349,
+        "center"
+      );
+    }
+    if (arrows.length === 36) {
+      ctx.drawImage(
+        "../static/score-bg.png",
+        18 + (i % 9) * 30,
+        290 + Math.ceil((i + 1) / 9) * 30,
+        27,
+        27,
+        "center"
+      );
+      renderText(
+        ctx,
+        item.ring,
+        18,
+        "#fed847",
+        31 + (i % 9) * 30,
+        310 + Math.ceil((i + 1) / 9) * 30,
+        "center"
+      );
+    }
+  });
+}
+
 export function renderLine(ctx, from) {
   ctx.beginPath();
   ctx.lineWidth = 1;
@@ -8,9 +53,10 @@ export function renderLine(ctx, from) {
   ctx.stroke();
 }
 
-export function renderText(ctx, text, size, color, x, y) {
+export function renderText(ctx, text, size, color, x, y, textAlign = "left") {
   ctx.setFontSize(size);
   ctx.setFillStyle(color);
+  ctx.setTextAlign(textAlign);
   ctx.fillText(text, x, y);
 }
 
@@ -19,11 +65,11 @@ export function renderRankTitle(ctx, text) {
   const textWidth = ctx.measureText(text).width;
   const padding = 8; // 文字与背景边缘的间距
   const radius = 10; // 圆角半径
-  const textX = 75;
+  const textX = 85;
   const textY = 55;
-  const x = textX - padding; // 文字 x 坐标减去内边距
+  const x = textX - padding - 15; // 文字 x 坐标减去内边距
   const y = textY - fontSize - padding / 2 + 1; // 文字 y 坐标减去字体大小和内边距
-  const width = textWidth + padding * 2 - 15; // 背景宽度
+  const width = textWidth + padding * 2 - 19; // 背景宽度
   const height = fontSize + padding + 1; // 背景高度
 
   // 开始绘制圆角矩形
@@ -49,3 +95,39 @@ export function renderRankTitle(ctx, text) {
   ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
   ctx.fillText(text, textX, textY); // 绘制文字
 }
+
+export const drawRoundImage = async (
+  ctx,
+  imgPath,
+  x,
+  y,
+  width,
+  height,
+  radius
+) => {
+  ctx.save();
+  // 创建圆角路径
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+
+  // 右上角
+  ctx.lineTo(x + width - radius, y);
+  ctx.arcTo(x + width, y, x + width, y + radius, radius);
+
+  // 右下角
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+
+  // 左下角
+  ctx.lineTo(x + radius, y + height);
+  ctx.arcTo(x, y + height, x, y + height - radius, radius);
+
+  // 左上角
+  ctx.lineTo(x, y + radius);
+  ctx.arcTo(x, y, x + radius, y, radius);
+
+  ctx.clip();
+  // 绘制图片
+  ctx.drawImage(imgPath, x, y, width, height);
+  ctx.restore();
+};