refactor: improve style

sitcon-tw · Jul 21, 2024 · c491901 · c491901
1 parent b590553
commit c491901
Show file tree

Hide file tree

Showing 4 changed files with 283 additions and 274 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -137,13 +137,16 @@
             <th style="padding: 0 15px;">分數</th>
             <th style="padding: 0 3px;">排名</th>
           </thead>
-          <tr v-for="item in group" :key="item.name">
+          <tr v-for="item in group" :key="item.name" class="table-row">
             <td>{{ item.name }}</td>
             <td>{{ rankStatus.find(s => s.name === item.name)?.coin || 0 }}</td>
             <td>
-              <span v-if="getTeanRank(rankStatus.find(s => s.name === item.name)?.coin || 0) === 1" style="font-size: 15px;" @click="callFireworks('第一名')">🥇</span>
-              <span v-else-if="getTeanRank(rankStatus.find(s => s.name === item.name)?.coin || 0) === 2" style="font-size: 15px;" @click="callFireworks('第二名')">🥈</span>
-              <span v-else-if="getTeanRank(rankStatus.find(s => s.name === item.name)?.coin || 0) === 3" style="font-size: 15px;" @click="callFireworks('第三名')">🥉</span>
+              <span v-if="getTeanRank(rankStatus.find(s => s.name === item.name)?.coin || 0) === 1"
+                style="font-size: 16px; user-select: none; cursor: pointer;" @click="callFireworks('第一名')">🥇</span>
+              <span v-else-if="getTeanRank(rankStatus.find(s => s.name === item.name)?.coin || 0) === 2"
+                style="font-size: 16px; user-select: none; cursor: pointer;" @click="callFireworks('第二名')">🥈</span>
+              <span v-else-if="getTeanRank(rankStatus.find(s => s.name === item.name)?.coin || 0) === 3"
+                style="font-size: 16px; user-select: none; cursor: pointer;" @click="callFireworks('第三名')">🥉</span>
             </td>
           </tr>
         </table>
@@ -280,7 +283,6 @@
 import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from "vue-qrcode-reader";
 import axios from "axios";
 import qs from "qs";
-import ConfettiExplosion from "vue-confetti-explosion";
 
 import CoinTrendChart from "./components/CoinTrendChart.vue";
 import FireworksModal from "./components/FireworkModal.vue";
@@ -354,7 +356,7 @@ export default {
           name: "第九小隊",
         },
       ],
-      problems: [], 
+      problems: [],
     }
   },
 
@@ -637,5 +639,5 @@ export default {
     height: 100%;
     object-fit: cover;
   }
-}  
+}
 </style>
diff --git a/src/components/CoinTrendChart.vue b/src/components/CoinTrendChart.vue
@@ -68,61 +68,61 @@ export default {
           this.renderChart(groupedData);
         })
         .catch(error => console.error("Error:", error));
-    },    
+    },
 
-    processData(data) { 
-       // 按時間戳排序
-       data.sort((a, b) => a.consume_timestamp - b.consume_timestamp);
-      
-       const groupedData = {};
-       const allTimestamps = new Set(
-            data.map((item) => item.consume_timestamp)
-          );
+    processData(data) {
+      // 按時間戳排序
+      data.sort((a, b) => a.consume_timestamp - b.consume_timestamp);
 
-          data.forEach((item) => {
-            if (!groupedData[item.team_name]) {
-              groupedData[item.team_name] = [];
-            }
-            const lastValue =
-              groupedData[item.team_name].length > 0
-                ? groupedData[item.team_name][
-                    groupedData[item.team_name].length - 1
-                  ].y
-                : 0;
-            groupedData[item.team_name].push({
-              x: new Date(item.consume_timestamp * 1000),
-              y: lastValue + item.coin,
-              reason: item.description,
-              points: item.coin,
-            });
-          });
+      const groupedData = {};
+      const allTimestamps = new Set(
+        data.map((item) => item.consume_timestamp)
+      );
 
-          // 為每個小隊填充空白時間戳
-          Object.keys(groupedData).forEach((teamName) => {
-            let lastValue = 0;
-            const filledData = [];
-            allTimestamps.forEach((timestamp) => {
-              const existingPoint = groupedData[teamName].find(
-                (point) => point.x.getTime() === timestamp * 1000
-              );
-              if (existingPoint) {
-                lastValue = existingPoint.y;
-                filledData.push(existingPoint);
-              } else {
-                filledData.push({
-                  x: new Date(timestamp * 1000),
-                  y: lastValue,
-                  reason: "", // 空原因
-                  points: 0, // 0 點數
-                });
-              }
+      data.forEach((item) => {
+        if (!groupedData[item.team_name]) {
+          groupedData[item.team_name] = [];
+        }
+        const lastValue =
+          groupedData[item.team_name].length > 0
+            ? groupedData[item.team_name][
+              groupedData[item.team_name].length - 1
+            ].y
+            : 0;
+        groupedData[item.team_name].push({
+          x: new Date(item.consume_timestamp * 1000),
+          y: lastValue + item.coin,
+          reason: item.description,
+          points: item.coin,
+        });
+      });
+
+      // 為每個小隊填充空白時間戳
+      Object.keys(groupedData).forEach((teamName) => {
+        let lastValue = 0;
+        const filledData = [];
+        allTimestamps.forEach((timestamp) => {
+          const existingPoint = groupedData[teamName].find(
+            (point) => point.x.getTime() === timestamp * 1000
+          );
+          if (existingPoint) {
+            lastValue = existingPoint.y;
+            filledData.push(existingPoint);
+          } else {
+            filledData.push({
+              x: new Date(timestamp * 1000),
+              y: lastValue,
+              reason: "", // 空原因
+              points: 0, // 0 點數
             });
-            groupedData[teamName] = filledData;
-          });
+          }
+        });
+        groupedData[teamName] = filledData;
+      });
 
-          return groupedData;
+      return groupedData;
     },
-          
+
     renderChart(groupedData) {
       const ctx = this.$refs.coinTrendChart.getContext("2d");
       const datasets = this.teamOrder
@@ -211,7 +211,7 @@ export default {
                 mode: 'x'
               },
               limits: {
-                x: {min: 'original', max: 'original'}
+                x: { min: 'original', max: 'original' }
               }
             }
           },
@@ -241,7 +241,8 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  height: 400px; /* 確保有高度 */
+  height: 400px;
+  /* 確保有高度 */
 }
 
 .main {
@@ -276,7 +277,8 @@ export default {
 
 @media (max-width: 768px) {
   .chart-container {
-    height: 300px; /* 調整手機上的高度 */
+    height: 300px;
+    /* 調整手機上的高度 */
   }
 
   .reset-chart-button {
@@ -287,7 +289,8 @@ export default {
 
 @media (max-width: 480px) {
   .chart-container {
-    height: 250px; /* 調整小屏幕上的高度 */
+    height: 250px;
+    /* 調整小屏幕上的高度 */
   }
 
   .reset-chart-button {