Pixel Tale

fixed bug where it doesn't know typing name

Done the project finally

done ui now just doing some fixes, learning toast better

Utilis.ts and cn() Utility Function Added clsx and tailwindmerge. The exported cn() merges classNames conditionally. Styling components consistently.

Still building ui files, using AI for dialogue

working on config files and learning toast

creating menu bar and slider ui in tsx

created checkbox and collasble function

still working on ui, starting on carousel and the menu bar

Started making ui for game, all in typescript, and pixel button and card so I can reuse the UI. Used tailwind

GameSetup.tsx and CharacterSetup.tsx These components allow users to choose characters, customize stats, and begin their quest.

Created the first round of UI component classes inside the @layer components block. Built reusable styles for buttons, cards, inputs, and text using Tailwind @apply and the design tokens defined earlier. Components like .pixel-button, .pixel-card, and .pixel-text make use of background gradients, custom fonts, shadow effects, and pixel-perfect padding. Focused on maintaining a retro game interface feel across interactions, including hover and active states. The structure is clean and ready for scaling.

Started building the core visual identity for the app. Defined a root-level CSS custom properties map with colors based on an 8-bit pixel art aesthetic. Established key variables for backgrounds, foregrounds, borders, and accent tones. Also introduced gradients and glow shadows for UI depth. Custom properties include --pixel-dark, --primary-glow, --shadow-pixel, among others. Scoped variables to both light and dark modes using the .dark class. Everything is tightly aligned with Tailwind's utility structure.

app.css and imported it in main.tsx. Defined base layout styles and font stacks. Going for a pixel-art adventure vibe.

Integrated react-query via QueryClientProvider for efficient server state handling.

Wrapped the app in TooltipProvider for seamless and consistent tooltip UX.

Included both Toaster and Sonner components for layered toast notifications. Might consolidate later based on behavior.

Set up basic routing with react-router-dom currently rendering the Index page at the root (/).

Creating Main Entry Point main.tsx hooks up React to the DOM and loads global styles via index.css. Added simple <App /> component as a placeholder.

Implemented unique IDs with a counter to track toasts and avoid duplication. Added auto-removal timeouts to clean dismissed toasts from memory to avoid leaks. Adding Dice function

did npm initialization, Designed a centralized toast system using React context and reducer to allow any component to dispatch toast notifications. Learned how to manage global UI state efficiently.
started character setup Fighter, Wizard, Rogue, Cleric, Ranger, Barbarian,
Bard, Druid, Monk, Paladin, Sorcerer, Warlock

Started on the project :D rn setting everything up, using node js set up the React project using Vite with TypeScript. Created basic folder structure separating components, hooks, utils, and types for clean organization. Created utilis and package json files. Decided to have multiple classes as well hasn't started yet so here is picture of a dog