@mideind/netskrafl-react 1.6.1 → 1.7.0

package/dist/esm/css/netskrafl.css

@@ -1898,7 +1898,7 @@ div.netskrafl-tile.dragging div.letterscore {
   opacity: 1;
 }
 
-.netskrafl-container div.right-tab.alert > span.glyphicon {
+.netskrafl-container div.right-tab.chat-alert > span.glyphicon {
   color: var(--cancel-button);
   animation: redBlink 1s infinite;
   -webkit-animation: redBlink 1s infinite;
@@ -5325,7 +5325,7 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container div#user-unfriend {
-  left: 180px;
+  left: 166px;
   width: 280px;
   /* Override */
   border-style: solid;

package/dist/esm/index.js

@@ -1,8 +1,63 @@
 import { jsx } from 'react/jsx-runtime';
 import React, { useEffect } from 'react';
 
+const DEFAULT_STATE = {
+    projectId: "netskrafl",
+    firebaseApiKey: "",
+    databaseUrl: "",
+    firebaseSenderId: "",
+    firebaseAppId: "",
+    measurementId: "",
+    account: "",
+    userEmail: "",
+    userId: "",
+    userNick: "",
+    userFullname: "",
+    locale: "is_IS",
+    isExplo: false,
+    serverUrl: "",
+    movesUrl: "",
+    movesAccessKey: "",
+    token: "",
+    loginMethod: "",
+    subscriptionUrl: "",
+    newUser: false,
+    beginner: true,
+    fairPlay: false,
+    plan: "", // Not a friend
+    hasPaid: false,
+    ready: true,
+    readyTimed: true,
+    uiFullscreen: true,
+    uiLandscape: false,
+    runningLocal: false,
+};
+
 // Key for storing auth settings in sessionStorage
 const AUTH_SETTINGS_KEY = "netskrafl_auth_settings";
+const makeServerUrls = (backendUrl, movesUrl) => {
+    // If the last character of the url is a slash, cut it off,
+    // since path URLs always start with a slash
+    const cleanupUrl = (url) => {
+        if (url.length > 0 && url[url.length - 1] === "/") {
+            url = url.slice(0, -1);
+        }
+        return url;
+    };
+    return {
+        serverUrl: cleanupUrl(backendUrl),
+        movesUrl: cleanupUrl(movesUrl),
+    };
+};
+const makeGlobalState = (overrides) => {
+    const state = {
+        ...DEFAULT_STATE,
+        ...overrides,
+    };
+    const stateWithUrls = { ...state, ...makeServerUrls(state.serverUrl, state.movesUrl) };
+    // Apply any persisted authentication settings from sessionStorage
+    return applyPersistedSettings(stateWithUrls);
+};
 // Save authentication settings to sessionStorage
 const saveAuthSettings = (settings) => {
     if (!settings) {
@@ -98,61 +153,6 @@ const applyPersistedSettings = (state) => {
     };
 };
 
-const DEFAULT_STATE = {
-    projectId: "netskrafl",
-    firebaseApiKey: "",
-    databaseUrl: "",
-    firebaseSenderId: "",
-    firebaseAppId: "",
-    measurementId: "",
-    account: "",
-    userEmail: "",
-    userId: "",
-    userNick: "",
-    userFullname: "",
-    locale: "is_IS",
-    isExplo: false,
-    serverUrl: "",
-    movesUrl: "",
-    movesAccessKey: "",
-    token: "",
-    loginMethod: "",
-    subscriptionUrl: "",
-    newUser: false,
-    beginner: true,
-    fairPlay: false,
-    plan: "", // Not a friend
-    hasPaid: false,
-    ready: true,
-    readyTimed: true,
-    uiFullscreen: true,
-    uiLandscape: false,
-    runningLocal: false,
-};
-const makeServerUrls = (backendUrl, movesUrl) => {
-    // If the last character of the url is a slash, cut it off,
-    // since path URLs always start with a slash
-    const cleanupUrl = (url) => {
-        if (url.length > 0 && url[url.length - 1] === "/") {
-            url = url.slice(0, -1);
-        }
-        return url;
-    };
-    return {
-        serverUrl: cleanupUrl(backendUrl),
-        movesUrl: cleanupUrl(movesUrl),
-    };
-};
-const makeGlobalState = (overrides) => {
-    const state = {
-        ...DEFAULT_STATE,
-        ...overrides,
-    };
-    const stateWithUrls = { ...state, ...makeServerUrls(state.serverUrl, state.movesUrl) };
-    // Apply any persisted authentication settings from sessionStorage
-    return applyPersistedSettings(stateWithUrls);
-};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -2533,6 +2533,133 @@ const ERROR_MESSAGES = {
     "server": "Netþjónn gat ekki tekið við leiknum - reyndu aftur"
 };
 
+/*
+
+  Audio.ts
+
+  Audio management service for Netskrafl/Explo
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+/**
+ * AudioManager handles preloading and playback of sound effects.
+ * It creates HTMLAudioElement instances for each sound and manages their lifecycle.
+ */
+class AudioManager {
+    constructor(state, soundUrls) {
+        this.sounds = new Map();
+        this.initialized = false;
+        // By default, sound URLs are based on /static on the backend server
+        const DEFAULT_SOUND_BASE = serverUrl(state, "/static");
+        const DEFAULT_SOUND_URLS = {
+            "your-turn": `${DEFAULT_SOUND_BASE}/your-turn.mp3`,
+            "you-win": `${DEFAULT_SOUND_BASE}/you-win.mp3`,
+            "new-msg": `${DEFAULT_SOUND_BASE}/new-msg.mp3`,
+        };
+        // Merge provided URLs with defaults
+        this.soundUrls = {
+            ...DEFAULT_SOUND_URLS,
+            ...(soundUrls || {}),
+        };
+    }
+    /**
+     * Initialize the audio manager by creating and preloading audio elements.
+     * This should be called once when the application starts.
+     */
+    initialize() {
+        if (this.initialized) {
+            return;
+        }
+        // Create audio elements for each sound
+        Object.entries(this.soundUrls).forEach(([soundId, url]) => {
+            const audio = new Audio(url);
+            audio.preload = "auto";
+            // Handle load errors gracefully - don't let them crash the app
+            audio.addEventListener("error", () => {
+                console.warn(`Failed to load audio: ${soundId} from ${url}`);
+            });
+            this.sounds.set(soundId, audio);
+        });
+        this.initialized = true;
+    }
+    /**
+     * Play a sound by its ID.
+     * If the sound is not loaded or fails to play, the error is logged but doesn't throw.
+     *
+     * @param soundId The identifier of the sound to play
+     */
+    play(soundId) {
+        if (!this.initialized) {
+            this.initialize();
+        }
+        const audio = this.sounds.get(soundId);
+        if (!audio) {
+            console.warn(`Audio not found: ${soundId}`);
+            return;
+        }
+        // Reset to start in case it's already playing
+        audio.currentTime = 0;
+        // Play the audio - catch any errors (e.g., user hasn't interacted with page yet)
+        audio.play().catch((err) => {
+            // This is expected in some cases (e.g., autoplay restrictions)
+            // so we just log it at debug level
+            if (err.name !== "NotAllowedError") {
+                console.warn(`Failed to play audio ${soundId}:`, err);
+            }
+        });
+    }
+    /**
+     * Update the URL for a specific sound.
+     * This will recreate the audio element with the new URL.
+     *
+     * @param soundId The identifier of the sound to update
+     * @param url The new URL for the sound
+     */
+    updateSoundUrl(soundId, url) {
+        this.soundUrls[soundId] = url;
+        // If already initialized, recreate this audio element
+        if (this.initialized) {
+            const audio = new Audio(url);
+            audio.preload = "auto";
+            audio.addEventListener("error", () => {
+                console.warn(`Failed to load audio: ${soundId} from ${url}`);
+            });
+            this.sounds.set(soundId, audio);
+        }
+    }
+    /**
+     * Dispose of all audio elements and clean up resources.
+     */
+    dispose() {
+        this.sounds.forEach((audio) => {
+            audio.pause();
+            audio.src = "";
+        });
+        this.sounds.clear();
+        this.initialized = false;
+    }
+}
+// Global singleton instance
+let audioManager = null;
+/**
+ * Get or create the global AudioManager instance.
+ *
+ * @param soundUrls Optional custom sound URLs (only used on first call)
+ * @returns The global AudioManager instance
+ */
+function getAudioManager(state, soundUrls) {
+    if (!audioManager) {
+        audioManager = new AudioManager(state, soundUrls);
+    }
+    return audioManager;
+}
+
 /*
 
   Util.ts
@@ -2689,11 +2816,10 @@ function setInput(id, val) {
     const elem = document.getElementById(id);
     elem.value = val;
 }
-function playAudio(elemId) {
-    // Play an audio file
-    const sound = document.getElementById(elemId);
-    if (sound)
-        sound.play();
+function playAudio(state, soundId) {
+    // Play an audio file using the AudioManager
+    const audioManager = getAudioManager(state);
+    audioManager.play(soundId);
 }
 function arrayEqual(a, b) {
     // Return true if arrays a and b are equal
@@ -27905,11 +28031,12 @@ const TogglerReadyTimed = (initialVnode) => {
         }
     };
 };
-const TogglerAudio = () => {
+const TogglerAudio = (initialVnode) => {
     // Toggle for audio on/off
+    const { model } = initialVnode.attrs.view;
     function toggleFunc(state) {
-        if (state)
-            playAudio("your-turn");
+        if (state && model.state !== null)
+            playAudio(model.state, "your-turn");
     }
     return {
         view: ({ attrs: { state, tabindex } }) => m(Toggler, {
@@ -27924,11 +28051,12 @@ const TogglerAudio = () => {
         })
     };
 };
-const TogglerFanfare = () => {
+const TogglerFanfare = (initialVnode) => {
     // Toggle for fanfare on/off
+    const { model } = initialVnode.attrs.view;
     function toggleFunc(state) {
-        if (state)
-            playAudio("you-win");
+        if (state && model.state !== null)
+            playAudio(model.state, "you-win");
     }
     return {
         view: ({ attrs: { state, tabindex } }) => m(Toggler, {
@@ -29075,8 +29203,7 @@ class Game extends BaseGame {
             // Ongoing timed game: start the clock
             this.startClock();
         // Kick off loading of chat messages, if this is not a robot game
-        const isHumanGame = !this.autoplayer[0] && !this.autoplayer[1];
-        if (isHumanGame)
+        if (!this.isRobotGame())
             this.loadMessages();
     }
     init(srvGame) {
@@ -29234,6 +29361,8 @@ class Game extends BaseGame {
         // Update the srvGame state with data from the server,
         // either after submitting a move to the server or
         // after receiving a move notification via the Firebase listener
+        // Remember if the game was already won before this update
+        const wasWon = this.congratulate;
         // Stop highlighting the previous opponent move, if any
         for (let sq in this.tiles)
             if (this.tiles.hasOwnProperty(sq))
@@ -29254,6 +29383,10 @@ class Game extends BaseGame {
             // The call to resetClock() clears any outstanding interval timers
             // if the srvGame is now over
             this.resetClock();
+        // Notify the move listener if the game just transitioned to won
+        if (!wasWon && this.congratulate && this.moveListener) {
+            this.moveListener.notifyGameWon();
+        }
     }
     ;
     async refresh() {
@@ -29458,6 +29591,10 @@ class Game extends BaseGame {
         // actual game score minus accrued time penalty, if any, in a timed game
         return Math.max(this.scores[player] + (player === 0 ? this.penalty0 : this.penalty1), 0);
     }
+    isRobotGame() {
+        // Return true if any player in the game is a robot
+        return this.autoplayer[0] || this.autoplayer[1];
+    }
     async loadMessages() {
         // Load chat messages for this game
         if (this.chatLoading)
@@ -30993,9 +31130,17 @@ class Model {
             m.redraw();
     }
     handleMoveMessage(json, firstAttach) {
+        var _a;
         // Handle an incoming Firebase move message
         if (!firstAttach && this.game) {
             this.game.update(json);
+            // Play "your turn" audio notification if:
+            // - User has audio enabled
+            // - User is a participant in the game
+            // - This is not a robot game (robots reply instantly anyway)
+            if (((_a = this.user) === null || _a === void 0 ? void 0 : _a.audio) && this.game.player !== null && !this.game.isRobotGame()) {
+                playAudio(this.state, "your-turn");
+            }
             m.redraw();
         }
     }
@@ -31006,6 +31151,14 @@ class Model {
             this.gameList = null;
         }
     }
+    notifyGameWon() {
+        var _a;
+        // The user just won a game:
+        // play the "you-win" audio if fanfare is enabled
+        if ((_a = this.user) === null || _a === void 0 ? void 0 : _a.fanfare) {
+            playAudio(this.state, "you-win");
+        }
+    }
     moreGamesAllowed() {
         // Return true if the user is allowed to have more games ongoing
         if (!this.state)
@@ -32717,7 +32870,7 @@ const GamePromptDialogs = (initialVnode) => {
             // they can be invoked while the last_chall dialog is being
             // displayed. We therefore allow them to cover the last_chall
             // dialog. On mobile, both dialogs are displayed simultaneously.
-            if (game.last_chall) {
+            if (game.last_chall && game.localturn) {
                 r.push(m(".chall-info", [
                     glyph("info-sign"), nbsp(),
                     // "Your opponent emptied the rack - you can challenge or pass"
@@ -34334,7 +34487,7 @@ const Tab = {
         const game = view.model.game;
         return m(".right-tab" + (sel === tabid ? ".selected" : ""), {
             id: "tab-" + tabid,
-            className: alert ? "alert" : "",
+            className: alert ? "chat-alert" : "",
             title: title,
             onclick: (ev) => {
                 // Select this tab
@@ -34356,7 +34509,7 @@ const TabGroup = {
         // A group of clickable tabs for the right-side area content
         const { view } = vnode.attrs;
         const { game } = view.model;
-        const showChat = game && !(game.autoplayer[0] || game.autoplayer[1]);
+        const showChat = game && !game.isRobotGame();
         const r = [
             m(Tab, { view, tabid: "board", title: ts("Borðið"), icon: "grid" }),
             m(Tab, { view, tabid: "movelist", title: ts("Leikir"), icon: "show-lines" }),
@@ -34378,7 +34531,7 @@ const TabGroup = {
                 },
                 // Show chat icon in red if any chat messages have not been seen
                 // and the chat tab is not already selected
-                alert: !game.chatSeen && view.selectedTab != "chat"
+                alert: !game.chatSeen && view.selectedTab !== "chat"
             }));
         }
         return m.fragment({}, r);
@@ -35080,6 +35233,9 @@ class View {
         this.actions = actions;
         // Initialize media listeners now that we have the view reference
         this.actions.initMediaListener(this);
+        // Load user preferences early so audio settings are available
+        // Use false to not show spinner on initial load
+        this.model.loadUser(false);
     }
     appView(routeName) {
         // Returns a view based on the current route.
@@ -35512,6 +35668,7 @@ class Actions {
         this.model.handleUserMessage(json, firstAttach);
     }
     onChatMessage(json, firstAttach, view) {
+        var _a, _b, _c;
         // Handle an incoming chat message
         if (firstAttach)
             console.log("First attach of chat: " + JSON.stringify(json));
@@ -35520,6 +35677,13 @@ class Actions {
             if (this.model.addChatMessage(json.game, json.from_userid, json.msg, json.ts)) {
                 // A chat message was successfully added
                 view.notifyChatMessage();
+                // Play audio notification if:
+                // - User has audio enabled
+                // - Message is from opponent (not from current user)
+                const userId = (_b = (_a = this.model.state) === null || _a === void 0 ? void 0 : _a.userId) !== null && _b !== void 0 ? _b : "";
+                if (((_c = this.model.user) === null || _c === void 0 ? void 0 : _c.audio) && json.from_userid !== userId) {
+                    playAudio(this.model.state, "new-msg");
+                }
             }
         }
     }