From 0ee1536c2b8fa2ed084c17ad3ed267dd3753e8ae Mon Sep 17 00:00:00 2001
From: cflsxjw <cfl.sxjw@gmail.com>
Date: Thu, 26 Sep 2024 15:11:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B=E5=BE=97=E5=88=86=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=9D=BF=E7=9A=84=E5=A4=96=E8=A7=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json   |  2 +-
 package.json        |  2 +-
 src/score-board.vue | 32 ++++++++++++++++++--------------
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ca04c37..ee29866 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "roller",
+  "name": "roller-frontend",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
diff --git a/package.json b/package.json
index 0345e51..bcad2a7 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "roller",
+  "name": "roller-frontend",
   "private": true,
   "version": "0.0.0",
   "type": "module",
diff --git a/src/score-board.vue b/src/score-board.vue
index 3c82a91..9c9a057 100644
--- a/src/score-board.vue
+++ b/src/score-board.vue
@@ -2,16 +2,20 @@
 import {ref, computed} from "vue";
 const emit = defineEmits(['score-changed'])
 const prop = defineProps(['currentScore'])
-const n = 1;
+const reset = ref(true)
 const tag = ref(0)
 function clicked(num)
 {
+  reset.value=false;
   tag.value=num
   emit('score-changed', num)
 }
 function getButtonColor(score) {
-  if (score <= prop.currentScore)
-  {
+  if (reset.value) {
+    return {background: '#D9D9D9'}
+  }
+
+  if (score <= prop.currentScore) {
     if (prop.currentScore < 0) {
       return {background: '#6D3939'}
     }
@@ -28,19 +32,19 @@ function getButtonColor(score) {
 <template>
   <div class="score-board-container">
     <div class="score-container">
-      <div class="score">
-        <span v-if="currentScore >= 0">{{computed(()=>{return currentScore.toFixed(1)})}}</span>
-      </div>
+      <button class="score" @dblclick="reset=true;currentScore=0;$emit('score-changed',0)" :style="computed(()=>{return currentScore>=0?{background: '#297561'}:{background: '#754F29'}}).value">
+        <span>{{computed(()=>{return currentScore.toFixed(1)})}}</span>
+      </button>
       <span class="score-text">s<br>c<br>o<br>r<br>e</span>
     </div>
     <div class="buttons-group">
-      <el-button class="button" @click="clicked(3)" :style="getButtonColor(3)"></el-button>
-      <el-button class="button" @click="clicked(2.5)" :style="getButtonColor(2.5)"></el-button>
-      <el-button class="button" @click="clicked(2)" :style="getButtonColor(2)"></el-button>
-      <el-button class="button" @click="clicked(1.5)" :style="getButtonColor(1.5)"></el-button>
-      <el-button class="button" @click="clicked(1)" :style="getButtonColor(1)"></el-button>
-      <el-button class="button" @click="clicked(0.5)" :style="getButtonColor(0.5)"></el-button>
-      <el-button class="button" @click="clicked(-1)" :style="getButtonColor(-1)"></el-button>
+      <button class="button" @click="clicked(3)" :style="getButtonColor(3)"></button>
+      <button class="button" @click="clicked(2.5)" :style="getButtonColor(2.5)"></button>
+      <button class="button" @click="clicked(2)" :style="getButtonColor(2)"></button>
+      <button class="button" @click="clicked(1.5)" :style="getButtonColor(1.5)"></button>
+      <button class="button" @click="clicked(1)" :style="getButtonColor(1)"></button>
+      <button class="button" @click="clicked(0.5)" :style="getButtonColor(0.5)"></button>
+      <button class="button" @click="clicked(-1)" :style="getButtonColor(-1)"></button>
     </div>
   </div>
 </template>
@@ -50,6 +54,7 @@ function getButtonColor(score) {
     font-family: Itim;
     src: url("/src/assets/fonts/Itim-Regular.ttf");
 }
+
 * {
   padding: 0;
   margin: 0;
@@ -58,7 +63,6 @@ function getButtonColor(score) {
   height: 60px;
   width: 60px;
   border-radius: 50px;
-  background-color: #297561;
   margin: 15px 5px 15px 5px;
   border: #2A3F45 3px solid;
   font-size: 32px;