chesspal 0.0.1 → 0.2.0

package/dist/page/profile/settings.js

@@ -0,0 +1,77 @@
+// The player's settings on the page (D-56): the look, the game's aids and the language, kept in the profile in use and remembered by this browser.
+/** The piece sets, all Chesspal's own, whose colours the player picks; a set no longer here falls back to the first (D-94). */
+export const pieceSets = ["nitida", "torretta", "capablanca"];
+/** The choices of each look, by the ids the style sheet knows; the first is the default. */
+export const looks = {
+    board: ["azzurro", "verde", "noce", "ardesia", "grigio", "lavanda", "ciliegio", "menta", "carta"],
+    pieces: ["classico", "avorio", "notte", "bordeaux"],
+    marks: ["arancione", "rosso", "blu", "verde"],
+};
+/** The settings this browser remembers, each one it does not know taking its default; the theme and the sounds chosen before the panel come along. */
+export function loadSettings() {
+    const saved = read(remembered);
+    const oldTheme = read("chesspal-theme");
+    return settingsFrom(saved === null ? {} : parsed(saved), { theme: oldTheme === "light" || oldTheme === "dark" ? oldTheme : "system", sound: read("chesspal-sound") !== "off" });
+}
+/** Settings from what was kept, by this browser or in the profile: each one not known takes its default. */
+export function settingsFrom(value, defaults = { theme: "system", sound: true }) {
+    const stored = typeof value === "object" && value !== null ? value : {};
+    return {
+        theme: oneOf(stored.theme, ["system", "light", "dark"], defaults.theme),
+        board: oneOf(stored.board, looks.board, looks.board[0]),
+        set: oneOf(stored.set, pieceSets, pieceSets[0]),
+        pieces: oneOf(stored.pieces, looks.pieces, looks.pieces[0]),
+        marks: oneOf(stored.marks, looks.marks, looks.marks[0]),
+        dots: typeof stored.dots === "boolean" ? stored.dots : true,
+        squareNames: typeof stored.squareNames === "boolean" ? stored.squareNames : false,
+        explain: typeof stored.explain === "boolean" ? stored.explain : true,
+        book: typeof stored.book === "boolean" ? stored.book : true,
+        helps: typeof stored.helps === "boolean" ? stored.helps : false,
+        sound: typeof stored.sound === "boolean" ? stored.sound : defaults.sound,
+        voice: typeof stored.voice === "boolean" ? stored.voice : false,
+        language: oneOf(stored.language, ["auto", "it", "en"], "auto"),
+    };
+}
+/** Remembers the settings in this browser. */
+export function saveSettings(settings) {
+    try {
+        localStorage.setItem(remembered, JSON.stringify(settings));
+    }
+    catch {
+        // The choices last as long as the page.
+    }
+}
+/** Shows the settings' look on the page: the theme, the board's skin, the pieces' set and colours and the marks' colour, as attributes the style sheet reads. */
+export function showSettings(settings) {
+    const root = document.documentElement.dataset;
+    root.theme = settings.theme === "system" ? (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : settings.theme;
+    root.board = settings.board;
+    root.set = settings.set;
+    root.pieces = settings.pieces;
+    root.marks = settings.marks;
+}
+/** The languages the page speaks in, by the setting: the browser's, or the one chosen. */
+export function languagesOf(settings) {
+    return settings.language === "auto" ? navigator.languages : [settings.language];
+}
+const remembered = "chesspal-settings";
+function read(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function parsed(saved) {
+    try {
+        const value = JSON.parse(saved);
+        return typeof value === "object" && value !== null ? value : {};
+    }
+    catch {
+        return {};
+    }
+}
+function oneOf(value, choices, fallback) {
+    return choices.find((choice) => choice === value) ?? fallback;
+}

package/dist/page/sounds/sounds.js

@@ -0,0 +1,105 @@
+const folder = "/page/sounds/";
+/** The sound of the game's last move, from how the board stands after it; none before the first move. */
+export function soundOf(game) {
+    const last = game.lastMove;
+    const { outcome } = game;
+    if (last === undefined) {
+        return undefined;
+    }
+    if (outcome.over) {
+        return outcome.ending === "checkmate" ? "mate" : "draw";
+    }
+    return game.position.check ? "check" : last.san.includes("x") ? "capture" : "move";
+}
+/** The sound of a game ended without a move: a resignation, a flag fallen, a draw agreed; none for the ends that come with a move. */
+export function endSoundOf(how) {
+    return how === "resignation" ? "resign" : how === "time" ? "flag" : how === "agreement" ? "draw" : undefined;
+}
+/** Lets the page play sounds: loads the recordings, and since a browser plays none before the player has touched the page, the first touch wakes them. */
+export function wakeSounds() {
+    loadRecordings();
+    addEventListener("pointerdown", () => void audio()?.resume(), { once: true });
+}
+/** Plays a sound: its recordings together, else its tone; a browser without Web Audio plays none. */
+export function playSound(sound) {
+    const context = audio();
+    if (context === undefined) {
+        return;
+    }
+    const recorded = layers[sound].flatMap((layer) => recordings.get(layer) ?? []);
+    if (recorded.length < layers[sound].length) {
+        playTone(context, sound);
+        return;
+    }
+    for (const recording of recorded) {
+        const source = new AudioBufferSourceNode(context, { buffer: recording });
+        source.connect(context.destination);
+        source.start();
+    }
+}
+/** Fetches and decodes the recordings, offline so that the page wakes no sound before a touch; one that fails leaves its tone. */
+function loadRecordings() {
+    let decoder;
+    try {
+        decoder = new OfflineAudioContext({ length: 1, sampleRate: 48000 });
+    }
+    catch {
+        return;
+    }
+    for (const sound of Object.keys(tones)) {
+        void fetch(`${folder}${sound}.ogg`)
+            .then((response) => response.ok ? response.arrayBuffer() : Promise.reject(new Error(`No ${sound}.ogg.`)))
+            .then((bytes) => decoder.decodeAudioData(bytes))
+            .then((buffer) => recordings.set(sound, buffer), () => undefined);
+    }
+}
+function playTone(context, sound) {
+    for (const { frequency, at, length, wave, volume } of tones[sound]) {
+        const oscillator = new OscillatorNode(context, { type: wave, frequency });
+        const gain = new GainNode(context, { gain: 0 });
+        const start = context.currentTime + at;
+        // A quick attack and a fall, as a struck note has.
+        gain.gain.linearRampToValueAtTime(volume, start + 0.005);
+        gain.gain.exponentialRampToValueAtTime(0.0001, start + length);
+        oscillator.connect(gain).connect(context.destination);
+        oscillator.start(start);
+        oscillator.stop(start + length);
+    }
+}
+// A wooden knock for a piece set down, two for a capture, a call for a check, a chord for a mate, a falling pair for a draw, three falling notes for a
+// resignation, a timer's beeps for a flag, a rising pair for a draw offered.
+const tones = {
+    move: [{ frequency: 190, at: 0, length: 0.08, wave: "triangle", volume: 0.5 }, { frequency: 1200, at: 0, length: 0.02, wave: "sine", volume: 0.12 }],
+    capture: [{ frequency: 170, at: 0, length: 0.08, wave: "triangle", volume: 0.5 }, { frequency: 240, at: 0.06, length: 0.1, wave: "triangle", volume: 0.45 }],
+    check: [{ frequency: 660, at: 0, length: 0.14, wave: "sine", volume: 0.25 }, { frequency: 880, at: 0.11, length: 0.2, wave: "sine", volume: 0.25 }],
+    mate: [523, 659, 784, 1047].map((frequency, index) => ({ frequency, at: index * 0.06, length: 0.9, wave: "sine", volume: 0.18 })),
+    draw: [{ frequency: 440, at: 0, length: 0.3, wave: "sine", volume: 0.2 }, { frequency: 349, at: 0.22, length: 0.45, wave: "sine", volume: 0.2 }],
+    resign: [523, 392, 262].map((frequency, index) => ({ frequency, at: index * 0.11, length: index === 2 ? 0.5 : 0.25, wave: "triangle", volume: 0.25 })),
+    flag: [
+        ...[0, 0.11, 0.22].map((at) => ({ frequency: 988, at, length: 0.07, wave: "square", volume: 0.06 })),
+        { frequency: 440, at: 0.36, length: 0.4, wave: "triangle", volume: 0.25 },
+    ],
+    offer: [{ frequency: 659, at: 0, length: 0.45, wave: "sine", volume: 0.2 }, { frequency: 880, at: 0.16, length: 0.5, wave: "sine", volume: 0.2 }],
+};
+/** The recordings each sound plays at once. */
+const layers = {
+    move: ["move"],
+    capture: ["move", "capture"],
+    check: ["move", "check"],
+    mate: ["move", "mate"],
+    draw: ["draw"],
+    resign: ["resign"],
+    flag: ["flag"],
+    offer: ["offer"],
+};
+const recordings = new Map();
+let shared;
+function audio() {
+    try {
+        shared ??= new AudioContext();
+        return shared;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/page/style.css

@@ -0,0 +1,9 @@
+/* The page's style, a sheet for each of its parts, in the order of the cascade */
+@import "theme.css";
+@import "base.css";
+@import "layout/layout.css";
+@import "board/board.css";
+@import "talk/talk.css";
+@import "game/game.css";
+@import "helps/helps.css";
+@import "dialogs/dialogs.css";