🐞 fix: Sober Update & Serve (#26)

- 修复了Sober.js破坏性更新导致的界面问题 - 修复了发球机制在多人下的bug Issue #22 #25 Discussions: lingbopro/soberjs-vscode#3 (comment)
Minemetero · Jul 6, 2024 · ef8e24f · ef8e24f
1 parent 6c9a67a
commit ef8e24f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 36 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "appbar",
+        "topbar"
+    ]
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -4,14 +4,9 @@
 }
 * {
     max-width: none;
-    scrollbar-width: 0;
-    scrollbar-color: none;
     scroll-behavior: smooth;
     -webkit-tap-highlight-color: transparent;
 }
-*::-webkit-scrollbar {
-    display: none;
-}
 
 body {
     margin: 0;
@@ -29,8 +24,9 @@ s-page {
     right: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
-main {
+#main {
     font-family: Arial, sans-serif;
     display: flex;
     flex-direction: column;
@@ -78,7 +74,7 @@ h1 {
     flex: 1;
 }
 s-text-field {
-    display: block;
+    display: grid;
 }
 #serveRule {
     display: block;

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -46,7 +46,7 @@ function startGame() {
         hideLoading();
         return;
     }
-    serveRule = parseInt(document.getElementById('serveRule').getAttribute('selectedIndex'));
+    serveRule = parseInt(document.getElementById('serveRule').selectedIndex);
     rotationalServes = parseInt(document.getElementById('rotationalServes').value);
     if (isNaN(serveRule) || serveRule < 0 || serveRule > 1) {
         showSnackBar(lang('ui.tooltip.serveRuleError'), 'ServeRuleError');
@@ -84,8 +84,10 @@ function incrementCurrentMatchScore(playerName) {
     rotationalServesCounter++;
     if (serveRule === 1 && rotationalServesCounter >= rotationalServes) {
         rotationalServesCounter = 0;
-        currentServe++;
-        if (currentServe >= players.length) {
+        if (currentServe == 0) {
+            currentServe = 1;
+        }
+        else {
             currentServe = 0;
         }
     }

diff --git a/assets/js/ui.js b/assets/js/ui.js
@@ -31,16 +31,14 @@ repo: https://github.com/Minemetero/Table-Tennis-Counter
     let languageMenuEl = document.getElementById('language-menu');
     langList.forEach(function(currentValue) {
         languageMenuEl.innerHTML += `
-<s-menu-item onclick="setLanguage('${currentValue}')">
+<s-popup-menu-item onclick="setLanguage('${currentValue}')">
     ${langForce(currentValue, 'language.LanguageName')}
-</s-menu-item>`;
+</s-popup-menu-item>`;
     });
     updateElementLanguages();
     // Dropdown Input
-    document.querySelectorAll('#serveRule>s-menu-item').forEach(function (currentValue, index) {
+    document.querySelectorAll('#serveRule>s-picker-item').forEach(function (currentValue, index) {
         currentValue.onclick = function () {
-            document.getElementById('serveRuleText').value = currentValue.innerText;
-            document.getElementById('serveRule').setAttribute('selectedIndex', index);
             document.getElementById('rotationalServesGroup').hidden = index !== 1;
         };
     });

diff --git a/index.html b/index.html
@@ -12,12 +12,12 @@
 <body>
     <s-page id="page" theme="auto">
         <s-linear-progress id="top-loading" indeterminate="true"></s-linear-progress>
-        <s-top-app-bar id="top-bar">
+        <s-appbar id="top-bar">
             <!--标题-->
             <div slot="headline" data-lang="ui.title">Table Tennis Counter</div>
             <!--右侧操作按钮-->
             <!-- Language -->
-            <s-menu slot="action" id="language-menu">
+            <s-popup-menu slot="action" id="language-menu">
                 <s-tooltip slot="trigger" data-lang="ui.topbar.language">
                     <s-icon-button slot="trigger">
                         <s-icon>
@@ -31,22 +31,22 @@
                         </s-icon>
                     </s-icon-button>
                 </s-tooltip>
-            </s-menu>
+            </s-popup-menu>
             <!-- Theme -->
             <s-tooltip slot="action" data-lang="ui.topbar.theme">
                 <s-icon-button slot="trigger" onclick="e_toggleTheme()">
                     <s-icon type="light_mode" id="theme-icon"></s-icon>
                 </s-icon-button>
             </s-tooltip>
             <!-- More -->
-            <s-menu slot="action">
+            <s-popup-menu slot="action">
                 <s-tooltip slot="trigger" data-lang="ui.topbar.more">
                     <s-icon-button slot="trigger">
                         <s-icon type="more_horiz"></s-icon>
                     </s-icon-button>
                 </s-tooltip>
                 <!-- GitHub -->
-                <s-menu-item data-lang="ui.topbar.reload" onclick="e_reloadPage()">
+                <s-popup-menu-item data-lang="ui.topbar.reload" onclick="e_reloadPage()">
                     <s-icon slot="start">
                         <svg viewBox="0 -960 960 960">
                             <path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 
@@ -57,7 +57,7 @@
                     </s-icon>
                 </s-menu-item>
                 <!-- GitHub -->
-                <s-menu-item data-lang="ui.topbar.github" onclick="e_gotoGitHub()">
+                <s-popup-menu-item data-lang="ui.topbar.github" onclick="e_gotoGitHub()">
                     <s-icon slot="start">
                         <svg viewBox="0 0 1024 1024">
                             <path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 
@@ -72,10 +72,10 @@
                             </path>
                         </svg>
                     </s-icon>
-                </s-menu-item>
+                </s--menu-item>
             </s-menu>
-        </s-top-app-bar>
-        <main id="main">
+        </s-appbar>
+        <s-scroll-view id="main">
             <div class="responsive-flexbox" id="setup">
                 <div id="setup-settings">
                     <div class="form-group">
@@ -95,18 +95,13 @@
                         </s-text-field>
                     </div>
                     <div class="form-group">
-                        <!-- Sober竟然没有下拉输入框，只能用菜单+输入框凑合一下了
-                            不过我已经给sober提了issue，下个版本就会有了-->
-                        <s-menu class="dropdown-input" id="serveRule" selectedIndex="-1">
-                            <!-- Serve Rule -->
-                            <s-text-field slot="trigger" data-lang="ui.setup.serveRule" data-lang-prop="label">
-                                <input type="text" id="serveRuleText" readonly>
-                            </s-text-field>
+                        <!-- Sober已经有下拉输入框力，太好力！ -->
+                        <s-picker class="dropdown-input" id="serveRule" data-lang="ui.setup.serveRule" data-lang-prop="label">
                             <!-- None -->
-                            <s-menu-item data-lang="ui.setup.serveRule.none"></s-menu-item>
+                            <s-picker-item data-lang="ui.setup.serveRule.none"></s-picker-item>
                             <!-- In Turn -->
-                            <s-menu-item data-lang="ui.setup.serveRule.inTurn"></s-menu-item>
-                        </s-menu>
+                            <s-picker-item data-lang="ui.setup.serveRule.inTurn"></s-picker-item>
+                        </s-picker>
                     </div>
                     <div class="form-group" id="rotationalServesGroup" hidden>
                         <!-- Balls Each Turn -->
@@ -173,7 +168,7 @@ <h2 data-lang="ui.gameBoard.matchOrder"></h2>
                     </div>
                 </div>
             </div>
-        </main>
+        </s-scroll-view>
         <div id="tooltips">
             <s-snackbar id="snackbar-snackbar">
                 Snackbar Message
@@ -183,7 +178,7 @@ <h2 data-lang="ui.gameBoard.matchOrder"></h2>
 
     <!-- 引入Sober界面库 -->
     <!-- 要让sober的引入在最前面，这样sober才能最先执行 -->
-    <script src="https://unpkg.com/sober@0.1.13/dist/sober.min.js"></script>
+    <script src="https://unpkg.com/sober@0.2.15/dist/sober.min.js"></script>
     <script defer src="./assets/js/utils.js"></script>
     <script defer src="./assets/js/lang.js"></script>
     <script defer src="./assets/js/script.js"></script>