Add sounds

assets/js/Common/VolumeControl.js

@@ -0,0 +1,87 @@
+import {html} from 'uhtml/node.js'
+import * as scriptune from 'https://cdn.jsdelivr.net/gh/marein/js-scriptune@main/src/scriptune.js'
+
+customElements.define('volume-control', class extends HTMLElement {
+    connectedCallback() {
+        this.append(html`
+            <input type="checkbox" class="gp-dropdown-toggle" id="volume-control-dropdown">
+            <label class="nav-link" for="volume-control-dropdown">
+                ${this._iconHighVolume = html`
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                         class="icon">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <path d="M15 8a5 5 0 0 1 0 8"/>
+                        <path d="M17.7 5a9 9 0 0 1 0 14"/>
+                        <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/>
+                    </svg>`}
+                ${this._iconLowVolume = html`
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                         class="icon">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <path d="M15 8a5 5 0 0 1 0 8"/>
+                        <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/>
+                    </svg>
+                `}
+                ${this._iconMute = html`
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                         class="icon">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/>
+                        <path d="M16 10l4 4m0 -4l-4 4"/>
+                    </svg>
+                `}
+            </label>
+            <div class="dropdown-menu dropdown-menu-card dropdown-menu-arrow dropdown-menu-end"
+                 data-bs-popper>
+                <div class="card">
+                    <div class="card-body">
+                        ${this._control = html`
+                            <input type="range" class="form-range" value="1" min="0" max="1" step=".1"/>
+                        `}
+                        ${this._output = html`
+                            <span class="badge bg-primary-lt w-100"></span>
+                        `}
+                    </div>
+                </div>
+            </div>
+        `);
+
+        this._storageKey = this.getAttribute('storage-key') || 'volume-control';
+        this._volume = this._volume;
+        this._abortController = new AbortController();
+
+        this._control.addEventListener('input', this._onVolumeChange.bind(this));
+    }
+
+    /**
+     * @param {Number} value
+     */
+    set _volume(value) {
+        localStorage.setItem(this._storageKey, value);
+        this._control.value = value;
+        this._updateElements();
+        scriptune.setMasterVolume(value);
+    }
+
+    get _volume() {
+        return Math.max(0, Math.min(parseFloat(localStorage.getItem(this._storageKey) || 1), 1));
+    }
+
+    _updateElements() {
+        this._output.innerText = `${this._volume * 100}%`;
+        this._iconHighVolume.classList.toggle('d-none', this._volume <= 0.6);
+        this._iconLowVolume.classList.toggle('d-none', this._volume === 0 || this._volume > 0.6);
+        this._iconMute.classList.toggle('d-none', this._volume !== 0);
+    }
+
+    _onVolumeChange(event) {
+        this._volume = parseFloat(event.target.value);
+
+        this._abortController.abort();
+        this._abortController = new AbortController();
+        scriptune.play('C4:s', {signal: this._abortController.signal});
+    }
+});

assets/js/ConnectFour/Game.js

@@ -3,6 +3,21 @@ import {Game as GameModel} from './Model/Game.js'
 import {html} from 'uhtml/node.js'
 import * as sse from '../Common/EventSource.js'
 
+function play(sheet) {
+    import('https://cdn.jsdelivr.net/gh/marein/js-scriptune@main/src/scriptune.js')
+        .then(m => m.play(sheet));
+}
+
+const sounds = {
+    error: () => play(`-:s F2:s C2:e`),
+    move: () => play(`#BPM 300\nC4:s C5:s`),
+    next: () => sounds.move(),
+    previous: () => play(`#BPM 300\nC5:s C4:s`),
+    win: () => play(`-:s C4:s E4:s G4:s C5:e G4:s C5:e`),
+    loss: () => play(`#BPM 180\n-:s C4:s E4:s G4:s C5:e -:s C5:s -:s C5:s -:e C1:h`),
+    join: () => play(`C4:s E4:s G4:s C5:e`)
+};
+
 customElements.define('connect-four-game', class extends HTMLElement {
     connectedCallback() {
         this._sseAbortController = new AbortController();
@@ -155,10 +170,13 @@ customElements.define('connect-four-game', class extends HTMLElement {
 
         const field = this._lastFieldInColumn(event.target.closest('[data-column]').dataset.column);
         if (!field) {
+            sounds.error();
             this._isMoveInProgress = false;
             return;
         }
 
+        sounds.move();
+
         const eventOptions = {
             bubbles: true,
             detail: {
@@ -181,6 +199,7 @@ customElements.define('connect-four-game', class extends HTMLElement {
             .catch(() => {
                 if (!this._game.hasPendingMove(eventOptions.detail)) return;
 
+                sounds.error();
                 this.dispatchEvent(new CustomEvent('ConnectFour.PlayerMovedFailed', eventOptions));
             })
             .finally(() => this._isMoveInProgress = false);
@@ -202,6 +221,7 @@ customElements.define('connect-four-game', class extends HTMLElement {
 
     _onPlayerJoined = event => {
         if (event.detail.gameId !== this._game.gameId) return;
+        sounds.join();
         this._game.redPlayerId = event.detail.redPlayerId;
         this._game.yellowPlayerId = event.detail.yellowPlayerId;
         this._changeCurrentPlayer(event.detail.redPlayerId);
@@ -212,6 +232,7 @@ customElements.define('connect-four-game', class extends HTMLElement {
         this._changeCurrentPlayer(event.detail.nextPlayerId);
         if (this._game.hasPendingMove(event.detail)) this._removePendingToken();
         if (this._game.hasMove(event.detail)) return;
+        if (event.detail.playerId !== this._playerId) sounds.move();
 
         if (!event.detail.pending) this._isMoveInProgress = false;
         if (!this._followMovesButton || this._followMovesButton.disabled === true) this._numberOfCurrentMoveInView++;
@@ -231,34 +252,53 @@ customElements.define('connect-four-game', class extends HTMLElement {
 
     _onGameWon = event => {
         if (event.detail.gameId !== this._game.gameId) return;
+        if (event.detail.loserId === this._playerId) sounds.loss();
+        if (event.detail.winnerId === this._playerId) sounds.win();
         this._game.winningSequences = event.detail.winningSequences;
         this._showWinningSequences();
         this._changeCurrentPlayer('');
         this._forceFollowMovesAnimation = this._numberOfCurrentMoveInView !== this._game.numberOfMoves();
     }
 
-    _onGameFinished = event => {
+    _onGameDrawn = event => {
+        if (event.detail.gameId !== this._game.gameId) return;
+        sounds.win();
+        this._changeCurrentPlayer('');
+    }
+
+    _onGameResigned = event => {
+        if (event.detail.gameId !== this._game.gameId) return;
+        if (event.detail.resignedPlayerId === this._playerId) sounds.loss();
+        if (event.detail.opponentPlayerId === this._playerId) sounds.win();
+        this._changeCurrentPlayer('');
+    }
+
+    _onGameAborted = event => {
         if (event.detail.gameId !== this._game.gameId) return;
+        sounds.error();
         this._changeCurrentPlayer('');
     }
 
     _onPreviousMoveClick(event) {
         event.preventDefault();
 
+        sounds.previous();
         this._numberOfCurrentMoveInView--;
         this._showMovesUpTo(this._numberOfCurrentMoveInView);
     }
 
     _onNextMoveClick(event) {
         event.preventDefault();
 
+        sounds.next();
         this._numberOfCurrentMoveInView++;
         this._showMovesUpTo(this._numberOfCurrentMoveInView);
     }
 
     _onFollowMovesClick(event) {
         event.preventDefault();
 
+        sounds.next();
         this._numberOfCurrentMoveInView = this._game.numberOfMoves();
         this._showMovesUpTo(this._numberOfCurrentMoveInView);
     }
@@ -283,9 +323,9 @@ customElements.define('connect-four-game', class extends HTMLElement {
             'ConnectFour.PlayerJoined': this._onPlayerJoined,
             'ConnectFour.PlayerMoved': this._onPlayerMoved,
             'ConnectFour.GameWon': this._onGameWon,
-            'ConnectFour.GameDrawn': this._onGameFinished,
-            'ConnectFour.GameAborted': this._onGameFinished,
-            'ConnectFour.GameResigned': this._onGameFinished
+            'ConnectFour.GameDrawn': this._onGameDrawn,
+            'ConnectFour.GameAborted': this._onGameAborted,
+            'ConnectFour.GameResigned': this._onGameResigned
         }, this._sseAbortController.signal);
     }
 });

config/importmap.php

@@ -18,6 +18,7 @@
     $map = [
         'app' => ['path' => 'js/app.js', 'entrypoint' => true],
         'notification-list' => ['path' => 'js/Common/NotificationList.js'],
+        'volume-control' => ['path' => 'js/Common/VolumeControl.js'],
         'event-source-status' => ['path' => 'js/Common/EventSourceStatus.js'],
         'confirmation-button' => ['path' => 'js/Common/ConfirmationButton.js'],
         'uhtml/node.js' => ['version' => '4.7.0'],

templates/layout/condensed.html.twig

@@ -14,6 +14,7 @@
                     </a>
                 </div>
                 <div class="navbar-nav flex-row order-last">
+                    <volume-control class="nav-item dropdown"></volume-control>
                     <div class="nav-item">
                         <event-source-status title-open="Ready to Play!"
                                              title-closed="Connecting..."></event-source-status>