Welcome to Alchemeal, a logic-based crafting game built with React. Start with 5 basic elements, experiment with combinations, and discover the entire periodic table of your imagination!
 |  |
The game is divided into three functional areas:
The top panel serves as your command center:
- Progress Indicator: Track how many elements you've discovered out of the total.
- Sorting & Filters: Organize your collection by Alphabet, Element Type, or Unlock Order.
- Difficulty Settings: Manage "Dead-end" elements (those that can't create anything new). You can mark them, hide them, or keep them visible for a harder challenge.
- Credits: Click the game title to see the icons' authors.
- Reset: A dedicated button to wipe progress and start from scratch.
Experimentation happens here. The table features three slots:
- Slot 1 & 2: Ingredients selected from your collection by clicking them.
- Slot 3 (The Result): Shows the outcome of the combination:
- Single Card: A new or existing element discovered.
- List of Cards: Some combinations yield multiple results!
- 🛇 Symbol: Indicates a failed experiment (no combination possible).
- ✨ Golden Glow: Newly discovered elements are highlighted with a gold effect.
This is your library of discovered elements. Simply click a card in your collection to move it to the mixing table. You can toggle the visibility of "dead-end" cards from the header to clean up your workspace.
This project was built to demonstrate modern frontend development practices:
- Core: React (Functional Components, Hooks)
- State Management: Redux (Handling complex crafting logic and progress persistence)
- Type Safety: TypeScript
- Styling: SCSS (Modular styles)
- Deployment: GitHub Pages
Check out the game here: Alchemeal