Skip to main content

Seven Seas

✓ Published0🌍 Public
Aangusgrant
Last edited Mar 7, 2023
Created on Mar 7, 2023

Seven Seas is a playful interactive demonstration of custom web components built with JavaScript classes and the Shadow DOM API. The visualization combines a RollDice element, which shuffles an array of die faces and announces the result via an aria-live region for accessibility, with a TreasureChest class that tracks accumulated bronze, silver, and gold loot through a chainable API and custom events. When a user clicks the roll button, the dice component updates the displayed result, and the treasure chest accumulates values through its add methods, emitting events that could be used to trigger visual updates. The example showcases how encapsulated web components and event-driven architecture can create a simple game-like interaction, with the dice roll outcome feeding into the treasure collection system. Styling is handled with CSS custom properties for flexibility.

AI-generated description