Skip to main content
100%

Seven Seas

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

Seven Seas is a pirate-themed travel app with a Treasure Chest home page and a Dice Games page. The app uses JavaScript classes and custom elements to track loot and power interactive dice rolls. On the main page, the TreasureChest class manages bronze, silver, and gold counts and emits custom events when treasure is added. The Dice Games page uses a custom <roll-dice> Web Component with shadow DOM, featuring a roll button and an accessible aria-live region that announces results like "You rolled a 4." The design uses pirate emoji, a seafaring theme, and a service worker for offline support.

AI-generated description

Similar vizzes

Loading thumbnail…

Seven Seas

Seven Seas is a pirate-themed travel app that lets users collect and track treasure across gold, silver, and bronze. The main page displays the current loot total, which persists in localStorage, while a Dice Games page lets visitors roll dice for fun. A separate Treasure Chest page uses a TreasureChest class to add coins and update the loot counter through custom events. The visualization demonstrates state management, localStorage persistence, and interactive UI patterns in a playful pirate setting.

Aangusgrant
94% match
Loading thumbnail…

Seven Seas

Seven Seas is a pirate-themed travel app that lets users collect and track treasure across gold, silver, and bronze. The main page displays the current loot total, which persists in localStorage, while a Dice Games page lets visitors roll dice for fun. A separate Treasure Chest page uses a TreasureChest class to add coins and update the loot counter through custom events. The visualization demonstrates state management, localStorage persistence, and interactive UI patterns in a playful pirate setting.

Aangusgrant
94% match
Loading thumbnail…

Seven Seas

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.

Aangusgrant
86% match
Loading thumbnail…

Treasure Chest

Treasure Chest is a JavaScript demonstration that uses a custom `TreasureChest` class to track quantities of gold, silver, and bronze. The page shows a simple HTML template with a heading, but all interactive behavior occurs in the browser console. Users can instantiate the class, add coins using methods like `addGold`, `addSilver`, and `addBronze`, and retrieve totals with `getLoot`. The class also includes a `getRandomLoot` static method that relies on a custom `shuffle` function to generate random coin amounts. The code uses native JavaScript object methods and property descriptors.

Aangusgrant
62% match
Loading thumbnail…

Treasure Chest

Treasure Chest demonstrates a JavaScript module pattern for managing a virtual loot inventory. The page loads with a simple header and paragraph, while all functionality occurs through the console using the custom `TreasureChest` constructor object. This object tracks gold, silver, and bronze counts, offering methods like `addGold`, `addSilver`, and `addBronze` for incrementing values, plus `getLoot` to report totals. A `getRandomLoot` method uses a Fisher–Yates shuffle algorithm to generate randomized loot amounts from 1 to 50. The code employs no external libraries, relying purely on native JavaScript syntax and prototype-based inheritance.

Aangusgrant
60% match
Loading thumbnail…

Treasure Chest

Treasure Chest demonstrates a JavaScript module pattern for managing a virtual loot inventory. The page loads with a simple header and paragraph, while all functionality occurs through the console using the custom `TreasureChest` constructor object. This object tracks gold, silver, and bronze counts, offering methods like `addGold`, `addSilver`, and `addBronze` for incrementing values, plus `getLoot` to report totals. A `getRandomLoot` method uses a Fisher–Yates shuffle algorithm to generate randomized loot amounts from 1 to 50. The code employs no external libraries, relying purely on native JavaScript syntax and prototype-based inheritance.

Aangusgrant
60% match
Loading thumbnail…

Dice - Web Component

This example demonstrates a custom web component called `roll-dice` that simulates rolling a six-sided die. The component displays a button and an accessible live region; clicking the button triggers a shuffle of the dice sides array, and the resulting value is announced in the `aria-live` region. It uses the custom elements API via `HTMLElement` and `customElements.define`, with a static private shuffle method that implements the Fisher–Yates algorithm. No external libraries are used; the behavior is self-contained in the component’s constructor and callbacks.

Aangusgrant
60% match
Loading thumbnail…

Treasure Chest - Private Class Features

This example demonstrates a JavaScript class called `TreasureChest` that manages private bronze, silver, and gold coin counts, along with a customizable loot message. The code uses ECMAScript private class features (denoted by `#` prefixes) for instance properties and methods, including a static `#shuffle` utility and an `#emit` method that dispatches custom events like `treasure:bronze`. Public methods such as `addBronze`, `addSilver`, and `addGold` update the private values and trigger events, while `getLoot` returns a formatted string with the current totals. The interaction is intended to occur through the browser’s console, with no visual rendering or external data sources.

Aangusgrant
59% match