调整音效选项为静音与否，统一样式

itorr · Aug 24, 2022 · ee92f56 · ee92f56
1 parent 743e4e9
commit ee92f56
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/html/document.js b/html/document.js
@@ -54,15 +54,18 @@ const Voices = {
     chisato: new Audio('chinanago.mp3'),
     takina: new Audio('sakana.mp3'),
 
-    isMute: voiceButton.classList.contains('voice-mute')
+    isMute: false
 };
 
 Voices.takina.volume = Voices.chisato.volume = 0.8;
 Voices.takina.muted = Voices.chisato.muted = true;
 
 const toggleVoiceMute = () => {
-    voiceButton.classList.toggle('voice-mute');
-    Voices.isMute = voiceButton.classList.contains('voice-mute');
+    Voices.isMute = voiceButton.getAttribute('data-active') !== 'true';
+    voiceButton.setAttribute(
+        'data-active',
+        Voices.isMute
+    );
     Voices.takina.muted = Voices.chisato.muted = Voices.isMute;
 };
 
@@ -316,7 +319,7 @@ el.ontouchstart = e=>{
 
 const playVoice = () => {
     if (Voices.isMute) return;
-    console.log({ r: v.r, y: v.y })
+    // console.log({ r: v.r, y: v.y })
 
     if (el.classList.contains('chisato')) {
         if (

diff --git a/html/document.less b/html/document.less
@@ -120,17 +120,21 @@ canvas{
     font-size: 12px;
     line-height: 20px;
     padding: 4px 4px;
+    overflow: hidden;
+    width: 50px;
     a{
+        float: left;
         padding:0 4px;
+        margin-top:2px;
         border-radius:2px;
+        &[data-active="true"]{
+            background: #182562;
+        }
     }
 }
 .trigger-magic-link{
     &:before{
-        content: 'Auto';
-    }
-    &[data-active="true"]{
-        background: #182562;
+        content: '自动';
     }
 }
 
@@ -167,9 +171,9 @@ button{
 
     &.voice-mute {
         text-decoration: line-through;
-        &::before, &::after {
-            content: '\00a0';
-        }
+        // &::before, &::after {
+        //     content: '\00a0';
+        // }
     }
 }
 

diff --git a/html/index.html b/html/index.html
@@ -16,8 +16,8 @@
         </div>
     </div>
     <div class="ctrl-box">
-        <a class="set-voice" onclick="toggleVoiceMute()">声音</a>
         <a class="set-orientation-link" onclick="setOrientationListener()">陀螺仪</a>
+        <a class="set-voice" onclick="toggleVoiceMute()">静音</a>
         <a class="trigger-magic-link" onclick="triggerMagic()"></a>
     </div>
     <footer>