🎈 perf: UI Improve (#17)

- 改进了计分界面的UI
  - 计分界面采用Tab式设计
  - 更美观的玩家分数
- 终于有图标了~
- 一点点细节修改

Discussions: #7 (comment)
我真服了，一开始我本地在main，后来觉得要转到dev，为了这个问题费了点时间，然后又发现远程的dev落后了，又去GitHub上更新dev，结果本地的更改不是最新的，pull下来又冲突...

CONTRIBUTING.md

@@ -52,7 +52,7 @@ The subject contains a brief description of the change.
 
 #### footer
 Footer.  
-The footer should contain information about major changes and is also the location to reference the GitHub Issue that this commit closes.  
+The footer should contain any information about major changes and is also the location to reference the GitHub Issue that this commit closes.  
 
 ## Hint
 - Use [Prettier](https://prettier.io) to format your code.

assets/css/styles.css

@@ -7,6 +7,7 @@
     scrollbar-width: 0;
     scrollbar-color: none;
     scroll-behavior: smooth;
+    -webkit-tap-highlight-color: transparent;
 }
 *::-webkit-scrollbar {
     display: none;
@@ -100,52 +101,121 @@ label {
     margin-bottom: 10px;
 }
 
-.game-board {
+#gameBoardWrapper {
+    width: 100%;
+    height: 100%;
     display: flex;
-    flex-direction: row;
-    width: 80%;
-    max-width: 90%;
-    min-width: 50%;
-    height: 90%;
-    max-height: 80%;
-    min-height: 40%;
-    padding: 20px;
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: stretch;
+    flex-direction: column;
+}
+#gameBoardWrapper:not(.active) {
+    display: none;
+}
+#gameBoard {
+    flex: 1;
+}
+#gameBoard>* {
+    height: 100%;
+    padding: 10px;
 }
-.game-board:not(.active) {
+#gameBoard>*:not(.active) {
     display: none;
 }
+#gameBoard>div>div {
+    margin: 5px;
+}
 
-@media screen and (max-width: 700px) {
-    .game-board {
+.responsive-flexbox {
+    display: flex;
+    flex-direction: row;
+}
+@media screen and (max-width: 800px) {
+    .responsive-flexbox {
         flex-direction: column;
     }
 }
 
-.game-board>div {
-    flex: 1;
+#board-score>div {
     display: flex;
     flex-direction: column;
 }
-.game-board>div>s-card {
-    flex: 1;
-    margin: 5px;
-}
 
-.player-scores, .current-match, .match-order, .history {
-    padding: 20px;
+#playerScores, #currentMatchContainer, #matchOrderContainer, #matchHistory {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
     border-radius: 12px;
     overflow-y: auto;
 }
+#currentMatch, #playerScoreList, #historyList, #matchOrderList {
+    flex: 1;
+}
 h2 {
     margin-top: 0;
 }
 
-.current-match .player {
+@media screen and (min-width: 800px) {
+    #currentMatchContainer {
+        width: 60%;
+    }
+    #playerScores {
+        width: 40%;
+    }
+}
+#currentMatch {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#currentMatch .player {
+    min-width: 200px;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+    padding: 10px;
+}
+#currentMatch .player>* {
+    margin: 10px;
+}
+#currentMatch .player>.playerName, #playerScoreList>li>.playerName {
+    font-weight: bold;
+    color: var(--s-color-secondary);
+    font-size: x-large;
+}
+#currentMatch .player>.playerScore {
+    padding: 30px 20px;
+    min-width: 140px;
+    min-height: 160px;
+    display: flex;
+    font-size: xx-large;
+    justify-content: center;
+    align-items: center;
+    /* 伪造一个s-card的阴影 */
+    box-shadow: var(--s-elevation-level1);
+    border-radius: 12px;
+}
+
+#playerScoreList>li {
+    display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
+}
+#playerScoreList>li:not(:last-child) {
+    border-bottom: var(--s-color-surface-variant) solid 1px;
 }
+#playerScoreList>li>.playerScore {
+    font-size: x-large;
+    color: var(--s-color-primary);
+}
+
+#tooltips {
+    position: fixed;
+    width: 0;
+    height: 0;
+}

assets/js/lang.js

@@ -11,12 +11,17 @@ const languages = {
         'ui.theme.themeName.dark': 'dark',
         'ui.topbar.language': 'Languages',
         'ui.topbar.theme': 'Theme',
+        'ui.topbar.more': 'More',
+        'ui.topbar.reload': 'Reload',
         'ui.topbar.github': 'GitHub',
         'ui.setup.winningBalls': 'Set Winning Balls',
         'ui.setup.playerName': 'Player Name',
         'ui.setup.addPlayer': 'Add Player',
         'ui.setup.playerListHint': 'Players:',
         'ui.setup.startGame': 'Start Game',
+        'ui.gameBoard.tab.score': 'Score',
+        'ui.gameBoard.tab.history': 'History',
+        'ui.gameBoard.tab.info': 'Info',
         'ui.gameBoard.playerScores': 'Player Scores',
         'ui.gameBoard.matchHistory': 'Match History',
         'ui.gameBoard.currentMatch': 'Current Match',
@@ -39,12 +44,17 @@ const languages = {
         'ui.theme.themeName.dark': '暗色',
         'ui.topbar.language': '语言',
         'ui.topbar.theme': '主题',
+        'ui.topbar.more': '更多',
+        'ui.topbar.reload': '重载',
         'ui.topbar.github': 'GitHub',
         'ui.setup.winningBalls': '设置制胜球数',
         'ui.setup.playerName': '玩家名',
         'ui.setup.addPlayer': '添加玩家',
         'ui.setup.playerListHint': '玩家:',
         'ui.setup.startGame': '开始比赛',
+        'ui.gameBoard.tab.score': '计分',
+        'ui.gameBoard.tab.history': '历史',
+        'ui.gameBoard.tab.info': '信息',
         'ui.gameBoard.playerScores': '玩家分数',
         'ui.gameBoard.matchHistory': '比赛历史',
         'ui.gameBoard.currentMatch': '当前比赛',
@@ -128,7 +138,7 @@ function langForce(lang, key, ...args) {
 function setLanguage(language) {
     console.log(`Language set to ${language}`);
     writeConfig('language', language);
-    window.location.reload();
+    e_reloadPage();
 }
 
 /**

assets/js/script.js

@@ -43,7 +43,7 @@ function startGame() {
         return;
     }
     document.getElementById('setup').style.display = 'none';
-    document.getElementById('gameBoard').classList.add('active');
+    document.getElementById('gameBoardWrapper').classList.add('active');
     updatePlayerScoreList();
     updateMatchOrderList();
     startNewMatch();
@@ -98,13 +98,15 @@ function updateCurrentMatch() {
     const player2 = players[currentMatch[1]];
     match.innerHTML = `
         <div class="player">
-            <label>${player1}: <span>${currentMatchScores[player1]}</span></label>
+            <div class="playerName">${player1}</div>
+            <div class="playerScore">${currentMatchScores[player1]}</div>
             <s-button type="filled-tonal" class="score-button" onclick="incrementCurrentMatchScore('${player1}')">
                 ${lang('ui.gameBoard.score')}
             </s-button>
         </div>
         <div class="player">
-            <label>${player2}: <span>${currentMatchScores[player2]}</span></label>
+            <div class="playerName">${player2}</div>
+            <div class="playerScore">${currentMatchScores[player2]}</div>
             <s-button type="filled-tonal" class="score-button" onclick="incrementCurrentMatchScore('${player2}')">
                 ${lang('ui.gameBoard.score')}
             </s-button>
@@ -117,7 +119,10 @@ function updatePlayerScoreList() {
     playerScoreList.innerHTML = '';
     players.forEach(player => {
         const li = document.createElement('li');
-        li.textContent = `${player}: ${totalScores[player]}`;
+        li.innerHTML = `
+            <div class="playerName">${player}</div>
+            <div class="playerScore">${totalScores[player]}</div>
+        `;
         playerScoreList.appendChild(li);
     });
 }
@@ -159,7 +164,7 @@ function resetScores() {
     currentMatch = [0, 1];
     matchHistory = [];
     document.getElementById('playerList').innerHTML = '';
-    document.getElementById('gameBoard').style.display = 'none';
+    document.getElementById('gameBoardWrapper').style.display = 'none';
     document.getElementById('initialSetup').style.display = 'block';
     document.getElementById('playerInputGroup').style.display = 'block';
     document.getElementById('playerListGroup').style.display = 'block';

assets/js/ui.js

@@ -81,7 +81,24 @@ function e_toggleTheme(theme) {
     writeConfig('theme', theme);
     showSnackBar(lang('ui.tooltip.themeSetTo', lang(`ui.theme.themeName.${theme}`)), 'Theme');
 }
+
+function e_reloadPage() {
+    showLoading();
+    window.location.reload();
+}
+
 function e_gotoGitHub() {
     showSnackBar(lang('ui.tooltip.repoTip'), 'RepoTips');
     window.open('https://github.com/Minemetero/Table-Tennis-Counter', '_blank');
+}
+
+function e_boardSelectChange() {
+    let selectedIndex = document.getElementById('gameBoardSelector').selectedIndex;
+    let boards = document.querySelectorAll('#gameBoard>div');
+    boards.forEach(function(currentValue) {
+        currentValue.classList.remove('active');
+    });
+    if (selectedIndex >= 0 && selectedIndex < boards.length) {
+        boards[selectedIndex].classList.add('active');
+    }
 }

docs/CONTRIBUTING.zh-CN.md

@@ -46,14 +46,14 @@ Fork 存储库。
 | 🐳 chore    | 改变构建流程、或者增加依赖库、工具等               |
 | ↩ revert    | 回滚到上一个版本                                  |
 
-#### 标题
-标题。  
-该标题包含对更改的简明描述。  
+#### 主题
+主题。  
+该主题包含对更改的简明描述。  
 
 #### 页脚
 **可选。**  
 页脚。  
-页脚应包含有关重大更改的信息，并且也是引用此提交关闭的 GitHub Issue 的位置。  
+页脚应包含有关重大更改的任何信息，并且也是引用此提交关闭的 GitHub Issue 的位置。  
 
 ## 提示
 - 使用 [Prettier](https://prettier.cn) 格式化您的代码。