From f17292bb089e6454308ec6dee66b4a59f2760b5b Mon Sep 17 00:00:00 2001 From: Andrea Fazzi Date: Fri, 23 Aug 2024 14:41:23 +0200 Subject: [PATCH] Add web components solutions --- .../dice-component-interactivity/README.md | 19 ++++ .../dice-component-interactivity/index.html | 17 ++++ .../dice-component-interactivity/script.js | 90 +++++++++++++++++++ structure-and-scale/dice-component/README.md | 8 ++ structure-and-scale/dice-component/index.html | 17 ++++ structure-and-scale/dice-component/script.js | 19 ++++ structure-and-scale/main.go | 2 + 7 files changed, 172 insertions(+) create mode 100644 structure-and-scale/dice-component-interactivity/README.md create mode 100644 structure-and-scale/dice-component-interactivity/index.html create mode 100644 structure-and-scale/dice-component-interactivity/script.js create mode 100644 structure-and-scale/dice-component/README.md create mode 100644 structure-and-scale/dice-component/index.html create mode 100644 structure-and-scale/dice-component/script.js diff --git a/structure-and-scale/dice-component-interactivity/README.md b/structure-and-scale/dice-component-interactivity/README.md new file mode 100644 index 0000000..d0b9990 --- /dev/null +++ b/structure-and-scale/dice-component-interactivity/README.md @@ -0,0 +1,19 @@ +# Dice Component - Interactivity + +The provided JavaScript code defines two classes: `Dice` and +`DiceButton`. These classes work together to create a web component +that simulates rolling a dice. + +- The `Dice` class provides a simple API for simulating a die roll, + using a static method to shuffle the array of die faces and an + instance method to perform the roll. +- The `DiceButton` class extends `HTMLElement` to create a custom web + component that encapsulates a `Dice` instance. It defines the + structure of the component and handles user interactions through the + `connectedCallback` and `handleEvent` methods. +- Upon clicking the button, the `handleEvent` method updates the + component's display to show the result of the die roll. + +# References + +* https://leanwebclub.com/learn/structure-and-scale/project-review-dice-component-interactivity/ diff --git a/structure-and-scale/dice-component-interactivity/index.html b/structure-and-scale/dice-component-interactivity/index.html new file mode 100644 index 0000000..9804289 --- /dev/null +++ b/structure-and-scale/dice-component-interactivity/index.html @@ -0,0 +1,17 @@ + + + + + + + Dice Component - Interactivity + + +

Dice Component - Interactivity

+ + + Roll a D6 + + + + diff --git a/structure-and-scale/dice-component-interactivity/script.js b/structure-and-scale/dice-component-interactivity/script.js new file mode 100644 index 0000000..c991aff --- /dev/null +++ b/structure-and-scale/dice-component-interactivity/script.js @@ -0,0 +1,90 @@ +class Dice { + + #array = [] + + constructor ( numSides = 6 ) { + for (let n = 0; n < numSides; n++) { + this.#array.push(n+1); + } + } + + /** + * Randomly shuffle an array + * https://stackoverflow.com/a/2450976/1293256 + * @param {Array} array The array to shuffle + * @return {Array} The shuffled array + */ + static #shuffle (array) { + + let currentIndex = array.length; + let temporaryValue, randomIndex; + + // While there remain elements to shuffle... + while (0 !== currentIndex) { + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // And swap it with the current element. + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; + + } + + roll () { + return Dice.#shuffle(this.#array)[0]; + } + +} + +class DiceButton extends HTMLElement { + + #dice = new Dice(6); + + constructor() { + super(); + + let userHTML = this.innerHTML.trim(); + + this.innerHTML = ` +

+ +

+
+`; + } + + connectedCallback () { + // Attach a click event listener to the button + let btn = this.querySelector('button'); + if (!btn) return; + + 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); + + } + + handleEvent (event) { + let messageEl = this.querySelector('div'); + messageEl.innerHTML = `

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

`; + } + + +} + +// Define the new web component +if ('customElements' in window) { + customElements.define('dice-button', DiceButton); +} diff --git a/structure-and-scale/dice-component/README.md b/structure-and-scale/dice-component/README.md new file mode 100644 index 0000000..0c9d780 --- /dev/null +++ b/structure-and-scale/dice-component/README.md @@ -0,0 +1,8 @@ +# Dice Library + +This is a library that developers can use to roll dice in a variety of +shapes and sizes. + +# References + +* https://leanwebclub.com/learn/structure-and-scale/project-dice-library/ diff --git a/structure-and-scale/dice-component/index.html b/structure-and-scale/dice-component/index.html new file mode 100644 index 0000000..6b56b16 --- /dev/null +++ b/structure-and-scale/dice-component/index.html @@ -0,0 +1,17 @@ + + + + + + + Dice Component + + +

Dice Component

+ + + Roll a D6 + + + + diff --git a/structure-and-scale/dice-component/script.js b/structure-and-scale/dice-component/script.js new file mode 100644 index 0000000..4234948 --- /dev/null +++ b/structure-and-scale/dice-component/script.js @@ -0,0 +1,19 @@ +class RollDice extends HTMLElement { + constructor() { + super(); + + let userHTML = this.innerHTML.trim(); + + this.innerHTML = ` +

+ +

+
+`; + } +} + +// Define the new web component +if ('customElements' in window) { + customElements.define('roll-dice', RollDice); +} diff --git a/structure-and-scale/main.go b/structure-and-scale/main.go index 3c78e08..1eb9032 100644 --- a/structure-and-scale/main.go +++ b/structure-and-scale/main.go @@ -16,6 +16,8 @@ func main() { mux.Handle("GET /treasure-chest-js-class/", http.StripPrefix("/treasure-chest-js-class", http.FileServer(http.Dir("treasure-chest-js-class")))) mux.Handle("GET /treasure-chest-private/", http.StripPrefix("/treasure-chest-private", http.FileServer(http.Dir("treasure-chest-private")))) mux.Handle("GET /treasure-chest-custom-events/", http.StripPrefix("/treasure-chest-custom-events", http.FileServer(http.Dir("treasure-chest-custom-events")))) + mux.Handle("GET /dice-component/", http.StripPrefix("/dice-component", http.FileServer(http.Dir("dice-component")))) + mux.Handle("GET /dice-component-interactivity/", http.StripPrefix("/dice-component-interactivity", http.FileServer(http.Dir("dice-component-interactivity")))) log.Println("Start the web server...") err := http.ListenAndServe(":8080", mux)