Compare commits

..

2 Commits

Author SHA1 Message Date
Vikeo
4130e069bb icon 2025-02-23 23:43:24 +01:00
Vikeo
e7e5882859 add basic timer that always is showing 2025-02-23 23:42:01 +01:00
12 changed files with 390 additions and 511 deletions

View File

@@ -17,14 +17,15 @@
"deploy": "bun run build && firebase deploy --only hosting"
},
"dependencies": {
"@mui/icons-material": "^6.4.5",
"@mui/material": "^6.4.5",
"firebase": "^10.14.1",
"ga-4-react": "^0.1.281",
"pako": "^2.1.0",
"qrcode": "^1.5.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-screen-wake-lock": "^3.0.2",
"react-swipeable": "^7.0.2",
"react-timer-hook": "^3.0.8",
"react-twc": "^1.4.2",
"semver": "^7.7.1",
"zod": "^3.24.2"
@@ -34,8 +35,6 @@
"@emotion/styled": "^11.14.0",
"@savvywombat/tailwindcss-grid-areas": "^4.0.0",
"@svgr/cli": "^8.1.0",
"@types/pako": "^2.0.4",
"@types/qrcode": "^1.5.6",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@types/semver": "^7.5.8",

395
pnpm-lock.yaml generated
View File

@@ -8,18 +8,18 @@ importers:
.:
dependencies:
'@mui/icons-material':
specifier: ^6.4.5
version: 6.4.5(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
'@mui/material':
specifier: ^6.4.5
version: 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
firebase:
specifier: ^10.14.1
version: 10.14.1
ga-4-react:
specifier: ^0.1.281
version: 0.1.281
pako:
specifier: ^2.1.0
version: 2.1.0
qrcode:
specifier: ^1.5.4
version: 1.5.4
react:
specifier: ^18.3.1
version: 18.3.1
@@ -32,6 +32,9 @@ importers:
react-swipeable:
specifier: ^7.0.2
version: 7.0.2(react@18.3.1)
react-timer-hook:
specifier: ^3.0.8
version: 3.0.8(react@18.3.1)
react-twc:
specifier: ^1.4.2
version: 1.4.2(@types/react@18.3.18)(react@18.3.1)
@@ -54,12 +57,6 @@ importers:
'@svgr/cli':
specifier: ^8.1.0
version: 8.1.0(typescript@5.7.3)
'@types/pako':
specifier: ^2.0.4
version: 2.0.4
'@types/qrcode':
specifier: ^1.5.6
version: 1.5.6
'@types/react':
specifier: ^18.3.18
version: 18.3.18
@@ -1125,6 +1122,97 @@ packages:
'@jsdevtools/ono@7.1.3':
resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
'@mui/core-downloads-tracker@6.4.5':
resolution: {integrity: sha512-zoXvHU1YuoodgMlPS+epP084Pqv9V+Vg+5IGv9n/7IIFVQ2nkTngYHYxElCq8pdTTbDcgji+nNh0lxri2abWgA==}
'@mui/icons-material@6.4.5':
resolution: {integrity: sha512-4A//t8Nrc+4u4pbVhGarIFU98zpuB5AV9hTNzgXx1ySZJ1tWtx+i/1SbQ8PtGJxWeXlljhwimZJNPQ3x0CiIFw==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@mui/material': ^6.4.5
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@types/react':
optional: true
'@mui/material@6.4.5':
resolution: {integrity: sha512-5eyEgSXocIeV1JkXs8mYyJXU0aFyXZIWI5kq2g/mCnIgJe594lkOBNAKnCIaGVfQTu2T6TTEHF8/hHIqpiIRGA==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@emotion/react': ^11.5.0
'@emotion/styled': ^11.3.0
'@mui/material-pigment-css': ^6.4.3
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/react':
optional: true
'@emotion/styled':
optional: true
'@mui/material-pigment-css':
optional: true
'@types/react':
optional: true
'@mui/private-theming@6.4.3':
resolution: {integrity: sha512-7x9HaNwDCeoERc4BoEWLieuzKzXu5ZrhRnEM6AUcRXUScQLvF1NFkTlP59+IJfTbEMgcGg1wWHApyoqcksrBpQ==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@types/react':
optional: true
'@mui/styled-engine@6.4.3':
resolution: {integrity: sha512-OC402VfK+ra2+f12Gef8maY7Y9n7B6CZcoQ9u7mIkh/7PKwW/xH81xwX+yW+Ak1zBT3HYcVjh2X82k5cKMFGoQ==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@emotion/react': ^11.4.1
'@emotion/styled': ^11.3.0
react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/react':
optional: true
'@emotion/styled':
optional: true
'@mui/system@6.4.3':
resolution: {integrity: sha512-Q0iDwnH3+xoxQ0pqVbt8hFdzhq1g2XzzR4Y5pVcICTNtoCLJmpJS3vI4y/OIM1FHFmpfmiEC2IRIq7YcZ8nsmg==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@emotion/react': ^11.5.0
'@emotion/styled': ^11.3.0
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/react':
optional: true
'@emotion/styled':
optional: true
'@types/react':
optional: true
'@mui/types@7.2.21':
resolution: {integrity: sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==}
peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@types/react':
optional: true
'@mui/utils@6.4.3':
resolution: {integrity: sha512-jxHRHh3BqVXE9ABxDm+Tc3wlBooYz/4XPa0+4AI+iF38rV1/+btJmSUgG4shDtSWVs/I97aDn5jBCt6SF2Uq2A==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@types/react':
optional: true
'@nodelib/fs.scandir@2.1.5':
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'}
@@ -1169,6 +1257,9 @@ packages:
resolution: {integrity: sha512-c83qWb22rNRuB0UaVCI0uRPNRr8Z0FWnEIvT47jiHAmOIUHbBOg5XvV7pM5x+rKn9HRpjxquDbXYSXr3fAKFcw==}
engines: {node: '>=12'}
'@popperjs/core@2.11.8':
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
'@protobufjs/aspromise@1.1.2':
resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
@@ -1563,23 +1654,22 @@ packages:
'@types/node@22.13.5':
resolution: {integrity: sha512-+lTU0PxZXn0Dr1NBtC7Y8cR21AJr87dLLU953CWA6pMxxv/UDc7jYAY90upcrie1nRcD6XNG5HOYEDtgW5TxAg==}
'@types/pako@2.0.4':
resolution: {integrity: sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==}
'@types/parse-json@4.0.2':
resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
'@types/prop-types@15.7.14':
resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
'@types/qrcode@1.5.6':
resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
'@types/react-dom@18.3.5':
resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
peerDependencies:
'@types/react': ^18.0.0
'@types/react-transition-group@4.4.12':
resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
peerDependencies:
'@types/react': '*'
'@types/react@18.3.18':
resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
@@ -1956,10 +2046,6 @@ packages:
resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
engines: {node: '>= 6'}
camelcase@5.3.1:
resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
engines: {node: '>=6'}
camelcase@6.3.0:
resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
engines: {node: '>=10'}
@@ -2026,9 +2112,6 @@ packages:
resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
engines: {node: '>= 10'}
cliui@6.0.0:
resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
cliui@7.0.4:
resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
@@ -2276,10 +2359,6 @@ packages:
supports-color:
optional: true
decamelize@1.2.0:
resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
engines: {node: '>=0.10.0'}
deep-equal-in-any-order@2.0.6:
resolution: {integrity: sha512-RfnWHQzph10YrUjvWwhd15Dne8ciSJcZ3U6OD7owPwiVwsdE5IFSoZGg8rlwJD11ES+9H5y8j3fCofviRHOqLQ==}
@@ -2327,9 +2406,6 @@ packages:
didyoumean@1.2.2:
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
dijkstrajs@1.0.3:
resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
dir-glob@3.0.1:
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
engines: {node: '>=8'}
@@ -2344,6 +2420,9 @@ packages:
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
engines: {node: '>=6.0.0'}
dom-helpers@5.2.1:
resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
dom-serializer@2.0.0:
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
@@ -2645,10 +2724,6 @@ packages:
find-root@1.1.0:
resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
find-up@4.1.0:
resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
engines: {node: '>=8'}
find-up@5.0.0:
resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
engines: {node: '>=10'}
@@ -3345,10 +3420,6 @@ packages:
lines-and-columns@1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
locate-path@5.0.0:
resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
engines: {node: '>=8'}
locate-path@6.0.0:
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
engines: {node: '>=10'}
@@ -3730,18 +3801,10 @@ packages:
resolution: {integrity: sha512-ugZxsxmtTln604yeYd29EGrNhazN2lywetzpKhfmQjW/VJmhpDmWbiX+h0zL8V91R0UXkhb3KtPmyq9PZw3aYw==}
engines: {node: '>=8'}
p-limit@2.3.0:
resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
engines: {node: '>=6'}
p-limit@3.1.0:
resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
engines: {node: '>=10'}
p-locate@4.1.0:
resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
engines: {node: '>=8'}
p-locate@5.0.0:
resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
engines: {node: '>=10'}
@@ -3754,10 +3817,6 @@ packages:
resolution: {integrity: sha512-aio0v+S0QVkH1O+9x4dHtD4dgCExACcL+3EtNaGqC01GBudS9ijMuUsmN8OVScyV4OOp0jqdLShZFuSlbL/AsA==}
engines: {node: '>=18'}
p-try@2.2.0:
resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
engines: {node: '>=6'}
pac-proxy-agent@7.2.0:
resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
engines: {node: '>= 14'}
@@ -3769,9 +3828,6 @@ packages:
package-json-from-dist@1.0.1:
resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
pako@2.1.0:
resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
parent-module@1.0.1:
resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
engines: {node: '>=6'}
@@ -3879,10 +3935,6 @@ packages:
resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
engines: {node: '>= 6'}
pngjs@5.0.0:
resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
engines: {node: '>=10.13.0'}
portfinder@1.0.32:
resolution: {integrity: sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==}
engines: {node: '>= 0.12.0'}
@@ -4020,11 +4072,6 @@ packages:
resolution: {integrity: sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==}
engines: {node: '>=8'}
qrcode@1.5.4:
resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
engines: {node: '>=10.13.0'}
hasBin: true
qs@6.13.0:
resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
engines: {node: '>=0.6'}
@@ -4069,6 +4116,9 @@ packages:
react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
react-is@19.0.0:
resolution: {integrity: sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==}
react-screen-wake-lock@3.0.2:
resolution: {integrity: sha512-f88vcfMG1AWYRSIWQ5Qx5YVboH6TSL0F4ZlFLERZp6aKiZRGVRAAJ9wedJdO5jqTMcCDZ4OXJ8PjcSkDmvGSBg==}
engines: {node: '>=14.16'}
@@ -4080,6 +4130,17 @@ packages:
peerDependencies:
react: ^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc
react-timer-hook@3.0.8:
resolution: {integrity: sha512-bi2e7DhPBU1MRPU4ZHaVqBmgM9e2HK0ae8O2AIqwqjcPo4/qR7lVGQonOQLAKOZPQCJSYfV8F5aBWzOLXElzqQ==}
peerDependencies:
react: '>=16.8.0'
react-transition-group@4.4.5:
resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
peerDependencies:
react: '>=16.6.0'
react-dom: '>=16.6.0'
react-twc@1.4.2:
resolution: {integrity: sha512-ix8Z1dNacL29Vri3rWsQqRYMQXWCNzbI1qhz0yyvcbO057HZwz3rXZDQ7TcOE1hQ7EHornX3ka2reO27RmXiYA==}
@@ -4156,9 +4217,6 @@ packages:
resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
engines: {node: '>=0.10.0'}
require-main-filename@2.0.0:
resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
@@ -4273,9 +4331,6 @@ packages:
resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==}
engines: {node: '>= 0.8.0'}
set-blocking@2.0.0:
resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
set-function-length@1.2.2:
resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
engines: {node: '>= 0.4'}
@@ -4372,7 +4427,6 @@ packages:
source-map@0.8.0-beta.0:
resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
engines: {node: '>= 8'}
deprecated: The work that was done in this beta branch won't be included in future versions
sourcemap-codec@1.4.8:
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
@@ -4840,9 +4894,6 @@ packages:
resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
engines: {node: '>= 0.4'}
which-module@2.0.1:
resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
which-typed-array@1.1.18:
resolution: {integrity: sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==}
engines: {node: '>= 0.4'}
@@ -4960,9 +5011,6 @@ packages:
resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
engines: {node: '>=0.4'}
y18n@4.0.3:
resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
y18n@5.0.8:
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
engines: {node: '>=10'}
@@ -4982,10 +5030,6 @@ packages:
engines: {node: '>= 14'}
hasBin: true
yargs-parser@18.1.3:
resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
engines: {node: '>=6'}
yargs-parser@20.2.9:
resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
engines: {node: '>=10'}
@@ -4994,10 +5038,6 @@ packages:
resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
engines: {node: '>=12'}
yargs@15.4.1:
resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
engines: {node: '>=8'}
yargs@16.2.0:
resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
engines: {node: '>=10'}
@@ -6301,6 +6341,91 @@ snapshots:
'@jsdevtools/ono@7.1.3': {}
'@mui/core-downloads-tracker@6.4.5': {}
'@mui/icons-material@6.4.5(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)':
dependencies:
'@babel/runtime': 7.26.9
'@mui/material': 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
optionalDependencies:
'@types/react': 18.3.18
'@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.26.9
'@mui/core-downloads-tracker': 6.4.5
'@mui/system': 6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
'@mui/types': 7.2.21(@types/react@18.3.18)
'@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1)
'@popperjs/core': 2.11.8
'@types/react-transition-group': 4.4.12(@types/react@18.3.18)
clsx: 2.1.1
csstype: 3.1.3
prop-types: 15.8.1
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
react-is: 19.0.0
react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
optionalDependencies:
'@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
'@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
'@types/react': 18.3.18
'@mui/private-theming@6.4.3(@types/react@18.3.18)(react@18.3.1)':
dependencies:
'@babel/runtime': 7.26.9
'@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1)
prop-types: 15.8.1
react: 18.3.1
optionalDependencies:
'@types/react': 18.3.18
'@mui/styled-engine@6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.26.9
'@emotion/cache': 11.14.0
'@emotion/serialize': 1.3.3
'@emotion/sheet': 1.4.0
csstype: 3.1.3
prop-types: 15.8.1
react: 18.3.1
optionalDependencies:
'@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
'@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
'@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)':
dependencies:
'@babel/runtime': 7.26.9
'@mui/private-theming': 6.4.3(@types/react@18.3.18)(react@18.3.1)
'@mui/styled-engine': 6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)
'@mui/types': 7.2.21(@types/react@18.3.18)
'@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1)
clsx: 2.1.1
csstype: 3.1.3
prop-types: 15.8.1
react: 18.3.1
optionalDependencies:
'@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
'@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
'@types/react': 18.3.18
'@mui/types@7.2.21(@types/react@18.3.18)':
optionalDependencies:
'@types/react': 18.3.18
'@mui/utils@6.4.3(@types/react@18.3.18)(react@18.3.1)':
dependencies:
'@babel/runtime': 7.26.9
'@mui/types': 7.2.21(@types/react@18.3.18)
'@types/prop-types': 15.7.14
clsx: 2.1.1
prop-types: 15.8.1
react: 18.3.1
react-is: 19.0.0
optionalDependencies:
'@types/react': 18.3.18
'@nodelib/fs.scandir@2.1.5':
dependencies:
'@nodelib/fs.stat': 2.0.5
@@ -6348,6 +6473,8 @@ snapshots:
'@pnpm/network.ca-file': 1.0.2
config-chain: 1.1.13
'@popperjs/core@2.11.8': {}
'@protobufjs/aspromise@1.1.2': {}
'@protobufjs/base64@1.1.2': {}
@@ -6675,20 +6802,18 @@ snapshots:
dependencies:
undici-types: 6.20.0
'@types/pako@2.0.4': {}
'@types/parse-json@4.0.2': {}
'@types/prop-types@15.7.14': {}
'@types/qrcode@1.5.6':
dependencies:
'@types/node': 22.13.5
'@types/react-dom@18.3.5(@types/react@18.3.18)':
dependencies:
'@types/react': 18.3.18
'@types/react-transition-group@4.4.12(@types/react@18.3.18)':
dependencies:
'@types/react': 18.3.18
'@types/react@18.3.18':
dependencies:
'@types/prop-types': 15.7.14
@@ -7133,8 +7258,6 @@ snapshots:
camelcase-css@2.0.1: {}
camelcase@5.3.1: {}
camelcase@6.3.0: {}
caniuse-lite@1.0.30001700: {}
@@ -7198,12 +7321,6 @@ snapshots:
cli-width@3.0.0: {}
cliui@6.0.0:
dependencies:
string-width: 4.2.3
strip-ansi: 6.0.1
wrap-ansi: 6.2.0
cliui@7.0.4:
dependencies:
string-width: 4.2.3
@@ -7445,8 +7562,6 @@ snapshots:
dependencies:
ms: 2.1.3
decamelize@1.2.0: {}
deep-equal-in-any-order@2.0.6:
dependencies:
lodash.mapvalues: 4.6.0
@@ -7490,8 +7605,6 @@ snapshots:
didyoumean@1.2.2: {}
dijkstrajs@1.0.3: {}
dir-glob@3.0.1:
dependencies:
path-type: 4.0.0
@@ -7504,6 +7617,11 @@ snapshots:
dependencies:
esutils: 2.0.3
dom-helpers@5.2.1:
dependencies:
'@babel/runtime': 7.26.9
csstype: 3.1.3
dom-serializer@2.0.0:
dependencies:
domelementtype: 2.3.0
@@ -7952,11 +8070,6 @@ snapshots:
find-root@1.1.0: {}
find-up@4.1.0:
dependencies:
locate-path: 5.0.0
path-exists: 4.0.0
find-up@5.0.0:
dependencies:
locate-path: 6.0.0
@@ -8826,10 +8939,6 @@ snapshots:
lines-and-columns@1.2.4: {}
locate-path@5.0.0:
dependencies:
p-locate: 4.1.0
locate-path@6.0.0:
dependencies:
p-locate: 5.0.0
@@ -9216,18 +9325,10 @@ snapshots:
p-defer@3.0.0: {}
p-limit@2.3.0:
dependencies:
p-try: 2.2.0
p-limit@3.1.0:
dependencies:
yocto-queue: 0.1.0
p-locate@4.1.0:
dependencies:
p-limit: 2.3.0
p-locate@5.0.0:
dependencies:
p-limit: 3.1.0
@@ -9239,8 +9340,6 @@ snapshots:
p-throttle@7.0.0: {}
p-try@2.2.0: {}
pac-proxy-agent@7.2.0:
dependencies:
'@tootallnate/quickjs-emscripten': 0.23.0
@@ -9261,8 +9360,6 @@ snapshots:
package-json-from-dist@1.0.1: {}
pako@2.1.0: {}
parent-module@1.0.1:
dependencies:
callsites: 3.1.0
@@ -9352,8 +9449,6 @@ snapshots:
pirates@4.0.6: {}
pngjs@5.0.0: {}
portfinder@1.0.32:
dependencies:
async: 2.6.4
@@ -9489,12 +9584,6 @@ snapshots:
dependencies:
escape-goat: 2.1.1
qrcode@1.5.4:
dependencies:
dijkstrajs: 1.0.3
pngjs: 5.0.0
yargs: 15.4.1
qs@6.13.0:
dependencies:
side-channel: 1.1.0
@@ -9549,6 +9638,8 @@ snapshots:
react-is@16.13.1: {}
react-is@19.0.0: {}
react-screen-wake-lock@3.0.2(react@18.3.1):
dependencies:
react: 18.3.1
@@ -9557,6 +9648,19 @@ snapshots:
dependencies:
react: 18.3.1
react-timer-hook@3.0.8(react@18.3.1):
dependencies:
react: 18.3.1
react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.26.9
dom-helpers: 5.2.1
loose-envify: 1.4.0
prop-types: 15.8.1
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
react-twc@1.4.2(@types/react@18.3.18)(react@18.3.1):
dependencies:
'@radix-ui/react-slot': 1.1.2(@types/react@18.3.18)(react@18.3.1)
@@ -9664,8 +9768,6 @@ snapshots:
require-from-string@2.0.2: {}
require-main-filename@2.0.0: {}
resolve-from@4.0.0: {}
resolve@1.22.10:
@@ -9816,8 +9918,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
set-blocking@2.0.0: {}
set-function-length@1.2.2:
dependencies:
define-data-property: 1.1.4
@@ -10487,8 +10587,6 @@ snapshots:
is-weakmap: 2.0.2
is-weakset: 2.0.4
which-module@2.0.1: {}
which-typed-array@1.1.18:
dependencies:
available-typed-arrays: 1.0.7
@@ -10679,8 +10777,6 @@ snapshots:
xtend@4.0.2: {}
y18n@4.0.3: {}
y18n@5.0.8: {}
yallist@3.1.1: {}
@@ -10691,29 +10787,10 @@ snapshots:
yaml@2.7.0: {}
yargs-parser@18.1.3:
dependencies:
camelcase: 5.3.1
decamelize: 1.2.0
yargs-parser@20.2.9: {}
yargs-parser@21.1.1: {}
yargs@15.4.1:
dependencies:
cliui: 6.0.0
decamelize: 1.2.0
find-up: 4.1.0
get-caller-file: 2.0.5
require-directory: 2.1.1
require-main-filename: 2.0.0
set-blocking: 2.0.0
string-width: 4.2.3
which-module: 2.0.1
y18n: 4.0.3
yargs-parser: 18.1.3
yargs@16.2.0:
dependencies:
cliui: 7.0.4

View File

@@ -1,4 +1,3 @@
import { useRef } from 'react';
import { twc } from 'react-twc';
import { useAnalytics } from '../../Hooks/useAnalytics';
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
@@ -8,7 +7,6 @@ import { Separator } from '../Misc/Separator';
import { Paragraph } from '../Misc/TextComponents';
import { ToggleButton } from '../Misc/ToggleButton';
import { Dialog } from './Dialog';
import { ShareGameDialog } from './ShareGameDialog';
const SettingContainer = twc.div`w-full flex flex-col mb-2`;
@@ -26,7 +24,6 @@ export const SettingsDialog = ({
}) => {
const { settings, setSettings, isPWA, version } = useGlobalSettings();
const analytics = useAnalytics();
const shareGameDialogRef = useRef<HTMLDialogElement | null>(null);
return (
<Dialog id="settings" title="⚙️ Settings ⚙️" dialogRef={dialogRef}>
@@ -246,16 +243,7 @@ export const SettingsDialog = ({
</Description>
</SettingContainer>
<Separator height="1px" />
<div className="flex w-full justify-center gap-3">
<button
className="mt-1 mb-1 bg-secondary-main px-3 py-1 rounded-md duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-secondary-dark font-bold"
onClick={() => {
analytics.trackEvent('share_game_button_clicked');
shareGameDialogRef.current?.showModal();
}}
>
<span className="text-sm">Share Game</span>
</button>
<div className="flex w-full justify-center">
<button
className="mt-1 mb-1 bg-primary-main px-3 py-1 rounded-md duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark font-bold"
onClick={() => {
@@ -266,7 +254,6 @@ export const SettingsDialog = ({
<span className="text-sm">Save and Close</span>
</button>
</div>
<ShareGameDialog dialogRef={shareGameDialogRef} />
{!isPWA && (
<>
{window.isIOS && (

View File

@@ -1,138 +0,0 @@
import { useEffect, useState } from 'react';
import QRCode from 'qrcode';
import { Dialog } from './Dialog';
import { generateShareableUrl } from '../../Utils/gameStateSharing';
import { useAnalytics } from '../../Hooks/useAnalytics';
export const ShareGameDialog = ({
dialogRef,
}: {
dialogRef: React.MutableRefObject<HTMLDialogElement | null>;
}) => {
const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
const [shareableUrl, setShareableUrl] = useState<string>('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string>('');
const [copied, setCopied] = useState(false);
const analytics = useAnalytics();
useEffect(() => {
// Generate QR code when dialog opens
const dialog = dialogRef.current;
if (!dialog) return;
const handleOpen = async () => {
setIsLoading(true);
setError('');
setCopied(false);
try {
// Small delay to ensure all localStorage writes from useEffect have completed
await new Promise((resolve) => setTimeout(resolve, 50));
// Generate the shareable URL
const url = generateShareableUrl();
setShareableUrl(url);
// Generate QR code with lower error correction for less detail
const qrDataUrl = await QRCode.toDataURL(url, {
width: 300,
margin: 2,
errorCorrectionLevel: 'L', // Low error correction = simpler QR code
color: {
dark: '#000000',
light: '#FFFFFF',
},
});
setQrCodeUrl(qrDataUrl);
analytics.trackEvent('share_game_qr_generated');
} catch (err) {
console.error('Error generating QR code:', err);
setError('Failed to generate QR code. Please try again.');
analytics.trackEvent('share_game_qr_error');
} finally {
setIsLoading(false);
}
};
// Listen for dialog open events
const observer = new MutationObserver(() => {
if (dialog.open) {
handleOpen();
}
});
observer.observe(dialog, { attributes: true, attributeFilter: ['open'] });
return () => observer.disconnect();
}, [dialogRef, analytics]);
const handleCopyUrl = async () => {
try {
await navigator.clipboard.writeText(shareableUrl);
setCopied(true);
analytics.trackEvent('share_game_url_copied');
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy URL:', err);
analytics.trackEvent('share_game_url_copy_error');
}
};
return (
<Dialog id="share-game" title="Share Game" dialogRef={dialogRef}>
<div className="flex flex-col items-center gap-4 py-4">
{isLoading && (
<div className="text-text-secondary">Generating QR code...</div>
)}
{error && (
<div className="text-red-500 text-sm text-center">{error}</div>
)}
{!isLoading && !error && qrCodeUrl && (
<>
<div className="bg-white p-4 rounded-lg">
<img src={qrCodeUrl} alt="QR Code" className="w-full h-auto" />
</div>
<div className="text-text-secondary text-sm text-center max-w-full">
Scan this QR code to share the current game state
</div>
<div className="w-full flex flex-col gap-2">
<div className="text-xs text-text-secondary text-center">
Or copy the link:
</div>
<div className="flex gap-2 items-center w-full">
<input
type="text"
value={shareableUrl}
readOnly
className="flex-1 bg-secondary-main text-text-primary text-xs px-2 py-1 rounded-md border-none outline-none overflow-hidden text-ellipsis"
onClick={(e) => e.currentTarget.select()}
/>
<button
onClick={handleCopyUrl}
className="bg-primary-main px-3 py-1 rounded-md text-sm font-semibold hover:bg-primary-dark transition-colors"
>
{copied ? 'Copied!' : 'Copy'}
</button>
</div>
</div>
</>
)}
<button
className="mt-2 bg-primary-main px-4 py-2 rounded-md font-semibold hover:bg-primary-dark transition-colors"
onClick={() => {
analytics.trackEvent('share_game_dialog_closed');
dialogRef.current?.close();
}}
>
Close
</button>
</div>
</Dialog>
);
};

View File

@@ -1,7 +1,5 @@
import { useEffect, useState } from 'react';
import { twc } from 'react-twc';
import { useGlobalSettings } from '../Hooks/useGlobalSettings';
import { importGameState } from '../Utils/gameStateSharing';
import { Play } from './Views/Play';
import StartMenu from './Views/StartMenu/StartMenu';
@@ -28,88 +26,8 @@ const EmergencyResetButton = () => {
export const LifeTrinket = () => {
const { showPlay, initialGameSettings } = useGlobalSettings();
// Check for query parameter immediately on every render
const urlParams = new URLSearchParams(window.location.search);
const gameStateParam = urlParams.get('gameStateToLoad');
const [showImportDialog, setShowImportDialog] = useState(!!gameStateParam);
const [importSuccess, setImportSuccess] = useState<boolean | null>(null);
useEffect(() => {
// Update dialog visibility if query parameter changes
if (gameStateParam && !showImportDialog) {
setShowImportDialog(true);
}
}, [gameStateParam, showImportDialog]);
const handleImportConfirm = () => {
const urlParams = new URLSearchParams(window.location.search);
const gameStateParam = urlParams.get('gameStateToLoad');
if (gameStateParam) {
// Import game state to localStorage
const success = importGameState(gameStateParam);
if (success) {
// Remove query parameter and reload the page
// This ensures providers pick up the new localStorage values
window.location.href =
window.location.origin + window.location.pathname;
} else {
// Show error and remove query parameter
setImportSuccess(false);
window.history.replaceState({}, '', window.location.pathname);
setShowImportDialog(false);
}
}
};
const handleImportCancel = () => {
// Remove the query parameter from URL
const newUrl = window.location.pathname;
window.history.replaceState({}, '', newUrl);
setShowImportDialog(false);
};
// If import dialog is shown, only render the dialog and nothing else
if (showImportDialog) {
return (
<div className="fixed inset-0 bg-background-backdrop backdrop-blur-sm z-[9999] flex items-center justify-center">
<div className="bg-background-default rounded-2xl p-8 max-w-md mx-4">
<h2 className="text-2xl text-text-primary font-bold mb-4 text-center">
Load Shared Game?
</h2>
<p className="text-text-secondary mb-6 text-center">
A shared game state has been detected. Would you like to load it?
This will replace your current game state.
</p>
<div className="flex gap-4 justify-center">
<button
onClick={handleImportCancel}
className="px-4 py-2 bg-secondary-main text-text-primary rounded-md font-semibold hover:bg-secondary-dark transition-colors"
>
Cancel
</button>
<button
onClick={handleImportConfirm}
className="px-4 py-2 bg-primary-main text-text-primary rounded-md font-semibold hover:bg-primary-dark transition-colors"
>
Load Game
</button>
</div>
</div>
</div>
);
}
return (
<>
{importSuccess === false && (
<div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-red-500 text-white px-6 py-3 rounded-md z-[9999]">
Failed to load game state. The link may be corrupted.
</div>
)}
{showPlay && initialGameSettings ? (
<PlayWrapper>
<Play />

View File

@@ -0,0 +1,37 @@
import { useStopwatch } from 'react-timer-hook';
import { TimerStyle, TimerWrapper } from './Timer';
import { Time } from './Time';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import PauseIcon from '@mui/icons-material/Pause';
export const NegativeStopWatch = ({
autoStart = false,
}: {
autoStart?: boolean;
}) => {
// Initialize the timer using the useTimer hook.
const { seconds, minutes, hours, isRunning, start, pause } = useStopwatch({
autoStart,
});
return (
<TimerWrapper>
<TimerStyle>
{'-'}
<Time time={{ hours, minutes, seconds }} />
<div>
{!isRunning && (
<button onClick={start}>
<PlayArrowIcon />
</button>
)}
{isRunning && (
<button onClick={pause}>
<PauseIcon />
</button>
)}
</div>
</TimerStyle>
</TimerWrapper>
);
};

View File

@@ -0,0 +1,9 @@
import { formatTime } from '../../../Utils/formatTime';
export const Time = ({
time,
}: {
time: { hours: number; minutes: number; seconds: number };
}) => {
return <div className="tabular-nums">{formatTime({ time })}</div>;
};

View File

@@ -0,0 +1,84 @@
import { useState } from 'react';
import { useTimer } from 'react-timer-hook';
import { NegativeStopWatch } from './NegativeStopWatch';
import { twc } from 'react-twc';
import PauseIcon from '@mui/icons-material/Pause';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import { Time } from './Time';
export const TimerWrapper = twc.div`
absolute z-50 top-0 w-screen flex items-center flex-col
`;
export const TimerStyle = twc.div`
flex gap-2 bg-interface-recentDifference-background py-1 px-4 rounded-full
`;
const TIMER_MINUTES = 50;
export const Timer = () => {
// Set the default expiry time to 50 minutes from now.
const defaultExpiry = new Date();
defaultExpiry.setMinutes(defaultExpiry.getMinutes() + TIMER_MINUTES);
const [hasStarted, setHasStarted] = useState(false);
// Initialize the timer using the useTimer hook.
const { seconds, minutes, hours, isRunning, start, pause, restart } =
useTimer({
expiryTimestamp: defaultExpiry,
onExpire: () => console.warn('Timer expired'),
autoStart: false,
});
// Function to restart the timer for 50 minutes.
const handleRestart = () => {
const time = new Date();
time.setMinutes(time.getMinutes() + TIMER_MINUTES);
restart(time);
};
const handleStart = () => {
setHasStarted(true);
start();
};
const handlePause = () => {
setHasStarted(false);
pause();
};
if (hasStarted && !isRunning) {
return <NegativeStopWatch autoStart />;
}
return (
<TimerWrapper>
<TimerStyle>
<Time
time={{
hours,
minutes,
seconds,
}}
/>
<div>
{!isRunning && (
<button onClick={handleStart}>
<PlayArrowIcon />
</button>
)}
{isRunning && (
<button onClick={handlePause}>
<PauseIcon />
</button>
)}
<button onClick={handleRestart}>
<RestartAltIcon />
</button>
</div>
</TimerStyle>
</TimerWrapper>
);
};

View File

@@ -6,6 +6,7 @@ import { PreStartMode } from '../../Types/Settings';
import LifeCounter from '../LifeCounter/LifeCounter';
import { RoulettePlayerCard } from '../PreStartGame/Games/RandomKing/RoulettePlayerCard';
import { GridLayout } from '../Views/Play';
import { Timer } from '../Misc/Timer/Timer';
const getGridArea = (player: PlayerType) => {
switch (player.index) {
@@ -36,6 +37,7 @@ export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
return (
<PlayersWrapper>
<div className={`grid w-full h-full gap-1 box-border ${gridLayout} `}>
<Timer />
{players.map((player) => {
const gridArea = getGridArea(player);
return (

View File

@@ -19,6 +19,7 @@ export const Play = () => {
useGlobalSettings();
let gridLayout: GridLayout;
switch (players.length) {
case 1:
if (initialGameSettings?.orientation === Orientation.Portrait) {
@@ -101,7 +102,6 @@ export const Play = () => {
settings.preStartMode !== PreStartMode.None &&
!playing &&
settings.showStartingPlayer && <PreStart />}
<Players gridLayout={gridLayout} />
</MainWrapper>
);

17
src/Utils/formatTime.ts Normal file
View File

@@ -0,0 +1,17 @@
export const formatTime = ({
time,
}: {
time: { hours: number; minutes: number; seconds: number };
}) => {
const h = time.hours.toString().padStart(2, '0');
const m = time.minutes.toString().padStart(2, '0');
const s = time.seconds.toString().padStart(2, '0');
if (time.hours > 0) {
return `${h}:${m}:${s}`;
} else if (time.minutes > 0) {
return `${m}:${s}`;
} else {
return s;
}
};

View File

@@ -1,113 +0,0 @@
import pako from 'pako';
export interface GameStateExport {
settings: string | null;
initialGameSettings: string | null;
players: string | null;
playing: string | null;
showPlay: string | null;
preStartComplete: string | null;
savedGame: string | null;
startingPlayerIndex: string | null;
}
/**
* Export all game state from localStorage, compress it, and encode for URL
*/
export function exportGameState(): string {
try {
// Only export essential data with very short keys
const compactState: Record<string, string> = {};
const s = localStorage.getItem('settings');
const i = localStorage.getItem('initialGameSettings');
const p = localStorage.getItem('players');
const si = localStorage.getItem('startingPlayerIndex');
// Only include non-null values
if (s) compactState.s = s;
if (i) compactState.i = i;
if (p) compactState.p = p;
if (si) compactState.si = si;
// Convert to JSON string
const jsonString = JSON.stringify(compactState);
// Compress using pako (gzip) with maximum compression
const compressed = pako.deflate(jsonString, { level: 9 });
// Convert to base64 for URL safety
const base64 = btoa(String.fromCharCode(...compressed));
// Make URL-safe by replacing characters
const urlSafe = base64
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=/g, '');
return urlSafe;
} catch (error) {
console.error('Error exporting game state:', error);
throw new Error('Failed to export game state');
}
}
/**
* Import game state from compressed URL parameter and load into localStorage
*/
export function importGameState(encodedData: string): boolean {
try {
// Restore base64 characters
let base64 = encodedData.replace(/-/g, '+').replace(/_/g, '/');
// Add padding if needed
while (base64.length % 4) {
base64 += '=';
}
// Decode from base64
const binaryString = atob(base64);
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
// Decompress
const decompressed = pako.inflate(bytes, { to: 'string' });
// Parse JSON
const compactState: Record<string, string> = JSON.parse(decompressed);
// Validate that we have some data
if (!compactState || typeof compactState !== 'object') {
throw new Error('Invalid game state format');
}
// Map short keys back to full localStorage keys and load
if (compactState.s) localStorage.setItem('settings', compactState.s);
if (compactState.i)
localStorage.setItem('initialGameSettings', compactState.i);
if (compactState.p) localStorage.setItem('players', compactState.p);
if (compactState.si)
localStorage.setItem('startingPlayerIndex', compactState.si);
// Always set playing and showPlay to false after loading
// This ensures the user starts at the main menu and can review the state
localStorage.setItem('playing', 'false');
localStorage.setItem('showPlay', 'false');
return true;
} catch (error) {
console.error('Error importing game state:', error);
return false;
}
}
/**
* Generate shareable URL with game state
*/
export function generateShareableUrl(): string {
const encodedState = exportGameState();
const currentUrl = window.location.origin + window.location.pathname;
return `${currentUrl}?gameStateToLoad=${encodedState}`;
}