45 | play({ playbackRate: Math.random() * 0.1 + 0.55 })
46 | }
47 | />
48 |
49 | )
50 | }
51 |
52 | const stakes = {
53 | 1: 'White Stake',
54 | 2: 'Red Stake',
55 | 3: 'Green Stake',
56 | 4: 'Black Stake',
57 | 5: 'Blue Stake',
58 | 6: 'Purple Stake',
59 | 7: 'Orange Stake',
60 | 8: 'Gold Stake',
61 | allStakes: [1, 2, 3, 4, 5, 6, 7, 8] as const,
62 | }
63 |
64 | export default function Chips({
65 | wins,
66 | losses,
67 | }: {
68 | wins: Record
69 | losses: Record
70 | }) {
71 | const settings = useContext(settingsContext)
72 | const highestStake = getHighestStake(wins)
73 |
74 | return (
75 |
76 | {stakes.allStakes.map((stake, i) => {
77 | const condition = settings.highlightChipsOnlyIfWin.enabled
78 | ? wins[stake]
79 | : i < highestStake
80 |
81 | return (
82 |
92 | )
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/pieces/Hand.tsx:
--------------------------------------------------------------------------------
1 | import { CardType } from '@/lib/types'
2 | import styles from './pieces.module.css'
3 | import Card from './Card'
4 |
5 | export default function Hand({
6 | cards,
7 | gap,
8 | }: {
9 | cards: CardType[]
10 | gap: string
11 | }) {
12 | const maximumDegrees = 5
13 |
14 | return (
15 |
21 | {cards.map((card, i) => {
22 | const translateY =
23 | -(1 / 2) * Math.sin((Math.PI / (cards.length - 1)) * i) - 0.5
24 | const degrees =
25 | cards.length > 1
26 | ? (maximumDegrees * 2 * i) / (cards.length - 1) - maximumDegrees
27 | : 0
28 |
29 | return (
30 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/pieces/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import styles from './pieces.module.css'
2 |
3 | export default function Tooltip({
4 | children,
5 | name,
6 | wins,
7 | losses,
8 | rounds,
9 | status,
10 | translateY,
11 | desc,
12 | }: {
13 | children: React.ReactNode
14 | name?: string
15 | wins?: number
16 | losses?: number
17 | rounds?: number
18 | status?: string
19 | translateY?: number
20 | desc?: string
21 | }) {
22 | const roundNoun = (() => {
23 | const plural = rounds != 1
24 | switch (status) {
25 | case 'Tarot':
26 | case 'Planet':
27 | case 'Spectral':
28 | case 'Consumable':
29 | return plural ? 'uses' : 'use'
30 | case 'Voucher':
31 | return plural ? 'redeems' : 'redeem'
32 | default:
33 | return plural ? 'rounds' : 'round'
34 | }
35 | })()
36 | let statusText = status
37 | if (name) {
38 | if (['Pluto', 'Ceres', 'Eris'].includes(name)) {
39 | statusText = 'Dwarf Planet'
40 | } else if (name == 'Planet X') {
41 | statusText = 'Planet?'
42 | }
43 | }
44 |
45 | return (
46 |
52 |
53 | {name &&
{name}
}
54 |
55 |
56 | {wins != undefined && (
57 |
58 | {wins} {' '}
59 | {wins != 1 ? 'wins' : 'win'}
60 |
61 | )}
62 |
63 | {losses != undefined && (
64 |
65 | {losses} {' '}
66 | {losses != 1 ? 'losses' : 'loss'}
67 |
68 | )}
69 |
70 | {rounds != undefined && (
71 |
72 | {rounds} {roundNoun}
73 |
74 | )}
75 |
76 | {desc &&
{desc}
}
77 |
78 |
79 | {status && (
80 |
87 | {statusText}
88 |
89 | )}
90 |
91 |
92 |
{children}
93 |
= {
44 | Jokers: {
45 | name: 'Jokers',
46 | sorts: [
47 | 'Game Order',
48 | 'Name',
49 | 'Wins',
50 | 'Win %',
51 | 'Wins per Loss',
52 | 'Losses',
53 | 'Rounds',
54 | 'Rarity',
55 | 'Stake',
56 | ],
57 | graphs: ['Rounds', 'Wins', 'Win %', 'Wins per Loss', 'Losses'],
58 | filters: ['Stake', 'Rarity'],
59 | views: ['Grid', 'List', 'Graph'],
60 | },
61 | Decks: {
62 | name: 'Decks',
63 | sorts: [
64 | 'Game Order',
65 | 'Name',
66 | 'Wins',
67 | 'Win %',
68 | 'Wins per Loss',
69 | 'Losses',
70 | 'Stake',
71 | ],
72 | graphs: ['Wins', 'Win %', 'Wins per Loss', 'Losses'],
73 | filters: ['Stake'],
74 | views: ['Grid', 'List', 'Graph'],
75 | },
76 | Consumables: {
77 | name: 'Consumables',
78 | sorts: ['Game Order', 'Name', 'Uses'],
79 | graphs: ['Uses'],
80 | filters: ['Type'],
81 | views: ['Grid', 'Graph'],
82 | },
83 | Vouchers: {
84 | name: 'Vouchers',
85 | sorts: ['Game Order', 'Name', 'Redeems'],
86 | graphs: ['Redeems'],
87 | filters: ['Tier'],
88 | views: ['Grid', 'Graph'],
89 | },
90 | }
91 |
92 | const cardFilters: Record = {
93 | Stake: {
94 | name: 'Stake',
95 | filters: {
96 | None: {
97 | filter: (card: CardType) =>
98 | card.wins ? sumStakes(card.wins) == 0 : false,
99 | enabled: false,
100 | },
101 | 'White Stake': {
102 | filter: (card: CardType) =>
103 | card.wins ? getHighestStake(card.wins) == 1 : false,
104 | enabled: false,
105 | },
106 | 'Red Stake': {
107 | filter: (card: CardType) =>
108 | card.wins ? getHighestStake(card.wins) == 2 : false,
109 | enabled: false,
110 | },
111 | 'Green Stake': {
112 | filter: (card: CardType) =>
113 | card.wins ? getHighestStake(card.wins) == 3 : false,
114 | enabled: false,
115 | },
116 | 'Black Stake': {
117 | filter: (card: CardType) =>
118 | card.wins ? getHighestStake(card.wins) == 4 : false,
119 | enabled: false,
120 | },
121 | 'Blue Stake': {
122 | filter: (card: CardType) =>
123 | card.wins ? getHighestStake(card.wins) == 5 : false,
124 | enabled: false,
125 | },
126 | 'Purple Stake': {
127 | filter: (card: CardType) =>
128 | card.wins ? getHighestStake(card.wins) == 6 : false,
129 | enabled: false,
130 | },
131 | 'Orange Stake': {
132 | filter: (card: CardType) =>
133 | card.wins ? getHighestStake(card.wins) == 7 : false,
134 | enabled: false,
135 | },
136 | 'Gold Stake': {
137 | filter: (card: CardType) =>
138 | card.wins ? getHighestStake(card.wins) == 8 : false,
139 | enabled: false,
140 | },
141 | },
142 | },
143 | Rarity: {
144 | name: 'Rarity',
145 | filters: {
146 | Common: {
147 | filter: (card: CardType) => card.status == 'Common',
148 | enabled: false,
149 | },
150 | Uncommon: {
151 | filter: (card: CardType) => card.status == 'Uncommon',
152 | enabled: false,
153 | },
154 | Rare: {
155 | filter: (card: CardType) => card.status == 'Rare',
156 | enabled: false,
157 | },
158 | Legendary: {
159 | filter: (card: CardType) => card.status == 'Legendary',
160 | enabled: false,
161 | },
162 | },
163 | },
164 | Type: {
165 | name: 'Type',
166 | filters: {
167 | Tarot: {
168 | filter: (card: CardType) => card.status == 'Tarot',
169 | enabled: false,
170 | },
171 | Planet: {
172 | filter: (card: CardType) => card.status == 'Planet',
173 | enabled: false,
174 | },
175 | Spectral: {
176 | filter: (card: CardType) => card.status == 'Spectral',
177 | enabled: false,
178 | },
179 | },
180 | },
181 | Tier: {
182 | name: 'Tier',
183 | filters: {
184 | Base: {
185 | filter: (card: CardType) => {
186 | return baseVoucherNames.includes(card.name)
187 | },
188 | enabled: false,
189 | },
190 | Upgraded: {
191 | filter: (card: CardType) => {
192 | return upgradedVoucherNames.includes(card.name)
193 | },
194 | enabled: false,
195 | },
196 | },
197 | },
198 | }
199 |
200 | export default function Collection({ profile }: { profile: Profile }) {
201 | const [tab, setTab] = useState(tabs['Jokers'])
202 | const [search, setSearch] = useState('')
203 | const [view, setView] = useState(tab.views[0])
204 | const sorts = view == 'Graph' ? tab.graphs : tab.sorts
205 | const [sort, setSort] = useState(sorts[0])
206 | const [filters, setFilters] = useImmer(cardFilters)
207 | const activeFilters = tab.filters.map((group) =>
208 | Object.values(filters[group].filters)
209 | .filter(({ enabled }) => enabled)
210 | .map(({ filter }) => filter),
211 | )
212 | const settings = useContext(settingsContext)
213 | const [ref, savePNG] = useToImage(
214 | tab.name.toLowerCase(),
215 | settings.saveImageinNewTab.enabled,
216 | )
217 |
218 | if (!tab.views.includes(view)) {
219 | setView(tab.views[1])
220 | }
221 | if (!sorts.includes(sort)) {
222 | setSort(sorts[0])
223 | }
224 |
225 | const jokers = initialJokers()
226 | Object.entries(profile.joker_usage).forEach(([joker, stats]) => {
227 | if (!jokers[joker]) {
228 | jokers[joker] = initializeJoker(joker)
229 | }
230 | jokers[joker].wins = stats.wins
231 | jokers[joker].losses = stats.losses
232 | jokers[joker].count = stats.count
233 | })
234 |
235 | const decks = initialDecks()
236 | Object.entries(profile.deck_usage).forEach(([deck, stats]) => {
237 | if (!decks[deck]) {
238 | decks[deck] = initializeDeck(deck)
239 | }
240 | decks[deck].wins = stats.wins
241 | decks[deck].losses = stats.losses
242 | })
243 |
244 | const consumables = initialConsumables()
245 | Object.entries(profile.consumeable_usage).forEach(([card, stats]) => {
246 | if (!consumables[card]) {
247 | consumables[card] = initializeConsumable(card)
248 | }
249 | consumables[card].count = stats.count
250 | })
251 |
252 | const vouchers = initialVouchers()
253 | Object.entries(profile.voucher_usage).forEach(([voucher, stats]) => {
254 | if (!vouchers[voucher]) {
255 | vouchers[voucher] = initializeVouchers(voucher)
256 | }
257 | vouchers[voucher].count = stats.count
258 | })
259 |
260 | const cards = (() => {
261 | switch (tab.name) {
262 | default:
263 | case 'Jokers':
264 | return Object.values(jokers)
265 | case 'Decks':
266 | return Object.values(decks)
267 | case 'Consumables':
268 | return Object.values(consumables)
269 | case 'Vouchers':
270 | return Object.values(vouchers)
271 | }
272 | })()
273 |
274 | const filteredCards = filterCards(cards, search, sort, activeFilters)
275 |
276 | const insides = (() => {
277 | switch (view) {
278 | case 'Grid':
279 | return
282 | case 'Graph':
283 | return
289 |
290 |
291 | {Object.keys(tabs).map((tabName) => {
292 | return (
293 | setTab(tabs[tabName])}
299 | />
300 | )
301 | })}
302 |
303 |
304 | <>
305 |
306 | card.name)}
308 | current={search}
309 | setCurrent={setSearch}
310 | placeholder={tab.name}
311 | />
312 |
313 |
314 |
315 |
322 |
323 |
324 | filters[group])}
326 | setFilters={setFilters}
327 | />
328 |
329 |
330 |
331 |
338 |
339 |
340 | {insides}
341 |
342 |
343 |
348 |
357 |
75 |
87 |
88 |
89 | {asPercentage ? `${stat}%` : stat || '-'}
90 |
91 |
92 |
101 |
= {
115 | Rounds: 'Total completed rounds with this card',
116 | Uses: 'Number of times this card has been used',
117 | Redeems: 'Number of times this Voucher has been redeemed',
118 |
119 | 'Round %': 'Percentage of completed rounds with this card',
120 | 'Use %': 'Percentage of times this card has been used',
121 | 'Redeem %': 'Percentage of times this Voucher has been redeemed',
122 |
123 | Wins: `Number of wins with this ${tab == 'Decks' ? 'deck' : 'card'}`,
124 | 'Win %': `Percentage of games won with this ${tab == 'Decks' ? 'deck' : 'card'}`,
125 | 'Wins per Loss': `Number of wins per loss with this ${tab == 'Decks' ? 'deck' : 'card'}`,
126 | Losses: `Number of losses with this ${tab == 'Decks' ? 'deck' : 'card'}`,
127 | }
128 |
129 | return (
130 |
131 |
132 |
133 | <>{legendText[sort]}
134 |
135 | {cards.map((card, i) => {
136 | const stat = getStat(card, sort)
137 | const total = getTotal(cards, sort)
138 | return (
139 |
146 | )
147 | })}
148 |
{hands}
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/sections/collection/List.tsx:
--------------------------------------------------------------------------------
1 | import styles from './collection.module.css'
2 | import { CardType } from '@/lib/types'
3 | import Card from '../../pieces/Card'
4 | import Chips from '../../pieces/Chips'
5 |
6 | function ListRow({ card }: { card: CardType }) {
7 | return (
8 |
9 |
22 | )
23 | }
24 |
25 | export default function List({ cards }: { cards: CardType[] }) {
26 | return (
27 |
28 | {cards.map((card) => {
29 | return
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/sections/collection/collection.module.css:
--------------------------------------------------------------------------------
1 | .collection {
2 | background-color: #3a5055;
3 | box-shadow: 0 var(--shadow-length) 0 #777e89;
4 |
5 | border-width: var(--shadow-length);
6 | border-radius: 0.5rem;
7 | border-color: #b9c2d2;
8 | padding: 0 0.5rem;
9 | padding-bottom: calc(0.5rem + var(--shadow-length));
10 | }
11 |
12 | .tabs {
13 | display: grid;
14 | grid-template-columns: repeat(4, minmax(0, auto));
15 | justify-content: center;
16 | gap: 0.5rem;
17 | padding: 1.5rem 0;
18 | }
19 |
20 | .grid {
21 | display: grid;
22 | gap: 0.25rem;
23 |
24 | background-color: #1e2b2d;
25 | box-shadow: 0 var(--shadow-length) 0 #0b1415;
26 | border-radius: 0.5rem;
27 |
28 | padding-top: 0.25rem;
29 | margin-top: 1rem;
30 | min-height: var(--card-height);
31 | }
32 |
33 | .list {
34 | background-color: #33464b;
35 | padding: 0.5rem;
36 | border-radius: 0.5rem;
37 | margin-top: 1rem;
38 | min-height: var(--card-height);
39 | }
40 |
41 | .list .listRow:first-child,
42 | .list .listRow:last-child,
43 | .list .graphRow:first-child,
44 | .list .graphRow:last-child {
45 | margin: 0;
46 | }
47 |
48 | .listRow {
49 | display: flex;
50 | align-items: center;
51 | justify-content: center;
52 | gap: 1rem;
53 |
54 | border-radius: 0.5rem;
55 | background-color: #2d3e42;
56 | padding: 0.25rem;
57 | margin: 0.35rem 0;
58 | }
59 |
60 | .graphRow {
61 | display: flex;
62 | align-items: center;
63 |
64 | border-radius: 0.5rem;
65 | background-color: #2d3e42;
66 | padding: 0.25rem 0;
67 | margin: 0.35rem 0;
68 | }
69 |
70 | .graphBar {
71 | border-radius: 0.125rem;
72 | height: var(--card-width);
73 | transition: width 900ms ease;
74 | }
75 |
76 | .graphNumber {
77 | width: 3rem;
78 | text-align: center;
79 | color: var(--orange);
80 | }
81 |
82 | .graphLegend {
83 | display: flex;
84 | align-items: center;
85 | justify-content: center;
86 | margin-bottom: 0.5rem;
87 | }
88 |
89 | .graphSquare {
90 | background-color: #ff8f00;
91 | height: 0.5rem;
92 | width: 0.5rem;
93 | border-radius: 0.125rem;
94 | margin: 0 0.25rem;
95 | }
96 |
--------------------------------------------------------------------------------
/src/components/sections/footer/Footer.tsx:
--------------------------------------------------------------------------------
1 | export default function Footer() {
2 | return (
3 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/sections/hero/Hero.tsx:
--------------------------------------------------------------------------------
1 | import styles from './hero.module.css'
2 | import { initialProfile, readProfile } from '@/lib/profile'
3 | import { Profile } from '@/lib/types'
4 | import {
5 | Dispatch,
6 | SetStateAction,
7 | useRef,
8 | useState,
9 | useContext,
10 | useEffect,
11 | } from 'react'
12 | import Button from '../../inputs/Button'
13 | import { soundContext } from '@/lib/context'
14 | import Help from '../popups/Help'
15 |
16 | export default function Hero({
17 | saved,
18 | profileSetter,
19 | }: {
20 | saved: boolean
21 | profileSetter: Dispatch>
22 | }) {
23 | const inputRef = useRef(null)
24 | const [confirm, setConfirm] = useState(false)
25 | const [disabled, setDisabled] = useState(false)
26 | const [help, setHelp] = useState(false)
27 |
28 | useEffect(() => {
29 | const timeout = setTimeout(() => {
30 | setConfirm(false)
31 | }, 3000)
32 |
33 | return () => clearTimeout(timeout)
34 | }, [confirm])
35 |
36 | const sounds = useContext(soundContext)
37 | const play = sounds['tarotSound']
38 |
39 | return (
40 | <>
41 |
42 |
49 | Balatro Stats
50 |
51 |
52 |
57 |
View your stats in Balatro!
58 |
65 | Upload your profile.jkr to begin.
66 | {
74 | setHelp(true)
75 | }}
76 | underline={true}
77 | />
78 |
79 |
80 |
81 |
82 |
83 | {
108 | if (inputRef.current) {
109 | inputRef.current.click()
110 | }
111 | }}
112 | />
113 |
114 |
115 |
116 | {
123 | if (confirm) {
124 | // Reset Profile
125 | if (inputRef.current) {
126 | inputRef.current.value = ''
127 | profileSetter(initialProfile)
128 | }
129 | setConfirm(false)
130 | localStorage.removeItem('profile')
131 | } else {
132 | // Ask the user to confirm to reset
133 | play({ playbackRate: 1 })
134 | setTimeout(() => {
135 | play({ playbackRate: 0.76 })
136 | }, 60)
137 |
138 | setConfirm(true)
139 | setDisabled(true)
140 | setTimeout(() => {
141 | setDisabled(false)
142 | }, 500)
143 | }
144 | }}
145 | disabled={disabled}
146 | />
147 |
148 |
149 |
150 |
156 | Click again to confirm
157 |
158 |
>
15 | }) {
16 | const [shareOpen, setShareOpen] = useState(false)
17 | const [optionsOpen, setOptionsOpen] = useState(false)
18 |
19 | return (
20 | <>
21 |
22 | <>
23 | {`${profile.name}'s stats`}
24 | {profile.lastUpdated && ` [${profile.lastUpdated}]`}
25 |
26 |
27 |
28 | {/* {
36 | setShareOpen(true)
37 | }}
38 | underline={true}
39 | /> */}
40 | {
48 | setOptionsOpen(true)
49 | }}
50 | underline={true}
51 | />
52 |
53 |
22 | {children}
23 |
24 | )
25 | }
26 |
27 | export default function Help({
28 | setter,
29 | }: {
30 | setter: Dispatch>
31 | }) {
32 | return (
33 |
34 | <>
35 |
36 | Where to find your profile.jkr
37 |
38 |
39 |
40 |
41 |
42 | Windows:
43 |
44 | Open File Explorer and click the address bar
45 |
46 | Type: %AppData%/Balatro
47 |
48 |
49 | Press [Enter]
50 |
51 | Choose from folder 1, 2, or 3
52 |
53 |
54 |
55 |
56 | MacOS:
57 |
58 | Open Finder
59 |
60 | Press [Shift] +{' '}
61 | [Command] + [G]
62 |
63 |
64 | Type:{' '}
65 |
66 | ~/Library/Application Support/Balatro
67 |
68 |
69 |
70 | Press [Enter]
71 |
72 | Choose from folder 1, 2, or 3
73 |
74 |
75 |
76 |
77 | Steam Deck:
78 |
79 |
80 | Navigate to:{' '}
81 |
82 | ~/.local/share/Steam/steamapps/compatdata/2379780/pfx/drive_c/users/steamuser/AppData/Roaming/Balatro
83 |
84 |
85 | Choose from folder 1, 2, or 3
86 |
87 |
88 |
89 |
92 | )
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/sections/popups/LogIn.tsx:
--------------------------------------------------------------------------------
1 | import styles from './popup.module.css'
2 | import { Dispatch, SetStateAction } from 'react'
3 | import Popup from './Popup'
4 | import { signIn } from 'next-auth/react'
5 |
6 | export default function Login({
7 | setter,
8 | }: {
9 | setter: Dispatch>
10 | }) {
11 | return Log in with Discord to share your stats.
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/sections/popups/Options.tsx:
--------------------------------------------------------------------------------
1 | import styles from './popup.module.css'
2 | import { Dispatch, SetStateAction, useContext, useEffect } from 'react'
3 | import { settingsContext } from '@/lib/context'
4 | import Checkbox from '../../inputs/Checkbox'
5 | import { Updater } from 'use-immer'
6 | import Popup from './Popup'
7 |
8 | function minifySettings(
9 | settings: Record,
10 | ) {
11 | // Compress the settings to only keep the boolean value
12 | const miniSettings: Record = {}
13 | Object.entries(settings).forEach(([key, { enabled }]) => {
14 | miniSettings[key] = enabled
15 | })
16 | return JSON.stringify(miniSettings)
17 | }
18 |
19 | export function Options({
20 | activeSetter,
21 | settingsSetter,
22 | }: {
23 | activeSetter: Dispatch>
24 | settingsSetter: Updater>
25 | }) {
26 | const settings = useContext(settingsContext)
27 |
28 | useEffect(() => {
29 | localStorage.setItem('settings', minifySettings(settings))
30 | }, [settings])
31 |
32 | return (
33 |
34 | <>
35 |
36 |
Settings
37 |
38 | {Object.entries(settings).map(([key, { label, enabled }]) => {
39 | return (
40 | {
45 | settingsSetter((draft) => {
46 | draft[key].enabled = !enabled
47 | })
48 | }}
49 | />
50 | )
51 | })}
52 |
53 |
79 | )
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/sections/popups/Popup.tsx:
--------------------------------------------------------------------------------
1 | import styles from './popup.module.css'
2 | import { Dispatch, SetStateAction } from 'react'
3 | import Button from '../../inputs/Button'
4 |
5 | export default function Popup({
6 | children,
7 | setter,
8 | }: {
9 | children: React.ReactNode
10 | setter: Dispatch>
11 | }) {
12 | const exit = () => {
13 | setter(false)
14 | }
15 |
16 | return (
17 | <>
18 |
19 |
20 |
21 | {children}
22 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/sections/popups/popup.module.css:
--------------------------------------------------------------------------------
1 | .background {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | height: 100vh;
6 | width: 100vw;
7 | background-color: rgba(0, 0, 0, 0.5);
8 | z-index: 14;
9 |
10 | animation: fadeIn 250ms linear forwards;
11 | }
12 |
13 | .popup {
14 | position: fixed;
15 | left: 50%;
16 | transform: translate(-50%, -50%);
17 |
18 | width: calc(var(--card-width) * 5);
19 |
20 | background-color: #3a5055;
21 | box-shadow: 0 var(--shadow-length) 0 #777e89;
22 | border-width: var(--shadow-length);
23 | border-radius: 0.5rem;
24 | border-color: #b9c2d2;
25 | padding: 0.5rem;
26 |
27 | z-index: 15;
28 |
29 | animation: slide 500ms ease-in-out forwards;
30 | }
31 |
32 | .section {
33 | display: flex;
34 | flex-direction: column;
35 | align-items: center;
36 | padding: 0.5rem;
37 | padding-bottom: 1rem;
38 | }
39 |
40 | .subSections {
41 | display: flex;
42 | flex-direction: column;
43 | gap: 0.5rem;
44 | }
45 |
46 | .sectionHeading {
47 | font-size: 125%;
48 | padding-bottom: 0.25rem;
49 | text-align: center;
50 | }
51 |
52 | .list {
53 | list-style: auto;
54 | padding-left: 1.5rem;
55 | }
56 |
57 | .link {
58 | color: var(--blue);
59 | }
60 |
61 | @keyframes fadeIn {
62 | 0% {
63 | opacity: 0;
64 | }
65 | 100% {
66 | opacity: 1;
67 | }
68 | }
69 |
70 | @keyframes slide {
71 | 0% {
72 | top: 250%;
73 | }
74 | 66% {
75 | top: 48%;
76 | }
77 | 100% {
78 | top: 50%;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/sections/records/CareerStats.tsx:
--------------------------------------------------------------------------------
1 | import styles from './records.module.css'
2 | import { Profile } from '@/lib/types'
3 | import Stat from '@/components/stats/Stat'
4 | import { numberWithCommas } from '@/lib/utils'
5 | import { useContext } from 'react'
6 | import { settingsContext } from '@/lib/context'
7 | import {
8 | planetKeys,
9 | spectralKeys,
10 | tarotKeys,
11 | } from '../../../lib/cards/cardKeys'
12 |
13 | export default function CareerStats({ profile }: { profile: Profile }) {
14 | const settings = useContext(settingsContext)
15 |
16 | interface StatType {
17 | name: string
18 | value: number
19 | perGame: boolean
20 | color: string
21 | type: 'number' | 'money' | 'percentage'
22 | }
23 |
24 | const stats: Record = {
25 | c_cards_discarded: {
26 | name: 'Cards Discarded',
27 | value: 0,
28 | perGame: true,
29 | color: 'red',
30 | type: 'number',
31 | },
32 | c_cards_played: {
33 | name: 'Cards Played',
34 | value: 0,
35 | perGame: true,
36 | color: 'blue',
37 | type: 'number',
38 | },
39 | c_cards_sold: {
40 | name: 'Cards Sold',
41 | value: 0,
42 | perGame: true,
43 | color: 'white',
44 | type: 'number',
45 | },
46 | c_dollars_earned: {
47 | name: 'Total Money Earned',
48 | value: 0,
49 | perGame: true,
50 | color: 'yellow',
51 | type: 'money',
52 | },
53 | c_face_cards_played: {
54 | name: 'Face Cards Played',
55 | value: 0,
56 | perGame: true,
57 | color: 'white',
58 | type: 'number',
59 | },
60 | c_hands_played: {
61 | name: 'Hands Played',
62 | value: 0,
63 | perGame: true,
64 | color: 'white',
65 | type: 'number',
66 | },
67 | c_jokers_sold: {
68 | name: 'Jokers Sold',
69 | value: 0,
70 | perGame: true,
71 | color: 'white',
72 | type: 'number',
73 | },
74 | c_losses: {
75 | name: 'Losses',
76 | value: 0,
77 | perGame: false,
78 | color: 'red',
79 | type: 'number',
80 | },
81 | c_planetarium_used: {
82 | name: 'Celestial Packs Used',
83 | value: 0,
84 | perGame: true,
85 | color: 'Planet',
86 | type: 'number',
87 | },
88 | c_planets_bought: {
89 | name: 'Planets Purchased',
90 | value: 0,
91 | perGame: true,
92 | color: 'Planet',
93 | type: 'number',
94 | },
95 | c_playing_cards_bought: {
96 | name: 'Playing Cards Purchased',
97 | value: 0,
98 | perGame: true,
99 | color: 'white',
100 | type: 'number',
101 | },
102 | c_round_interest_cap_streak: {
103 | name: 'Current Max Interest Streak',
104 | value: 0,
105 | perGame: false,
106 | color: 'white',
107 | type: 'number',
108 | },
109 | c_rounds: {
110 | name: 'Rounds Played',
111 | value: 0,
112 | perGame: true,
113 | color: 'orange',
114 | type: 'number',
115 | },
116 | c_shop_dollars_spent: {
117 | name: 'Total Money Spent',
118 | value: 0,
119 | perGame: true,
120 | color: 'yellow',
121 | type: 'money',
122 | },
123 | c_shop_rerolls: {
124 | name: 'Times Rerolled',
125 | value: 0,
126 | perGame: true,
127 | color: 'green',
128 | type: 'number',
129 | },
130 | c_single_hand_round_streak: {
131 | name: 'Current Consecutive Single Hand Round Wins',
132 | value: 0,
133 | perGame: false,
134 | color: 'white',
135 | type: 'number',
136 | },
137 | c_tarot_reading_used: {
138 | name: 'Tarot Packs Used',
139 | value: 0,
140 | perGame: true,
141 | color: 'Tarot',
142 | type: 'number',
143 | },
144 | c_tarots_bought: {
145 | name: 'Tarot Cards Purchased',
146 | value: 0,
147 | perGame: true,
148 | color: 'Tarot',
149 | type: 'number',
150 | },
151 | c_vouchers_bought: {
152 | name: 'Vouchers Redeemed',
153 | value: 0,
154 | perGame: true,
155 | color: 'Voucher',
156 | type: 'number',
157 | },
158 | c_wins: {
159 | name: 'Wins',
160 | value: 0,
161 | perGame: false,
162 | color: 'blue',
163 | type: 'number',
164 | },
165 | win_percentage: {
166 | name: 'Win %',
167 | value: 0,
168 | perGame: false,
169 | color: 'orange',
170 | type: 'percentage',
171 | },
172 | gold_stake_wins: {
173 | name: 'Gold Stake Wins',
174 | value: 0,
175 | perGame: false,
176 | color: 'blue',
177 | type: 'number',
178 | },
179 | gold_stake_losses: {
180 | name: 'Gold Stake Losses',
181 | value: 0,
182 | perGame: false,
183 | color: 'red',
184 | type: 'number',
185 | },
186 | gold_stake_win_percentage: {
187 | name: 'Gold Stake Win %',
188 | value: 0,
189 | perGame: false,
190 | color: 'orange',
191 | type: 'percentage',
192 | },
193 | total_tarots_used: {
194 | name: 'Tarot Cards Used',
195 | value: 0,
196 | perGame: true,
197 | color: 'Tarot',
198 | type: 'number',
199 | },
200 | total_planets_used: {
201 | name: 'Planet Cards Used',
202 | value: 0,
203 | perGame: true,
204 | color: 'Planet',
205 | type: 'number',
206 | },
207 | total_spectrals_used: {
208 | name: 'Spectral Cards Used',
209 | value: 0,
210 | perGame: true,
211 | color: 'Spectral',
212 | type: 'number',
213 | },
214 | total_consumables_used: {
215 | name: 'Consumables Used',
216 | value: 0,
217 | perGame: true,
218 | color: 'White',
219 | type: 'number',
220 | },
221 | }
222 |
223 | const sections = {
224 | Record: ['c_wins', 'c_losses', 'win_percentage', 'c_rounds'],
225 | 'Gold Stake': [
226 | 'gold_stake_wins',
227 | 'gold_stake_losses',
228 | 'gold_stake_win_percentage',
229 | ],
230 | Cards: [
231 | 'c_cards_played',
232 | 'c_cards_discarded',
233 | 'c_face_cards_played',
234 | 'c_hands_played',
235 | ],
236 | Economy: [
237 | 'c_dollars_earned',
238 | 'c_shop_dollars_spent',
239 | 'c_playing_cards_bought',
240 | 'c_cards_sold',
241 | 'c_jokers_sold',
242 | 'c_shop_rerolls',
243 | ],
244 | Consumables: [
245 | 'c_tarot_reading_used',
246 | 'c_tarots_bought',
247 | 'total_tarots_used',
248 | 'c_planetarium_used',
249 | 'c_planets_bought',
250 | 'total_planets_used',
251 | 'total_spectrals_used',
252 | 'total_consumables_used',
253 | 'c_vouchers_bought',
254 | ],
255 | Streaks: ['c_round_interest_cap_streak', 'c_single_hand_round_streak'],
256 | }
257 |
258 | Object.keys(stats)
259 | .slice(0, 20)
260 | .forEach((key) => {
261 | stats[key].value = profile.career_stats[key]
262 | })
263 |
264 | const goldStakeWins = Object.values(profile.deck_usage)
265 | .map((deck) => deck.wins?.['8'] ?? 0)
266 | .reduce((sum, x) => sum + x, 0)
267 | const goldStakeLosses = Object.values(profile.deck_usage)
268 | .map((deck) => deck.losses?.['8'] ?? 0)
269 | .reduce((sum, x) => sum + x, 0)
270 | const goldStakeWinPercentage =
271 | Math.round(
272 | (goldStakeWins / (goldStakeWins + goldStakeLosses || 1)) * 10000,
273 | ) / 100
274 |
275 | stats['gold_stake_wins'].value = goldStakeWins
276 | stats['gold_stake_losses'].value = goldStakeLosses
277 | stats['gold_stake_win_percentage'].value = goldStakeWinPercentage
278 |
279 | stats['total_tarots_used'].value = Object.entries(
280 | profile.consumeable_usage,
281 | ).reduce((sum, [key, { count }]) => {
282 | if (tarotKeys.includes(key)) {
283 | return sum + count
284 | }
285 | return sum
286 | }, 0)
287 |
288 | stats['total_planets_used'].value = Object.entries(
289 | profile.consumeable_usage,
290 | ).reduce((sum, [key, { count }]) => {
291 | if (planetKeys.includes(key)) {
292 | return sum + count
293 | }
294 | return sum
295 | }, 0)
296 |
297 | stats['total_spectrals_used'].value = Object.entries(
298 | profile.consumeable_usage,
299 | ).reduce((sum, [key, { count }]) => {
300 | if (spectralKeys.includes(key)) {
301 | return sum + count
302 | }
303 | return sum
304 | }, 0)
305 |
306 | stats['total_consumables_used'].value = Object.values(
307 | profile.consumeable_usage,
308 | ).reduce((sum, { count }) => {
309 | return sum + count
310 | }, 0)
311 |
312 | const gamesPlayed =
313 | profile.career_stats['c_wins'] + profile.career_stats['c_losses'] || 1
314 | const winPercentage =
315 | Math.round((profile.career_stats['c_wins'] / gamesPlayed) * 10000) / 100
316 | stats['win_percentage'].value = winPercentage
317 |
318 | return (
319 |
320 | {Object.entries(sections).map(([section, keys]) => {
321 | return (
322 |
323 |
{section}
324 |
325 | {keys.map((key) => {
326 | const value = (() => {
327 | switch (stats[key].type) {
328 | default:
329 | case 'number':
330 | return numberWithCommas(stats[key].value)
331 | case 'money':
332 | return `$${numberWithCommas(stats[key].value)}`
333 | case 'percentage':
334 | return `${stats[key].value}%`
335 | }
336 | })()
337 | return (
338 |
349 | )
350 | })}
351 |
352 | )
353 | })}
354 |
= {
20 | HighCard: {
21 | name: 'High Card',
22 | level: 1,
23 | usage: 0,
24 |
25 | chips: 5,
26 | mult: 1,
27 | pchips: 10,
28 | pmult: 1,
29 | },
30 | Pair: {
31 | name: 'Pair',
32 | level: 1,
33 | usage: 0,
34 |
35 | chips: 10,
36 | mult: 2,
37 | pchips: 15,
38 | pmult: 1,
39 | },
40 | TwoPair: {
41 | name: 'Two Pair',
42 | level: 1,
43 | usage: 0,
44 |
45 | chips: 20,
46 | mult: 2,
47 | pchips: 20,
48 | pmult: 1,
49 | },
50 | ThreeofaKind: {
51 | name: 'Three of a Kind',
52 | level: 1,
53 | usage: 0,
54 |
55 | chips: 30,
56 | mult: 3,
57 | pchips: 20,
58 | pmult: 2,
59 | },
60 | Straight: {
61 | name: 'Straight',
62 | level: 1,
63 | usage: 0,
64 |
65 | chips: 30,
66 | mult: 4,
67 | pchips: 30,
68 | pmult: 3,
69 | },
70 | Flush: {
71 | name: 'Flush',
72 | level: 1,
73 | usage: 0,
74 |
75 | chips: 35,
76 | mult: 4,
77 | pchips: 15,
78 | pmult: 2,
79 | },
80 | FullHouse: {
81 | name: 'Full House',
82 | level: 1,
83 | usage: 0,
84 |
85 | chips: 40,
86 | mult: 4,
87 | pchips: 25,
88 | pmult: 2,
89 | },
90 | FourofaKind: {
91 | name: 'Four of a Kind',
92 | level: 1,
93 | usage: 0,
94 |
95 | chips: 60,
96 | mult: 7,
97 | pchips: 30,
98 | pmult: 3,
99 | },
100 | StraightFlush: {
101 | name: 'Straight Flush',
102 | level: 1,
103 | usage: 0,
104 |
105 | chips: 100,
106 | mult: 8,
107 | pchips: 40,
108 | pmult: 4,
109 | },
110 | FiveofaKind: {
111 | name: 'Five of a Kind',
112 | level: 1,
113 | usage: 0,
114 |
115 | chips: 120,
116 | mult: 12,
117 | pchips: 35,
118 | pmult: 3,
119 | },
120 | FlushHouse: {
121 | name: 'Flush House',
122 | level: 1,
123 | usage: 0,
124 |
125 | chips: 140,
126 | mult: 14,
127 | pchips: 40,
128 | pmult: 4,
129 | },
130 | FlushFive: {
131 | name: 'Flush Five',
132 | level: 1,
133 | usage: 0,
134 |
135 | chips: 160,
136 | mult: 16,
137 | pchips: 50,
138 | pmult: 3,
139 | },
140 | }
141 |
142 | const planetsToHands = {
143 | c_pluto: 'HighCard',
144 | c_mercury: 'Pair',
145 | c_uranus: 'TwoPair',
146 | c_venus: 'ThreeofaKind',
147 | c_saturn: 'Straight',
148 | c_jupiter: 'Flush',
149 | c_earth: 'FullHouse',
150 | c_mars: 'FourofaKind',
151 | c_neptune: 'StraightFlush',
152 | c_planet_x: 'FiveofaKind',
153 | c_ceres: 'FlushHouse',
154 | c_eris: 'FlushFive',
155 | } as const
156 |
157 | // Update use count
158 | Object.entries(profile.hand_usage).forEach(([key, { count }]) => {
159 | hands[key].usage = count
160 | })
161 |
162 | // Update levels
163 | if (profile.consumeable_usage?.c_black_hole) {
164 | Object.keys(hands).forEach((hand) => {
165 | hands[hand].level += profile.consumeable_usage.c_black_hole.count
166 | })
167 | }
168 |
169 | for (const [planet, hand] of Object.entries(planetsToHands)) {
170 | if (profile.consumeable_usage?.[planet]) {
171 | hands[hand].level += profile.consumeable_usage[planet].count
172 | }
173 | }
174 |
175 | const calculateTotal = (base: number, plus: number, level: number) => {
176 | return base + plus * (level - 1)
177 | }
178 |
179 | const sortingOptions: Record number> = {
180 | Rank: () => 0,
181 | Level: (a: HandType, b: HandType) => a.level - b.level,
182 | Chips: (a: HandType, b: HandType) =>
183 | calculateTotal(a.chips, a.pchips, a.level) -
184 | calculateTotal(b.chips, b.pchips, b.level),
185 | Mult: (a: HandType, b: HandType) =>
186 | calculateTotal(a.mult, a.pmult, a.level) -
187 | calculateTotal(b.mult, b.pmult, b.level),
188 | Score: (a: HandType, b: HandType) =>
189 | calculateTotal(a.chips, a.pchips, a.level) +
190 | calculateTotal(a.mult, a.pmult, a.level) -
191 | calculateTotal(b.chips, b.pchips, b.level) -
192 | calculateTotal(b.mult, b.pmult, b.level),
193 | Usage: (a: HandType, b: HandType) => a.usage - b.usage,
194 | }
195 |
196 | const [sort, setSort] = useState(Object.keys(sortingOptions)[0])
197 | const sortedHands = Object.values(hands).toSorted(sortingOptions[sort])
198 |
199 | return (
200 |
201 |
202 |
209 |
210 | {sortedHands.toReversed().map((hand) => {
211 | return (
212 |
223 | )
224 | }
225 |
--------------------------------------------------------------------------------
/src/components/sections/records/HighScores.tsx:
--------------------------------------------------------------------------------
1 | import styles from './records.module.css'
2 | import { Profile } from '@/lib/types'
3 | import Stat from '@/components/stats/Stat'
4 | import Progress from '@/components/stats/Progress'
5 | import { numberWithCommas } from '@/lib/utils'
6 |
7 | function getMostPlayedHand(
8 | hands: Record,
9 | ) {
10 | let highestHand = 'None'
11 | let highestCount = 0
12 | Object.values(hands).map((hand) => {
13 | if (hand.count > highestCount) {
14 | highestHand = hand.order
15 | highestCount = hand.count
16 | }
17 | })
18 | return [highestHand, highestCount]
19 | }
20 |
21 | function formatScore(score: number) {
22 | const scoreString = score.toString()
23 | if (scoreString.includes('e')) {
24 | return score.toPrecision(4).toString().replace('e+', 'e')
25 | } else {
26 | return numberWithCommas(score)
27 | }
28 | }
29 |
30 | export default function HighScores({ profile }: { profile: Profile }) {
31 | const [hand, count] = getMostPlayedHand(profile.hand_usage)
32 | const keys: Record<
33 | string,
34 | {
35 | name: string
36 | value: number | string
37 | extra?: number | string
38 | color?: string
39 | }
40 | > = {
41 | hand: {
42 | name: profile.high_scores['hand'].label,
43 | value: formatScore(profile.high_scores['hand'].amt),
44 | color: 'red',
45 | },
46 | furthest_round: {
47 | name: profile.high_scores['furthest_round'].label,
48 | value: profile.high_scores['furthest_round'].amt,
49 | color: 'orange',
50 | },
51 | furthest_ante: {
52 | name: profile.high_scores['furthest_ante'].label,
53 | value: profile.high_scores['furthest_ante'].amt,
54 | color: 'orange',
55 | },
56 | poker_hand: {
57 | name: profile.high_scores['poker_hand'].label,
58 | value: hand,
59 | extra: count,
60 | },
61 | most_money: {
62 | name: profile.high_scores['most_money'].label,
63 | value: `$${numberWithCommas(profile.high_scores['most_money'].amt)}`,
64 | color: 'yellow',
65 | },
66 | win_streak: {
67 | name: profile.high_scores['win_streak'].label,
68 | value: numberWithCommas(profile.high_scores['win_streak'].amt),
69 | extra: profile.high_scores['current_streak'].amt,
70 | },
71 | }
72 |
73 | return (
74 |
75 |
79 | {Object.keys(keys).map((key) => {
80 | return (
81 |
88 | )
89 | })}
90 |
33 |
34 |
35 | {tabs.map((tabName, i) => {
36 | return (
37 | {
43 | setTab(tabs[i])
44 | }}
45 | />
46 | )
47 | })}
48 |
49 | {insides}
50 |
51 |
52 |
57 |
66 |
play()}>
41 |
47 | lvl.{level}
48 |
49 |
50 |
{hand}
51 |
52 |
53 |
54 |
{chips}
X
55 |
{mult}
56 |
57 |
58 |
61 |
62 |
= {
16 | discovered: 'Collection',
17 | challenges: 'Challenges',
18 | joker_stickers: 'Joker Stickers',
19 | deck_stakes: 'Deck Stake Wins',
20 | }
21 | return (
22 |
23 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/stats/Stat.tsx:
--------------------------------------------------------------------------------
1 | import styles from './stat.module.css'
2 |
3 | export default function Stat({
4 | name,
5 | value,
6 | extra,
7 | color,
8 | bar,
9 | }: {
10 | name: string
11 | value: string | number
12 | color?: string
13 | extra?: string | number
14 | bar?: { percentage: number; allUnlocked: boolean }
15 | }) {
16 | return (
17 |
24 |
{name}
25 |
26 |
32 |
33 |
42 |
43 |
49 | {name == 'Best Hand' && (
50 |
58 | )}
59 | {value}{' '}
60 |
61 | {extra !== undefined ? `(${extra})` : ''}
62 |
63 |
64 |
65 |
= {
2 | j_joker: 'Joker',
3 | j_greedy_joker: 'Greedy Joker',
4 | j_lusty_joker: 'Lusty Joker',
5 | j_wrathful_joker: 'Wrathful Joker',
6 | j_gluttenous_joker: 'Gluttonous Joker',
7 | j_jolly: 'Jolly Joker',
8 | j_zany: 'Zany Joker',
9 | j_mad: 'Mad Joker',
10 | j_crazy: 'Crazy Joker',
11 | j_droll: 'Droll Joker',
12 | j_sly: 'Sly Joker',
13 | j_wily: 'Wily Joker',
14 | j_clever: 'Clever Joker',
15 | j_devious: 'Devious Joker',
16 | j_crafty: 'Crafty Joker',
17 | j_half: 'Half Joker',
18 | j_stencil: 'Joker Stencil',
19 | j_four_fingers: 'Four Fingers',
20 | j_mime: 'Mime',
21 | j_credit_card: 'Credit Card',
22 | j_ceremonial: 'Ceremonial Dagger',
23 | j_banner: 'Banner',
24 | j_mystic_summit: 'Mystic Summit',
25 | j_marble: 'Marble Joker',
26 | j_loyalty_card: 'Loyalty Card',
27 | j_8_ball: '8 Ball',
28 | j_misprint: 'Misprint',
29 | j_dusk: 'Dusk',
30 | j_raised_fist: 'Raised Fist',
31 | j_chaos: 'Chaos the Clown',
32 | j_fibonacci: 'Fibonacci',
33 | j_steel_joker: 'Steel Joker',
34 | j_scary_face: 'Scary Face',
35 | j_abstract: 'Abstract Joker',
36 | j_delayed_grat: 'Delayed Gratification',
37 | j_hack: 'Hack',
38 | j_pareidolia: 'Pareidolia',
39 | j_gros_michel: 'Gros Michel',
40 | j_even_steven: 'Even Steven',
41 | j_odd_todd: 'Odd Todd',
42 | j_scholar: 'Scholar',
43 | j_business: 'Business Card',
44 | j_supernova: 'Supernova',
45 | j_ride_the_bus: 'Ride the Bus',
46 | j_space: 'Space Joker',
47 | j_egg: 'Egg',
48 | j_burglar: 'Burglar',
49 | j_blackboard: 'Blackboard',
50 | j_runner: 'Runner',
51 | j_ice_cream: 'Ice Cream',
52 | j_dna: 'DNA',
53 | j_splash: 'Splash',
54 | j_blue_joker: 'Blue Joker',
55 | j_sixth_sense: 'Sixth Sense',
56 | j_constellation: 'Constellation',
57 | j_hiker: 'Hiker',
58 | j_faceless: 'Faceless Joker',
59 | j_green_joker: 'Green Joker',
60 | j_superposition: 'Superposition',
61 | j_todo_list: 'To Do List',
62 | j_cavendish: 'Cavendish',
63 | j_card_sharp: 'Card Sharp',
64 | j_red_card: 'Red Card',
65 | j_madness: 'Madness',
66 | j_square: 'Square Joker',
67 | j_seance: 'Séance',
68 | j_riff_raff: 'Riff-Raff',
69 | j_vampire: 'Vampire',
70 | j_shortcut: 'Shortcut',
71 | j_hologram: 'Hologram',
72 | j_vagabond: 'Vagabond',
73 | j_baron: 'Baron',
74 | j_cloud_9: 'Cloud 9',
75 | j_rocket: 'Rocket',
76 | j_obelisk: 'Obelisk',
77 | j_midas_mask: 'Midas Mask',
78 | j_luchador: 'Luchador',
79 | j_photograph: 'Photograph',
80 | j_gift: 'Gift Card',
81 | j_turtle_bean: 'Turtle Bean',
82 | j_erosion: 'Erosion',
83 | j_reserved_parking: 'Reserved Parking',
84 | j_mail: 'Mail-In Rebate',
85 | j_to_the_moon: 'To the Moon',
86 | j_hallucination: 'Hallucination',
87 | j_fortune_teller: 'Fortune Teller',
88 | j_juggler: 'Juggler',
89 | j_drunkard: 'Drunkard',
90 | j_stone: 'Stone Joker',
91 | j_golden: 'Golden Joker',
92 | j_lucky_cat: 'Lucky Cat',
93 | j_baseball: 'Baseball Card',
94 | j_bull: 'Bull',
95 | j_diet_cola: 'Diet Cola',
96 | j_trading: 'Trading Card',
97 | j_flash: 'Flash Card',
98 | j_popcorn: 'Popcorn',
99 | j_trousers: 'Spare Trousers',
100 | j_ancient: 'Ancient Joker',
101 | j_ramen: 'Ramen',
102 | j_walkie_talkie: 'Walkie Talkie',
103 | j_selzer: 'Seltzer',
104 | j_castle: 'Castle',
105 | j_smiley: 'Smiley Face',
106 | j_campfire: 'Campfire',
107 | j_ticket: 'Golden Ticket',
108 | j_mr_bones: 'Mr. Bones',
109 | j_acrobat: 'Acrobat',
110 | j_sock_and_buskin: 'Sock and Buskin',
111 | j_swashbuckler: 'Swashbuckler',
112 | j_troubadour: 'Troubadour',
113 | j_certificate: 'Certificate',
114 | j_smeared: 'Smeared Joker',
115 | j_throwback: 'Throwback',
116 | j_hanging_chad: 'Hanging Chad',
117 | j_rough_gem: 'Rough Gem',
118 | j_bloodstone: 'Bloodstone',
119 | j_arrowhead: 'Arrowhead',
120 | j_onyx_agate: 'Onyx Agate',
121 | j_glass: 'Glass Joker',
122 | j_ring_master: 'Showman',
123 | j_flower_pot: 'Flower Pot',
124 | j_blueprint: 'Blueprint',
125 | j_wee: 'Wee Joker',
126 | j_merry_andy: 'Merry Andy',
127 | j_oops: 'Oops! All 6s',
128 | j_idol: 'The Idol',
129 | j_seeing_double: 'Seeing Double',
130 | j_matador: 'Matador',
131 | j_hit_the_road: 'Hit the Road',
132 | j_duo: 'The Duo',
133 | j_trio: 'The Trio',
134 | j_family: 'The Family',
135 | j_order: 'The Order',
136 | j_tribe: 'The Tribe',
137 | j_stuntman: 'Stuntman',
138 | j_invisible: 'Invisible Joker',
139 | j_brainstorm: 'Brainstorm',
140 | j_satellite: 'Satellite',
141 | j_shoot_the_moon: 'Shoot the Moon',
142 | j_drivers_license: "Driver's License",
143 | j_cartomancer: 'Cartomancer',
144 | j_astronomer: 'Astronomer',
145 | j_burnt: 'Burnt Joker',
146 | j_bootstraps: 'Bootstraps',
147 | j_caino: 'Canio',
148 | j_triboulet: 'Triboulet',
149 | j_yorick: 'Yorick',
150 | j_chicot: 'Chicot',
151 | j_perkeo: 'Perkeo',
152 | }
153 |
154 | export const jokerSprites: Record = {
155 | j_joker: '0 0',
156 | j_greedy_joker: '-600% -100%',
157 | j_lusty_joker: '-700% -100%',
158 | j_wrathful_joker: '-800% -100%',
159 | j_gluttenous_joker: '-900% -100%',
160 | j_jolly: '-200% -0%',
161 | j_zany: '-300% -0%',
162 | j_mad: '-400% -0%',
163 | j_crazy: '-500% -0%',
164 | j_droll: '-600% -0%',
165 | j_sly: '-0% -1400%',
166 | j_wily: '-100% -1400%',
167 | j_clever: '-200% -1400%',
168 | j_devious: '-300% -1400%',
169 | j_crafty: '-400% -1400%',
170 | j_half: '-700% -0%',
171 | j_stencil: '-200% -500%',
172 | j_four_fingers: '-600% -600%',
173 | j_mime: '-400% -100%',
174 | j_credit_card: '-500% -100%',
175 | j_ceremonial: '-500% -500%',
176 | j_banner: '-100% -200%',
177 | j_mystic_summit: '-200% -200%',
178 | j_marble: '-300% -200%',
179 | j_loyalty_card: '-400% -200%',
180 | j_8_ball: '-0% -500%',
181 | j_misprint: '-600% -200%',
182 | j_dusk: '-400% -700%',
183 | j_raised_fist: '-800% -200%',
184 | j_chaos: '-100% -0%',
185 | j_fibonacci: '-100% -500%',
186 | j_steel_joker: '-700% -200%',
187 | j_scary_face: '-200% -300%',
188 | j_abstract: '-300% -300%',
189 | j_delayed_grat: '-400% -300%',
190 | j_hack: '-500% -200%',
191 | j_pareidolia: '-600% -300%',
192 | j_gros_michel: '-700% -600%',
193 | j_even_steven: '-800% -300%',
194 | j_odd_todd: '-900% -300%',
195 | j_scholar: '-300% -600%',
196 | j_business: '-100% -400%',
197 | j_supernova: '-200% -400%',
198 | j_ride_the_bus: '-100% -600%',
199 | j_space: '-300% -500%',
200 | j_egg: '-0% -1000%',
201 | j_burglar: '-100% -1000%',
202 | j_blackboard: '-200% -1000%',
203 | j_runner: '-300% -1000%',
204 | j_ice_cream: '-400% -1000%',
205 | j_dna: '-500% -1000%',
206 | j_splash: '-600% -1000%',
207 | j_blue_joker: '-700% -1000%',
208 | j_sixth_sense: '-800% -1000%',
209 | j_constellation: '-900% -1000%',
210 | j_hiker: '-0% -1100%',
211 | j_faceless: '-100% -1100%',
212 | j_green_joker: '-200% -1100%',
213 | j_superposition: '-300% -1100%',
214 | j_todo_list: '-400% -1100%',
215 | j_cavendish: '-500% -1100%',
216 | j_card_sharp: '-600% -1100%',
217 | j_red_card: '-700% -1100%',
218 | j_madness: '-800% -1100%',
219 | j_square: '-900% -1100%',
220 | j_seance: '-0% -1200%',
221 | j_riff_raff: '-100% -1200%',
222 | j_vampire: '-200% -1200%',
223 | j_shortcut: '-300% -1200%',
224 | j_hologram: '-400% -1200%',
225 | j_vagabond: '-500% -1200%',
226 | j_baron: '-600% -1200%',
227 | j_cloud_9: '-700% -1200%',
228 | j_rocket: '-800% -1200%',
229 | j_obelisk: '-900% -1200%',
230 | j_midas_mask: '-0% -1300%',
231 | j_luchador: '-100% -1300%',
232 | j_photograph: '-200% -1300%',
233 | j_gift: '-300% -1300%',
234 | j_turtle_bean: '-400% -1300%',
235 | j_erosion: '-500% -1300%',
236 | j_reserved_parking: '-600% -1300%',
237 | j_mail: '-700% -1300%',
238 | j_to_the_moon: '-800% -1300%',
239 | j_hallucination: '-900% -1300%',
240 | j_fortune_teller: '-700% -500%',
241 | j_juggler: '-0% -100%',
242 | j_drunkard: '-100% -100%',
243 | j_stone: '-900% -0%',
244 | j_golden: '-900% -200%',
245 | j_lucky_cat: '-500% -1400%',
246 | j_baseball: '-600% -1400%',
247 | j_bull: '-700% -1400%',
248 | j_diet_cola: '-800% -1400%',
249 | j_trading: '-900% -1400%',
250 | j_flash: '-0% -1500%',
251 | j_popcorn: '-100% -1500%',
252 | j_trousers: '-400% -1500%',
253 | j_ancient: '-700% -1500%',
254 | j_ramen: '-200% -1500%',
255 | j_walkie_talkie: '-800% -1500%',
256 | j_selzer: '-300% -1500%',
257 | j_castle: '-900% -1500%',
258 | j_smiley: '-600% -1500%',
259 | j_campfire: '-500% -1500%',
260 | j_ticket: '-500% -300%',
261 | j_mr_bones: '-300% -400%',
262 | j_acrobat: '-200% -100%',
263 | j_sock_and_buskin: '-300% -100%',
264 | j_swashbuckler: '-900% -500%',
265 | j_troubadour: '-0% -200%',
266 | j_certificate: '-800% -800%',
267 | j_smeared: '-400% -600%',
268 | j_throwback: '-500% -700%',
269 | j_hanging_chad: '-900% -600%',
270 | j_rough_gem: '-900% -700%',
271 | j_bloodstone: '-0% -800%',
272 | j_arrowhead: '-100% -800%',
273 | j_onyx_agate: '-200% -800%',
274 | j_glass: '-100% -300%',
275 | j_ring_master: '-600% -500%',
276 | j_flower_pot: '-0% -600%',
277 | j_blueprint: '-0% -300%',
278 | j_wee: '-0% -0%',
279 | j_merry_andy: '-800% -0%',
280 | j_oops: '-500% -600%',
281 | j_idol: '-600% -700%',
282 | j_seeing_double: '-400% -400%',
283 | j_matador: '-400% -500%',
284 | j_hit_the_road: '-800% -500%',
285 | j_duo: '-500% -400%',
286 | j_trio: '-600% -400%',
287 | j_family: '-700% -400%',
288 | j_order: '-800% -400%',
289 | j_tribe: '-900% -400%',
290 | j_stuntman: '-800% -600%',
291 | j_invisible: '-100% -700%',
292 | j_brainstorm: '-700% -700%',
293 | j_satellite: '-800% -700%',
294 | j_shoot_the_moon: '-200% -600%',
295 | j_drivers_license: '-0% -700%',
296 | j_cartomancer: '-700% -300%',
297 | j_astronomer: '-200% -700%',
298 | j_burnt: '-300% -700%',
299 | j_bootstraps: '-900% -800%',
300 | j_caino: '-300% -800%',
301 | j_triboulet: '-400% -800%',
302 | j_yorick: '-500% -800%',
303 | j_chicot: '-600% -800%',
304 | j_perkeo: '-700% -800%',
305 | undiscovered: '-900% -900%',
306 | }
307 |
308 | export const jokerExtraSprites: Record = {
309 | j_hologram: '-200% -900%',
310 | j_caino: '-300% -900%',
311 | j_triboulet: '-400% -900%',
312 | j_yorick: '-500% -900%',
313 | j_chicot: '-600% -900%',
314 | j_perkeo: '-700% -900%',
315 | undiscovered: '-500% -300%',
316 | }
317 |
318 | export const jokerRarity: Record = {
319 | j_joker: 'Common',
320 | j_greedy_joker: 'Common',
321 | j_lusty_joker: 'Common',
322 | j_wrathful_joker: 'Common',
323 | j_gluttenous_joker: 'Common',
324 | j_jolly: 'Common',
325 | j_zany: 'Common',
326 | j_mad: 'Common',
327 | j_crazy: 'Common',
328 | j_droll: 'Common',
329 | j_sly: 'Common',
330 | j_wily: 'Common',
331 | j_clever: 'Common',
332 | j_devious: 'Common',
333 | j_crafty: 'Common',
334 | j_half: 'Common',
335 | j_stencil: 'Uncommon',
336 | j_four_fingers: 'Uncommon',
337 | j_mime: 'Uncommon',
338 | j_credit_card: 'Common',
339 | j_ceremonial: 'Uncommon',
340 | j_banner: 'Common',
341 | j_mystic_summit: 'Common',
342 | j_marble: 'Uncommon',
343 | j_loyalty_card: 'Uncommon',
344 | j_8_ball: 'Common',
345 | j_misprint: 'Common',
346 | j_dusk: 'Uncommon',
347 | j_raised_fist: 'Common',
348 | j_chaos: 'Common',
349 | j_fibonacci: 'Uncommon',
350 | j_steel_joker: 'Uncommon',
351 | j_scary_face: 'Common',
352 | j_abstract: 'Common',
353 | j_delayed_grat: 'Common',
354 | j_hack: 'Uncommon',
355 | j_pareidolia: 'Uncommon',
356 | j_gros_michel: 'Common',
357 | j_even_steven: 'Common',
358 | j_odd_todd: 'Common',
359 | j_scholar: 'Common',
360 | j_business: 'Common',
361 | j_supernova: 'Common',
362 | j_ride_the_bus: 'Common',
363 | j_space: 'Uncommon',
364 | j_egg: 'Common',
365 | j_burglar: 'Uncommon',
366 | j_blackboard: 'Uncommon',
367 | j_runner: 'Common',
368 | j_ice_cream: 'Common',
369 | j_dna: 'Rare',
370 | j_splash: 'Common',
371 | j_blue_joker: 'Common',
372 | j_sixth_sense: 'Uncommon',
373 | j_constellation: 'Uncommon',
374 | j_hiker: 'Uncommon',
375 | j_faceless: 'Common',
376 | j_green_joker: 'Common',
377 | j_superposition: 'Common',
378 | j_todo_list: 'Common',
379 | j_cavendish: 'Common',
380 | j_card_sharp: 'Uncommon',
381 | j_red_card: 'Common',
382 | j_madness: 'Uncommon',
383 | j_square: 'Common',
384 | j_seance: 'Uncommon',
385 | j_riff_raff: 'Common',
386 | j_vampire: 'Uncommon',
387 | j_shortcut: 'Uncommon',
388 | j_hologram: 'Uncommon',
389 | j_vagabond: 'Rare',
390 | j_baron: 'Rare',
391 | j_cloud_9: 'Uncommon',
392 | j_rocket: 'Uncommon',
393 | j_obelisk: 'Rare',
394 | j_midas_mask: 'Uncommon',
395 | j_luchador: 'Uncommon',
396 | j_photograph: 'Common',
397 | j_gift: 'Uncommon',
398 | j_turtle_bean: 'Uncommon',
399 | j_erosion: 'Uncommon',
400 | j_reserved_parking: 'Common',
401 | j_mail: 'Common',
402 | j_to_the_moon: 'Uncommon',
403 | j_hallucination: 'Common',
404 | j_fortune_teller: 'Common',
405 | j_juggler: 'Common',
406 | j_drunkard: 'Common',
407 | j_stone: 'Uncommon',
408 | j_golden: 'Common',
409 | j_lucky_cat: 'Uncommon',
410 | j_baseball: 'Rare',
411 | j_bull: 'Uncommon',
412 | j_diet_cola: 'Uncommon',
413 | j_trading: 'Uncommon',
414 | j_flash: 'Uncommon',
415 | j_popcorn: 'Common',
416 | j_trousers: 'Uncommon',
417 | j_ancient: 'Rare',
418 | j_ramen: 'Uncommon',
419 | j_walkie_talkie: 'Common',
420 | j_selzer: 'Uncommon',
421 | j_castle: 'Uncommon',
422 | j_smiley: 'Common',
423 | j_campfire: 'Rare',
424 | j_ticket: 'Common',
425 | j_mr_bones: 'Uncommon',
426 | j_acrobat: 'Uncommon',
427 | j_sock_and_buskin: 'Uncommon',
428 | j_swashbuckler: 'Common',
429 | j_troubadour: 'Uncommon',
430 | j_certificate: 'Uncommon',
431 | j_smeared: 'Uncommon',
432 | j_throwback: 'Uncommon',
433 | j_hanging_chad: 'Common',
434 | j_rough_gem: 'Uncommon',
435 | j_bloodstone: 'Uncommon',
436 | j_arrowhead: 'Uncommon',
437 | j_onyx_agate: 'Uncommon',
438 | j_glass: 'Uncommon',
439 | j_ring_master: 'Uncommon',
440 | j_flower_pot: 'Uncommon',
441 | j_blueprint: 'Rare',
442 | j_wee: 'Rare',
443 | j_merry_andy: 'Uncommon',
444 | j_oops: 'Uncommon',
445 | j_idol: 'Uncommon',
446 | j_seeing_double: 'Uncommon',
447 | j_matador: 'Uncommon',
448 | j_hit_the_road: 'Rare',
449 | j_duo: 'Rare',
450 | j_trio: 'Rare',
451 | j_family: 'Rare',
452 | j_order: 'Rare',
453 | j_tribe: 'Rare',
454 | j_stuntman: 'Rare',
455 | j_invisible: 'Rare',
456 | j_brainstorm: 'Rare',
457 | j_satellite: 'Uncommon',
458 | j_shoot_the_moon: 'Common',
459 | j_drivers_license: 'Rare',
460 | j_cartomancer: 'Uncommon',
461 | j_astronomer: 'Uncommon',
462 | j_burnt: 'Rare',
463 | j_bootstraps: 'Uncommon',
464 | j_caino: 'Legendary',
465 | j_triboulet: 'Legendary',
466 | j_yorick: 'Legendary',
467 | j_chicot: 'Legendary',
468 | j_perkeo: 'Legendary',
469 | }
470 |
471 | export const deckNames: Record = {
472 | b_red: 'Red Deck',
473 | b_blue: 'Blue Deck',
474 | b_yellow: 'Yellow Deck',
475 | b_green: 'Green Deck',
476 | b_black: 'Black Deck',
477 | b_magic: 'Magic Deck',
478 | b_nebula: 'Nebula Deck',
479 | b_ghost: 'Ghost Deck',
480 | b_abandoned: 'Abandoned Deck',
481 | b_checkered: 'Checkered Deck',
482 | b_zodiac: 'Zodiac Deck',
483 | b_painted: 'Painted Deck',
484 | b_anaglyph: 'Anaglpyh Deck',
485 | b_plasma: 'Plasma Deck',
486 | b_erratic: 'Erratic Deck',
487 | }
488 |
489 | export const deckSprites: Record = {
490 | b_red: '0 0',
491 | b_blue: '0 -200%',
492 | b_yellow: '-100% -200%',
493 | b_green: '-200% -200%',
494 | b_black: '-300% -200%',
495 | b_magic: '0 -300%',
496 | b_nebula: '-300% 0',
497 | b_ghost: '-600% -200%',
498 | b_abandoned: '-300% -300%',
499 | b_checkered: '-100% -300%',
500 | b_zodiac: '-300% -400%',
501 | b_painted: '-400% -300%',
502 | b_anaglyph: '-200% -400%',
503 | b_plasma: '-400% -200%',
504 | b_erratic: '-200% -300%',
505 | locked: '-400% 0',
506 | }
507 |
508 | export const consumableNames: Record = {
509 | c_fool: 'The Fool',
510 | c_magician: 'The Magician',
511 | c_high_priestess: 'The High Priestess',
512 | c_empress: 'The Empress',
513 | c_emperor: 'The Emperor',
514 | c_heirophant: 'The Hierophant',
515 | c_lovers: 'The Lovers',
516 | c_chariot: 'The Chariot',
517 | c_justice: 'Justice',
518 | c_hermit: 'The Hermit',
519 | c_wheel_of_fortune: 'The Wheel of Fortune',
520 | c_strength: 'Strength',
521 | c_hanged_man: 'The Hanged Man',
522 | c_death: 'Death',
523 | c_temperance: 'Temperance',
524 | c_devil: 'The Devil',
525 | c_tower: 'The Tower',
526 | c_star: 'The Star',
527 | c_moon: 'The Moon',
528 | c_sun: 'The Sun',
529 | c_judgement: 'Judgement',
530 | c_world: 'The World',
531 |
532 | c_mercury: 'Mercury',
533 | c_venus: 'Venus',
534 | c_earth: 'Earth',
535 | c_mars: 'Mars',
536 | c_jupiter: 'Jupiter',
537 | c_saturn: 'Saturn',
538 | c_uranus: 'Uranus',
539 | c_neptune: 'Neptune',
540 | c_pluto: 'Pluto',
541 | c_planet_x: 'Planet X',
542 | c_ceres: 'Ceres',
543 | c_eris: 'Eris',
544 |
545 | c_familiar: 'Familiar',
546 | c_grim: 'Grim',
547 | c_incantation: 'Incantation',
548 | c_talisman: 'Talisman',
549 | c_aura: 'Aura',
550 | c_wraith: 'Wraith',
551 | c_sigil: 'Sigil',
552 | c_ouija: 'Ouija',
553 | c_ectoplasm: 'Ectoplasm',
554 | c_immolate: 'Immolate',
555 | c_ankh: 'Ankh',
556 | c_deja_vu: 'Deja Vu',
557 | c_hex: 'Hex',
558 | c_trance: 'Trance',
559 | c_medium: 'Medium',
560 | c_cryptid: 'Cryptid',
561 | c_soul: 'The Soul',
562 | c_black_hole: 'Black Hole',
563 | }
564 |
565 | export const consumableSprites: Record = {
566 | c_fool: '0 0',
567 | c_magician: '-100% 0',
568 | c_high_priestess: '-200% 0',
569 | c_empress: '-300% 0',
570 | c_emperor: '-400% 0',
571 | c_heirophant: '-500% 0',
572 | c_lovers: '-600% 0',
573 | c_chariot: '-700% 0',
574 | c_justice: '-800% 0',
575 | c_hermit: '-900% 0',
576 | c_wheel_of_fortune: '0 -100%',
577 | c_strength: '-100% -100%',
578 | c_hanged_man: '-200% -100%',
579 | c_death: '-300% -100%',
580 | c_temperance: '-400% -100%',
581 | c_devil: '-500% -100%',
582 | c_tower: '-600% -100%',
583 | c_star: '-700% -100%',
584 | c_moon: '-800% -100%',
585 | c_sun: '-900% -100%',
586 | c_judgement: '0 -200%',
587 | c_world: '-100% -200%',
588 |
589 | c_mercury: '0 -300%',
590 | c_venus: '-100% -300%',
591 | c_earth: '-200% -300%',
592 | c_mars: '-300% -300%',
593 | c_jupiter: '-400% -300%',
594 | c_saturn: '-500% -300%',
595 | c_uranus: '-600% -300%',
596 | c_neptune: '-700% -300%',
597 | c_pluto: '-800% -300%',
598 | c_planet_x: '-900% -200%',
599 | c_ceres: '-800% -200%',
600 | c_eris: '-300% -200%',
601 |
602 | c_familiar: '0 -400%',
603 | c_grim: '-100% -400%',
604 | c_incantation: '-200% -400%',
605 | c_talisman: '-300% -400%',
606 | c_aura: '-400% -400%',
607 | c_wraith: '-500% -400%',
608 | c_sigil: '-600% -400%',
609 | c_ouija: '-700% -400%',
610 | c_ectoplasm: '-800% -400%',
611 | c_immolate: '-900% -400%',
612 | c_ankh: '0 -500%',
613 | c_deja_vu: '-100% -500%',
614 | c_hex: '-200% -500%',
615 | c_trance: '-300% -500%',
616 | c_medium: '-400% -500%',
617 | c_cryptid: '-500% -500%',
618 | c_soul: '-200% -200%',
619 | c_black_hole: '-900% -300%',
620 |
621 | undiscovered: '-600% -200%',
622 | undiscovered_extra: '-600% -300%',
623 | }
624 |
625 | export const voucherNames: Record = {
626 | v_overstock_norm: 'Overstock',
627 | v_overstock_plus: 'Overstock Plus',
628 | v_clearance_sale: 'Clearance Sale',
629 | v_liquidation: 'Liquidation',
630 | v_hone: 'Hone',
631 | v_glow_up: 'Glow Up',
632 | v_reroll_surplus: 'Reroll Surplus',
633 | v_reroll_glut: 'Reroll Glut',
634 | v_crystal_ball: 'Crystal Ball',
635 | v_omen_globe: 'Omen Globe',
636 | v_telescope: 'Telescope',
637 | v_observatory: 'Observatory',
638 | v_grabber: 'Grabber',
639 | v_nacho_tong: 'Nacho Tong',
640 | v_wasteful: 'Wasteful',
641 | v_recyclomancy: 'Recyclomancy',
642 | v_tarot_merchant: 'Tarot Merchant',
643 | v_tarot_tycoon: 'Tarot Tycoon',
644 | v_planet_merchant: 'Planet Merchant',
645 | v_planet_tycoon: 'Planet Tycoon',
646 | v_seed_money: 'Seed Money',
647 | v_money_tree: 'Money Tree',
648 | v_blank: 'Blank',
649 | v_antimatter: 'Antimatter',
650 | v_magic_trick: 'Magic Trick',
651 | v_illusion: 'Illusion',
652 | v_hieroglyph: 'Hieroglpyh',
653 | v_petroglyph: 'Petroglpyh',
654 | v_directors_cut: "Director's Cut",
655 | v_retcon: 'Retcon',
656 | v_paint_brush: 'Paint Brush',
657 | v_palette: 'Palette',
658 | }
659 |
660 | export const voucherSprites: Record = {
661 | v_overstock_norm: '0 0',
662 | v_overstock_plus: '0 -100%',
663 | v_clearance_sale: '-300% 0',
664 | v_liquidation: '-300% -100%',
665 | v_hone: '-400% 0',
666 | v_glow_up: '-400% -100%',
667 | v_reroll_surplus: '0 -200%',
668 | v_reroll_glut: '0 -300%',
669 | v_crystal_ball: '-200% -200%',
670 | v_omen_globe: '-200% -300%',
671 | v_telescope: '-300% -200%',
672 | v_observatory: '-300% -300%',
673 | v_grabber: '-500% 0',
674 | v_nacho_tong: '-500% -100%',
675 | v_wasteful: '-600% 0',
676 | v_recyclomancy: '-600% -100%',
677 | v_tarot_merchant: '-100% 0',
678 | v_tarot_tycoon: '-100% -100%',
679 | v_planet_merchant: '-200% 0',
680 | v_planet_tycoon: '-200% -100%',
681 | v_seed_money: '-100% -200%',
682 | v_money_tree: '-100% -300%',
683 | v_blank: '-700% 0',
684 | v_antimatter: '-700% -100%',
685 | v_magic_trick: '-400% -200%',
686 | v_illusion: '-400% -300%',
687 | v_hieroglyph: '-500% -200%',
688 | v_petroglyph: '-500% -300%',
689 | v_directors_cut: '-600% -200%',
690 | v_retcon: '-600% -300%',
691 | v_paint_brush: '-700% -200%',
692 | v_palette: '-700% -300%',
693 | undiscovered: '-800% -200%',
694 | undiscovered_extra: '-600% -300%',
695 | }
696 |
--------------------------------------------------------------------------------
/src/lib/cards/cards.ts:
--------------------------------------------------------------------------------
1 | import {
2 | consumableNames,
3 | consumableSprites,
4 | deckNames,
5 | deckSprites,
6 | jokerExtraSprites,
7 | jokerNames,
8 | jokerRarity,
9 | jokerSprites,
10 | voucherNames,
11 | voucherSprites,
12 | } from './cardMappings'
13 | import {
14 | consumableKeys,
15 | deckKeys,
16 | jokerKeys,
17 | planetKeys,
18 | spectralKeys,
19 | tarotKeys,
20 | voucherKeys,
21 | } from './cardKeys'
22 | import { CardType } from '@/lib/types'
23 |
24 | export function initializeJoker(key: string): CardType {
25 | return {
26 | name: jokerNames[key] || key,
27 | wins: {},
28 | losses: {},
29 | count: 0,
30 | image: jokerSprites[key]
31 | ? `url(/images/cards/Jokers.png) ${jokerSprites[key]} / 1000% 1600%`
32 | : `url(/images/cards/Jokers.png) ${jokerSprites.undiscovered} / 1000%`,
33 | topImage: jokerSprites[key]
34 | ? jokerExtraSprites[key] &&
35 | `url(/images/cards/Jokers.png) ${jokerExtraSprites[key]} / 1000% 1600%`
36 | : `url(/images/cards/Enhancers.png) ${jokerExtraSprites.undiscovered} / 700% 500%`,
37 | status: jokerRarity[key] ? jokerRarity[key] : 'Unknown',
38 | }
39 | }
40 |
41 | export function initializeDeck(key: string): CardType {
42 | return {
43 | name: deckNames[key] || key,
44 | wins: {},
45 | losses: {},
46 | image: deckNames[key]
47 | ? `url(/images/cards/Enhancers.png) ${deckSprites[key]} / 700%`
48 | : `url(/images/cards/Enhancers.png) ${deckSprites.locked} / 700%`,
49 | status: 'Deck',
50 | }
51 | }
52 |
53 | export function initializeConsumable(key: string): CardType {
54 | const status = (() => {
55 | if (tarotKeys.includes(key)) {
56 | return 'Tarot'
57 | } else if (planetKeys.includes(key)) {
58 | return 'Planet'
59 | } else if (spectralKeys.includes(key)) {
60 | return 'Spectral'
61 | } else {
62 | return 'Consumable'
63 | }
64 | })()
65 |
66 | return {
67 | name: consumableNames[key] || key,
68 | count: 0,
69 | image: consumableSprites[key]
70 | ? `url(/images/cards/Tarots.png) ${consumableSprites[key]} / 1000%`
71 | : `url(/images/cards/Tarots.png) ${consumableSprites.undiscovered} / 1000%`,
72 | topImage: consumableSprites[key]
73 | ? key == 'c_soul'
74 | ? `url(/images/cards/Enhancers.png) 0 -100% / 700%`
75 | : ''
76 | : `url(/images/cards/Enhancers.png) ${consumableSprites.undiscovered_extra} / 700%`,
77 | status: status,
78 | }
79 | }
80 |
81 | export function initializeVouchers(key: string): CardType {
82 | return {
83 | name: voucherNames[key] || key,
84 | count: 0,
85 | image: voucherNames[key]
86 | ? `url(/images/cards/Vouchers.png) ${voucherSprites[key]} / 900%`
87 | : `url(/images/cards/Vouchers.png) ${voucherSprites.undiscovered} / 900%`,
88 | topImage: !voucherNames[key]
89 | ? `url(/images/cards/Enhancers.png) ${voucherSprites.undiscovered_extra} / 700%`
90 | : '',
91 | status: 'Voucher',
92 | }
93 | }
94 |
95 | export const initialJokers = () => {
96 | const jokers: Record = {}
97 | jokerKeys.map((key) => {
98 | jokers[key] = initializeJoker(key)
99 | })
100 | return jokers
101 | }
102 |
103 | export const initialDecks = () => {
104 | const decks: Record = {}
105 | deckKeys.map((key) => {
106 | decks[key] = initializeDeck(key)
107 | })
108 | return decks
109 | }
110 |
111 | export const initialConsumables = () => {
112 | const consumables: Record = {}
113 | consumableKeys.map((key) => {
114 | consumables[key] = initializeConsumable(key)
115 | })
116 | return consumables
117 | }
118 |
119 | export const initialVouchers = () => {
120 | const vouchers: Record = {}
121 | voucherKeys.map((key) => {
122 | vouchers[key] = initializeVouchers(key)
123 | })
124 | return vouchers
125 | }
126 |
--------------------------------------------------------------------------------
/src/lib/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react'
2 | import { initializeSettings } from './settings'
3 |
4 | // prettier-ignore
5 | export const soundContext = createContext void>>({})
6 | export const settingsContext = createContext(initializeSettings())
7 |
--------------------------------------------------------------------------------
/src/lib/profile.ts:
--------------------------------------------------------------------------------
1 | import Pako from 'pako'
2 | import { Profile } from './types'
3 |
4 | export function decompressJKR(data: ArrayBuffer) {
5 | // Can read profile.jkr, save.jkr, and meta.jkr
6 | // However, it cannot read version.jkr (it's just plaintext)
7 | const uncompressed = Pako.inflateRaw(data, { to: 'string' })
8 | const formatted = uncompressed
9 | .replace(/^return /, '')
10 | .replace(/\["(.*?)"\]=/g, '"$1":')
11 | .replace(/\[(\d+)\]=/g, '"$1":')
12 | .replace(/,}/g, '}')
13 | return JSON.parse(formatted)
14 | }
15 |
16 | export function readProfile(file: File, callback: (data: Profile) => void) {
17 | const reader = new FileReader()
18 | reader.onload = (e) => {
19 | try {
20 | const data = decompressJKR(e.target!.result as ArrayBuffer)
21 | if (data?.joker_usage) {
22 | // check if its profile.jkr
23 | callback(data)
24 | } else {
25 | alert('ERROR: File is not profile.jkr')
26 | }
27 | } catch (err) {
28 | console.error(err)
29 | alert('ERROR: Could not read file')
30 | }
31 | }
32 | reader.readAsArrayBuffer(file)
33 | }
34 |
35 | export const initialProfile: Profile = {
36 | career_stats: {
37 | c_cards_discarded: 0,
38 | c_cards_played: 0,
39 | c_cards_sold: 0,
40 | c_dollars_earned: 0,
41 | c_face_cards_played: 0,
42 | c_hands_played: 0,
43 | c_jokers_sold: 0,
44 | c_losses: 0,
45 | c_planetarium_used: 0,
46 | c_planets_bought: 0,
47 | c_playing_cards_bought: 0,
48 | c_round_interest_cap_streak: 0, // consecutive rounds at max interest
49 | c_rounds: 0,
50 | c_shop_dollars_spent: 0,
51 | c_shop_rerolls: 0,
52 | c_single_hand_round_streak: 0, // consecutive single hand round wins
53 | c_tarot_reading_used: 0,
54 | c_tarots_bought: 0,
55 | c_vouchers_bought: 0,
56 | c_wins: 0,
57 | },
58 | consumeable_usage: {},
59 | deck_stakes: {},
60 | deck_usage: {},
61 | hand_usage: {},
62 | high_scores: {
63 | boss_streak: { label: 'Most Bosses in a Row', amt: 0 },
64 | collection: { amt: 2, label: 'Collection', tot: 340 },
65 | current_streak: { label: '', amt: 0 },
66 | furthest_ante: { label: 'Highest Ante', amt: 0 },
67 | furthest_round: { label: 'Highest Round', amt: 0 },
68 | hand: { label: 'Best Hand', amt: 0 },
69 | most_money: { label: 'Most Money', amt: 0 },
70 | poker_hand: { label: 'Most Played Hand', amt: 0 },
71 | win_streak: { label: 'Best Win Streak', amt: 0 },
72 | },
73 | joker_usage: {},
74 | name: 'Jimbo',
75 | progress: {
76 | challenges: { of: 20, tally: 0 },
77 | deck_stakes: { of: 120, tally: 0 },
78 | discovered: { of: 340, tally: 2 }, // it is impossible for the tally to be 0; the player starts with Joker and Red Deck
79 | joker_stickers: { of: 1200, tally: 0 },
80 | overall_of: 4,
81 | overall_tally: 2 / (20 + 120 + 340 + 1200),
82 | },
83 | voucher_usage: {},
84 | lastUpdated: null,
85 | }
86 |
--------------------------------------------------------------------------------
/src/lib/settings.ts:
--------------------------------------------------------------------------------
1 | export function initializeSettings(): Record<
2 | string,
3 | { label: string; enabled: boolean }
4 | > {
5 | return {
6 | soundEnabled: {
7 | label: 'Enable sound',
8 | enabled: true,
9 | },
10 | cardPerspective: {
11 | label: 'Enable card perspective effect',
12 | enabled: true,
13 | },
14 | showPerGameStats: {
15 | label: 'Show per-game averages in career stats',
16 | enabled: true,
17 | },
18 | // slideAnimation: {
19 | // label: 'Enable slide animation on filters',
20 | // enabled: false
21 | // },
22 | fadeCardsWithNoRounds: {
23 | label: 'Fade unplayed cards',
24 | enabled: false,
25 | },
26 | fadeCardsWithNoWins: {
27 | label: 'Fade cards with no wins',
28 | enabled: false,
29 | },
30 | highlightChipsOnlyIfWin: {
31 | label: 'Highlight chips with wins only',
32 | enabled: false,
33 | },
34 | saveImageinNewTab: {
35 | label: 'Open saved images in new tab',
36 | enabled: false,
37 | },
38 | // disableOverwriteConfirmation: {
39 | // label: 'Disable profile overwrite confirmation prompt',
40 | // enabled: false
41 | // },
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | export interface Profile {
2 | all_unlocked?: boolean
3 | career_stats: Record
4 | consumeable_usage: Record
5 | deck_usage: Record<
6 | string,
7 | {
8 | order: number
9 | count: number
10 | wins: Record
11 | losses: Record
12 | }
13 | >
14 | hand_usage: Record
15 | high_scores: Record
16 | joker_usage: Record<
17 | string,
18 | {
19 | order: number
20 | count: number
21 | wins: Record
22 | losses: Record
23 | }
24 | >
25 | name: string
26 | progress: {
27 | challenges: { of: number; tally: number }
28 | deck_stakes: { of: number; tally: number }
29 | discovered: { of: number; tally: number }
30 | joker_stickers: { of: number; tally: number }
31 | overall_of: number
32 | overall_tally: number
33 | }
34 | voucher_usage: Record
35 | lastUpdated: string | null
36 |
37 | // Unused stuff / stuff I don't care about
38 | MEMORY?: { deck: string; stake: number }
39 | challenge_progress?: {
40 | completed: Record
41 | unlocked: Record
42 | }
43 | challenges_unlocked?: number
44 | deck_stakes?: {}
45 | stake?: number
46 | }
47 |
48 | export interface CardType {
49 | name: string
50 | wins?: Record
51 | losses?: Record
52 | count?: number
53 | image: string
54 | topImage?: string
55 | status: string
56 | }
57 |
58 | export interface FilterType {
59 | name: string
60 | filters: Record<
61 | string,
62 | {
63 | filter: (card: CardType) => boolean
64 | enabled: boolean
65 | }
66 | >
67 | }
68 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { toBlob } from 'html-to-image'
2 | import { MutableRefObject, useCallback, useRef } from 'react'
3 | import { CardType } from './types'
4 | import FileSaver from 'file-saver'
5 |
6 | export function numberWithCommas(number: number) {
7 | // https://stackoverflow.com/questions/2901102/how-to-format-a-number-with-commas-as-thousands-separators
8 | return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
9 | }
10 |
11 | export function useToImage(
12 | filename: string,
13 | newTab?: boolean,
14 | ): [MutableRefObject, () => void] {
15 | const ref = useRef(null)
16 | const saveImage = useCallback(() => {
17 | if (ref.current === null) {
18 | return
19 | }
20 |
21 | toBlob(ref.current)
22 | .then((blob) => {
23 | if (blob) {
24 | if (newTab) {
25 | const url = URL.createObjectURL(blob)
26 | window.open(url)
27 | } else {
28 | FileSaver.saveAs(blob, filename)
29 | }
30 | }
31 | })
32 | .catch((err) => {
33 | alert(
34 | `ERROR: too many cards to save as image. Filter out cards or use Chrome to fix this.`,
35 | )
36 | console.error(err)
37 | })
38 | }, [filename, newTab, ref])
39 | return [ref, saveImage]
40 | }
41 |
42 | export function sumStakes(stakes: Record) {
43 | return Object.values(stakes).reduce((sum, x) => sum + x, 0)
44 | }
45 |
46 | export function getHighestStake(stakes: Record) {
47 | return Object.keys(stakes).length != 0
48 | ? Math.max(...Object.keys(stakes).map((key) => parseInt(key, 10)))
49 | : 0
50 | }
51 |
52 | export function filterCards(
53 | cards: CardType[],
54 | search: string,
55 | sort: string,
56 | filters: ((card: CardType) => boolean)[][],
57 | ) {
58 | let filteredCards = cards
59 |
60 | if (filters.length) {
61 | filters.forEach((group) => {
62 | if (group.length) {
63 | const combinedFilters = (card: CardType) =>
64 | group.some((filter) => filter(card))
65 | filteredCards = filteredCards.filter(combinedFilters)
66 | }
67 | })
68 | }
69 |
70 | // Check for exact match first
71 | const match = filteredCards.filter(
72 | (card) => card.name.toLowerCase() == search.toLowerCase(),
73 | )
74 | if (match.length) {
75 | return match
76 | } else {
77 | filteredCards = filteredCards.filter((card) =>
78 | card.name.toLowerCase().includes(search.toLowerCase()),
79 | )
80 | }
81 |
82 | filteredCards = sortCards(filteredCards, sort)
83 | return filteredCards
84 | }
85 |
86 | function sortCards(cards: CardType[], sort: string) {
87 | switch (sort) {
88 | default:
89 | case 'Game Order':
90 | return cards
91 |
92 | case 'Name':
93 | return cards.toSorted((a, b) => {
94 | if (a.name < b.name) {
95 | return -1
96 | } else if (a.name > b.name) {
97 | return 1
98 | }
99 | return 0
100 | })
101 |
102 | case 'Wins':
103 | return cards.toSorted((a, b) => {
104 | const aWins = a.wins ? sumStakes(a.wins) : 0
105 | const bWins = b.wins ? sumStakes(b.wins) : 0
106 | return bWins - aWins
107 | })
108 |
109 | case 'Win %':
110 | return cards.toSorted((a, b) => {
111 | const aWins = a.wins ? sumStakes(a.wins) : 0
112 | const aLosses = a.losses ? sumStakes(a.losses) : 0
113 | const aRounds = aWins + aLosses
114 | const aWinPercentage = aWins / (aRounds || 1)
115 |
116 | const bWins = b.wins ? sumStakes(b.wins) : 0
117 | const bLosses = b.losses ? sumStakes(b.losses) : 0
118 | const bRounds = bWins + bLosses
119 | const bWinPercentage = bWins / (bRounds || 1)
120 |
121 | if (aWinPercentage == bWinPercentage) {
122 | // favor cards with more wins
123 | if (aWins > bWins) {
124 | return -1
125 | } else if (aWins < bWins) {
126 | return 1
127 | // if 0 = aWins = bWins
128 | } else if (aLosses > bLosses) {
129 | return -1
130 | } else if (aLosses < bLosses) {
131 | return 1
132 | }
133 | }
134 | return bWinPercentage - aWinPercentage
135 | })
136 |
137 | case 'Wins per Loss':
138 | return cards.toSorted((a, b) => {
139 | const aWins = a.wins ? sumStakes(a.wins) : 0
140 | const aLosses = a.losses ? sumStakes(a.losses) : 0
141 | const aRatio = aWins / (aLosses || 1)
142 |
143 | const bWins = b.wins ? sumStakes(b.wins) : 0
144 | const bLosses = b.losses ? sumStakes(b.losses) : 0
145 | const bRatio = bWins / (bLosses || 1)
146 |
147 | if (bRatio < aRatio) {
148 | return -1
149 | } else if (bRatio > aRatio) {
150 | return 1
151 | }
152 |
153 | // same win ratio
154 | if (bWins < aWins) {
155 | return -1
156 | } else if (bWins > aWins) {
157 | return 1
158 | }
159 |
160 | // same wins
161 | if (bLosses < aLosses) {
162 | return 1
163 | } else if (bLosses > aLosses) {
164 | return -1
165 | }
166 | return 0
167 | })
168 |
169 | case 'Losses':
170 | return cards.toSorted((a, b) => {
171 | const aLosses = a.losses ? sumStakes(a.losses) : 0
172 | const bLosses = b.losses ? sumStakes(b.losses) : 0
173 | return bLosses - aLosses
174 | })
175 |
176 | case 'Rounds':
177 | case 'Uses':
178 | case 'Redeems':
179 | return cards.toSorted((a, b) => (b.count ?? 0) - (a.count ?? 0))
180 |
181 | case 'Rarity':
182 | return cards.toSorted((a, b) => {
183 | const rarityMapping: Record = {
184 | Common: 0,
185 | Uncommon: 1,
186 | Rare: 2,
187 | Legendary: 3,
188 | }
189 | const difference = rarityMapping[b.status] - rarityMapping[a.status]
190 |
191 | if (difference == 0) {
192 | return -1
193 | } else {
194 | return difference
195 | }
196 | })
197 |
198 | case 'Stake':
199 | return cards.toSorted((a, b) => {
200 | const aStakes = a.wins
201 | ? Object.keys(a.wins).map((key) => parseInt(key, 10))
202 | : [0]
203 | const aHighestStake = Math.max(...aStakes)
204 |
205 | const bStakes = b.wins
206 | ? Object.keys(b.wins).map((key) => parseInt(key, 10))
207 | : [0]
208 | const bHighestStake = Math.max(...bStakes)
209 |
210 | return bHighestStake - aHighestStake
211 | })
212 | }
213 | }
214 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss'
2 |
3 | const config: Config = {
4 | content: [
5 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
6 | './src/components/**/*.{js,ts,jsx,tsx,mdx}',
7 | './src/app/**/*.{js,ts,jsx,tsx,mdx}',
8 | ],
9 | theme: {
10 | extend: {
11 | backgroundImage: {
12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
13 | 'gradient-conic':
14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 | },
16 | },
17 | },
18 | plugins: [],
19 | }
20 | export default config
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------