@jonelhatwell/arcade-games 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -0
- package/components.json +21 -0
- package/dist/index.cjs +189 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +835 -0
- package/dist/index.css.map +1 -0
- package/dist/index.js +161 -0
- package/dist/index.js.map +1 -0
- package/eslint.config.js +23 -0
- package/package.json +53 -0
- package/postcss.config.mjs +5 -0
- package/public/vite.svg +1 -0
- package/src/components/games/spacedodger/index.tsx +135 -0
- package/src/components/ui/button.tsx +62 -0
- package/src/components/ui/card.tsx +92 -0
- package/src/index.css +123 -0
- package/src/index.ts +3 -0
- package/src/lib/utils.ts +6 -0
- package/src/types/globals.d.ts +1 -0
- package/tailwind.config.ts +7 -0
- package/tsconfig.json +15 -0
- package/tsup.config.ts +17 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.css"],"sourcesContent":["/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-600: oklch(44.6% 0.03 256.802);\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .\\@container\\/card-header {\n container-type: inline-size;\n container-name: card-header;\n }\n .col-start-2 {\n grid-column-start: 2;\n }\n .row-span-2 {\n grid-row: span 2 / span 2;\n }\n .row-start-1 {\n grid-row-start: 1;\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline-flex {\n display: inline-flex;\n }\n .size-8 {\n width: calc(var(--spacing) * 8);\n height: calc(var(--spacing) * 8);\n }\n .size-9 {\n width: calc(var(--spacing) * 9);\n height: calc(var(--spacing) * 9);\n }\n .size-10 {\n width: calc(var(--spacing) * 10);\n height: calc(var(--spacing) * 10);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .auto-rows-min {\n grid-auto-rows: min-content;\n }\n .grid-rows-\\[auto_auto\\] {\n grid-template-rows: auto auto;\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-center {\n justify-content: center;\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .self-start {\n align-self: flex-start;\n }\n .justify-self-end {\n justify-self: flex-end;\n }\n .rounded-md {\n border-radius: calc(var(--radius) - 2px);\n }\n .rounded-xl {\n border-radius: calc(var(--radius) + 4px);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .bg-background {\n background-color: var(--background);\n }\n .bg-card {\n background-color: var(--card);\n }\n .bg-destructive {\n background-color: var(--destructive);\n }\n .bg-primary {\n background-color: var(--primary);\n }\n .bg-secondary {\n background-color: var(--secondary);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n .text-center {\n text-align: center;\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-card-foreground {\n color: var(--card-foreground);\n }\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n .text-muted-foreground {\n color: var(--muted-foreground);\n }\n .text-primary {\n color: var(--primary);\n }\n .text-primary-foreground {\n color: var(--primary-foreground);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-secondary-foreground {\n color: var(--secondary-foreground);\n }\n .text-white {\n color: var(--color-white);\n }\n .underline-offset-4 {\n text-underline-offset: 4px;\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .hover\\:bg-accent {\n &:hover {\n @media (hover: hover) {\n background-color: var(--accent);\n }\n }\n }\n .hover\\:bg-destructive\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-primary\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--primary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--secondary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:text-accent-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--accent-foreground);\n }\n }\n }\n .hover\\:underline {\n &:hover {\n @media (hover: hover) {\n text-decoration-line: underline;\n }\n }\n }\n .focus-visible\\:border-ring {\n &:focus-visible {\n border-color: var(--ring);\n }\n }\n .focus-visible\\:ring-\\[3px\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-destructive\\/20 {\n &:focus-visible {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n }\n .focus-visible\\:ring-ring\\/50 {\n &:focus-visible {\n --tw-ring-color: var(--ring);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n }\n .disabled\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .has-data-\\[slot\\=card-action\\]\\:grid-cols-\\[1fr_auto\\] {\n &:has(*[data-slot=\"card-action\"]) {\n grid-template-columns: 1fr auto;\n }\n }\n .has-\\[\\>svg\\]\\:px-2\\.5 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n }\n .has-\\[\\>svg\\]\\:px-3 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 3);\n }\n }\n .has-\\[\\>svg\\]\\:px-4 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 4);\n }\n }\n .aria-invalid\\:border-destructive {\n &[aria-invalid=\"true\"] {\n border-color: var(--destructive);\n }\n }\n .aria-invalid\\:ring-destructive\\/20 {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n }\n .dark\\:border-input {\n &:is(.dark *) {\n border-color: var(--input);\n }\n }\n .dark\\:bg-destructive\\/60 {\n &:is(.dark *) {\n background-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--destructive) 60%, transparent);\n }\n }\n }\n .dark\\:bg-input\\/30 {\n &:is(.dark *) {\n background-color: var(--input);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--input) 30%, transparent);\n }\n }\n }\n .dark\\:hover\\:bg-accent\\/50 {\n &:is(.dark *) {\n &:hover {\n @media (hover: hover) {\n background-color: var(--accent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--accent) 50%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-input\\/50 {\n &:is(.dark *) {\n &:hover {\n @media (hover: hover) {\n background-color: var(--input);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--input) 50%, transparent);\n }\n }\n }\n }\n }\n .dark\\:focus-visible\\:ring-destructive\\/40 {\n &:is(.dark *) {\n &:focus-visible {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n }\n }\n .dark\\:aria-invalid\\:ring-destructive\\/40 {\n &:is(.dark *) {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n }\n }\n .\\[\\&_svg\\]\\:pointer-events-none {\n & svg {\n pointer-events: none;\n }\n }\n .\\[\\&_svg\\]\\:shrink-0 {\n & svg {\n flex-shrink: 0;\n }\n }\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n & svg:not([class*='size-']) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n }\n .\\[\\.border-b\\]\\:pb-6 {\n &:is(.border-b) {\n padding-bottom: calc(var(--spacing) * 6);\n }\n }\n .\\[\\.border-t\\]\\:pt-6 {\n &:is(.border-t) {\n padding-top: calc(var(--spacing) * 6);\n }\n }\n}\n@property --tw-animation-delay {\n syntax: \"*\";\n inherits: false;\n initial-value: 0s;\n}\n@property --tw-animation-direction {\n syntax: \"*\";\n inherits: false;\n initial-value: normal;\n}\n@property --tw-animation-duration {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-animation-fill-mode {\n syntax: \"*\";\n inherits: false;\n initial-value: none;\n}\n@property --tw-animation-iteration-count {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-enter-blur {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-enter-opacity {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-enter-rotate {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-enter-scale {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-enter-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-enter-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-exit-blur {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-exit-opacity {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-exit-rotate {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-exit-scale {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-exit-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-exit-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n --radius: 0.625rem;\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.145 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.145 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.985 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.396 0.141 25.723);\n --destructive-foreground: oklch(0.637 0.237 25.331);\n --border: oklch(0.269 0 0);\n --input: oklch(0.269 0 0);\n --ring: oklch(0.439 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(0.269 0 0);\n --sidebar-ring: oklch(0.439 0 0);\n}\n@layer base {\n * {\n border-color: var(--border);\n outline-color: var(--ring);\n @supports (color: color-mix(in lab, red, red)) {\n outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n body {\n background-color: var(--background);\n color: var(--foreground);\n }\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-animation-delay: 0s;\n --tw-animation-direction: normal;\n --tw-animation-duration: initial;\n --tw-animation-fill-mode: none;\n --tw-animation-iteration-count: 1;\n --tw-enter-blur: 0;\n --tw-enter-opacity: 1;\n --tw-enter-rotate: 0;\n --tw-enter-scale: 1;\n --tw-enter-translate-x: 0;\n --tw-enter-translate-y: 0;\n --tw-exit-blur: 0;\n --tw-exit-opacity: 1;\n --tw-exit-rotate: 0;\n --tw-exit-scale: 1;\n --tw-exit-translate-x: 0;\n --tw-exit-translate-y: 0;\n }\n }\n}"],"mappings":";AACA;AACA;AACA;AACE;AAAA,EAAO;AACL;AAAA,MAAa,aAAa;AAAA,MAAE,SAAS;AAAA,MAAE,UAAU;AAAA,MAAE,mBAAmB;AAAA,MACpE,gBAAgB;AAAA,MAAE,iBAAiB;AAAA,MAAE;AACvC;AAAA,MAAa,YAAY;AAAA,MAAE,cAAc;AAAA,MAAE,KAAK;AAAA,MAAE,MAAM;AAAA,MAAE,QAAQ;AAAA,MAAE,iBAAiB;AAAA,MACnF,aAAa;AAAA,MAAE;AACjB,qBAAiB,MAAM,MAAM,MAAM;AACnC,sBAAkB,MAAM,MAAM,KAAK;AACnC,sBAAkB,MAAM,MAAM,KAAK;AACnC,mBAAe;AACf,eAAW;AACX,eAAW;AACX,4BAAwB,KAAK,KAAK,EAAE;AACpC,eAAW;AACX,4BAAwB,KAAK,KAAK,EAAE;AACpC,0BAAsB;AACtB,4BAAwB;AACxB,wBAAoB;AACpB,mCAA+B;AAC/B,0CAAsC,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AAChE,2BAAuB,IAAI;AAC3B,gCAA4B,IAAI;AAClC;AACF;AACA;AACE;AAAA,EAAG;AAAA,EAAS;AAAA,EAAU;AAAA,EAAY;AAChC,gBAAY;AACZ,YAAQ;AACR,aAAS;AACT,YAAQ,EAAE;AACZ;AACA;AAAA,EAAM;AACJ,iBAAa;AACb,8BAA0B;AAC1B,cAAU;AACV,iBAAa,IAAI,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE;AACxI,2BAAuB,IAAI,+BAA+B,EAAE;AAC5D,6BAAyB,IAAI,iCAAiC,EAAE;AAChE,iCAA6B;AAC/B;AACA;AACE,YAAQ;AACR,WAAO;AACP,sBAAkB;AACpB;AACA,MAAI,OAAO,CAAC;AACV,6BAAyB,UAAU;AACnC,qBAAiB,UAAU;AAC7B;AACA;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAClB,eAAW;AACX,iBAAa;AACf;AACA;AACE,WAAO;AACP,6BAAyB;AACzB,qBAAiB;AACnB;AACA;AAAA,EAAG;AACD,iBAAa;AACf;AACA;AAAA,EAAM;AAAA,EAAK;AAAA,EAAM;AACf,iBAAa,IAAI,0BAA0B,EAAE,YAAY,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,aAAa,EAAE;AACtI,2BAAuB,IAAI,oCAAoC,EAAE;AACjE,6BAAyB,IAAI,sCAAsC,EAAE;AACrE,eAAW;AACb;AACA;AACE,eAAW;AACb;AACA;AAAA,EAAK;AACH,eAAW;AACX,iBAAa;AACb,cAAU;AACV,oBAAgB;AAClB;AACA;AACE,YAAQ;AACV;AACA;AACE,SAAK;AACP;AACA;AACE,iBAAa;AACb,kBAAc;AACd,qBAAiB;AACnB;AACA;AACE,aAAS;AACX;AACA;AACE,oBAAgB;AAClB;AACA;AACE,aAAS;AACX;AACA;AAAA,EAAI;AAAA,EAAI;AACN,gBAAY;AACd;AACA;AAAA,EAAK;AAAA,EAAK;AAAA,EAAO;AAAA,EAAQ;AAAA,EAAO;AAAA,EAAQ;AAAA,EAAO;AAC7C,aAAS;AACT,oBAAgB;AAClB;AACA;AAAA,EAAK;AACH,eAAW;AACX,YAAQ;AACV;AACA;AAAA,EAAQ;AAAA,EAAO;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAU;AACzC,UAAM;AACN,2BAAuB;AACvB,6BAAyB;AACzB,oBAAgB;AAChB,WAAO;AACP,mBAAe;AACf,sBAAkB;AAClB,aAAS;AACX;AACA,SAAO,MAAM,IAAI,CAAC,WAAW,CAAC,QAAQ;AACpC,iBAAa;AACf;AACA,SAAO,MAAM,IAAI,CAAC,WAAW,CAAC,QAAQ,SAAS;AAC7C,0BAAsB;AACxB;AACA;AACE,uBAAmB;AACrB;AACA;AACE,aAAS;AACX;AACA,YAAU,CAAC,IAAI,CAAC,kBAAkB,EAAE,oBAAqB,GAAG,CAAC,sBAAsB,EAAE;AACnF;AACE,aAAO;AACP,gBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,eAAO,UAAU,GAAG,KAAK,EAAE,aAAa,GAAG,EAAE;AAC/C;AACF;AACF;AACA;AACE,YAAQ;AACV;AACA;AACE,wBAAoB;AACtB;AACA;AACE,gBAAY;AACZ,gBAAY;AACd;AACA;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACA;AAAA,EAAyB;AAAA,EAAoC;AAAA,EAAqC;AAAA,EAAmC;AAAA,EAAoC;AAAA,EAAsC;AAAA,EAAsC;AAAA,EAA2C;AAC9R,mBAAe;AACjB;AACA;AACE,iBAAa;AACf;AACA;AACE,gBAAY;AACd;AACA;AAAA,EAAQ,KAAK,OAAO,CAAC,cAAgB,CAAC,aAAe,CAAC;AAAA,EAAiB;AACrE,gBAAY;AACd;AACA;AAAA,EAA6B;AAC3B,YAAQ;AACV;AACA,GAAC,OAAO,OAAO,KAAK,CAAC;AACnB,aAAS;AACX;AACF;AACA;AACE,GAAC;AACC,oBAAgB;AAChB,oBAAgB;AAClB;AACA,GAAC;AACC,uBAAmB;AACrB;AACA,GAAC;AACC,cAAU,KAAK,EAAE,EAAE,KAAK;AAC1B;AACA,GAAC;AACC,oBAAgB;AAClB;AACA,GAAC;AACC,mBAAe,KAAK,IAAI,WAAW,EAAE;AACvC;AACA,GAAC;AACC,aAAS;AACX;AACA,GAAC;AACC,aAAS;AACX;AACA,GAAC;AACC,aAAS;AACX;AACA,GAAC;AACC,WAAO,KAAK,IAAI,WAAW,EAAE;AAC7B,YAAQ,KAAK,IAAI,WAAW,EAAE;AAChC;AACA,GAAC;AACC,WAAO,KAAK,IAAI,WAAW,EAAE;AAC7B,YAAQ,KAAK,IAAI,WAAW,EAAE;AAChC;AACA,GAAC;AACC,WAAO,KAAK,IAAI,WAAW,EAAE;AAC7B,YAAQ,KAAK,IAAI,WAAW,EAAE;AAChC;AACA,GAAC;AACC,YAAQ,KAAK,IAAI,WAAW,EAAE;AAChC;AACA,GAAC;AACC,YAAQ,KAAK,IAAI,WAAW,EAAE;AAChC;AACA,GAAC;AACC,YAAQ,KAAK,IAAI,WAAW,EAAE;AAChC;AACA,GAAC;AACC,iBAAa;AACf;AACA,GAAC;AACC,oBAAgB;AAClB;AACA,GAAC;AACC,wBAAoB,KAAK;AAC3B;AACA,GAAC;AACC,oBAAgB;AAClB;AACA,GAAC;AACC,iBAAa;AACf;AACA,GAAC;AACC,iBAAa;AACf;AACA,GAAC;AACC,qBAAiB;AACnB;AACA,GAAC;AACC,SAAK,KAAK,IAAI,WAAW,EAAE;AAC7B;AACA,GAAC;AACC,SAAK,KAAK,IAAI,WAAW,EAAE;AAC7B;AACA,GAAC;AACC,SAAK,KAAK,IAAI,WAAW,EAAE;AAC7B;AACA,GAAC;AACC,SAAK,KAAK,IAAI,WAAW,EAAE;AAC7B;AACA,GAAC;AACC,gBAAY;AACd;AACA,GAAC;AACC,kBAAc;AAChB;AACA,GAAC;AACC,mBAAe,KAAK,IAAI,UAAU,EAAE;AACtC;AACA,GAAC;AACC,mBAAe,KAAK,IAAI,UAAU,EAAE;AACtC;AACA,GAAC;AACC,kBAAc,IAAI;AAClB,kBAAc;AAChB;AACA,GAAC;AACC,kBAAc,IAAI;AAClB,kBAAc;AAChB;AACA,GAAC;AACC,kBAAc,IAAI;AACpB;AACA,GAAC;AACC,sBAAkB,IAAI;AACxB;AACA,GAAC;AACC,sBAAkB,IAAI;AACxB;AACA,GAAC;AACC,sBAAkB,IAAI;AACxB;AACA,GAAC;AACC,sBAAkB,IAAI;AACxB;AACA,GAAC;AACC,sBAAkB,IAAI;AACxB;AACA,GAAC;AACC,aAAS,KAAK,IAAI,WAAW,EAAE;AACjC;AACA,GAAC;AACC,oBAAgB,KAAK,IAAI,WAAW,EAAE;AACxC;AACA,GAAC;AACC,oBAAgB,KAAK,IAAI,WAAW,EAAE;AACxC;AACA,GAAC;AACC,oBAAgB,KAAK,IAAI,WAAW,EAAE;AACxC;AACA,GAAC;AACC,mBAAe,KAAK,IAAI,WAAW,EAAE;AACvC;AACA,GAAC;AACC,mBAAe,KAAK,IAAI,WAAW,EAAE;AACvC;AACA,GAAC;AACC,gBAAY;AACd;AACA,GAAC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI,YAAY,EAAE,IAAI;AACrC;AACA,GAAC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI,YAAY,EAAE,IAAI;AACrC;AACA,GAAC;AACC,kBAAc;AACd,iBAAa;AACf;AACA,GAAC;AACC,sBAAkB,IAAI;AACtB,iBAAa,IAAI;AACnB;AACA,GAAC;AACC,sBAAkB,IAAI;AACtB,iBAAa,IAAI;AACnB;AACA,GAAC;AACC,sBAAkB,IAAI;AACtB,iBAAa,IAAI;AACnB;AACA,GAAC;AACC,iBAAa;AACf;AACA,GAAC;AACC,WAAO,IAAI;AACb;AACA,GAAC;AACC,WAAO,IAAI;AACb;AACA,GAAC;AACC,WAAO,IAAI;AACb;AACA,GAAC;AACC,WAAO,IAAI;AACb;AACA,GAAC;AACC,WAAO,IAAI;AACb;AACA,GAAC;AACC,WAAO,IAAI;AACb;AACA,GAAC;AACC,WAAO,IAAI;AACb;AACA,GAAC;AACC,WAAO,IAAI;AACb;AACA,GAAC;AACC,2BAAuB;AACzB;AACA,GAAC;AACC,iBAAa,EAAE,IAAI,IAAI,EAAE,IAAI,iBAAiB,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,IAAI,KAAK,IAAI,iBAAiB,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;AACrH;AAAA,MAAY,IAAI,kBAAkB;AAAA,MAAE,IAAI,uBAAuB;AAAA,MAAE,IAAI,wBAAwB;AAAA,MAAE,IAAI,iBAAiB;AAAA,MAAE,IAAI;AAC5H;AACA,GAAC;AACC,iBAAa,EAAE,IAAI,IAAI,EAAE,IAAI,iBAAiB,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;AAC5D;AAAA,MAAY,IAAI,kBAAkB;AAAA,MAAE,IAAI,uBAAuB;AAAA,MAAE,IAAI,wBAAwB;AAAA,MAAE,IAAI,iBAAiB;AAAA,MAAE,IAAI;AAC5H;AACA,GAAC;AACC,mBAAe,IAAI;AACnB,mBAAe;AACjB;AACA,GAAC;AACC,yBAAqB;AACrB,gCAA4B,IAAI,SAAS,EAAE,IAAI;AAC/C,yBAAqB,IAAI,aAAa,EAAE,IAAI;AAC9C;AACA,GAAC;AACC,wBAAoB;AACpB,mBAAe;AACjB;AACA,GAAC;AACC,KAAC;AACC,cAAO,OAAQ;AACb,0BAAkB,IAAI;AACxB;AACF;AACF;AACA,GAAC;AACC,KAAC;AACC,cAAO,OAAQ;AACb,0BAAkB,IAAI;AACtB,kBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,4BAAkB,UAAU,GAAG,KAAK,EAAE,IAAI,eAAe,GAAG,EAAE;AAChE;AACF;AACF;AACF;AACA,GAAC;AACC,KAAC;AACC,cAAO,OAAQ;AACb,0BAAkB,IAAI;AACtB,kBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,4BAAkB,UAAU,GAAG,KAAK,EAAE,IAAI,WAAW,GAAG,EAAE;AAC5D;AACF;AACF;AACF;AACA,GAAC;AACC,KAAC;AACC,cAAO,OAAQ;AACb,0BAAkB,IAAI;AACtB,kBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,4BAAkB,UAAU,GAAG,KAAK,EAAE,IAAI,aAAa,GAAG,EAAE;AAC9D;AACF;AACF;AACF;AACA,GAAC;AACC,KAAC;AACC,cAAO,OAAQ;AACb,eAAO,IAAI;AACb;AACF;AACF;AACA,GAAC;AACC,KAAC;AACC,cAAO,OAAQ;AACb,8BAAsB;AACxB;AACF;AACF;AACA,GAAC;AACC,KAAC;AACC,oBAAc,IAAI;AACpB;AACF;AACA,GAAC;AACC,KAAC;AACC,wBAAkB,IAAI,eAAe,GAAG,EAAE,EAAE,EAAE,KAAK,IAAI,EAAE,IAAI,yBAAyB,IAAI,eAAe,EAAE;AAC3G;AAAA,QAAY,IAAI,kBAAkB;AAAA,QAAE,IAAI,uBAAuB;AAAA,QAAE,IAAI,wBAAwB;AAAA,QAAE,IAAI,iBAAiB;AAAA,QAAE,IAAI;AAC5H;AACF;AACA,GAAC;AACC,KAAC;AACC,uBAAiB,IAAI;AACrB,gBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,yBAAiB,UAAU,GAAG,KAAK,EAAE,IAAI,eAAe,GAAG,EAAE;AAC/D;AACF;AACF;AACA,GAAC;AACC,KAAC;AACC,uBAAiB,IAAI;AACrB,gBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,yBAAiB,UAAU,GAAG,KAAK,EAAE,IAAI,QAAQ,GAAG,EAAE;AACxD;AACF;AACF;AACA,GAAC;AACC,KAAC;AACC,sBAAgB;AAClB;AACF;AACA,GAAC;AACC,KAAC;AACC,eAAS;AACX;AACF;AACA,GAAC;AACC,KAAC,KAAK,CAAC,CAAC;AACN,6BAAuB,IAAI;AAC7B;AACF;AACA,GAAC;AACC,KAAC,KAAK,EAAC;AACL,sBAAgB,KAAK,IAAI,WAAW,EAAE;AACxC;AACF;AACA,GAAC;AACC,KAAC,KAAK,EAAC;AACL,sBAAgB,KAAK,IAAI,WAAW,EAAE;AACxC;AACF;AACA,GAAC;AACC,KAAC,KAAK,EAAC;AACL,sBAAgB,KAAK,IAAI,WAAW,EAAE;AACxC;AACF;AACA,GAAC;AACC,KAAC,CAAC;AACA,oBAAc,IAAI;AACpB;AACF;AACA,GAAC;AACC,KAAC,CAAC;AACA,uBAAiB,IAAI;AACrB,gBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,yBAAiB,UAAU,GAAG,KAAK,EAAE,IAAI,eAAe,GAAG,EAAE;AAC/D;AACF;AACF;AACA,GAAC;AACC,KAAC,IAAI,CAAC,KAAK;AACT,oBAAc,IAAI;AACpB;AACF;AACA,GAAC;AACC,KAAC,IAAI,CALC,KAKK;AACT,wBAAkB,IAAI;AACtB,gBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,0BAAkB,UAAU,GAAG,KAAK,EAAE,IAAI,eAAe,GAAG,EAAE;AAChE;AACF;AACF;AACA,GAAC;AACC,KAAC,IAAI,CAbC,KAaK;AACT,wBAAkB,IAAI;AACtB,gBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,0BAAkB,UAAU,GAAG,KAAK,EAAE,IAAI,SAAS,GAAG,EAAE;AAC1D;AACF;AACF;AACA,GAAC;AACC,KAAC,IAAI,CArBC,KAqBK;AACT,OAAC;AACC,gBAAO,OAAQ;AACb,4BAAkB,IAAI;AACtB,oBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,8BAAkB,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AAC3D;AACF;AACF;AACF;AACF;AACA,GAAC;AACC,KAAC,IAAI,CAjCC,KAiCK;AACT,OAAC;AACC,gBAAO,OAAQ;AACb,4BAAkB,IAAI;AACtB,oBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,8BAAkB,UAAU,GAAG,KAAK,EAAE,IAAI,SAAS,GAAG,EAAE;AAC1D;AACF;AACF;AACF;AACF;AACA,GAAC;AACC,KAAC,IAAI,CA7CC,KA6CK;AACT,OAAC;AACC,yBAAiB,IAAI;AACrB,kBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,2BAAiB,UAAU,GAAG,KAAK,EAAE,IAAI,eAAe,GAAG,EAAE;AAC/D;AACF;AACF;AACF;AACA,GAAC;AACC,KAAC,IAAI,CAvDC,KAuDK;AACT,OAAC,CAAC;AACA,yBAAiB,IAAI;AACrB,kBAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,2BAAiB,UAAU,GAAG,KAAK,EAAE,IAAI,eAAe,GAAG,EAAE;AAC/D;AACF;AACF;AACF;AACA,GAAC;AACC,MAAE;AACA,sBAAgB;AAClB;AACF;AACA,GAAC;AACC,MAAE;AACA,mBAAa;AACf;AACF;AACA,GAAC;AACC,MAAE,GAAG,KAAK,CAAC;AACT,aAAO,KAAK,IAAI,WAAW,EAAE;AAC7B,cAAQ,KAAK,IAAI,WAAW,EAAE;AAChC;AACF;AACA,GAAC;AACC,KAAC,IAAI,CAAC;AACJ,sBAAgB,KAAK,IAAI,WAAW,EAAE;AACxC;AACF;AACA,GAAC;AACC,KAAC,IAAI,CAAC;AACJ,mBAAa,KAAK,IAAI,WAAW,EAAE;AACrC;AACF;AACF;AACA,UAAU,qBAAqB,EAC7B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,EAAE;AAEnB,UAAU,yBAAyB,EACjC,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,MAAM;AAEvB,UAAU,wBAAwB,EAChC,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK;AAEjB,UAAU,yBAAyB,EACjC,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,IAAI;AAErB,UAAU,+BAA+B,EACvC,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,gBAAgB,EACxB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,mBAAmB,EAC3B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,kBAAkB,EAC1B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,iBAAiB,EACzB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,uBAAuB,EAC/B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,uBAAuB,EAC/B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,eAAe,EACvB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,kBAAkB,EAC1B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,iBAAiB,EACzB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,gBAAgB,EACxB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,sBAAsB,EAC9B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB,UAAU,sBAAsB,EAC9B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,CAAC;AAElB;AACE,gBAAc,MAAM,EAAE,EAAE;AACxB,gBAAc,MAAM,MAAM,EAAE;AAC5B,UAAQ,MAAM,EAAE,EAAE;AAClB,qBAAmB,MAAM,MAAM,EAAE;AACjC,aAAW,MAAM,EAAE,EAAE;AACrB,wBAAsB,MAAM,MAAM,EAAE;AACpC,aAAW,MAAM,MAAM,EAAE;AACzB,wBAAsB,MAAM,MAAM,EAAE;AACpC,eAAa,MAAM,KAAK,EAAE;AAC1B,0BAAwB,MAAM,MAAM,EAAE;AACtC,WAAS,MAAM,KAAK,EAAE;AACtB,sBAAoB,MAAM,MAAM,EAAE;AAClC,YAAU,MAAM,KAAK,EAAE;AACvB,uBAAqB,MAAM,MAAM,EAAE;AACnC,iBAAe,MAAM,MAAM,MAAM;AACjC,4BAA0B,MAAM,MAAM,MAAM;AAC5C,YAAU,MAAM,MAAM,EAAE;AACxB,WAAS,MAAM,MAAM,EAAE;AACvB,UAAQ,MAAM,MAAM,EAAE;AACtB,aAAW,MAAM,MAAM,MAAM;AAC7B,aAAW,MAAM,IAAI,MAAM;AAC3B,aAAW,MAAM,MAAM,KAAK;AAC5B,aAAW,MAAM,MAAM,MAAM;AAC7B,aAAW,MAAM,MAAM,MAAM;AAC7B,YAAU;AACV,aAAW,MAAM,MAAM,EAAE;AACzB,wBAAsB,MAAM,MAAM,EAAE;AACpC,qBAAmB,MAAM,MAAM,EAAE;AACjC,gCAA8B,MAAM,MAAM,EAAE;AAC5C,oBAAkB,MAAM,KAAK,EAAE;AAC/B,+BAA6B,MAAM,MAAM,EAAE;AAC3C,oBAAkB,MAAM,MAAM,EAAE;AAChC,kBAAgB,MAAM,MAAM,EAAE;AAChC;AACA,CAlNU;AAmNR,gBAAc,MAAM,MAAM,EAAE;AAC5B,gBAAc,MAAM,MAAM,EAAE;AAC5B,UAAQ,MAAM,MAAM,EAAE;AACtB,qBAAmB,MAAM,MAAM,EAAE;AACjC,aAAW,MAAM,MAAM,EAAE;AACzB,wBAAsB,MAAM,MAAM,EAAE;AACpC,aAAW,MAAM,MAAM,EAAE;AACzB,wBAAsB,MAAM,MAAM,EAAE;AACpC,eAAa,MAAM,MAAM,EAAE;AAC3B,0BAAwB,MAAM,MAAM,EAAE;AACtC,WAAS,MAAM,MAAM,EAAE;AACvB,sBAAoB,MAAM,MAAM,EAAE;AAClC,YAAU,MAAM,MAAM,EAAE;AACxB,uBAAqB,MAAM,MAAM,EAAE;AACnC,iBAAe,MAAM,MAAM,MAAM;AACjC,4BAA0B,MAAM,MAAM,MAAM;AAC5C,YAAU,MAAM,MAAM,EAAE;AACxB,WAAS,MAAM,MAAM,EAAE;AACvB,UAAQ,MAAM,MAAM,EAAE;AACtB,aAAW,MAAM,MAAM,MAAM;AAC7B,aAAW,MAAM,MAAM,KAAK;AAC5B,aAAW,MAAM,MAAM,MAAM;AAC7B,aAAW,MAAM,MAAM,MAAM;AAC7B,aAAW,MAAM,MAAM,MAAM;AAC7B,aAAW,MAAM,MAAM,EAAE;AACzB,wBAAsB,MAAM,MAAM,EAAE;AACpC,qBAAmB,MAAM,MAAM,MAAM;AACrC,gCAA8B,MAAM,MAAM,EAAE;AAC5C,oBAAkB,MAAM,MAAM,EAAE;AAChC,+BAA6B,MAAM,MAAM,EAAE;AAC3C,oBAAkB,MAAM,MAAM,EAAE;AAChC,kBAAgB,MAAM,MAAM,EAAE;AAChC;AACA;AACE;AACE,kBAAc,IAAI;AAClB,mBAAe,IAAI;AACnB,cAAU,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE,GAAG,EAAE;AACvC,qBAAe,UAAU,GAAG,KAAK,EAAE,IAAI,QAAQ,GAAG,EAAE;AACtD;AACF;AACA;AACE,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACb;AACF;AACA,UAAU,kBAAkB,EAC1B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,KAAK;AAEtB,UAAU,aAAa,EACrB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK;AAEjB,UAAU,iBAAiB,EACzB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK;AAEjB,UAAU,YAAY,EACpB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,EAAE,EAAE,KAAK;AAE1B,UAAU,kBAAkB,EAC1B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK;AAEjB,UAAU,kBAAkB,EAC1B,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,IAAI;AAErB,UAAU,kBAAkB,EAC1B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,EAAE,EAAE,KAAK;AAE1B,UAAU,wBAAwB,EAChC,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK;AAEjB,UAAU,wBAAwB,EAChC,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,IAAI;AAErB,UAAU,gBAAgB,EACxB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK;AAEjB,UAAU,iBAAiB,EACzB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,EAAE,EAAE,KAAK;AAE1B,UAAU,sBAAsB,EAC9B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK;AAEjB,UAAU,uBAAuB,EAC/B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,EAAE,EAAE,KAAK;AAE1B,UAAU,gBAAgB,EACxB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK;AAEjB,UAAU,uBAAuB,EAC/B,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,GAAG;AAEpB,UAAU,uBAAuB,EAC/B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,IAAI;AAErB,UAAU,wBAAwB,EAChC,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,EAAE,EAAE,KAAK;AAE1B,UAAU,mBAAmB,EAC3B,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,KAAK;AAEtB;AACE,YAAU,CAAC,CAAC,eAAe,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,CAAC,CAAC,WAAW,EAAE,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE,EAAE;AAC7H;AAAA,IAAG;AAAA,IAAU;AAAA,IAAS;AACpB,yBAAmB;AACnB,oBAAc;AACd,wBAAkB;AAClB,mBAAa,EAAE,EAAE;AACjB,yBAAmB;AACnB,yBAAmB;AACnB,yBAAmB,EAAE,EAAE;AACvB,+BAAyB;AACzB,+BAAyB;AACzB,uBAAiB;AACjB,wBAAkB,EAAE,EAAE;AACtB,6BAAuB;AACvB,8BAAwB,EAAE,EAAE;AAC5B,uBAAiB;AACjB,8BAAwB;AACxB,8BAAwB;AACxB,+BAAyB,EAAE,EAAE;AAC7B,0BAAoB;AACpB,4BAAsB;AACtB,gCAA0B;AAC1B,+BAAyB;AACzB,gCAA0B;AAC1B,sCAAgC;AAChC,uBAAiB;AACjB,0BAAoB;AACpB,yBAAmB;AACnB,wBAAkB;AAClB,8BAAwB;AACxB,8BAAwB;AACxB,sBAAgB;AAChB,yBAAmB;AACnB,wBAAkB;AAClB,uBAAiB;AACjB,6BAAuB;AACvB,6BAAuB;AACzB;AACF;AACF;","names":[]}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
// src/components/ui/button.tsx
|
|
2
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
|
|
5
|
+
// src/lib/utils.ts
|
|
6
|
+
import { clsx } from "clsx";
|
|
7
|
+
import { twMerge } from "tailwind-merge";
|
|
8
|
+
function cn(...inputs) {
|
|
9
|
+
return twMerge(clsx(inputs));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// src/components/ui/button.tsx
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var buttonVariants = cva(
|
|
15
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
16
|
+
{
|
|
17
|
+
variants: {
|
|
18
|
+
variant: {
|
|
19
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
20
|
+
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
21
|
+
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
22
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
23
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
24
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
25
|
+
},
|
|
26
|
+
size: {
|
|
27
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
28
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
29
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
30
|
+
icon: "size-9",
|
|
31
|
+
"icon-sm": "size-8",
|
|
32
|
+
"icon-lg": "size-10"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
variant: "default",
|
|
37
|
+
size: "default"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
function Button({
|
|
42
|
+
className,
|
|
43
|
+
variant = "default",
|
|
44
|
+
size = "default",
|
|
45
|
+
asChild = false,
|
|
46
|
+
...props
|
|
47
|
+
}) {
|
|
48
|
+
const Comp = asChild ? Slot : "button";
|
|
49
|
+
return /* @__PURE__ */ jsx(
|
|
50
|
+
Comp,
|
|
51
|
+
{
|
|
52
|
+
"data-slot": "button",
|
|
53
|
+
"data-variant": variant,
|
|
54
|
+
"data-size": size,
|
|
55
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
56
|
+
...props
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// src/components/games/test/index.tsx
|
|
62
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
63
|
+
var Test = () => {
|
|
64
|
+
return /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(Button, { variant: "outline", children: "Button" }) });
|
|
65
|
+
};
|
|
66
|
+
var test_default = Test;
|
|
67
|
+
|
|
68
|
+
// src/components/games/spacedodger/index.tsx
|
|
69
|
+
import { useState, useEffect, useRef } from "react";
|
|
70
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
71
|
+
var SpaceDodger = () => {
|
|
72
|
+
const canvasRef = useRef(null);
|
|
73
|
+
const [score, setScore] = useState(0);
|
|
74
|
+
const [gameOver, setGameOver] = useState(false);
|
|
75
|
+
const gameStateRef = useRef({
|
|
76
|
+
player: { x: 200, y: 350, width: 30, height: 30 },
|
|
77
|
+
enemies: [],
|
|
78
|
+
frame: 0,
|
|
79
|
+
keys: {}
|
|
80
|
+
});
|
|
81
|
+
const resetGame = () => {
|
|
82
|
+
gameStateRef.current = {
|
|
83
|
+
player: { x: 200, y: 350, width: 30, height: 30 },
|
|
84
|
+
enemies: [],
|
|
85
|
+
frame: 0,
|
|
86
|
+
keys: {}
|
|
87
|
+
};
|
|
88
|
+
setScore(0);
|
|
89
|
+
setGameOver(false);
|
|
90
|
+
};
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
const canvas = canvasRef.current;
|
|
93
|
+
if (!canvas) return;
|
|
94
|
+
const ctx = canvas.getContext("2d");
|
|
95
|
+
if (!ctx) return;
|
|
96
|
+
const state = gameStateRef.current;
|
|
97
|
+
const handleKeyDown = (e) => {
|
|
98
|
+
state.keys[e.key] = true;
|
|
99
|
+
};
|
|
100
|
+
const handleKeyUp = (e) => {
|
|
101
|
+
state.keys[e.key] = false;
|
|
102
|
+
};
|
|
103
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
104
|
+
window.addEventListener("keyup", handleKeyUp);
|
|
105
|
+
let animationId;
|
|
106
|
+
const gameLoop = () => {
|
|
107
|
+
if (gameOver) return;
|
|
108
|
+
state.frame++;
|
|
109
|
+
ctx.fillStyle = "#000";
|
|
110
|
+
ctx.fillRect(0, 0, 400, 400);
|
|
111
|
+
if (state.keys["ArrowLeft"] && state.player.x > 0) state.player.x -= 5;
|
|
112
|
+
if (state.keys["ArrowRight"] && state.player.x < 370) state.player.x += 5;
|
|
113
|
+
if (state.keys["ArrowUp"] && state.player.y > 0) state.player.y -= 5;
|
|
114
|
+
if (state.keys["ArrowDown"] && state.player.y < 370) state.player.y += 5;
|
|
115
|
+
ctx.fillStyle = "#0ea5e9";
|
|
116
|
+
ctx.fillRect(state.player.x, state.player.y, state.player.width, state.player.height);
|
|
117
|
+
if (state.frame % 40 === 0) {
|
|
118
|
+
state.enemies.push({ x: Math.random() * 370, y: -20, width: 30, height: 30 });
|
|
119
|
+
}
|
|
120
|
+
state.enemies = state.enemies.filter((enemy) => {
|
|
121
|
+
enemy.y += 3;
|
|
122
|
+
ctx.fillStyle = "#ef4444";
|
|
123
|
+
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
|
|
124
|
+
if (enemy.x < state.player.x + state.player.width && enemy.x + enemy.width > state.player.x && enemy.y < state.player.y + state.player.height && enemy.y + enemy.height > state.player.y) {
|
|
125
|
+
setGameOver(true);
|
|
126
|
+
return false;
|
|
127
|
+
}
|
|
128
|
+
if (enemy.y > 400) {
|
|
129
|
+
setScore((s) => s + 1);
|
|
130
|
+
return false;
|
|
131
|
+
}
|
|
132
|
+
return true;
|
|
133
|
+
});
|
|
134
|
+
animationId = requestAnimationFrame(gameLoop);
|
|
135
|
+
};
|
|
136
|
+
if (!gameOver) gameLoop();
|
|
137
|
+
return () => {
|
|
138
|
+
cancelAnimationFrame(animationId);
|
|
139
|
+
window.removeEventListener("keydown", handleKeyDown);
|
|
140
|
+
window.removeEventListener("keyup", handleKeyUp);
|
|
141
|
+
};
|
|
142
|
+
}, [gameOver]);
|
|
143
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 p-4", children: [
|
|
144
|
+
/* @__PURE__ */ jsxs("div", { className: "text-xl font-bold", children: [
|
|
145
|
+
"Score: ",
|
|
146
|
+
score
|
|
147
|
+
] }),
|
|
148
|
+
/* @__PURE__ */ jsx3("canvas", { ref: canvasRef, width: "400", height: "400", className: "border-2 border-gray-300" }),
|
|
149
|
+
gameOver && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
|
|
150
|
+
/* @__PURE__ */ jsx3("p", { className: "text-xl font-bold text-red-500 mb-2", children: "Game Over!" }),
|
|
151
|
+
/* @__PURE__ */ jsx3(Button, { onClick: resetGame, children: "Play Again" })
|
|
152
|
+
] }),
|
|
153
|
+
/* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600", children: "Use arrow keys to move" })
|
|
154
|
+
] });
|
|
155
|
+
};
|
|
156
|
+
var spacedodger_default = SpaceDodger;
|
|
157
|
+
export {
|
|
158
|
+
spacedodger_default as SpaceDodger,
|
|
159
|
+
test_default as Test
|
|
160
|
+
};
|
|
161
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ui/button.tsx","../src/lib/utils.ts","../src/components/games/test/index.tsx","../src/components/games/spacedodger/index.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n","import { clsx, type ClassValue } from \"clsx\"\r\nimport { twMerge } from \"tailwind-merge\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs))\r\n}","import { Button } from '@/components/ui/button'\r\n\r\nconst Test = () => {\r\n return (\r\n <div>\r\n <Button variant=\"outline\">Button</Button>\r\n </div>\r\n )\r\n}\r\n\r\nexport default Test","\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { Button } from '@/components/ui/button';\r\n\r\n\r\ninterface Position {\r\n x: number;\r\n y: number;\r\n}\r\n\r\n\r\ninterface Enemy extends Position {\r\n width: number;\r\n height: number;\r\n}\r\n\r\ninterface Player extends Position {\r\n width: number;\r\n height: number;\r\n}\r\n\r\n\r\ninterface SpaceDodgerState {\r\n player: Player;\r\n enemies: Enemy[];\r\n frame: number;\r\n keys: Record<string, boolean>;\r\n}\r\n\r\nconst SpaceDodger: React.FC = () => {\r\n const canvasRef = useRef<HTMLCanvasElement>(null);\r\n const [score, setScore] = useState<number>(0);\r\n const [gameOver, setGameOver] = useState<boolean>(false);\r\n const gameStateRef = useRef<SpaceDodgerState>({\r\n player: { x: 200, y: 350, width: 30, height: 30 },\r\n enemies: [],\r\n frame: 0,\r\n keys: {}\r\n });\r\n\r\n const resetGame = (): void => {\r\n gameStateRef.current = {\r\n player: { x: 200, y: 350, width: 30, height: 30 },\r\n enemies: [],\r\n frame: 0,\r\n keys: {}\r\n };\r\n setScore(0);\r\n setGameOver(false);\r\n };\r\n\r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n const state = gameStateRef.current;\r\n\r\n const handleKeyDown = (e: KeyboardEvent): void => { \r\n state.keys[e.key] = true; \r\n };\r\n const handleKeyUp = (e: KeyboardEvent): void => { \r\n state.keys[e.key] = false; \r\n };\r\n window.addEventListener('keydown', handleKeyDown);\r\n window.addEventListener('keyup', handleKeyUp);\r\n\r\n let animationId: number;\r\n const gameLoop = (): void => {\r\n if (gameOver) return;\r\n \r\n state.frame++;\r\n ctx.fillStyle = '#000';\r\n ctx.fillRect(0, 0, 400, 400);\r\n\r\n if (state.keys['ArrowLeft'] && state.player.x > 0) state.player.x -= 5;\r\n if (state.keys['ArrowRight'] && state.player.x < 370) state.player.x += 5;\r\n if (state.keys['ArrowUp'] && state.player.y > 0) state.player.y -= 5;\r\n if (state.keys['ArrowDown'] && state.player.y < 370) state.player.y += 5;\r\n\r\n ctx.fillStyle = '#0ea5e9';\r\n ctx.fillRect(state.player.x, state.player.y, state.player.width, state.player.height);\r\n\r\n if (state.frame % 40 === 0) {\r\n state.enemies.push({ x: Math.random() * 370, y: -20, width: 30, height: 30 });\r\n }\r\n\r\n state.enemies = state.enemies.filter(enemy => {\r\n enemy.y += 3;\r\n ctx.fillStyle = '#ef4444';\r\n ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);\r\n\r\n if (enemy.x < state.player.x + state.player.width &&\r\n enemy.x + enemy.width > state.player.x &&\r\n enemy.y < state.player.y + state.player.height &&\r\n enemy.y + enemy.height > state.player.y) {\r\n setGameOver(true);\r\n return false;\r\n }\r\n\r\n if (enemy.y > 400) {\r\n setScore(s => s + 1);\r\n return false;\r\n }\r\n return true;\r\n });\r\n\r\n animationId = requestAnimationFrame(gameLoop);\r\n };\r\n \r\n if (!gameOver) gameLoop();\r\n\r\n return () => {\r\n cancelAnimationFrame(animationId);\r\n window.removeEventListener('keydown', handleKeyDown);\r\n window.removeEventListener('keyup', handleKeyUp);\r\n };\r\n }, [gameOver]);\r\n\r\n return (\r\n <div className=\"flex flex-col items-center gap-4 p-4\">\r\n <div className=\"text-xl font-bold\">Score: {score}</div>\r\n <canvas ref={canvasRef} width=\"400\" height=\"400\" className=\"border-2 border-gray-300\" />\r\n {gameOver && (\r\n <div className=\"text-center\">\r\n <p className=\"text-xl font-bold text-red-500 mb-2\">Game Over!</p>\r\n <Button onClick={resetGame}>Play Again</Button>\r\n </div>\r\n )}\r\n <p className=\"text-sm text-gray-600\">Use arrow keys to move</p>\r\n </div>\r\n );\r\n};\r\n\r\nexport default SpaceDodger;"],"mappings":";AACA,SAAS,YAAY;AACrB,SAAS,WAA8B;;;ACFvC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AD8CI;AA7CJ,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;;;AEtDY,gBAAAA,YAAA;AAHZ,IAAM,OAAO,MAAM;AACf,SACI,gBAAAA,KAAC,SACG,0BAAAA,KAAC,UAAO,SAAQ,WAAU,oBAAM,GACpC;AAER;AAEA,IAAO,eAAQ;;;ACTf,SAAgB,UAAU,WAAW,cAAc;AAwHvC,SACA,OAAAC,MADA;AA5FZ,IAAM,cAAwB,MAAM;AAChC,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AACvD,QAAM,eAAe,OAAyB;AAAA,IAC1C,QAAQ,EAAE,GAAG,KAAK,GAAG,KAAK,OAAO,IAAI,QAAQ,GAAG;AAAA,IAChD,SAAS,CAAC;AAAA,IACV,OAAO;AAAA,IACP,MAAM,CAAC;AAAA,EACX,CAAC;AAED,QAAM,YAAY,MAAY;AAC1B,iBAAa,UAAU;AAAA,MACvB,QAAQ,EAAE,GAAG,KAAK,GAAG,KAAK,OAAO,IAAI,QAAQ,GAAG;AAAA,MAChD,SAAS,CAAC;AAAA,MACV,OAAO;AAAA,MACP,MAAM,CAAC;AAAA,IACP;AACA,aAAS,CAAC;AACV,gBAAY,KAAK;AAAA,EACrB;AAEA,YAAU,MAAM;AACZ,UAAM,SAAS,UAAU;AACzB,QAAI,CAAC,OAAQ;AACb,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,QAAI,CAAC,IAAK;AACV,UAAM,QAAQ,aAAa;AAE3B,UAAM,gBAAgB,CAAC,MAA2B;AAClD,YAAM,KAAK,EAAE,GAAG,IAAI;AAAA,IACpB;AACA,UAAM,cAAc,CAAC,MAA2B;AAChD,YAAM,KAAK,EAAE,GAAG,IAAI;AAAA,IACpB;AACA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,iBAAiB,SAAS,WAAW;AAE5C,QAAI;AACJ,UAAM,WAAW,MAAY;AAC7B,UAAI,SAAU;AAEd,YAAM;AACN,UAAI,YAAY;AAChB,UAAI,SAAS,GAAG,GAAG,KAAK,GAAG;AAE3B,UAAI,MAAM,KAAK,WAAW,KAAK,MAAM,OAAO,IAAI,EAAG,OAAM,OAAO,KAAK;AACrE,UAAI,MAAM,KAAK,YAAY,KAAK,MAAM,OAAO,IAAI,IAAK,OAAM,OAAO,KAAK;AACxE,UAAI,MAAM,KAAK,SAAS,KAAK,MAAM,OAAO,IAAI,EAAG,OAAM,OAAO,KAAK;AACnE,UAAI,MAAM,KAAK,WAAW,KAAK,MAAM,OAAO,IAAI,IAAK,OAAM,OAAO,KAAK;AAEvE,UAAI,YAAY;AAChB,UAAI,SAAS,MAAM,OAAO,GAAG,MAAM,OAAO,GAAG,MAAM,OAAO,OAAO,MAAM,OAAO,MAAM;AAEpF,UAAI,MAAM,QAAQ,OAAO,GAAG;AACxB,cAAM,QAAQ,KAAK,EAAE,GAAG,KAAK,OAAO,IAAI,KAAK,GAAG,KAAK,OAAO,IAAI,QAAQ,GAAG,CAAC;AAAA,MAChF;AAEA,YAAM,UAAU,MAAM,QAAQ,OAAO,WAAS;AAC1C,cAAM,KAAK;AACX,YAAI,YAAY;AAChB,YAAI,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,OAAO,MAAM,MAAM;AAExD,YAAI,MAAM,IAAI,MAAM,OAAO,IAAI,MAAM,OAAO,SACxC,MAAM,IAAI,MAAM,QAAQ,MAAM,OAAO,KACrC,MAAM,IAAI,MAAM,OAAO,IAAI,MAAM,OAAO,UACxC,MAAM,IAAI,MAAM,SAAS,MAAM,OAAO,GAAG;AAC7C,sBAAY,IAAI;AAChB,iBAAO;AAAA,QACP;AAEA,YAAI,MAAM,IAAI,KAAK;AACnB,mBAAS,OAAK,IAAI,CAAC;AACnB,iBAAO;AAAA,QACP;AACA,eAAO;AAAA,MACX,CAAC;AAED,oBAAc,sBAAsB,QAAQ;AAAA,IAC5C;AAEA,QAAI,CAAC,SAAU,UAAS;AAExB,WAAO,MAAM;AACb,2BAAqB,WAAW;AAChC,aAAO,oBAAoB,WAAW,aAAa;AACnD,aAAO,oBAAoB,SAAS,WAAW;AAAA,IAC/C;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,SACI,qBAAC,SAAI,WAAU,wCACX;AAAA,yBAAC,SAAI,WAAU,qBAAoB;AAAA;AAAA,MAAQ;AAAA,OAAM;AAAA,IACjD,gBAAAA,KAAC,YAAO,KAAK,WAAW,OAAM,OAAM,QAAO,OAAM,WAAU,4BAA2B;AAAA,IACrF,YACG,qBAAC,SAAI,WAAU,eACf;AAAA,sBAAAA,KAAC,OAAE,WAAU,uCAAsC,wBAAU;AAAA,MAC7D,gBAAAA,KAAC,UAAO,SAAS,WAAW,wBAAU;AAAA,OACtC;AAAA,IAEJ,gBAAAA,KAAC,OAAE,WAAU,yBAAwB,oCAAsB;AAAA,KAC/D;AAER;AAEA,IAAO,sBAAQ;","names":["jsx","jsx"]}
|
package/eslint.config.js
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import js from '@eslint/js'
|
|
2
|
+
import globals from 'globals'
|
|
3
|
+
import reactHooks from 'eslint-plugin-react-hooks'
|
|
4
|
+
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
5
|
+
import tseslint from 'typescript-eslint'
|
|
6
|
+
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
7
|
+
|
|
8
|
+
export default defineConfig([
|
|
9
|
+
globalIgnores(['dist']),
|
|
10
|
+
{
|
|
11
|
+
files: ['**/*.{ts,tsx}'],
|
|
12
|
+
extends: [
|
|
13
|
+
js.configs.recommended,
|
|
14
|
+
tseslint.configs.recommended,
|
|
15
|
+
reactHooks.configs.flat.recommended,
|
|
16
|
+
reactRefresh.configs.vite,
|
|
17
|
+
],
|
|
18
|
+
languageOptions: {
|
|
19
|
+
ecmaVersion: 2020,
|
|
20
|
+
globals: globals.browser,
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
])
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@jonelhatwell/arcade-games",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "dist/index.cjs",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"sideEffects": false,
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
|
+
},
|
|
15
|
+
"./styles": "./dist/index.css"
|
|
16
|
+
},
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "tsup",
|
|
19
|
+
"dev": "tsup --watch"
|
|
20
|
+
},
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"react": "^18 || ^19",
|
|
23
|
+
"react-dom": "^18 || ^19"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"@radix-ui/react-slot": "^1.2.4",
|
|
27
|
+
"class-variance-authority": "^0.7.1",
|
|
28
|
+
"clsx": "^2.1.1",
|
|
29
|
+
"lucide-react": "^0.562.0",
|
|
30
|
+
"react": "^19.2.0",
|
|
31
|
+
"react-dom": "^19.2.0",
|
|
32
|
+
"tailwind-merge": "^3.4.0",
|
|
33
|
+
"tw-animate-css": "^1.4.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@eslint/js": "^9.39.1",
|
|
37
|
+
"@tailwindcss/postcss": "^4.1.18",
|
|
38
|
+
"@types/node": "^24.10.1",
|
|
39
|
+
"@types/react": "^19.2.5",
|
|
40
|
+
"@types/react-dom": "^19.2.3",
|
|
41
|
+
"@vitejs/plugin-react": "^5.1.1",
|
|
42
|
+
"eslint": "^9.39.1",
|
|
43
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
44
|
+
"eslint-plugin-react-refresh": "^0.4.24",
|
|
45
|
+
"globals": "^16.5.0",
|
|
46
|
+
"postcss": "^8.5.6",
|
|
47
|
+
"tailwindcss": "^4.1.18",
|
|
48
|
+
"tsup": "^8.5.1",
|
|
49
|
+
"typescript": "~5.9.3",
|
|
50
|
+
"typescript-eslint": "^8.46.4",
|
|
51
|
+
"vite": "^7.2.4"
|
|
52
|
+
}
|
|
53
|
+
}
|
package/public/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
|
|
2
|
+
import React, { useState, useEffect, useRef } from 'react';
|
|
3
|
+
import { Button } from '@/components/ui/button';
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
interface Position {
|
|
7
|
+
x: number;
|
|
8
|
+
y: number;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
interface Enemy extends Position {
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
interface Player extends Position {
|
|
18
|
+
width: number;
|
|
19
|
+
height: number;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
interface SpaceDodgerState {
|
|
24
|
+
player: Player;
|
|
25
|
+
enemies: Enemy[];
|
|
26
|
+
frame: number;
|
|
27
|
+
keys: Record<string, boolean>;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const SpaceDodger: React.FC = () => {
|
|
31
|
+
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
32
|
+
const [score, setScore] = useState<number>(0);
|
|
33
|
+
const [gameOver, setGameOver] = useState<boolean>(false);
|
|
34
|
+
const gameStateRef = useRef<SpaceDodgerState>({
|
|
35
|
+
player: { x: 200, y: 350, width: 30, height: 30 },
|
|
36
|
+
enemies: [],
|
|
37
|
+
frame: 0,
|
|
38
|
+
keys: {}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
const resetGame = (): void => {
|
|
42
|
+
gameStateRef.current = {
|
|
43
|
+
player: { x: 200, y: 350, width: 30, height: 30 },
|
|
44
|
+
enemies: [],
|
|
45
|
+
frame: 0,
|
|
46
|
+
keys: {}
|
|
47
|
+
};
|
|
48
|
+
setScore(0);
|
|
49
|
+
setGameOver(false);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
const canvas = canvasRef.current;
|
|
54
|
+
if (!canvas) return;
|
|
55
|
+
const ctx = canvas.getContext('2d');
|
|
56
|
+
if (!ctx) return;
|
|
57
|
+
const state = gameStateRef.current;
|
|
58
|
+
|
|
59
|
+
const handleKeyDown = (e: KeyboardEvent): void => {
|
|
60
|
+
state.keys[e.key] = true;
|
|
61
|
+
};
|
|
62
|
+
const handleKeyUp = (e: KeyboardEvent): void => {
|
|
63
|
+
state.keys[e.key] = false;
|
|
64
|
+
};
|
|
65
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
66
|
+
window.addEventListener('keyup', handleKeyUp);
|
|
67
|
+
|
|
68
|
+
let animationId: number;
|
|
69
|
+
const gameLoop = (): void => {
|
|
70
|
+
if (gameOver) return;
|
|
71
|
+
|
|
72
|
+
state.frame++;
|
|
73
|
+
ctx.fillStyle = '#000';
|
|
74
|
+
ctx.fillRect(0, 0, 400, 400);
|
|
75
|
+
|
|
76
|
+
if (state.keys['ArrowLeft'] && state.player.x > 0) state.player.x -= 5;
|
|
77
|
+
if (state.keys['ArrowRight'] && state.player.x < 370) state.player.x += 5;
|
|
78
|
+
if (state.keys['ArrowUp'] && state.player.y > 0) state.player.y -= 5;
|
|
79
|
+
if (state.keys['ArrowDown'] && state.player.y < 370) state.player.y += 5;
|
|
80
|
+
|
|
81
|
+
ctx.fillStyle = '#0ea5e9';
|
|
82
|
+
ctx.fillRect(state.player.x, state.player.y, state.player.width, state.player.height);
|
|
83
|
+
|
|
84
|
+
if (state.frame % 40 === 0) {
|
|
85
|
+
state.enemies.push({ x: Math.random() * 370, y: -20, width: 30, height: 30 });
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
state.enemies = state.enemies.filter(enemy => {
|
|
89
|
+
enemy.y += 3;
|
|
90
|
+
ctx.fillStyle = '#ef4444';
|
|
91
|
+
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
|
|
92
|
+
|
|
93
|
+
if (enemy.x < state.player.x + state.player.width &&
|
|
94
|
+
enemy.x + enemy.width > state.player.x &&
|
|
95
|
+
enemy.y < state.player.y + state.player.height &&
|
|
96
|
+
enemy.y + enemy.height > state.player.y) {
|
|
97
|
+
setGameOver(true);
|
|
98
|
+
return false;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (enemy.y > 400) {
|
|
102
|
+
setScore(s => s + 1);
|
|
103
|
+
return false;
|
|
104
|
+
}
|
|
105
|
+
return true;
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
animationId = requestAnimationFrame(gameLoop);
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
if (!gameOver) gameLoop();
|
|
112
|
+
|
|
113
|
+
return () => {
|
|
114
|
+
cancelAnimationFrame(animationId);
|
|
115
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
116
|
+
window.removeEventListener('keyup', handleKeyUp);
|
|
117
|
+
};
|
|
118
|
+
}, [gameOver]);
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<div className="flex flex-col items-center gap-4 p-4">
|
|
122
|
+
<div className="text-xl font-bold">Score: {score}</div>
|
|
123
|
+
<canvas ref={canvasRef} width="400" height="400" className="border-2 border-gray-300" />
|
|
124
|
+
{gameOver && (
|
|
125
|
+
<div className="text-center">
|
|
126
|
+
<p className="text-xl font-bold text-red-500 mb-2">Game Over!</p>
|
|
127
|
+
<Button onClick={resetGame}>Play Again</Button>
|
|
128
|
+
</div>
|
|
129
|
+
)}
|
|
130
|
+
<p className="text-sm text-gray-600">Use arrow keys to move</p>
|
|
131
|
+
</div>
|
|
132
|
+
);
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
export default SpaceDodger;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
import { Slot } from "@radix-ui/react-slot"
|
|
3
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
|
4
|
+
|
|
5
|
+
import { cn } from "@/lib/utils"
|
|
6
|
+
|
|
7
|
+
const buttonVariants = cva(
|
|
8
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
13
|
+
destructive:
|
|
14
|
+
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
15
|
+
outline:
|
|
16
|
+
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
17
|
+
secondary:
|
|
18
|
+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
19
|
+
ghost:
|
|
20
|
+
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
21
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
22
|
+
},
|
|
23
|
+
size: {
|
|
24
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
25
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
26
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
27
|
+
icon: "size-9",
|
|
28
|
+
"icon-sm": "size-8",
|
|
29
|
+
"icon-lg": "size-10",
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
defaultVariants: {
|
|
33
|
+
variant: "default",
|
|
34
|
+
size: "default",
|
|
35
|
+
},
|
|
36
|
+
}
|
|
37
|
+
)
|
|
38
|
+
|
|
39
|
+
function Button({
|
|
40
|
+
className,
|
|
41
|
+
variant = "default",
|
|
42
|
+
size = "default",
|
|
43
|
+
asChild = false,
|
|
44
|
+
...props
|
|
45
|
+
}: React.ComponentProps<"button"> &
|
|
46
|
+
VariantProps<typeof buttonVariants> & {
|
|
47
|
+
asChild?: boolean
|
|
48
|
+
}) {
|
|
49
|
+
const Comp = asChild ? Slot : "button"
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<Comp
|
|
53
|
+
data-slot="button"
|
|
54
|
+
data-variant={variant}
|
|
55
|
+
data-size={size}
|
|
56
|
+
className={cn(buttonVariants({ variant, size, className }))}
|
|
57
|
+
{...props}
|
|
58
|
+
/>
|
|
59
|
+
)
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export { Button, buttonVariants }
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
|
|
3
|
+
import { cn } from "@/lib/utils"
|
|
4
|
+
|
|
5
|
+
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|
6
|
+
return (
|
|
7
|
+
<div
|
|
8
|
+
data-slot="card"
|
|
9
|
+
className={cn(
|
|
10
|
+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
|
11
|
+
className
|
|
12
|
+
)}
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
)
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
19
|
+
return (
|
|
20
|
+
<div
|
|
21
|
+
data-slot="card-header"
|
|
22
|
+
className={cn(
|
|
23
|
+
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
|
24
|
+
className
|
|
25
|
+
)}
|
|
26
|
+
{...props}
|
|
27
|
+
/>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
32
|
+
return (
|
|
33
|
+
<div
|
|
34
|
+
data-slot="card-title"
|
|
35
|
+
className={cn("leading-none font-semibold", className)}
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
)
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
42
|
+
return (
|
|
43
|
+
<div
|
|
44
|
+
data-slot="card-description"
|
|
45
|
+
className={cn("text-muted-foreground text-sm", className)}
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
|
52
|
+
return (
|
|
53
|
+
<div
|
|
54
|
+
data-slot="card-action"
|
|
55
|
+
className={cn(
|
|
56
|
+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
57
|
+
className
|
|
58
|
+
)}
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
)
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
65
|
+
return (
|
|
66
|
+
<div
|
|
67
|
+
data-slot="card-content"
|
|
68
|
+
className={cn("px-6", className)}
|
|
69
|
+
{...props}
|
|
70
|
+
/>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
75
|
+
return (
|
|
76
|
+
<div
|
|
77
|
+
data-slot="card-footer"
|
|
78
|
+
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export {
|
|
85
|
+
Card,
|
|
86
|
+
CardHeader,
|
|
87
|
+
CardFooter,
|
|
88
|
+
CardTitle,
|
|
89
|
+
CardAction,
|
|
90
|
+
CardDescription,
|
|
91
|
+
CardContent,
|
|
92
|
+
}
|