Add "Treasure Chest - Custom Events" project
This commit is contained in:
parent
e595b5d81e
commit
7a996340c1
4 changed files with 142 additions and 0 deletions
|
@ -15,6 +15,7 @@ func main() {
|
||||||
mux.Handle("GET /treasure-chest-user-options/", http.StripPrefix("/treasure-chest-user-options", http.FileServer(http.Dir("treasure-chest-user-options"))))
|
mux.Handle("GET /treasure-chest-user-options/", http.StripPrefix("/treasure-chest-user-options", http.FileServer(http.Dir("treasure-chest-user-options"))))
|
||||||
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-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-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"))))
|
||||||
|
|
||||||
log.Println("Start the web server...")
|
log.Println("Start the web server...")
|
||||||
err := http.ListenAndServe(":8080", mux)
|
err := http.ListenAndServe(":8080", mux)
|
||||||
|
|
10
structure-and-scale/treasure-chest-custom-events/README.md
Normal file
10
structure-and-scale/treasure-chest-custom-events/README.md
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
# Treasure Chest Library - Chaining and Static Methods
|
||||||
|
|
||||||
|
A library that pirates can use to track the amount of loot they find
|
||||||
|
on their travels.
|
||||||
|
|
||||||
|
The library willsupport chained methods and add static methods.
|
||||||
|
|
||||||
|
# References
|
||||||
|
|
||||||
|
* https://leanwebclub.com/learn/structure-and-scale/project-treasure-chest-library-chaining-and-static-methods/
|
14
structure-and-scale/treasure-chest-custom-events/index.html
Normal file
14
structure-and-scale/treasure-chest-custom-events/index.html
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" data-bs-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
|
||||||
|
<title>Treasure Chest - Private Class Custom Events</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Treasure Chest - Custom Events</h1>
|
||||||
|
<p>All of the magic here happens in the console.</p>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
117
structure-and-scale/treasure-chest-custom-events/script.js
Normal file
117
structure-and-scale/treasure-chest-custom-events/script.js
Normal file
|
@ -0,0 +1,117 @@
|
||||||
|
/**
|
||||||
|
* Emit a custom event
|
||||||
|
* @param {String} type The event type
|
||||||
|
* @param {*} detail Any details to pass along with the event
|
||||||
|
*/
|
||||||
|
function emit (type, detail) {
|
||||||
|
|
||||||
|
// Create a new event
|
||||||
|
let event = new CustomEvent(type, {
|
||||||
|
bubbles: true,
|
||||||
|
cancelable: true,
|
||||||
|
detail: detail
|
||||||
|
});
|
||||||
|
|
||||||
|
// Dispatch the event
|
||||||
|
return document.dispatchEvent(event);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
class TreasureChest {
|
||||||
|
|
||||||
|
#gold;
|
||||||
|
#silver;
|
||||||
|
#bronze;
|
||||||
|
|
||||||
|
constructor (initialLoot = {}) {
|
||||||
|
|
||||||
|
// Merge options into defaults
|
||||||
|
let {bronze, silver, gold} = Object.assign({
|
||||||
|
bronze: 0,
|
||||||
|
silver: 0,
|
||||||
|
gold: 0,
|
||||||
|
}, initialLoot);
|
||||||
|
|
||||||
|
this.#bronze = bronze;
|
||||||
|
this.#silver = silver;
|
||||||
|
this.#gold = gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
addGold (qty) {
|
||||||
|
this.#gold += qty;
|
||||||
|
emit('treasurechest:add', {type: 'gold', qty: qty});
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
addSilver (qty) {
|
||||||
|
this.#silver += qty;
|
||||||
|
emit('treasurechest:add', {type: 'silver', qty: qty});
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
addBronze (qty) {
|
||||||
|
this.#bronze += qty;
|
||||||
|
emit('treasurechest:add', {type: 'bronze', qty: qty});
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
getBronze () {
|
||||||
|
return this.#bronze;
|
||||||
|
}
|
||||||
|
|
||||||
|
getSilver () {
|
||||||
|
return this.#silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
getGold () {
|
||||||
|
return this.#gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
getLoot () {
|
||||||
|
return `Gold: ${this.#gold}, Silver: ${this.#silver}, Bronze: ${this.#bronze}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
static getRandomLoot () {
|
||||||
|
let amount = [];
|
||||||
|
|
||||||
|
for (let qty = 0; qty < 50; qty++) {
|
||||||
|
amount.push(qty+1);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
gold: this.#shuffle(amount)[0],
|
||||||
|
silver: this.#shuffle(amount)[0],
|
||||||
|
bronze: this.#shuffle(amount)[0],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in a new issue