diff --git a/structure-and-scale/dice-component-interactivity/index.html b/structure-and-scale/dice-component-interactivity/index.html index 9804289..40206d2 100644 --- a/structure-and-scale/dice-component-interactivity/index.html +++ b/structure-and-scale/dice-component-interactivity/index.html @@ -4,13 +4,15 @@ + Dice Component - Interactivity

Dice Component - Interactivity

- Roll a D6 + + D&D diff --git a/structure-and-scale/dice-component-interactivity/script.js b/structure-and-scale/dice-component-interactivity/script.js index c991aff..1ba97ab 100644 --- a/structure-and-scale/dice-component-interactivity/script.js +++ b/structure-and-scale/dice-component-interactivity/script.js @@ -1,11 +1,17 @@ -class Dice { +const NOTIFICATION_TIMEOUT = 3000; +class Dice { #array = [] - + + /** + * Instantiate a dice with a given number of sides + * @param {Number} numSides The number of sides + */ constructor ( numSides = 6 ) { for (let n = 0; n < numSides; n++) { this.#array.push(n+1); } + this.numSides = numSides; } /** @@ -15,7 +21,6 @@ class Dice { * @return {Array} The shuffled array */ static #shuffle (array) { - let currentIndex = array.length; let temporaryValue, randomIndex; @@ -32,55 +37,88 @@ class Dice { } return array; - } - + /** + * Roll the dice + * @return {Number} The result of the rolling + */ roll () { return Dice.#shuffle(this.#array)[0]; } - } class DiceButton extends HTMLElement { - #dice = new Dice(6); - + #dice; + + /** + * Instantiate the component + */ constructor() { + + // Inherit parent class properties super(); + // Define component properties and instantiate a dice + this.#dice = new Dice(this.getAttribute("dice-sides") || 6); + + // Render the initial HTML content of the component let userHTML = this.innerHTML.trim(); - + this.innerHTML = `

- +

-
+
`; + + // Get result element + this.result = this.querySelector('[dice-result]') + + // LIsten for events + this.addEventListener('click', this); } - connectedCallback () { - // Attach a click event listener to the button - let btn = this.querySelector('button'); - if (!btn) return; + /** + * Show a status message in the form + * @param {String} msg The message to display + */ + showStatus (msg) { + // Create a notification + let notification = document.createElement('div'); + notification.setAttribute('role', 'status'); + + // Inject it into the DOM + this.result.append(notification); + + // Add text after it's in the UI + setTimeout(function () { + notification.textContent = msg; + }, 1); + + // Remove it after 4 seconds + setTimeout(function () { + notification.remove(); + }, NOTIFICATION_TIMEOUT); - btn.addEventListener('click', this); } - disconnectedCallback () { - - // Remove the click event listener from the button - let btn = this.querySelector('button'); - if (!btn) return; - - btn.removeEventListener('click', this); + /** + * Handle events + * @param {Event} event The event object + */ + handleEvent (event) { + this[`on${event.type}`](event); + } + /** + * Handle the click event + * @param {Event} event The event object + */ + onclick (event) { + this.showStatus(`You rolled a ${this.#dice.roll()}`); } - handleEvent (event) { - let messageEl = this.querySelector('div'); - messageEl.innerHTML = `

You rolled a ${this.#dice.roll()}

`; - } - } diff --git a/structure-and-scale/dice-component-interactivity/style.css b/structure-and-scale/dice-component-interactivity/style.css new file mode 100644 index 0000000..8105279 --- /dev/null +++ b/structure-and-scale/dice-component-interactivity/style.css @@ -0,0 +1,7 @@ +dice-button [role="status"] { + background-color: #202b38; + border: 1px solid #e5e5e5; + border-radius: 0.25em; + padding: 0.6rem 1rem; + margin-top: 0.5rem; +}