Compare commits
3 Commits
25776eb1a7
...
f67bbbf857
Author | SHA1 | Date |
---|---|---|
grgr | f67bbbf857 | 2 years ago |
grgr | b0920162fa | 2 years ago |
grgr | 3146ec57fa | 2 years ago |
@ -1,44 +1,78 @@
|
||||
let source_url = ""
|
||||
let seatRef = document.getElementById("seatRef")
|
||||
let partyRef = document.getElementById("partyRef")
|
||||
let seatRef = document.querySelector(".seat")
|
||||
let hemicycle = document.getElementsByClassName("hemicycle")[0]
|
||||
let row = 5
|
||||
|
||||
let btn = document.getElementById("info-btn")
|
||||
let info = document.getElementById("info")
|
||||
|
||||
fetch("https://hub.xpub.nl/soupboat/the-parliament/")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
source_url = data.base_url;
|
||||
populateSeats(data.files)
|
||||
populateSeats(data.parliament)
|
||||
});
|
||||
|
||||
function populateSeats(representatives) {
|
||||
for (const representative of representatives){
|
||||
let seat = seatRef.cloneNode(true);
|
||||
seat.querySelector(".label").innerHTML = representative.who;
|
||||
seat.id = representative.who;
|
||||
let filename = source_url + representative.filename;
|
||||
let audio = new Audio(filename)
|
||||
audio.addEventListener("canplaythrough", (e) => {
|
||||
console.log(filename);
|
||||
let mic = seat.querySelector(".mic");
|
||||
mic.innerHTML = "Talk";
|
||||
mic.addEventListener("click", () => {
|
||||
function populateSeats(parliament) {
|
||||
for (const group of Object.keys(parliament)){ //gets the parent's keys
|
||||
let party = partyRef.cloneNode(true);
|
||||
let partyName = party.querySelector("h4")
|
||||
party.id = group;
|
||||
|
||||
partyName.innerHTML = group;
|
||||
for (representative of parliament[group]){
|
||||
let seat = seatRef.cloneNode(true);
|
||||
seat.querySelector(".label").innerHTML = representative.who;
|
||||
seat.id = representative.who;
|
||||
let filename = source_url + group + '/' + representative.filename;
|
||||
let audio = new Audio(filename)
|
||||
audio.addEventListener("canplaythrough", (e) => {
|
||||
console.log(filename);
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
mic.innerHTML="Pause";
|
||||
mic.style.color ="red";
|
||||
} else {
|
||||
let mic = seat.querySelector(".mic");
|
||||
mic.innerHTML = "Talk";
|
||||
mic.addEventListener("click", () => {
|
||||
console.log(filename);
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
mic.innerHTML="Pause";
|
||||
mic.style.color ="red";
|
||||
} else {
|
||||
audio.pause();
|
||||
mic.innerHTML="Talk"
|
||||
}
|
||||
});
|
||||
audio.addEventListener("ended", () => {
|
||||
audio.pause();
|
||||
mic.innerHTML="Talk"
|
||||
}
|
||||
});
|
||||
audio.addEventListener("ended", () => {
|
||||
audio.pause();
|
||||
audio.currentTime = 0;
|
||||
mic.innerHTML = "Talk Again"
|
||||
audio.currentTime = 0;
|
||||
mic.innerHTML = "Talk Again"
|
||||
});
|
||||
});
|
||||
});
|
||||
hemicycle.appendChild(seat);
|
||||
party.appendChild(seat);
|
||||
}
|
||||
|
||||
hemicycle.appendChild(party);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// info
|
||||
// btn.addEventListener("onclick", showInfo())
|
||||
|
||||
// function showInfo(){
|
||||
// if (btn.value == "hiding"){
|
||||
// btn.innerHTML = "X"
|
||||
// btn.value = "showing"
|
||||
// } else {
|
||||
// btn.innerHTML = "?"
|
||||
// btn.value = "hiding"
|
||||
// }
|
||||
// }
|
||||
|
||||
/*
|
||||
TODO
|
||||
- upload svg
|
||||
- loop through the elements to associate seat to each of them
|
||||
- create label
|
||||
- rotation?
|
||||
*/
|
Loading…
Reference in New Issue