add sound switch

client/src/components/Action.vue

@@ -20,8 +20,6 @@
              @click="raise(size)"
              v-show="showActionSize(size)"
           > {{Math.floor(size)}}</i>
-          <!--          <i @click="raise(pot)">{{pot}}</i>-->
-          <!--          <i @click="raise(pot * 2)">{{2*pot}}</i>-->
         </div>
       </div>
       <div class="action-other-size"
@@ -46,9 +44,11 @@
         <div class="shadow"
              @click="isRaise = false"></div>
       </div>
-      <iAudio :play="playClick" type="click"></iAudio>
-      <iAudio :play="playFold" type="fold"></iAudio>
-      <iAudio :play="playRaise" type="raise"></iAudio>
+      <div>
+        <iAudio :play="playClick && audioStatus" type="click"></iAudio>
+        <iAudio :play="playFold && audioStatus" type="fold"></iAudio>
+        <iAudio :play="playRaise && audioStatus" type="raise"></iAudio>
+      </div>
     </div>
   </div>
 </template>
@@ -73,6 +73,7 @@ import { IPlayer } from '@/interface/IPlayer';
   @Prop() private isPreFlop!: boolean;
   @Prop() private isTwoPlayer!: boolean;
   @Prop() private currPlayer!: IPlayer;
+  @Prop() private audioStatus?: boolean;
 
   private isRaise = false;
   private raiseSize: number = 0;
@@ -123,16 +124,15 @@ import { IPlayer } from '@/interface/IPlayer';
   }
 
   private action(command: string) {
-    // if (command.indexOf('raise') > -1 || command === 'allin' || command === 'call' ) {
-    //   this.playRaise = true;
-    // }
-    // if (command === 'fold' || command === 'check') {
-    //   this.playFold = true;
-    // }
+    if (command.indexOf('raise') > -1 || command === 'allin' || command === 'call' ) {
+      this.playRaise = true;
+    }
+    if (command === 'fold' || command === 'check') {
+      this.playFold = true;
+    }
     if (!this.actioned) {
       this.actioned = true;
       this.$emit('action', command);
-      // this.isAction = false;
       this.isRaise = false;
       this.actioned = false;
     }

client/src/components/Audio.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="audio-container">
-<!--    <audio ref="click" controls>-->
-<!--      <source src="../assets/mp3/click.mp3" type="audio/mpeg">-->
-<!--      Your browser does not support the audio element.-->
-<!--    </audio>-->
-<!--    <audio ref="raise" controls>-->
-<!--      <source src="../assets/mp3/raise.mp3" type="audio/mpeg">-->
-<!--      Your browser does not support the audio element.-->
-<!--    </audio>-->
-<!--    <audio ref="fold" controls>-->
-<!--      <source src="../assets/mp3/fold.mp3" type="audio/mpeg">-->
-<!--      Your browser does not support the audio element.-->
-<!--    </audio>-->
+    <audio ref="click" controls>
+      <source src="../assets/mp3/click.mp3" type="audio/mpeg">
+      Your browser does not support the audio element.
+    </audio>
+    <audio ref="raise" controls>
+      <source src="../assets/mp3/raise.mp3" type="audio/mpeg">
+      Your browser does not support the audio element.
+    </audio>
+    <audio ref="fold" controls>
+      <source src="../assets/mp3/fold.mp3" type="audio/mpeg">
+      Your browser does not support the audio element.
+    </audio>
+    <audio ref="income" controls>
+      <source src="../assets/mp3/income.mp3" type="audio/mpeg">
+      Your browser does not support the audio element.
+    </audio>
   </div>
 </template>
 

client/src/views/game.vue

@@ -36,6 +36,7 @@
                   :min-action-size="minActionSize"
                   :is-two-player="gamePlayers.length === 2"
                   :pot="pot"
+                  :audio-status="audioStatus"
                   :prev-size="prevSize"
                   @action = 'action'
     ></actionDialog>
@@ -47,6 +48,7 @@
         <i @click="showBuyInDialog()">buy in</i>
         <i @click="standUp()">stand Up</i>
         <i @click="showCounterRecord">counter record</i>
+        <i @click="closeAudio()">audio ({{`${audioStatus ? 'open' : 'close'}`}})</i>
       </div>
     </div>
     <BuyIn :showBuyIn.sync='showBuyIn'
@@ -58,7 +60,7 @@
     <record :players="players"
             v-model="showRecord"></record>
     <sendMsg @send = 'sendMsgHandle' :msg-list="msgListReverse"></sendMsg>
-<!--    <iAudio :play="playIncome" type="income"></iAudio>-->
+    <iAudio :play="playIncome && audioStatus" type="income" ></iAudio>
     <gameRecord v-model="showCommandRecord"
                 :game-list="gameList"
                 @getRecord = "getRecord"
@@ -145,7 +147,7 @@
     private actionUserId = '';
     private showAllin = false;
     private showMsg = false;
-    // private playIncome = false;
+    private playIncome = false;
     private msg = '';
     private time = ACTION_TIME;
     private timeSt = 0;
@@ -154,6 +156,7 @@
     private showCommandRecord = false;
     private gameList: IGameRecord [] = [];
     private currGameIndex = 0;
+    private audioStatus = true;
     private roomConfig: IRoom = {
       isShort: false,
       smallBlind: 1,
@@ -441,10 +444,10 @@
             });
           });
           // income music
-          // this.playIncome = true;
-          // setTimeout(() => {
-          //   this.playIncome = false;
-          // }, 1000);
+          this.playIncome = true;
+          setTimeout(() => {
+            this.playIncome = false;
+          }, 1000);
         }
 
         if (msg.action === 'newGame') {
@@ -522,6 +525,10 @@
       this.showSetting = false;
     }
 
+    private closeAudio() {
+      this.audioStatus = !this.audioStatus
+    }
+
     private play() {
       if (this.players.length >= 2) {
         this.gaming = true;