mute sound button

src/client/lobby.css

@@ -47,3 +47,22 @@
     width: 100vw;
     height: 100vh;
 }
+
+.toggle-sound {
+    background-size: cover;
+    position: fixed;
+    bottom: 5px;
+    left: 5px;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    background-color: lightgray;
+}
+
+.toggle-sound.off {
+    background-image: url('/sound-off.png');
+}
+
+.toggle-sound.on {
+    background-image: url('/sound-on.png');
+}

src/client/lobby.js

@@ -11,28 +11,19 @@ export default class SanGuoShaLobby extends React.Component {
 
     componentDidMount() {
         // Mobile requires explicit user action to play audio
-        document.querySelector('#lobby-view').addEventListener('click', this.playAudio);
+        document.querySelector('#lobby-view').addEventListener('click', this.props.playAudio);
     }
 
     componentWillUnmount() {
-        document.querySelector('#lobby-view').removeEventListener('click', this.playAudio);
+        document.querySelector('#lobby-view').removeEventListener('click', this.props.playAudio);
     }
 
     render() {
         return <div className='lobby'>
-            <div
-                // TODO remove hack button to turn off sound if too loud
-                style={{ position: 'absolute', width: '100px', height: '100px' }}
-                onClick={() => this.props.audio.volume = 0.1 - this.props.audio.volume}
-            />
             <div className='title'>
                 <img src='./name.png' alt='sanguosha' />
             </div>
             <Lobby gameServer={SERVER} lobbyServer={SERVER} gameComponents={GAMES} />
         </div>;
     }
-
-    playAudio = () => {
-        this.props.audio.play();
-    };
 }

src/index.js

@@ -1,3 +1,4 @@
+import * as classNames from 'classnames';
 import React from 'react';
 import { render } from 'react-dom';
 import Room from './client/room';
@@ -12,10 +13,20 @@ class App extends React.Component {
         this.audio.volume = 0.1;
         this.audio.loop = true;
         this.audio.play();
+        this.state = { volume: 0.1 };
     }
 
     render() {
-        return process.env.REACT_APP_LOCAL ? <Room /> : <Lobby audio={this.audio} />;
+        return <div>
+            {process.env.REACT_APP_LOCAL ? <Room /> : <Lobby playAudio={() => this.audio.play()} />}
+            <button
+                className={classNames('toggle-sound', this.state.volume === 0 ? 'off' : 'on')}
+                onClick={() => {
+                    this.audio.volume = 0.1 - this.audio.volume;
+                    this.setState({ volume: this.audio.volume });
+                }}
+            />
+        </div>;
     }
 }