My Projects

Application Description

This is a full-featured, real-time online multiplayer version of the classic card game Uno, here named "Color Clash."

It is a complete web application built using Firebase (Firestore and Authentication) for its real-time backend and Tailwind CSS for its modern, responsive frontend. It also incorporates Tone.js for audio feedback on game actions like playing or drawing cards.

The application supports the entire game flow, from creation to scoring, and is designed to handle multiple concurrent players seamlessly using live database listeners and secure transactions.

Key Features:

• Full Multiplayer Lobby System:
  • Users can create a new private game, which generates a 4-letter join code.
  • Other players can join the game using the code and a player name.
  • Uses Firebase Anonymous Authentication to assign a unique ID to each user.
• Host-Controlled Game Settings:
  • The game host can customize popular "house rules" before starting, including:
  • Stacking Draw Cards: Allows +2 and +4 cards to be stacked on top of each other.
  • Call "Clash!" Rule: A "Call Uno" rule. If a player on their last card forgets to click the "Clash!" button, other players get a "Catch!" button to force them to draw.
  • Draw Until Playable: An alternate rule where a player must keep drawing from the deck until they get a card they can play.
• Real-Time Gameplay:
  • Uses Firestore onSnapshot listeners to update the game state (discard pile, opponent card counts, turns) for all players instantly.
  • A turn timer is included to keep the game moving and automatically draws a card for an idle player.
  • Player hands are stored in a secure Firestore subcollection (playerHands), meaning players can only read their own hands.
• Complete Game Logic:
  • Includes all special cards: Skip, Reverse (with animation), Draw 2, Wild, and Wild Draw 4.
  • A color-picker modal appears when a player uses a Wild card.
  • Uses Firestore Transactions to safely handle critical actions like playing and drawing cards, preventing race conditions.
• Scoring and Rematch System:
  • Automatically calculates and displays scores at the end of each round (Number cards = face value, Special = 20, Wilds = 50).
  • The game tracks a full match, with the first player to 250 points declared the winner.
  • Features a complete "Rematch" voting system at the end of a match.
• Polished UI/UX:
  • A clean, responsive design that works on mobile and desktop.
  • Interactive emoji-reaction buttons for players to communicate.
  • A game log tracks the most recent plays.

Application Description

This is a comprehensive, single-page Pokémon Battledex and Comparison Tool built with HTML, Tailwind CSS, and modern (vanilla) JavaScript. It is powered by the public PokéAPI.

The application allows a user to either look up a detailed report on a single Pokémon or compare two Pokémon side-by-side. When comparing, the app automatically calculates and displays which Pokémon has the type advantage in battle.

It features a fast, clean, and responsive interface with a dark/light mode toggle.

Key Features:

• Dual Mode: Can function as a single-Pokémon Pokédex or a two-Pokémon comparison tool.
• Type-Advantage Calculation: Automatically determines which Pokémon has the offensive type advantage in a one-on-one matchup.
• Intelligent Autocomplete: As the user types, a dropdown menu suggests Pokémon, complete with their sprites, from a pre-fetched list of all 1000+ Pokémon.
• Detailed Pokémon Card: Each Pokémon report is a comprehensive dashboard showing:
  • General Info: Official artwork, Pokedex number, types, height, weight, and a flavor text Pokedex entry.
  • Shiny Toggle: A button to instantly switch between the default and shiny artwork.
  • Base Stats: A visual graph of all six stats (HP, Attack, Defense, etc.) and the base stat total.
  • Abilities: A list of all abilities (including hidden) with their in-game descriptions.
  • Full Evolution Chain: A visual flow diagram showing the Pokémon's entire evolution line.
  • Offensive Matchups: Shows which types the Pokémon is "Super Effective Against."
  • Defensive Matchups: A detailed breakdown of "Weak Against" (showing 4x weaknesses), "Resists," and "Immune To."
  • Notable Moves: A curated table of level-up moves, showing their type, power, and accuracy.

This is a powerful, in-browser Pixel Art Animation Studio designed for artists, animators, and game developers. It allows users to create everything from static pixel art to complex, multi-frame animations with a comprehensive set of tools.

Users can start with a blank canvas (16x16, 32x32, or 64x64) or upload an existing image, which the application will automatically pixelate and convert into a workable palette.

Key Features:

• Full Drawing Toolkit: A complete set of tools including a pencil, eraser, paint bucket, eyedropper, and shape tools (line, rectangle, circle) with adjustable brush sizes.
• Layers Management: A full layer system for complex compositions, allowing users to add, remove, name, reorder (via drag-and-drop), and toggle the visibility of layers.
• Animation Suite: Users can create frame-by-frame animations. The animation panel supports adding, duplicating, removing, and reordering frames, along with a live preview player and adjustable FPS (Frames Per Second) control.
• Advanced Drawing Aids:
  • Onion Skinning: Toggles a red/blue overlay of the previous and next frames to make animation easier.
  • Symmetry Tools: Draw with perfect horizontal or vertical symmetry.
  • Selection & Clipboard: A selection tool that supports copy, cut, and paste.
  • Undo/Redo: Full history support for undoing and redoing actions.
• Palette & Color Control:
  • Custom Palette: Add custom colors using a color picker.
  • Image-Based Palette: Automatically generates a palette from an uploaded image.
  • Color Quantization: An advanced tool that uses a "median cut" algorithm to intelligently reduce the number of colors in the artwork.
• Project & Export Options:
  • Save/Load Project: Save the entire project (including all frames, layers, and palette) to a .pixelstudio JSON file and load it back later.
  • Download PNG: Export the current frame as a static PNG file.
  • Download GIF: Export the full animation as an animated GIF.
  • Download Sprite Sheet: Export all frames as a single horizontal sprite sheet, perfect for game development.