48 |
441 | )
442 | }
443 |
--------------------------------------------------------------------------------
/src/cards/assassinate/artwork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/assassinate/artwork.png
--------------------------------------------------------------------------------
/src/cards/assassinate/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCard } from '../../helpers/cards'
2 |
3 | export default defineCard({
4 | name: 'Assassinate',
5 | description: 'A quick stab in the back',
6 | rarity: 1,
7 | price: 14,
8 | stats: {
9 | attack: 8,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/src/cards/assassinate/sfx.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/assassinate/sfx.wav
--------------------------------------------------------------------------------
/src/cards/earthquake/artwork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/earthquake/artwork.png
--------------------------------------------------------------------------------
/src/cards/earthquake/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCard } from '../../helpers/cards'
2 |
3 | export default defineCard({
4 | name: 'Earthquake',
5 | description: 'The earth split in two',
6 | rarity: 3,
7 | price: 25,
8 | stats: {
9 | attack: 12,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/src/cards/earthquake/sfx.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/earthquake/sfx.wav
--------------------------------------------------------------------------------
/src/cards/firebolt/artwork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/firebolt/artwork.png
--------------------------------------------------------------------------------
/src/cards/firebolt/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCard } from '../../helpers/cards'
2 |
3 | export default defineCard({
4 | name: 'Firebolt',
5 | description: 'Ashes to ashes',
6 | rarity: 2,
7 | price: 15,
8 | stats: {
9 | attack: 9,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/src/cards/firebolt/sfx.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/firebolt/sfx.wav
--------------------------------------------------------------------------------
/src/cards/lightning/artwork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/lightning/artwork.png
--------------------------------------------------------------------------------
/src/cards/lightning/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCard } from '../../helpers/cards'
2 |
3 | export default defineCard({
4 | name: 'Lightning',
5 | description: 'A flash in the pan',
6 | rarity: 2,
7 | price: 12,
8 | stats: {
9 | attack: 7,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/src/cards/lightning/sfx.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/lightning/sfx.wav
--------------------------------------------------------------------------------
/src/cards/shield-slam/artwork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/shield-slam/artwork.png
--------------------------------------------------------------------------------
/src/cards/shield-slam/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCard } from '../../helpers/cards'
2 |
3 | export default defineCard({
4 | name: 'Shield Slam',
5 | description: 'Slam your shield',
6 | rarity: 3,
7 | price: 18,
8 | stats: {
9 | attack: 5,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/src/cards/shield-slam/sfx.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/shield-slam/sfx.wav
--------------------------------------------------------------------------------
/src/cards/strike/artwork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/strike/artwork.png
--------------------------------------------------------------------------------
/src/cards/strike/artwork.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/strike/artwork.webp
--------------------------------------------------------------------------------
/src/cards/strike/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCard } from '../../helpers/cards'
2 |
3 | export default defineCard({
4 | name: 'Strike',
5 | description: 'Smack your opponent!',
6 | rarity: 0,
7 | price: 14,
8 | stats: {
9 | attack: 3,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/src/cards/strike/sfx.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nicklemmon/react-deckbuilder/dbe8550a7911aa68f1be04eddd85797eea130997/src/cards/strike/sfx.wav
--------------------------------------------------------------------------------
/src/character-classes/berzerker/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCharacterClass } from '../../helpers/character-classes'
2 | import { getCard, CARDS } from '../../helpers/cards'
3 |
4 | export default defineCharacterClass({
5 | id: 'berzerker',
6 | name: 'Berzerker',
7 | deck: [
8 | getCard('shield-slam', CARDS),
9 | getCard('shield-slam', CARDS),
10 | getCard('shield-slam', CARDS),
11 | getCard('lightning', CARDS),
12 | getCard('lightning', CARDS),
13 | getCard('assassinate', CARDS),
14 | getCard('earthquake', CARDS),
15 | ].filter(Boolean),
16 | })
17 |
--------------------------------------------------------------------------------
/src/character-classes/rogue/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCharacterClass } from '../../helpers/character-classes'
2 | import { getCard, CARDS } from '../../helpers/cards'
3 |
4 | export default defineCharacterClass({
5 | id: 'rogue',
6 | name: 'Rogue',
7 | deck: [
8 | getCard('shield-slam', CARDS),
9 | getCard('shield-slam', CARDS),
10 | getCard('lightning', CARDS),
11 | getCard('earthquake', CARDS),
12 | getCard('assassinate', CARDS),
13 | ].filter(Boolean),
14 | })
15 |
--------------------------------------------------------------------------------
/src/character-classes/wizard/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCharacterClass } from '../../helpers/character-classes'
2 | import { getCard, CARDS } from '../../helpers/cards'
3 |
4 | export default defineCharacterClass({
5 | id: 'wizard',
6 | name: 'Wizard',
7 | deck: [
8 | getCard('shield-slam', CARDS),
9 | getCard('shield-slam', CARDS),
10 | getCard('lightning', CARDS),
11 | getCard('earthquake', CARDS),
12 | getCard('assassinate', CARDS),
13 | ].filter(Boolean),
14 | })
15 |
--------------------------------------------------------------------------------
/src/components/app-preloader.tsx:
--------------------------------------------------------------------------------
1 | export function AppPreloader() {
2 | return
49 |
202 |
203 |
230 |
231 |
232 |
233 |
234 | {context.game.discardPile.map((card, index) => {
235 | return (
236 |
244 |
246 |
247 | send({ type: 'DISCARD_CARD_ANIMATION_COMPLETE' })}
249 | mode="popLayout"
250 | >
251 | {context.game.cardInPlay ? (
252 |
260 | send({
261 | type: 'PLAY_CARD_ANIMATION_COMPLETE',
262 | data: { card: context.game.cardInPlay as CardType },
263 | })
264 | }
265 | >
266 |
268 | ) : null}
269 |
270 |
271 |
272 |
273 | {context.game.drawPile.map((card, index) => {
274 | return (
275 |
283 |
285 |
286 |
287 |
303 |
304 |
366 |
367 |
440 |
50 |
51 |
52 | {context.game.player.gold}
54 |
55 |
56 |
57 |
58 |
59 | {context.game.player.inventory.map((item) => {
60 | return (
61 |
64 | send({ type: 'USING_ITEM_ANIMATION_COMPLETE', data: { item } })
65 | }
66 | initial={{ x: 1, y: 1, opacity: 1 }}
67 | animate={{ x: 1, y: 1, opacity: 1 }}
68 | exit={{ x: 0.33, y: 0.33, opacity: 0 }}
69 | transition={{ duration: 0.33 }}
70 | >
71 |
77 |
78 | )
79 | })}
80 |
81 |
82 |
83 |
84 |
85 |
86 | {context.game.player.characterPortrait ? (
87 |
94 |
95 | {context.game.player.characterPortrait ? (
96 | send({ type: 'ITEM_EFFECTS_ANIMATION_COMPLETE' })}
100 | />
101 | ) : null}
102 |
103 | {context.game.player.characterName}
104 |
105 |
110 |
111 | {value === 'Defending' ? (
112 | send({ type: 'MONSTER_ATTACK_ANIMATION_COMPLETE' })}
115 | >
116 | {/* TODO: This is the wrong value! */}
117 | {context.game.monster?.stats.attack}
118 |
119 | ) : null}
120 |
121 | ) : null}
122 |
123 |
124 |
125 | send({ type: 'MONSTER_DEATH_ANIMATION_COMPLETE' })}
127 | >
128 | {context.game.monster
129 | ? [
130 |
143 | ,
165 |
166 |
176 | {context.game.monster?.name}
177 | ,
178 |
179 |
190 | ,
195 | ]
196 | : null}
197 |
198 |
199 |
200 |
201 |
144 |
145 | {context.game.monster.artwork ? (
146 |
156 | send({ type: 'CARD_EFFECTS_ANIMATION_COMPLETE' })
157 | }
158 | >
159 | {context.game.cardInPlay?.stats.attack}
160 |
161 | ) : null}
162 |
163 |
164 |
204 | {context.game.currentHand.map((card, index) => {
205 | return (
206 | {
213 | setTimeout(() => {
214 | cardUseSound.play()
215 | }, index * 100)
216 | }}
217 | >
218 | send({ type: 'PLAY_CARD', data: { card } })}
223 | />
224 |
225 | )
226 | })}
227 |
228 | Current hand with {context.game.currentHand.length} cards
229 | Discard pile with {context.game.discardPile.length} cards
245 | Draw pile with {context.game.drawPile.length} cards
284 | Assets loading
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/avatar.module.css:
--------------------------------------------------------------------------------
1 | .avatar {
2 | position: relative;
3 | display: inline-flex;
4 | border-radius: var(--rounding-1000);
5 | width: var(--size-500);
6 | height: var(--size-500);
7 | overflow: hidden;
8 | border: var(--border-width-400) solid var(--color-stone-400);
9 | outline: var(--border-width-200) solid var(--color-stone-300);
10 | }
11 |
12 | .avatar-img {
13 | width: 100%;
14 | height: 100%;
15 | object-fit: cover;
16 | border-radius: inherit;
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/avatar.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from 'motion/react'
2 | import { rng } from '../helpers/rng'
3 | import css from './avatar.module.css'
4 |
5 | const DAMAGE_FLASH_DURATION = 0.4
6 | const HEALING_FLASH_DURATION = 0.75
7 |
8 | export type AvatarStatus = 'idle' | 'taking-damage' | 'healing' | 'dead'
9 |
10 | /** Displays the current player character portrait */
11 | export function Avatar({
12 | src,
13 | status = 'idle',
14 | onAnimationComplete,
15 | }: {
16 | src: string
17 | status?: AvatarStatus
18 | onAnimationComplete?: () => void
19 | }) {
20 | return (
21 |
22 |
23 |
33 |
34 | )
35 | }
36 |
37 | /** Handles shaking the avatar when taking damage */
38 | function AvatarAnimationWrapper({
39 | children,
40 | status,
41 | }: {
42 | children: React.ReactNode
43 | status: AvatarStatus
44 | }) {
45 | const animation =
46 | status === 'taking-damage'
47 | ? { x: [0, -rng(25), rng(25), rng(-25), 0], y: [0, -rng(15), rng(15), rng(-15), 0] }
48 | : { x: [0, 0], y: [0, 0] }
49 |
50 | return (
51 |
24 | 
25 |
26 | {status === 'taking-damage' ? (
27 |
32 |
6 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/button.module.css:
--------------------------------------------------------------------------------
1 | .button {
2 | --text-color: var(--color-stone-800);
3 | --gradient-start: var(--color-stone-300);
4 | --gradient-end: var(--color-stone-100);
5 |
6 | display: grid;
7 | cursor: pointer;
8 | color: var(--text-color);
9 | font-family: var(--font-secondary);
10 | font-size: var(--font-size-400);
11 | border-radius: var(--rounding-100);
12 | overflow: hidden;
13 | border: 0;
14 | padding: 0;
15 | box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.33);
16 | border: 2px solid var(--gradient-end);
17 | transition:
18 | transform var(--anim-dur-100) var(--anim-easing-100),
19 | box-shadow var(--anim-dur-100) var(--anim-easing-100);
20 | }
21 |
22 | .button-content,
23 | .button-bg {
24 | padding: var(--spacing-200) var(--spacing-400);
25 | align-items: center;
26 | justify-content: center;
27 | grid-row: 1;
28 | grid-column: 1;
29 | height: 100%;
30 | width: 100%;
31 | }
32 |
33 | .button-content {
34 | color: var(--text-color);
35 | transform: translateY(-1px); /* helps make text look vertically centered */
36 | box-shadow: inset 0 -5px var(--gradient-start);
37 | z-index: 1;
38 | }
39 |
40 | .button-bg {
41 | height: 150%;
42 | z-index: 0;
43 | background: linear-gradient(180deg, var(--gradient-start) 10%, var(--gradient-end) 100%);
44 | transition: transform var(--anim-dur-200) var(--anim-easing-100);
45 | }
46 |
47 | .button:hover {
48 | transform: translateY(-2px);
49 | box-shadow: 0 8px 15px 0px rgba(0, 0, 0, 0.33);
50 |
51 | & .button-bg {
52 | transform: translateY(-25%);
53 | }
54 | }
55 |
56 | .button.primary {
57 | --text-color: var(--color-stone-100);
58 | --gradient-start: var(--color-blood-500);
59 | --gradient-end: var(--color-blood-300);
60 | }
61 |
62 | .button.secondary {
63 | /* --text-color: var(--color-stone-900);
64 | --gradient-start: var(--color-stone-500);
65 | --gradient-end: var(--color-stone-300); */
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/button.tsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx'
2 | import css from './button.module.css'
3 |
4 | /** Re-usable button component */
5 | export function Button({
6 | children,
7 | variant = 'primary',
8 | ...props
9 | }: {
10 | children: React.ReactNode
11 | variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'unstyled'
12 | } & React.ComponentPropsWithRef<'button'>) {
13 | const withClsx = (root: string) =>
14 | clsx({
15 | [css[root]]: true,
16 | [css[variant]]: true,
17 | })
18 |
19 | return (
20 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/card.module.css:
--------------------------------------------------------------------------------
1 | .card {
2 | display: inline-flex;
3 | border: 1px solid var(--color-stone-400);
4 | border-radius: var(--rounding-100);
5 | overflow: hidden;
6 | height: var(--card-height);
7 | width: var(--card-width);
8 | perspective: 1000px;
9 | background: linear-gradient(
10 | to bottom,
11 | var(--color-stone-800),
12 | var(--color-stone-500),
13 | var(--color-stone-900)
14 | );
15 | color: var(--color-stone-100);
16 | transition-duration: var(--anim-dur-300);
17 | transition-timing-function: var(--anim-easing-100);
18 | transition-property: transform, box-shadow;
19 | }
20 |
21 | .card-front {
22 | outline: 1px solid var(--color-stone-500);
23 | border-radius: calc(1 * var(--rounding-100));
24 | outline-offset: -2px;
25 | }
26 |
27 | .card.face-up.idle:hover {
28 | transform: translateY(calc(-1 * var(--spacing-100)));
29 | }
30 |
31 | .card.face-up {
32 | box-shadow: 0 var(--spacing-100) var(--spacing-300) calc(var(--spacing-200) * -1)
33 | var(--color-stone-700);
34 | }
35 |
36 | .card.face-up:hover {
37 | box-shadow: 0 var(--spacing-200) var(--spacing-400) calc(var(--spacing-100) * -1)
38 | var(--color-stone-700);
39 | }
40 |
41 | .card.in-play {
42 | box-shadow: 0 var(--spacing-200) var(--spacing-500) calc(var(--spacing-100) * -1)
43 | var(--color-stone-700);
44 | }
45 |
46 | .card.face-down {
47 | pointer-events: none;
48 | }
49 |
50 | .card.disabled,
51 | .card.purchased,
52 | .card.in-play {
53 | pointer-events: none;
54 | }
55 |
56 | .card-header {
57 | padding: var(--spacing-100);
58 | }
59 |
60 | .card-content {
61 | padding-inline: var(--spacing-100);
62 | }
63 |
64 | .card-artwork {
65 | position: relative;
66 | width: 100%;
67 | height: 100%;
68 | object-fit: contain;
69 | border-radius: var(--rounding-100) var(--rounding-100) 0 0;
70 | border: var(--border-width-300) solid var(--color-stone-200);
71 | z-index: 15;
72 | box-shadow: 0 var(--spacing-200) var(--spacing-200) calc(var(--spacing-200) * -1)
73 | var(--color-stone-400);
74 | }
75 |
76 | .card-description {
77 | text-wrap: pretty;
78 | text-align: center;
79 | height: var(--size-300);
80 | background-color: var(--color-stone-200);
81 | border-radius: 0 0 var(--rounding-50) var(--rounding-50);
82 | padding: var(--spacing-100);
83 | color: var(--color-stone-700);
84 | font-size: var(--font-size-200);
85 | }
86 |
87 | .card-name {
88 | display: flex;
89 | background-color: var(--color-stone-200);
90 | border-radius: var(--rounding-50);
91 | border: var(--border-width-200) solid var(--color-stone-100);
92 | padding-inline: var(--spacing-100);
93 | font-family: var(--font-secondary);
94 | color: var(--color-stone-700);
95 | font-size: var(--font-size-300);
96 | text-shadow: 0 2px 1px var(--color-stone-100);
97 | box-shadow: inset 0 var(--spacing-200) var(--spacing-100) calc(var(--spacing-200) * -1)
98 | var(--color-stone-400);
99 | }
100 |
101 | .card-footer {
102 | position: absolute;
103 | width: 100%;
104 | height: var(--size-200);
105 | bottom: 0;
106 | z-index: 99;
107 | }
108 |
109 | .card-back {
110 | position: absolute;
111 | top: 0;
112 | left: 0;
113 | width: 100%;
114 | height: 100%;
115 | opacity: 0;
116 | z-index: 100;
117 | background-color: var(--color-stone-900);
118 | }
119 |
120 | .card-back-img {
121 | width: 100%;
122 | height: 100%;
123 | object-fit: contain;
124 | opacity: 0.75;
125 | }
126 |
127 | .card-back-overlay {
128 | position: absolute;
129 | top: 0;
130 | left: 0;
131 | width: 100%;
132 | height: 100%;
133 | background-color: var(--color-stone-900);
134 | opacity: 0.825;
135 | }
136 |
137 | .card-back.face-down {
138 | opacity: 1;
139 | }
140 |
141 | .card-stats-row {
142 | position: absolute;
143 | bottom: 0;
144 | left: 0;
145 | background: radial-gradient(
146 | circle at bottom left,
147 | var(--color-stone-800) 0%,
148 | var(--color-stone-600) 50%,
149 | var(--color-stone-800) 100%
150 | );
151 | padding: var(--spacing-100);
152 | border-top-right-radius: var(--rounding-100);
153 | border-bottom-right-radius: var(--rounding-100);
154 | box-shadow: 2px 2px 3px -1px var(--color-stone-900);
155 | overflow: hidden;
156 | }
157 |
--------------------------------------------------------------------------------
/src/components/card.tsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx'
2 | import type { Card } from '../types/cards'
3 | import cardBackImg from '../images/card-back.png'
4 | import swordIcon from '../images/sword.png'
5 | import { StatsRow, StatIcon, StatVal } from './stats'
6 | import css from './card.module.css'
7 |
8 | export function Card({
9 | className,
10 | description,
11 | name,
12 | onClick,
13 | rarity,
14 | isStacked,
15 | orientation = 'face-up',
16 | status = 'idle',
17 | stats,
18 | artwork,
19 | id,
20 | }: { isStacked?: boolean; onClick?: () => void; className?: string } & Card) {
21 | const withClsx = (rootClass: string, additionalClassName?: string) => {
22 | return clsx(
23 | {
24 | [rootClass]: true,
25 | [css['disabled']]: status === 'disabled',
26 | [css['in-play']]: status === 'in-play',
27 | [css['idle']]: status === 'idle',
28 | [css['face-down']]: orientation === 'face-down',
29 | [css['face-up']]: orientation === 'face-up',
30 | [css['stacked']]: isStacked === true,
31 | [css['rarity-0']]: rarity === 0,
32 | [css['rarity-1']]: rarity === 1,
33 | [css['rarity-2']]: rarity === 2,
34 | [css['rarity-3']]: rarity === 3,
35 | },
36 | additionalClassName,
37 | )
38 | }
39 |
40 | return (
41 | {children}
7 |
42 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/character-creation.module.css:
--------------------------------------------------------------------------------
1 | .form {
2 | max-width: 1100px;
3 | margin: 0 auto;
4 | padding: var(--spacing-400);
5 | }
6 |
7 | .input-ctrl {
8 | display: flex;
9 | flex-direction: column;
10 | gap: var(--spacing-100);
11 | width: 100%;
12 | }
13 |
14 | .input-label {
15 | font-family: var(--font-secondary);
16 | font-weight: var(--font-weight-700);
17 | }
18 |
19 | .input {
20 | appearance: none;
21 | border: 0;
22 | padding: var(--spacing-100);
23 | background-color: var(--color-stone-200);
24 | border-radius: var(--rounding-100);
25 | width: 100%;
26 |
27 | &:focus-visible {
28 | outline: 2px solid var(--color-stone-400);
29 | }
30 | }
31 |
32 | .character-portrait-fieldset {
33 | display: grid;
34 | width: 100%;
35 | grid-template-columns: repeat(auto-fit, minmax(var(--size-500), 1fr));
36 | gap: var(--spacing-300);
37 | padding: 0;
38 | border: 0;
39 | }
40 |
41 | .character-portrait-label {
42 | display: block;
43 | line-height: 0;
44 | border-radius: var(--rounding-300);
45 | overflow: hidden;
46 | cursor: pointer;
47 | transition:
48 | box-shadow 0.2s ease-out,
49 | outline 0.3s ease-in-out,
50 | transform 0.4s ease-in-out;
51 |
52 | &:hover,
53 | &:has(input:checked) {
54 | transform: scale(1.1);
55 | box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.7);
56 | z-index: var(--z-index-700);
57 | }
58 |
59 | &:has(input:checked) {
60 | }
61 | }
62 |
63 | .character-portrait-label {
64 | }
65 |
66 | .character-portrait-input {
67 | display: none;
68 | }
69 |
70 | .character-portrait-img {
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/character-creation.tsx:
--------------------------------------------------------------------------------
1 | import { type SyntheticEvent } from 'react'
2 | import { useMachine } from '@xstate/react'
3 | import { appMachine } from '../machines/app-machine/app-machine'
4 | import { Button } from './button'
5 | import css from './character-creation.module.css'
6 | import { resolveModules } from '../helpers/vite'
7 | import { Stack } from './stack'
8 |
9 | // TODO Use import globbing here instead
10 |
11 | const PLAYER_PORTRAIT_MODULES = import.meta.glob('../images/player-portraits/*.(png|webp)', {
12 | eager: true,
13 | })
14 |
15 | const PLAYER_PORTRAITS = resolveModules
43 |
64 |
65 |
44 |
46 |
47 | {name}
45 |
48 | 
49 |
50 |
52 |
53 | {description}
51 |
54 |
55 | {stats?.attack ? (
56 | <>
57 | {stats.attack}
59 |
60 | ) : null}
61 |
62 |
63 |
66 | 
67 |
68 |
69 |
38 |
96 |
97 | )
98 | }
99 |
--------------------------------------------------------------------------------
/src/components/debug-tag.tsx:
--------------------------------------------------------------------------------
1 | export function DebugTag({
2 | children,
3 | style,
4 | }: {
5 | children: React.ReactNode
6 | style?: React.CSSProperties
7 | }) {
8 | return (
9 |
18 | {children}
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/deck.module.css:
--------------------------------------------------------------------------------
1 | .deck {
2 | /* allows absolute positioning within */
3 | position: relative;
4 | pointer-events: none;
5 | display: flex;
6 | flex-direction: row;
7 | width: var(--card-width);
8 | height: var(--card-height);
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/deck.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { clsx } from 'clsx'
3 | import { EmptyDeck } from './empty-deck'
4 | import css from './deck.module.css'
5 |
6 | export function Deck({ children }: { children?: React.ReactNode }) {
7 | return (
8 |
13 | {React.Children.count(children) === 0 ? (
14 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/dialog.module.css:
--------------------------------------------------------------------------------
1 | .dialog-container {
2 | --dialog-max-width: 800px;
3 |
4 | container-type: inline-size;
5 | container-name: dialog;
6 | width: 100%;
7 | max-width: 800px;
8 | display: flex;
9 | justify-content: center;
10 | position: fixed;
11 | z-index: var(--z-index-600);
12 | top: 50%;
13 | left: 50%;
14 | transform: scale(1) translate(-50%, -50%);
15 | }
16 |
17 | .dialog {
18 | max-width: var(--dialog-max-width);
19 | width: 100%;
20 | opacity: 0;
21 | visibility: hidden;
22 | background-image: linear-gradient(to top, var(--color-stone-800) 10%, var(--color-stone-900));
23 | color: var(--color-stone-100);
24 | border-radius: var(--rounding-200);
25 | transform: scale(0);
26 | display: none;
27 | z-index: var(--z-index-600);
28 | }
29 |
30 | /** The max width of the dialog is hit when shrinking the viewport, so we reduce the max width slightly so that it does not touch the edges of the viewport. */
31 | @container dialog (max-width: 800px) {
32 | .dialog {
33 | width: 90%;
34 | }
35 | }
36 |
37 | .dialog {
38 | opacity: 1;
39 | visibility: visible;
40 | display: flex;
41 | border: 1px solid var(--color-stone-600);
42 | filter: drop-shadow(0 0.75rem 0.75rem rgba(0, 0, 0, 0.5));
43 | transform: scale(1);
44 | }
45 |
46 | .dialog-content {
47 | width: 100%;
48 | padding: var(--spacing-400);
49 | }
50 |
51 | .dialog-overlay {
52 | display: none;
53 | }
54 |
55 | .dialog-overlay {
56 | display: block;
57 | position: fixed;
58 | top: 0;
59 | left: 0;
60 | height: 100vh;
61 | width: 100vw;
62 | z-index: var(--z-index-500);
63 | background-color: rgba(0, 0, 0, 0.5);
64 | backdrop-filter: blur(5px);
65 | }
66 |
--------------------------------------------------------------------------------
/src/components/dialog.tsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx'
2 | import { AnimatePresence, motion } from 'motion/react'
3 | import css from './dialog.module.css'
4 |
5 | export function Dialog({
6 | open,
7 | children,
8 | }: {
9 | open: boolean
10 | children: React.ReactNode
11 | onClose?: () => void
12 | }) {
13 | const withStatusClsx = (root: string) =>
14 | clsx({
15 | [css[root]]: true,
16 | [css['is-open']]: open === true,
17 | })
18 |
19 | return (
20 | <>
21 |
22 | {child}
23 |
24 | )
25 | })
26 | )}
27 |
22 |
23 | {open ? (
24 |
33 | {children}
34 |
35 | ) : null}
36 |
37 |
38 |
39 | {children}
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/empty-deck.module.css:
--------------------------------------------------------------------------------
1 | .empty-deck {
2 | display: inline-flex;
3 | width: var(--card-width);
4 | height: var(--card-height);
5 | border-radius: var(--rounding-200);
6 | background-color: var(--color-stone-400);
7 | outline: var(--spacing-100) solid var(--color-stone-400);
8 | border: var(--border-width-300) dashed var(--color-stone-800);
9 | opacity: 0.25;
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/empty-deck.tsx:
--------------------------------------------------------------------------------
1 | import css from './empty-deck.module.css'
2 |
3 | export function EmptyDeck() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/feedback.module.css:
--------------------------------------------------------------------------------
1 | .feedback-text {
2 | font-family: var(--font-heading);
3 | font-weight: 700;
4 | font-size: var(--font-size-300);
5 | text-shadow: 0 2px 1px var(--color-shadow-200);
6 | }
7 |
8 | .feedback-text.neutral {
9 | color: var(--color-stone-200);
10 | }
11 |
12 | .feedback-text.positive {
13 | color: var(--color-success);
14 | }
15 |
16 | .feedback-text.negative {
17 | color: var(--color-danger);
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/feedback.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from 'motion/react'
2 | import { clsx } from 'clsx'
3 | import css from './feedback.module.css'
4 |
5 | const FEEDBACK_DURATION = 1.0
6 |
7 | export function Feedback({
8 | children,
9 | variant,
10 | duration = FEEDBACK_DURATION,
11 | orientation = 'top',
12 | onAnimationComplete,
13 | }: {
14 | children: React.ReactNode
15 | variant: 'neutral' | 'positive' | 'negative'
16 | duration?: number
17 | orientation?: 'bottom' | 'top'
18 | onAnimationComplete?: () => void
19 | }) {
20 | return (
21 |
44 | {variant === 'positive' && '+'}
45 |
46 | {variant === 'negative' && '-'}
47 |
48 | {children}
49 |
50 | Something went wrong :(
3 | } 4 | -------------------------------------------------------------------------------- /src/components/health-bar.module.css: -------------------------------------------------------------------------------- 1 | .health-bar-wrapper { 2 | filter: drop-shadow(0 2px 2px var(--color-stone-400)); 3 | width: 100%; 4 | } 5 | 6 | .health-bar { 7 | --health-percentage: 1; 8 | 9 | position: relative; 10 | display: flex; 11 | overflow: hidden; 12 | height: var(--size-150); 13 | border-radius: var(--rounding-200); 14 | border-bottom-left-radius: 0; 15 | border: var(--border-width-100) solid var(--color-blood-500); 16 | background: linear-gradient(0deg, var(--color-stone-600) 50%, var(--color-stone-800) 100%); 17 | } 18 | 19 | .health-bar-fill { 20 | position: absolute; 21 | left: 0; 22 | top: 0; 23 | height: 100%; 24 | width: 100%; 25 | transform: scaleX(var(--health-percentage)); 26 | transform-origin: left; 27 | transition: transform var(--anim-dur-400) var(--anim-easing-100); 28 | transition-delay: var(--anim-dur-300); 29 | background: linear-gradient( 30 | 180deg, 31 | var(--color-blood-300) 0%, 32 | var(--color-blood-900) 60%, 33 | var(--color-blood-900) 100% 34 | ); 35 | } 36 | 37 | .health-bar-text-wrapper { 38 | display: inline-flex; 39 | justify-content: center; 40 | align-items: center; 41 | padding: var(--spacing-50) 0; 42 | width: 40%; 43 | background: linear-gradient(180deg, var(--color-blood-300) 5%, var(--color-blood-500) 80%); 44 | border-bottom-right-radius: var(--rounding-200); 45 | border-bottom-left-radius: var(--rounding-200); 46 | border: var(--border-width-100) solid var(--color-blood-500); 47 | } 48 | 49 | .health-bar-text { 50 | font-size: var(--font-size-200); 51 | font-weight: 900; 52 | color: var(--color-stone-100); 53 | } 54 | -------------------------------------------------------------------------------- /src/components/health-bar.tsx: -------------------------------------------------------------------------------- 1 | import css from './health-bar.module.css' 2 | 3 | /** Shows a health bar */ 4 | export function HealthBar({ health, maxHealth }: { health: number; maxHealth: number }) { 5 | const healthPercentage = health / maxHealth 6 | const healthText = health > 0 ? health : 0 7 | 8 | return ( 9 |
10 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/inline.module.css:
--------------------------------------------------------------------------------
1 | .inline {
2 | display: flex;
3 | flex-direction: row;
4 | gap: var(--gap);
5 | text-align: inherit;
6 | }
7 |
8 | .top {
9 | align-items: flex-start;
10 | }
11 |
12 | .right {
13 | align-items: flex-end;
14 | }
15 |
16 | .center {
17 | align-items: center;
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/inline.tsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx'
2 | import type { Spacing } from '../types/tokens'
3 | import css from './inline.module.css'
4 |
5 | export function Inline({
6 | className,
7 | children,
8 | spacing = '300',
9 | align = 'center',
10 | }: {
11 | children: React.ReactNode
12 | className?: string
13 | spacing?: Spacing
14 | align?: 'top' | 'bottom' | 'center'
15 | }) {
16 | const alignClass = align === 'top' ? css.top : align === 'bottom' ? css.bottom : css.center
17 |
18 | return (
19 |
14 |
15 |
16 |
17 |
18 |
20 | {healthText} HP
19 |
23 | {children}
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/item-shop-card.module.css:
--------------------------------------------------------------------------------
1 | .item-shop-card {
2 | position: relative;
3 | }
4 |
5 | .unaffordable,
6 | .purchased {
7 | cursor: not-allowed;
8 | }
9 |
10 | .item-shop-card-card.unaffordable,
11 | .item-shop-card-card.purchased {
12 | filter: grayscale(1);
13 | }
14 |
15 | .purchased {
16 | --clip-path: var(--clip-path-banner);
17 | }
18 |
19 | .unaffordable {
20 | --clip-path: none;
21 | }
22 |
23 | .item-shop-card-overlay {
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | background-color: rgba(0, 0, 0, 0.4);
28 | color: var(--color-stone-200);
29 | font-size: var(--font-size-400);
30 | font-family: var(--font-secondary);
31 | font-weight: var(--font-weight-bold);
32 | position: absolute;
33 | z-index: 90;
34 | top: 0;
35 | left: 0;
36 | width: var(--card-width);
37 | height: var(--card-height);
38 |
39 | span {
40 | display: flex;
41 | background-color: rgba(0, 0, 0, 0.75);
42 | padding: var(--spacing-100) var(--spacing-200);
43 | box-shadow: var(--shadow-900);
44 | clip-path: var(--clip-path);
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/item-shop-card.tsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx'
2 | import { AnimatePresence, motion } from 'motion/react'
3 | import type { Card as CardType } from '../types/cards'
4 | import { PriceStatsRow } from './price-stats-row'
5 | import { Card } from './card'
6 | import css from './item-shop-card.module.css'
7 |
8 | export type ItemShopCardStatus = 'affordable' | 'unaffordable' | 'purchased'
9 |
10 | export function ItemShopCard({
11 | className,
12 | shopStatus,
13 | onClick,
14 | ...props
15 | }: {
16 | shopStatus: ItemShopCardStatus
17 | onClick: () => void
18 | className?: string
19 | } & CardType) {
20 | const disabled = shopStatus === 'unaffordable' || shopStatus === 'purchased'
21 |
22 | const withClsx = (rootClass: string, className?: string) => {
23 | return clsx(
24 | {
25 | [rootClass]: true,
26 | [css['purchased']]: shopStatus === 'purchased',
27 | [css['unaffordable']]: shopStatus === 'unaffordable',
28 | [css['affordable']]: shopStatus === 'affordable',
29 | },
30 | className,
31 | )
32 | }
33 |
34 | /** Handle clicks, bailing when the card is disabled */
35 | const handleClick = () => {
36 | if (disabled) return
37 |
38 | if (!onClick) return
39 |
40 | return onClick()
41 | }
42 |
43 | return (
44 |
45 |
46 | {shopStatus === 'purchased' ? (
47 |
53 |
59 | Purchased!
60 |
61 |
62 | ) : null}
63 |
64 | {shopStatus === 'unaffordable' ? (
65 |
73 |
79 | Unaffordable
80 |
81 |
82 | ) : null}
83 |
84 |
85 |
93 | )
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/item-shop-item.module.css:
--------------------------------------------------------------------------------
1 | .item-shop-item {
2 | position: relative;
3 |
4 | &.unaffordable {
5 | cursor: not-allowed;
6 | }
7 | }
8 |
9 | .item-shop-item-btn {
10 | display: inline-flex;
11 | width: var(--card-width);
12 | height: var(--card-width);
13 | align-items: center;
14 | justify-content: center;
15 | cursor: pointer;
16 | outline: none;
17 | border: 1px solid var(--color-stone-400);
18 | background: none;
19 | background: linear-gradient(
20 | to bottom,
21 | var(--color-stone-900),
22 | var(--color-stone-700),
23 | var(--color-stone-900)
24 | );
25 | padding: var(--spacing-200);
26 | border-radius: var(--rounding-200);
27 | box-shadow: 0 var(--spacing-100) var(--spacing-300) calc(var(--spacing-200) * -1)
28 | var(--color-stone-700);
29 | overflow: hidden;
30 | transition-duration: var(--anim-dur-300);
31 | transition-timing-function: var(--anim-easing-100);
32 | transition-property: transform, box-shadow;
33 |
34 | &:hover {
35 | transform: translateY(calc(-1 * var(--spacing-100)));
36 | box-shadow: 0 var(--spacing-200) var(--spacing-400) calc(var(--spacing-100) * -1)
37 | var(--color-stone-700);
38 | }
39 | }
40 |
41 | .item-shop-item-overlay {
42 | display: flex;
43 | align-items: center;
44 | justify-content: center;
45 | background-color: rgba(0, 0, 0, 0.4);
46 | border-radius: var(--rounding-200);
47 | color: var(--color-stone-200);
48 | font-size: var(--font-size-400);
49 | font-family: var(--font-secondary);
50 | font-weight: var(--font-weight-bold);
51 | position: absolute;
52 | z-index: 90;
53 | top: 0;
54 | left: 0;
55 | width: var(--card-width);
56 | height: var(--card-width);
57 |
58 | span {
59 | display: flex;
60 | background-color: rgba(0, 0, 0, 0.75);
61 | padding: var(--spacing-100) var(--spacing-200);
62 | box-shadow: var(--shadow-900);
63 | clip-path: var(--clip-path);
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/components/item-shop-item.tsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx'
2 | import { AnimatePresence, motion } from 'motion/react'
3 | import { PriceStatsRow } from './price-stats-row'
4 | import type { Item } from '../types/items'
5 | import css from './item-shop-item.module.css'
6 |
7 | export type ItemShopItemStatus = 'affordable' | 'unaffordable'
8 |
9 | export function ItemShopItem({
10 | className,
11 | item,
12 | shopStatus,
13 | price,
14 | onClick,
15 | }: {
16 | shopStatus: ItemShopItemStatus
17 | item: Item
18 | onClick: () => void
19 | price?: number
20 | className?: string
21 | }) {
22 | const withClsx = (rootClass: string, className?: string) => {
23 | return clsx(
24 | {
25 | [rootClass]: true,
26 | [css['unaffordable']]: shopStatus === 'unaffordable',
27 | [css['affordable']]: shopStatus === 'affordable',
28 | },
29 | className,
30 | )
31 | }
32 |
33 | const handleClick = () => {
34 | if (!onClick) return
35 |
36 | if (shopStatus == 'unaffordable') return
37 |
38 | return onClick()
39 | }
40 |
41 | return (
42 |
43 |
44 | {shopStatus === 'unaffordable' ? (
45 |
54 |
60 | Unaffordable
61 |
62 |
63 | ) : null}
64 |
65 |
66 |
69 |
70 |
72 | )
73 | }
74 |
--------------------------------------------------------------------------------
/src/components/price-stats-row.module.css:
--------------------------------------------------------------------------------
1 | .price-stats-row {
2 | background: var(--color-stone-700);
3 | padding: var(--spacing-100);
4 | border-radius: var(--rounding-100);
5 | margin-top: var(--spacing-200);
6 | background: radial-gradient(
7 | circle at bottom left,
8 | var(--color-stone-800) 0%,
9 | var(--color-stone-600) 33%,
10 | var(--color-stone-800) 100%
11 | );
12 | box-shadow: var(--shadow-900);
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/price-stats-row.tsx:
--------------------------------------------------------------------------------
1 | import { StatsRow, StatIcon, StatVal } from './stats'
2 | import coinsIcon from '../images/gold-coins.png'
3 | import css from './price-stats-row.module.css'
4 |
5 | export function PriceStatsRow({ price }: { price: number }) {
6 | return (
7 |
35 | {children}
36 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/stats.module.css:
--------------------------------------------------------------------------------
1 | .stats-row {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | gap: var(--spacing-100);
6 | }
7 |
8 | .stat {
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | color: var(--color);
13 | }
14 |
15 | .stat-icon {
16 | border-radius: var(--rounding-100);
17 | min-width: var(--size-150);
18 | height: var(--size-150);
19 | box-shadow: 0 2px 3px -1px var(--color-stone-900);
20 | }
21 |
22 | .stat-val {
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | border-radius: var(--rounding-100);
27 | background-color: var(--color-stone-100);
28 | color: var(--color-stone-700);
29 | font-size: var(--font-size-300);
30 | padding: var(--spacing-100) 0;
31 | font-weight: bold;
32 | min-width: var(--size-150);
33 | height: var(--size-150);
34 | box-shadow: 0 2px 3px -1px var(--color-stone-900);
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/stats.tsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx'
2 | import css from './stats.module.css'
3 |
4 | export function Stats({ children, className }: { children: React.ReactNode; className?: string }) {
5 | return {children}
6 | }
7 |
8 | export function StatsRow({
9 | children,
10 | className,
11 | }: {
12 | children: React.ReactNode
13 | className?: string
14 | }) {
15 | return {children}
16 | }
17 |
18 | export function Stat({ children, className }: { children: React.ReactNode; className?: string }) {
19 | return {children}
20 | }
21 |
22 | export function StatIcon({ src, className }: { src: string; className?: string }) {
23 | return {children}
34 | }
35 |
--------------------------------------------------------------------------------
/src/events/index.ts:
--------------------------------------------------------------------------------
1 | export const bundleLoadEvent = new Event('bundle load')
2 |
3 | export const imagesLoadEvent = new Event('images load')
4 |
5 | export const sfxLoadEvent = new Event('sfx load')
6 |
--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Suez+One&display=swap');
2 | @import './reset.css';
3 |
4 | :root {
5 | font-size: 14px;
6 |
7 | /** Spacing tokens */
8 | --spacing-50: 0.25rem;
9 | --spacing-100: 0.5rem;
10 | --spacing-200: 0.75rem;
11 | --spacing-300: 1rem;
12 | --spacing-400: 1.5rem;
13 | --spacing-500: 2.5rem;
14 |
15 | /** Sizing tokens */
16 | --size-100: 1rem;
17 | --size-150: 1.5rem;
18 | --size-200: 2rem;
19 | --size-300: 4rem;
20 | --size-400: 8rem;
21 | --size-500: 12rem;
22 | --size-600: 18rem;
23 | --size-700: 22rem;
24 |
25 | /** Font size tokens */
26 | --font-size-100: 0.64rem;
27 | --font-size-200: 0.8rem;
28 | --font-size-300: 1rem;
29 | --font-size-400: 1.25rem;
30 | --font-size-500: 1.563rem;
31 | --font-size-600: 1.953rem;
32 | --font-size-700: 2.441rem;
33 | --font-size-800: 3.052rem;
34 | --font-size-900: 3.815rem;
35 |
36 | /** Color tokens */
37 | /** Color tokens */
38 | /* Base colors */
39 | --color-primary: #8b0000; /* Deep red */
40 | --color-secondary: #4b0082; /* Indigo */
41 | --color-accent: #ffd700; /* Gold */
42 |
43 | /* Neutrals */
44 | --color-stone-50: #fafaf9;
45 | --color-stone-100: #f5f5f4;
46 | --color-stone-200: #e7e5e4;
47 | --color-stone-300: #d6d3d1;
48 | --color-stone-400: #a8a29e;
49 | --color-stone-500: #78716c;
50 | --color-stone-600: #57534e;
51 | --color-stone-700: #44403c;
52 | --color-stone-800: #292524;
53 | --color-stone-900: #1c1917;
54 | --color-stone-950: #0c0a09;
55 |
56 | /* Theme-specific colors */
57 | --color-blood-100: #ffebee;
58 | --color-blood-300: #f06292;
59 | --color-blood-500: #b71c1c;
60 | --color-blood-900: #4a0000;
61 |
62 | --color-shadow-100: #eceff1;
63 | --color-shadow-500: #263238;
64 | --color-shadow-900: #000a12;
65 |
66 | --color-magic-100: #e8eaf6;
67 | --color-magic-500: #3f51b5;
68 | --color-magic-900: #1a237e;
69 |
70 | --color-nature-100: #e8f5e9;
71 | --color-nature-500: #2e7d32;
72 | --color-nature-900: #1b5e20;
73 |
74 | /* Status colors */
75 | --color-danger: #ff3d00;
76 | --color-warning: #ffa000;
77 | --color-success: #00c853;
78 |
79 | /** Border tokens */
80 | --border-width-0: 0;
81 | --border-width-100: 1px;
82 | --border-width-200: 2px;
83 | --border-width-300: 3px;
84 | --border-width-400: 4px;
85 | --border-width-500: 8px;
86 |
87 | /** Border-radius tokens */
88 | --rounding-0: 0;
89 | --rounding-50: 0.25rem;
90 | --rounding-100: 0.5rem;
91 | --rounding-200: 1rem;
92 | --rounding-300: 2rem;
93 | --rounding-400: 4rem;
94 | --rounding-500: 8rem;
95 | --rounding-1000: 100%;
96 |
97 | /** Animation duration */
98 | --anim-dur-100: 0.1s;
99 | --anim-dur-200: 0.2s;
100 | --anim-dur-300: 0.3s;
101 | --anim-dur-400: 0.6s;
102 |
103 | /** Animation easing */
104 | --anim-easing-100: ease-in-out;
105 |
106 | /** Shared component tokens */
107 | --card-width: 11.25rem;
108 | --card-height: 17.5rem;
109 |
110 | /** Font family tokens */
111 | --font-primary: 'Merriweather Sans', sans-serif;
112 | --font-secondary: 'Suez One', serif;
113 |
114 | /** Z-index tokens */
115 | --z-index-0: 0;
116 | --z-index-100: 10;
117 | --z-index-200: 20;
118 | --z-index-300: 30;
119 | --z-index-400: 40;
120 | --z-index-500: 50;
121 | --z-index-600: 60;
122 | --z-index-700: 70;
123 | --z-index-800: 80;
124 | --z-index-900: 90;
125 | --z-index-1000: 100;
126 |
127 | /** Box shadow tokens */
128 | --shadow-100: 0 var(--border-width-100) var(--border-width-300) var(--color-shadow-100);
129 | --shadow-500: 0 var(--border-width-100) var(--border-width-300) var(--color-shadow-500);
130 | --shadow-900: 0 var(--border-width-100) var(--border-width-300) var(--color-shadow-900);
131 |
132 | /** Clip path tokens */
133 | --clip-path-banner: polygon(0% 0%, 100% 0%, 97% 50%, 100% 100%, 0% 100%, 3% 50%);
134 | }
135 |
136 | * {
137 | box-sizing: border-box;
138 | }
139 |
140 | [hidden] {
141 | display: none !important;
142 | }
143 |
144 | html {
145 | font-family: var(--font-primary);
146 | }
147 |
148 | body,
149 | button,
150 | .dagger-cursor-override {
151 | cursor: url('./images/dagger.png'), auto;
152 | }
153 |
--------------------------------------------------------------------------------
/src/helpers/array.ts:
--------------------------------------------------------------------------------
1 | /** Determines whether an array is empty */
2 | export function isEmpty(arr: Array