@escapenavigator/hooks 2.2.11 → 2.2.12

package/dist/fortune-wheel/index.js

@@ -0,0 +1,267 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FortuneWheel = FortuneWheel;
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const assets_1 = require("./assets");
+const copy_1 = require("./copy");
+const renderer_1 = require("./renderer");
+function FortuneWheel({ page, onSpin, preview = false }) {
+    const { t, i18n } = (0, react_i18next_1.useTranslation)('common');
+    const { settings } = page;
+    const canvas = (0, react_1.useRef)(null);
+    const renderer = (0, react_1.useRef)(null);
+    const dialog = (0, react_1.useRef)(null);
+    const mounted = (0, react_1.useRef)(true);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [reward, setReward] = (0, react_1.useState)(page.reward);
+    const [error, setError] = (0, react_1.useState)(false);
+    const [sound, setSound] = (0, react_1.useState)(true);
+    const [moving, setMoving] = (0, react_1.useState)(() => !window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    const [interaction, setInteraction] = (0, react_1.useState)({
+        seals: [false, false, false],
+        guests: [false, false, false],
+        nodes: [1, 2, 3],
+    });
+    const copy = copy_1.fortuneWheelThemeCopy[settings.theme];
+    const gift = t('fortuneWheel.gift', { defaultValue: 'Gift' });
+    const discount = t('fortuneWheel.discount', { defaultValue: 'Discount' });
+    const nextGame = t('fortuneWheel.nextGame', { defaultValue: 'GIFTS FOR YOUR NEXT GAME' });
+    const collection = t('fortuneWheel.collection', { defaultValue: 'GIFT COLLECTION' });
+    const prizes = (0, react_1.useMemo)(() => settings.prizes.map((p) => (Object.assign(Object.assign({}, p), { label: p.kind === 'gift'
+            ? p.name
+            : p.kind === 'percent'
+                ? `${p.value}%`
+                : new Intl.NumberFormat(i18n.language, {
+                    style: 'currency',
+                    currency: page.currency,
+                    maximumFractionDigits: 2,
+                }).format(p.value / 100), caption: p.kind === 'gift' ? gift : discount }))), [settings.prizes, i18n.language, page.currency, gift, discount]);
+    (0, react_1.useEffect)(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!canvas.current || !prizes.length)
+            return;
+        const engine = (0, renderer_1.createFortuneWheelRenderer)(canvas.current, {
+            theme: settings.theme,
+            prizes,
+            labels: { nextGame, collection },
+            moving: !window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+            sound: true,
+        });
+        renderer.current = engine;
+        setInteraction({
+            seals: [false, false, false],
+            guests: [false, false, false],
+            nodes: [1, 2, 3],
+        });
+        return () => {
+            engine.destroy();
+            renderer.current = null;
+        };
+    }, [settings.theme, prizes, nextGame, collection]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: apply preferences after renderer recreation.
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = renderer.current) === null || _a === void 0 ? void 0 : _a.setSound(sound);
+    }, [sound, settings.theme, prizes]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: apply preferences after renderer recreation.
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = renderer.current) === null || _a === void 0 ? void 0 : _a.setMotion(moving);
+    }, [moving, settings.theme, prizes]);
+    const locked = (settings.theme === 'haunt' && !interaction.seals.every(Boolean)) ||
+        (settings.theme === 'cipher' && !interaction.nodes.every((n) => n % 2 === 0));
+    const spin = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        if (busy || reward || locked || !renderer.current)
+            return;
+        setBusy(true);
+        setError(false);
+        renderer.current.unlockAudio();
+        try {
+            const result = yield onSpin();
+            if (!mounted.current || !result.reward)
+                return;
+            const index = settings.prizes.findIndex((p) => { var _a; return p.id === ((_a = result.reward) === null || _a === void 0 ? void 0 : _a.prizeId); });
+            // Settings may change while this page is open: never animate a different prize.
+            if (index >= 0 &&
+                JSON.stringify(result.settings.prizes) === JSON.stringify(settings.prizes))
+                yield ((_a = renderer.current) === null || _a === void 0 ? void 0 : _a.spin(index));
+            if (!mounted.current)
+                return;
+            setReward(result.reward);
+            (_b = dialog.current) === null || _b === void 0 ? void 0 : _b.showModal();
+        }
+        catch (_c) {
+            if (mounted.current)
+                setError(true);
+        }
+        finally {
+            if (mounted.current)
+                setBusy(false);
+        }
+    });
+    const interact = (index) => {
+        var _a;
+        if (!busy && !reward) {
+            const state = (_a = renderer.current) === null || _a === void 0 ? void 0 : _a.interact(index);
+            if (state)
+                setInteraction(state);
+        }
+    };
+    const themeName = t(`fortuneWheel.theme.${settings.theme}.name`, { defaultValue: copy.name });
+    const rewardContent = reward && (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("strong", null, reward.name),
+        reward.description && react_1.default.createElement("p", { className: 'prize-description' }, reward.description),
+        react_1.default.createElement("code", { className: 'reward-code' }, reward.code),
+        react_1.default.createElement("p", null, t('fortuneWheel.validUntil', {
+            defaultValue: 'Valid until {{date}}',
+            date: new Intl.DateTimeFormat(i18n.language).format(new Date(`${reward.validTo}T12:00:00`)),
+        })),
+        react_1.default.createElement("p", null, t(preview ? 'fortuneWheel.previewHint' : 'fortuneWheel.saved', {
+            defaultValue: preview
+                ? 'Preview only. No real gifts are issued.'
+                : 'Your gift is saved in your customer card. Use this code when booking your next game.',
+        }))));
+    return (react_1.default.createElement("section", { className: 'fortune-wheel', "data-theme": settings.theme, style: {
+            '--accent': settings.accent,
+            '--widget-bg': settings.background === 'graphite' ? '#252529' : '#18181b',
+            '--radius': `${settings.radius}px`,
+        } },
+        react_1.default.createElement("style", null, assets_1.fortuneWheelCss),
+        react_1.default.createElement("div", { className: 'widget' },
+            react_1.default.createElement("div", { className: 'widget-brand' },
+                react_1.default.createElement("img", { src: assets_1.fortuneWheelLogo, alt: '' }),
+                react_1.default.createElement("strong", null, settings.brand || 'Escape Navigator')),
+            react_1.default.createElement("div", { className: 'intro' },
+                react_1.default.createElement("div", { className: 'overline' }, themeName),
+                react_1.default.createElement("h1", null, t(`fortuneWheel.theme.${settings.theme}.title`, {
+                    defaultValue: copy.title,
+                })),
+                react_1.default.createElement("p", null, t(`fortuneWheel.theme.${settings.theme}.description`, {
+                    defaultValue: copy.description,
+                })),
+                preview && (react_1.default.createElement("p", null, t('fortuneWheel.previewHint', {
+                    defaultValue: 'Preview only. No real gifts are issued.',
+                })))),
+            react_1.default.createElement("div", { className: 'showcase' },
+                react_1.default.createElement("canvas", { ref: canvas, width: 1100, height: 820, role: 'img', "aria-label": themeName })),
+            react_1.default.createElement("div", { className: 'interaction' }, ['haunt', 'monsters', 'cipher'].includes(settings.theme) &&
+                [0, 1, 2].map((index) => (react_1.default.createElement("button", { type: 'button', key: index, onClick: () => interact(index), disabled: busy ||
+                        !!reward ||
+                        (settings.theme === 'haunt' && interaction.seals[index]) ||
+                        (settings.theme === 'monsters' && interaction.guests[index]) }, settings.theme === 'haunt'
+                    ? t('fortuneWheel.seal', {
+                        defaultValue: 'Remove seal {{number}}',
+                        number: index + 1,
+                    })
+                    : settings.theme === 'monsters'
+                        ? t('fortuneWheel.wake', {
+                            defaultValue: 'Wake guardian {{number}}',
+                            number: index + 1,
+                        })
+                        : t('fortuneWheel.node', {
+                            defaultValue: 'Rotate node {{number}} · {{direction}}',
+                            number: index + 1,
+                            direction: interaction.nodes[index] % 2 ? '┃' : '━',
+                        }))))),
+            react_1.default.createElement("div", { className: 'controls' },
+                react_1.default.createElement("div", { className: 'balance' },
+                    react_1.default.createElement("span", null, t('fortuneWheel.attempts', { defaultValue: 'ATTEMPTS' })),
+                    react_1.default.createElement("strong", null,
+                        reward ? '00' : '01',
+                        " ",
+                        react_1.default.createElement("small", null, "/ 01")),
+                    react_1.default.createElement("div", { className: 'tokens' },
+                        react_1.default.createElement("i", { className: reward ? 'used' : '' }))),
+                react_1.default.createElement("button", { className: 'play', type: 'button', onClick: spin, disabled: busy || !!reward || locked || !prizes.length }, busy
+                    ? t('fortuneWheel.spinning', { defaultValue: 'Opening your gift…' })
+                    : reward
+                        ? t('fortuneWheel.played', { defaultValue: 'Your gift is revealed' })
+                        : t('fortuneWheel.spin', { defaultValue: 'Spin the wheel' })),
+                react_1.default.createElement("div", { className: 'sound-controls' },
+                    react_1.default.createElement("button", { type: 'button', "aria-pressed": sound, onClick: () => setSound((v) => !v) }, sound
+                        ? t('fortuneWheel.soundOn', { defaultValue: 'Sound on' })
+                        : t('fortuneWheel.soundOff', { defaultValue: 'Sound off' })),
+                    react_1.default.createElement("button", { type: 'button', "aria-pressed": moving, onClick: () => setMoving((v) => !v) }, moving
+                        ? t('fortuneWheel.motionOn', { defaultValue: 'Motion on' })
+                        : t('fortuneWheel.motionOff', { defaultValue: 'Motion off' })))),
+            error && (react_1.default.createElement("p", { role: 'alert', className: 'error' }, t('fortuneWheel.spinError', {
+                defaultValue: 'Could not reveal your gift. Try again: a saved result will not be drawn twice.',
+            }))),
+            react_1.default.createElement("div", { className: `result ${reward ? 'won' : ''}`, "aria-live": 'polite' },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("small", null, t('fortuneWheel.oneAttempt', {
+                        defaultValue: 'One gift per participant per game',
+                    })),
+                    reward ? (rewardContent) : (react_1.default.createElement("strong", null, t('fortuneWheel.nextGame', {
+                        defaultValue: 'GIFTS FOR YOUR NEXT GAME',
+                    }))))),
+            react_1.default.createElement("details", null,
+                react_1.default.createElement("summary", null, t('fortuneWheel.odds', { defaultValue: 'Prizes and chances' })),
+                react_1.default.createElement("p", null, t('fortuneWheel.oddsHint', {
+                    defaultValue: 'Sector size does not indicate the chance of winning. Gifts are valid for {{days}} days.',
+                    days: settings.validityDays,
+                })),
+                react_1.default.createElement("ul", null, prizes.map((p) => (react_1.default.createElement("li", { key: p.id },
+                    p.name,
+                    " \u00B7",
+                    ' ',
+                    new Intl.NumberFormat(i18n.language, {
+                        style: 'percent',
+                        maximumFractionDigits: 2,
+                    }).format(p.weight / prizes.reduce((sum, item) => sum + item.weight, 0)))))))),
+        react_1.default.createElement("dialog", { ref: dialog, className: 'prize-dialog' },
+            react_1.default.createElement("div", { className: 'prize-rays' }),
+            react_1.default.createElement("div", { className: 'prize-content' },
+                react_1.default.createElement("p", { className: 'prize-kicker' }, t('fortuneWheel.yourGift', { defaultValue: 'YOUR GIFT' })),
+                rewardContent,
+                react_1.default.createElement("button", { type: 'button', onClick: () => { var _a; return (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.close(); } }, t('fortuneWheel.close', { defaultValue: 'Got it' }))))));
+}

package/dist/fortune-wheel/renderer.d.ts

@@ -0,0 +1,12 @@
+export function createFortuneWheelRenderer(canvas: any, options: any): {
+    interact(i: any): {
+        seals: boolean[];
+        guests: boolean[];
+        nodes: number[];
+    };
+    setSound(value: any): void;
+    setMotion(value: any): void;
+    unlockAudio(): void;
+    spin(index: any): Promise<any>;
+    destroy(): void;
+};