mirror of
https://github.com/Vikeo/LifeTrinket.git
synced 2025-11-18 08:48:00 +00:00
Compare commits
1 Commits
feature/ti
...
1.0.2
| Author | SHA1 | Date | |
|---|---|---|---|
|
ca4e3edb5f |
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "life-trinket",
|
||||
"private": true,
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"type": "commonjs",
|
||||
"engines": {
|
||||
"node": ">=20",
|
||||
@@ -17,15 +17,12 @@
|
||||
"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",
|
||||
"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"
|
||||
|
||||
236
pnpm-lock.yaml
generated
236
pnpm-lock.yaml
generated
@@ -8,12 +8,6 @@ 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
|
||||
@@ -32,9 +26,6 @@ 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)
|
||||
@@ -1122,97 +1113,6 @@ 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'}
|
||||
@@ -1257,9 +1157,6 @@ 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==}
|
||||
|
||||
@@ -1665,11 +1562,6 @@ packages:
|
||||
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==}
|
||||
|
||||
@@ -2420,9 +2312,6 @@ 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==}
|
||||
|
||||
@@ -4116,9 +4005,6 @@ 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'}
|
||||
@@ -4130,17 +4016,6 @@ 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==}
|
||||
|
||||
@@ -6341,91 +6216,6 @@ 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
|
||||
@@ -6473,8 +6263,6 @@ 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': {}
|
||||
@@ -6810,10 +6598,6 @@ snapshots:
|
||||
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
|
||||
@@ -7617,11 +7401,6 @@ 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
|
||||
@@ -9638,8 +9417,6 @@ 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
|
||||
@@ -9648,19 +9425,6 @@ 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)
|
||||
|
||||
@@ -242,6 +242,23 @@ export const SettingsDialog = ({
|
||||
</ul>
|
||||
</Description>
|
||||
</SettingContainer>
|
||||
<SettingContainer>
|
||||
<ToggleContainer>
|
||||
<label>Show Match Score</label>
|
||||
<ToggleButton
|
||||
checked={settings.showMatchScore}
|
||||
onChange={() => {
|
||||
setSettings({
|
||||
...settings,
|
||||
showMatchScore: !settings.showMatchScore,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</ToggleContainer>
|
||||
<Description>
|
||||
Shows a score badge on each player's card to track wins across multiple games.
|
||||
</Description>
|
||||
</SettingContainer>
|
||||
<Separator height="1px" />
|
||||
<div className="flex w-full justify-center">
|
||||
<button
|
||||
|
||||
85
src/Components/GameOver/GameOver.tsx
Normal file
85
src/Components/GameOver/GameOver.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import { twc } from 'react-twc';
|
||||
import { Player } from '../../Types/Player';
|
||||
|
||||
const Overlay = twc.div`
|
||||
fixed top-0 left-0 w-[100dvmax] h-[100dvmin]
|
||||
bg-black/80 backdrop-blur-sm
|
||||
flex items-center justify-center
|
||||
z-50
|
||||
`;
|
||||
|
||||
const Modal = twc.div`
|
||||
bg-background-default
|
||||
rounded-2xl p-8
|
||||
max-w-md w-[90%]
|
||||
shadow-2xl
|
||||
flex flex-col gap-6
|
||||
`;
|
||||
|
||||
const Title = twc.h2`
|
||||
text-[7vmin] font-bold text-center
|
||||
text-text-primary
|
||||
-mb-4
|
||||
`;
|
||||
|
||||
const ButtonContainer = twc.div`
|
||||
flex flex-col gap-3
|
||||
`;
|
||||
|
||||
const WinnerName = twc.div`
|
||||
text-[6vmin] font-bold text-center
|
||||
py-[2vmin] px-[3vmin] rounded-xl
|
||||
text-white
|
||||
mb-0
|
||||
`;
|
||||
|
||||
const PrimaryButton = twc.button`
|
||||
py-[2vmin] px-[3vmin] rounded-xl
|
||||
text-[4vmin] font-semibold
|
||||
bg-interface-primary
|
||||
text-white
|
||||
transition-all duration-200
|
||||
hover:scale-105 active:scale-95
|
||||
border-3 border-white/50
|
||||
shadow-lg shadow-interface-primary/50
|
||||
`;
|
||||
|
||||
const SecondaryButton = twc.button`
|
||||
py-[2vmin] px-[3vmin] rounded-xl
|
||||
text-[4vmin] font-semibold
|
||||
bg-secondary-main
|
||||
text-text-primary
|
||||
transition-all duration-200
|
||||
hover:scale-105 active:scale-95
|
||||
border-3 border-primary-main
|
||||
shadow-lg shadow-secondary-main/50
|
||||
`;
|
||||
|
||||
type GameOverProps = {
|
||||
winner: Player;
|
||||
onStartNextGame: () => void;
|
||||
onStay: () => void;
|
||||
};
|
||||
|
||||
export const GameOver = ({
|
||||
winner,
|
||||
onStartNextGame,
|
||||
onStay,
|
||||
}: GameOverProps) => {
|
||||
return (
|
||||
<Overlay>
|
||||
<Modal>
|
||||
<Title>Winner</Title>
|
||||
<WinnerName style={{ backgroundColor: winner.color }}>
|
||||
{winner.name || `Player ${winner.index + 1}`}
|
||||
</WinnerName>
|
||||
<ButtonContainer>
|
||||
<SecondaryButton onClick={onStartNextGame}>
|
||||
Start Next Game
|
||||
</SecondaryButton>
|
||||
<PrimaryButton onClick={onStay}>Close</PrimaryButton>
|
||||
</ButtonContainer>
|
||||
</Modal>
|
||||
</Overlay>
|
||||
);
|
||||
};
|
||||
@@ -24,6 +24,27 @@ const SettingsButtonTwc = twc.button<RotationButtonProps>((props) => [
|
||||
: 'top-1/4 right-[1vmax]',
|
||||
]);
|
||||
|
||||
type MatchScoreBadgeProps = RotationDivProps & {
|
||||
$useCommanderDamage: boolean;
|
||||
};
|
||||
|
||||
const MatchScoreBadge = twc.div<MatchScoreBadgeProps>((props) => [
|
||||
'absolute flex items-center justify-center',
|
||||
'bg-black/70 backdrop-blur-sm',
|
||||
'rounded-full',
|
||||
'w-[5vmin] h-[5vmin]',
|
||||
'text-white font-bold',
|
||||
'text-[3vmin]',
|
||||
'z-[1]',
|
||||
'pointer-events-none',
|
||||
'select-none webkit-user-select-none',
|
||||
props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped
|
||||
? `left-[6.5vmax] bottom-[1vmax]`
|
||||
: props.$useCommanderDamage
|
||||
? 'left-[0.5vmax] top-[11.5vmin]'
|
||||
: 'left-[0.5vmax] top-[1vmax]',
|
||||
]);
|
||||
|
||||
type SettingsButtonProps = {
|
||||
onClick: () => void;
|
||||
rotation: Rotation;
|
||||
@@ -98,11 +119,12 @@ type LifeCounterProps = {
|
||||
player: Player;
|
||||
opponents: Player[];
|
||||
isStartingPlayer?: boolean;
|
||||
matchScore?: number;
|
||||
};
|
||||
|
||||
const RECENT_DIFFERENCE_TTL = 3_000;
|
||||
|
||||
const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
|
||||
const LifeCounter = ({ player, opponents, matchScore }: LifeCounterProps) => {
|
||||
const { updatePlayer, updateLifeTotal } = usePlayers();
|
||||
const { settings, playing } = useGlobalSettings();
|
||||
const recentDifferenceTimerRef = useRef<NodeJS.Timeout | undefined>(
|
||||
@@ -215,6 +237,21 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
|
||||
key={player.index}
|
||||
handleLifeChange={handleLifeChange}
|
||||
/>
|
||||
{matchScore !== undefined && matchScore > 0 && (
|
||||
<MatchScoreBadge
|
||||
$rotation={player.settings.rotation}
|
||||
$useCommanderDamage={player.settings.useCommanderDamage}
|
||||
style={{
|
||||
rotate:
|
||||
player.settings.rotation === Rotation.Side ||
|
||||
player.settings.rotation === Rotation.SideFlipped
|
||||
? `-90deg`
|
||||
: '0deg',
|
||||
}}
|
||||
>
|
||||
{matchScore}
|
||||
</MatchScoreBadge>
|
||||
)}
|
||||
{settings.showPlayerMenuCog && (
|
||||
<SettingsButton
|
||||
onClick={() => {
|
||||
@@ -244,6 +281,8 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
|
||||
isShown={showPlayerMenu}
|
||||
player={player}
|
||||
setShowPlayerMenu={setShowPlayerMenu}
|
||||
onForfeit={toggleGameLost}
|
||||
totalPlayers={opponents.length + 1}
|
||||
/>
|
||||
</LifeCounterWrapper>
|
||||
</LifeCounterContentWrapper>
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
import { formatTime } from '../../../Utils/formatTime';
|
||||
|
||||
export const Time = ({
|
||||
time,
|
||||
}: {
|
||||
time: { hours: number; minutes: number; seconds: number };
|
||||
}) => {
|
||||
return <div className="tabular-nums">{formatTime({ time })}</div>;
|
||||
};
|
||||
@@ -1,84 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
PartnerTax,
|
||||
Poison,
|
||||
ResetGame,
|
||||
Skull,
|
||||
} from '../../Icons/generated';
|
||||
import { Player, Rotation } from '../../Types/Player';
|
||||
import { PreStartMode } from '../../Types/Settings';
|
||||
@@ -90,16 +91,21 @@ type PlayerMenuProps = {
|
||||
player: Player;
|
||||
setShowPlayerMenu: (showPlayerMenu: boolean) => void;
|
||||
isShown: boolean;
|
||||
onForfeit?: () => void;
|
||||
totalPlayers: number;
|
||||
};
|
||||
|
||||
const PlayerMenu = ({
|
||||
player,
|
||||
setShowPlayerMenu,
|
||||
isShown,
|
||||
onForfeit,
|
||||
totalPlayers,
|
||||
}: PlayerMenuProps) => {
|
||||
const settingsContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const resetGameDialogRef = useRef<HTMLDialogElement | null>(null);
|
||||
const endGameDialogRef = useRef<HTMLDialogElement | null>(null);
|
||||
const forfeitGameDialogRef = useRef<HTMLDialogElement | null>(null);
|
||||
|
||||
const { isSide } = useSafeRotate({
|
||||
rotation: player.settings.rotation,
|
||||
@@ -117,6 +123,7 @@ const PlayerMenu = ({
|
||||
saveCurrentGame,
|
||||
initialGameSettings,
|
||||
setPreStartCompleted,
|
||||
gameScore,
|
||||
} = useGlobalSettings();
|
||||
|
||||
const analytics = useAnalytics();
|
||||
@@ -159,7 +166,7 @@ const PlayerMenu = ({
|
||||
};
|
||||
|
||||
const handleGoToStart = () => {
|
||||
saveCurrentGame({ players, initialGameSettings });
|
||||
saveCurrentGame({ players, initialGameSettings, gameScore });
|
||||
goToStart();
|
||||
setRandomizingPlayer(true);
|
||||
};
|
||||
@@ -479,6 +486,32 @@ const PlayerMenu = ({
|
||||
>
|
||||
<ResetGame size={iconSize} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
fontSize: buttonFontSize,
|
||||
padding: '2px',
|
||||
}}
|
||||
className="text-red-500"
|
||||
onClick={() => {
|
||||
if (totalPlayers === 2) {
|
||||
forfeitGameDialogRef.current?.show();
|
||||
} else {
|
||||
if (onForfeit) {
|
||||
analytics.trackEvent('forfeit_game', {
|
||||
player: player.index,
|
||||
});
|
||||
onForfeit();
|
||||
setShowPlayerMenu(false);
|
||||
}
|
||||
}
|
||||
}}
|
||||
aria-label="Forfeit Game"
|
||||
>
|
||||
<Skull size={iconSize} />
|
||||
</button>
|
||||
</ButtonsSections>
|
||||
</BetterRowContainer>
|
||||
|
||||
@@ -559,6 +592,48 @@ const PlayerMenu = ({
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog
|
||||
ref={forfeitGameDialogRef}
|
||||
className="z-[999] size-full bg-background-settings overflow-y-scroll"
|
||||
onClick={() => forfeitGameDialogRef.current?.close()}
|
||||
>
|
||||
<div className="flex size-full items-center justify-center">
|
||||
<div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-xl border-none">
|
||||
<h1
|
||||
className="text-center text-text-primary"
|
||||
style={{ fontSize: extraCountersSize }}
|
||||
>
|
||||
Forfeit Game?
|
||||
</h1>
|
||||
<div className="flex justify-evenly gap-2">
|
||||
<button
|
||||
className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
|
||||
style={{ fontSize: iconSize }}
|
||||
onClick={() => forfeitGameDialogRef.current?.close()}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
<button
|
||||
className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
|
||||
onClick={() => {
|
||||
if (onForfeit) {
|
||||
analytics.trackEvent('forfeit_game', {
|
||||
player: player.index,
|
||||
});
|
||||
onForfeit();
|
||||
setShowPlayerMenu(false);
|
||||
forfeitGameDialogRef.current?.close();
|
||||
}
|
||||
}}
|
||||
style={{ fontSize: iconSize }}
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</SettingsContainer>
|
||||
</PlayerMenuWrapper>
|
||||
);
|
||||
|
||||
@@ -6,7 +6,6 @@ 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) {
|
||||
@@ -32,12 +31,11 @@ const PlayersWrapper = twc.div`w-full h-full bg-black`;
|
||||
export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
|
||||
const { players } = usePlayers();
|
||||
|
||||
const { playing, settings, preStartCompleted } = useGlobalSettings();
|
||||
const { playing, settings, preStartCompleted, gameScore } = useGlobalSettings();
|
||||
|
||||
return (
|
||||
<PlayersWrapper>
|
||||
<div className={`grid w-full h-full gap-1 box-border ${gridLayout} `}>
|
||||
<Timer />
|
||||
{players.map((player) => {
|
||||
const gridArea = getGridArea(player);
|
||||
return (
|
||||
@@ -50,6 +48,11 @@ export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
|
||||
opponents={players.filter(
|
||||
(opponent) => opponent.index !== player.index
|
||||
)}
|
||||
matchScore={
|
||||
settings.showMatchScore
|
||||
? gameScore[player.index]
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
|
||||
{settings.preStartMode === PreStartMode.RandomKing &&
|
||||
|
||||
71
src/Components/ScoreDisplay/ScoreDisplay.tsx
Normal file
71
src/Components/ScoreDisplay/ScoreDisplay.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { twc } from 'react-twc';
|
||||
import { Player } from '../../Types/Player';
|
||||
import { GameScore } from '../../Contexts/GlobalSettingsContext';
|
||||
|
||||
const ScoreContainer = twc.div`
|
||||
absolute bottom-4 left-1/2 -translate-x-1/2
|
||||
bg-background-default/90 backdrop-blur-sm
|
||||
rounded-lg p-4
|
||||
shadow-lg
|
||||
z-40
|
||||
min-w-[200px]
|
||||
`;
|
||||
|
||||
const Title = twc.h3`
|
||||
text-sm font-semibold text-text-secondary
|
||||
uppercase tracking-wide mb-3
|
||||
`;
|
||||
|
||||
const ScoreList = twc.div`
|
||||
flex flex-col gap-2
|
||||
`;
|
||||
|
||||
const ScoreItem = twc.div`
|
||||
flex items-center justify-between gap-4
|
||||
`;
|
||||
|
||||
const PlayerInfo = twc.div`
|
||||
flex items-center gap-2
|
||||
`;
|
||||
|
||||
const PlayerColor = twc.div`
|
||||
w-4 h-4 rounded-full
|
||||
`;
|
||||
|
||||
const PlayerName = twc.span`
|
||||
text-text-primary font-medium
|
||||
`;
|
||||
|
||||
const Score = twc.span`
|
||||
text-text-primary font-bold text-lg
|
||||
`;
|
||||
|
||||
type ScoreDisplayProps = {
|
||||
players: Player[];
|
||||
gameScore: GameScore;
|
||||
};
|
||||
|
||||
export const ScoreDisplay = ({ players, gameScore }: ScoreDisplayProps) => {
|
||||
const hasAnyScore = Object.values(gameScore).some((score) => score > 0);
|
||||
|
||||
if (!hasAnyScore) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ScoreContainer>
|
||||
<Title>Match Score</Title>
|
||||
<ScoreList>
|
||||
{players.map((player) => (
|
||||
<ScoreItem key={player.index}>
|
||||
<PlayerInfo>
|
||||
<PlayerColor style={{ backgroundColor: player.color }} />
|
||||
<PlayerName>{player.name || `Player ${player.index + 1}`}</PlayerName>
|
||||
</PlayerInfo>
|
||||
<Score>{gameScore[player.index] || 0}</Score>
|
||||
</ScoreItem>
|
||||
))}
|
||||
</ScoreList>
|
||||
</ScoreContainer>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { twc } from 'react-twc';
|
||||
import { twGridTemplateAreas } from '../../../tailwind.config';
|
||||
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
|
||||
@@ -6,6 +6,7 @@ import { usePlayers } from '../../Hooks/usePlayers';
|
||||
import { Orientation, PreStartMode } from '../../Types/Settings';
|
||||
import { Players } from '../Players/Players';
|
||||
import { PreStart } from '../PreStartGame/PreStart';
|
||||
import { GameOver } from '../GameOver/GameOver';
|
||||
|
||||
const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden, setPlayers`;
|
||||
|
||||
@@ -14,12 +15,12 @@ type GridTemplateAreasKeys = keyof typeof twGridTemplateAreas;
|
||||
export type GridLayout = `grid-areas-${GridTemplateAreasKeys}`;
|
||||
|
||||
export const Play = () => {
|
||||
const { players, setPlayers } = usePlayers();
|
||||
const { initialGameSettings, playing, settings, preStartCompleted } =
|
||||
const { players, setPlayers, resetCurrentGame, setStartingPlayerIndex } = usePlayers();
|
||||
const { initialGameSettings, playing, settings, preStartCompleted, gameScore, setGameScore } =
|
||||
useGlobalSettings();
|
||||
const [winner, setWinner] = useState<number | null>(null);
|
||||
|
||||
let gridLayout: GridLayout;
|
||||
|
||||
switch (players.length) {
|
||||
case 1:
|
||||
if (initialGameSettings?.orientation === Orientation.Portrait) {
|
||||
@@ -95,6 +96,57 @@ export const Play = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Check for game over when only one player remains
|
||||
useEffect(() => {
|
||||
if (players.length < 2 || winner !== null || !settings.showMatchScore) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activePlayers = players.filter((p) => !p.hasLost);
|
||||
|
||||
// If only one player is alive, they are the winner
|
||||
if (activePlayers.length === 1) {
|
||||
setWinner(activePlayers[0].index);
|
||||
}
|
||||
}, [players, winner, settings.showMatchScore]);
|
||||
|
||||
const handleStartNextGame = () => {
|
||||
if (winner === null) return;
|
||||
|
||||
// Update score
|
||||
const newScore = { ...gameScore };
|
||||
newScore[winner] = (newScore[winner] || 0) + 1;
|
||||
setGameScore(newScore);
|
||||
|
||||
// Set the loser as the starting player for next game
|
||||
const loserIndex = players.find((p) => p.index !== winner)?.index ?? 0;
|
||||
setStartingPlayerIndex(loserIndex);
|
||||
|
||||
// Reset game
|
||||
resetCurrentGame();
|
||||
setWinner(null);
|
||||
};
|
||||
|
||||
const handleStay = () => {
|
||||
if (winner === null) return;
|
||||
|
||||
// Update score
|
||||
const newScore = { ...gameScore };
|
||||
newScore[winner] = (newScore[winner] || 0) + 1;
|
||||
setGameScore(newScore);
|
||||
|
||||
// Reset hasLost state for all players
|
||||
setPlayers(
|
||||
players.map((p) => ({
|
||||
...p,
|
||||
hasLost: false,
|
||||
}))
|
||||
);
|
||||
|
||||
// Clear winner to allow new game over detection
|
||||
setWinner(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<MainWrapper>
|
||||
{players.length > 1 &&
|
||||
@@ -102,7 +154,16 @@ export const Play = () => {
|
||||
settings.preStartMode !== PreStartMode.None &&
|
||||
!playing &&
|
||||
settings.showStartingPlayer && <PreStart />}
|
||||
|
||||
<Players gridLayout={gridLayout} />
|
||||
|
||||
{winner !== null && (
|
||||
<GameOver
|
||||
winner={players[winner]}
|
||||
onStartNextGame={handleStartNextGame}
|
||||
onStay={handleStay}
|
||||
/>
|
||||
)}
|
||||
</MainWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -64,6 +64,7 @@ const Start = () => {
|
||||
setPlaying,
|
||||
savedGame,
|
||||
saveCurrentGame,
|
||||
setGameScore,
|
||||
} = useGlobalSettings();
|
||||
|
||||
const infoDialogRef = useRef<HTMLDialogElement | null>(null);
|
||||
@@ -213,6 +214,9 @@ const Start = () => {
|
||||
|
||||
setInitialGameSettings(savedGame.initialGameSettings);
|
||||
setPlayers(savedGame.players);
|
||||
if (savedGame.gameScore) {
|
||||
setGameScore(savedGame.gameScore);
|
||||
}
|
||||
saveCurrentGame(null);
|
||||
setRandomizingPlayer(false);
|
||||
setShowPlay(true);
|
||||
@@ -407,15 +411,31 @@ const Start = () => {
|
||||
{savedGame && (
|
||||
<button
|
||||
className="flex flex-grow basis-0 justify-center self-center items-center bg-secondary-main px-3 py-2 rounded-md text-text-primary min-w-[150px]
|
||||
|
||||
|
||||
duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-secondary-dark font-bold"
|
||||
onClick={doResumeGame}
|
||||
>
|
||||
RESUME
|
||||
<span className="text-xs">
|
||||
({savedGame.players.length}
|
||||
{savedGame.players.length > 1 ? 'players' : 'player'})
|
||||
</span>
|
||||
<div className="flex flex-col items-center">
|
||||
<div>
|
||||
RESUME
|
||||
<span className="text-xs">
|
||||
({savedGame.players.length}
|
||||
{savedGame.players.length > 1 ? 'players' : 'player'})
|
||||
</span>
|
||||
</div>
|
||||
{savedGame.gameScore && Object.keys(savedGame.gameScore).length > 0 && (
|
||||
<div className="text-xs opacity-75">
|
||||
Score: {Object.entries(savedGame.gameScore)
|
||||
.map(([playerIndex, score]) => {
|
||||
const player = savedGame.players.find(
|
||||
(p) => p.index === Number(playerIndex)
|
||||
);
|
||||
return `${player?.name || `P${Number(playerIndex) + 1}`}: ${score}`;
|
||||
})
|
||||
.join(' | ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</StartButtonFooter>
|
||||
|
||||
@@ -12,8 +12,13 @@ type Version = {
|
||||
export type SavedGame = {
|
||||
initialGameSettings: InitialGameSettings;
|
||||
players: Player[];
|
||||
gameScore?: GameScore;
|
||||
} | null;
|
||||
|
||||
export type GameScore = {
|
||||
[playerIndex: number]: number;
|
||||
};
|
||||
|
||||
export type GlobalSettingsContextType = {
|
||||
fullscreen: {
|
||||
isFullscreen: boolean;
|
||||
@@ -45,6 +50,9 @@ export type GlobalSettingsContextType = {
|
||||
version: Version;
|
||||
savedGame: SavedGame;
|
||||
saveCurrentGame: (currentGame: SavedGame) => void;
|
||||
gameScore: GameScore;
|
||||
setGameScore: (score: GameScore) => void;
|
||||
resetGameScore: () => void;
|
||||
};
|
||||
|
||||
export const GlobalSettingsContext =
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ReactNode, useEffect, useMemo, useState } from 'react';
|
||||
import { useWakeLock } from 'react-screen-wake-lock';
|
||||
import {
|
||||
GameScore,
|
||||
GlobalSettingsContext,
|
||||
GlobalSettingsContextType,
|
||||
SavedGame,
|
||||
@@ -94,6 +95,19 @@ export const GlobalSettingsProvider = ({
|
||||
);
|
||||
};
|
||||
|
||||
const savedGameScore = localStorage.getItem('gameScore');
|
||||
const [gameScore, setGameScore] = useState<GameScore>(
|
||||
savedGameScore ? JSON.parse(savedGameScore) : {}
|
||||
);
|
||||
const setGameScoreAndLocalStorage = (score: GameScore) => {
|
||||
setGameScore(score);
|
||||
localStorage.setItem('gameScore', JSON.stringify(score));
|
||||
};
|
||||
const resetGameScore = () => {
|
||||
setGameScore({});
|
||||
localStorage.removeItem('gameScore');
|
||||
};
|
||||
|
||||
// Set settings if they are not valid
|
||||
useEffect(() => {
|
||||
// If there are no saved settings, set default settings
|
||||
@@ -171,11 +185,13 @@ export const GlobalSettingsProvider = ({
|
||||
localStorage.removeItem('playing');
|
||||
localStorage.removeItem('showPlay');
|
||||
localStorage.removeItem('preStartComplete');
|
||||
localStorage.removeItem('gameScore');
|
||||
|
||||
setPlaying(false);
|
||||
setShowPlay(false);
|
||||
setPreStartCompleted(false);
|
||||
setSettings({ ...settings, useMonarch: false });
|
||||
setGameScore({});
|
||||
};
|
||||
|
||||
const goToStart = async () => {
|
||||
@@ -299,6 +315,9 @@ export const GlobalSettingsProvider = ({
|
||||
isLatest: isLatestVersion,
|
||||
checkForNewVersion,
|
||||
},
|
||||
gameScore,
|
||||
setGameScore: setGameScoreAndLocalStorage,
|
||||
resetGameScore,
|
||||
};
|
||||
}, [
|
||||
isFullscreen,
|
||||
@@ -317,6 +336,7 @@ export const GlobalSettingsProvider = ({
|
||||
remoteVersion,
|
||||
isLatestVersion,
|
||||
analytics,
|
||||
gameScore,
|
||||
]);
|
||||
|
||||
return (
|
||||
|
||||
@@ -61,7 +61,11 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
|
||||
return;
|
||||
}
|
||||
|
||||
const newStartingPlayerIndex = Math.floor(Math.random() * players.length);
|
||||
// Use the saved starting player index if available, otherwise random
|
||||
const newStartingPlayerIndex =
|
||||
startingPlayerIndex >= 0
|
||||
? startingPlayerIndex
|
||||
: Math.floor(Math.random() * players.length);
|
||||
|
||||
players.forEach((player: Player) => {
|
||||
player.commanderDamage.map((damage) => {
|
||||
|
||||
@@ -27,6 +27,7 @@ export type Settings = {
|
||||
preStartMode: PreStartMode;
|
||||
showAnimations: boolean;
|
||||
useMonarch: boolean;
|
||||
showMatchScore: boolean;
|
||||
};
|
||||
|
||||
export type InitialGameSettings = {
|
||||
@@ -61,6 +62,7 @@ export const settingsSchema = z.object({
|
||||
preStartMode: z.nativeEnum(PreStartMode),
|
||||
showAnimations: z.boolean(),
|
||||
useMonarch: z.boolean().default(false),
|
||||
showMatchScore: z.boolean().default(true),
|
||||
});
|
||||
|
||||
export const defaultSettings: Settings = {
|
||||
@@ -71,4 +73,5 @@ export const defaultSettings: Settings = {
|
||||
preStartMode: PreStartMode.None,
|
||||
showAnimations: true,
|
||||
useMonarch: false,
|
||||
showMatchScore: true,
|
||||
};
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
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;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user