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 source_url = ""
|
||||||
let seatRef = document.getElementById("seatRef")
|
let partyRef = document.getElementById("partyRef")
|
||||||
|
let seatRef = document.querySelector(".seat")
|
||||||
let hemicycle = document.getElementsByClassName("hemicycle")[0]
|
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/")
|
fetch("https://hub.xpub.nl/soupboat/the-parliament/")
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
source_url = data.base_url;
|
source_url = data.base_url;
|
||||||
populateSeats(data.files)
|
populateSeats(data.parliament)
|
||||||
});
|
});
|
||||||
|
|
||||||
function populateSeats(representatives) {
|
function populateSeats(parliament) {
|
||||||
for (const representative of representatives){
|
for (const group of Object.keys(parliament)){ //gets the parent's keys
|
||||||
let seat = seatRef.cloneNode(true);
|
let party = partyRef.cloneNode(true);
|
||||||
seat.querySelector(".label").innerHTML = representative.who;
|
let partyName = party.querySelector("h4")
|
||||||
seat.id = representative.who;
|
party.id = group;
|
||||||
let filename = source_url + representative.filename;
|
|
||||||
let audio = new Audio(filename)
|
partyName.innerHTML = group;
|
||||||
audio.addEventListener("canplaythrough", (e) => {
|
for (representative of parliament[group]){
|
||||||
console.log(filename);
|
let seat = seatRef.cloneNode(true);
|
||||||
let mic = seat.querySelector(".mic");
|
seat.querySelector(".label").innerHTML = representative.who;
|
||||||
mic.innerHTML = "Talk";
|
seat.id = representative.who;
|
||||||
mic.addEventListener("click", () => {
|
let filename = source_url + group + '/' + representative.filename;
|
||||||
|
let audio = new Audio(filename)
|
||||||
|
audio.addEventListener("canplaythrough", (e) => {
|
||||||
console.log(filename);
|
console.log(filename);
|
||||||
if (audio.paused) {
|
let mic = seat.querySelector(".mic");
|
||||||
audio.play();
|
mic.innerHTML = "Talk";
|
||||||
mic.innerHTML="Pause";
|
mic.addEventListener("click", () => {
|
||||||
mic.style.color ="red";
|
console.log(filename);
|
||||||
} else {
|
if (audio.paused) {
|
||||||
|
audio.play();
|
||||||
|
mic.innerHTML="Pause";
|
||||||
|
mic.style.color ="red";
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
mic.innerHTML="Talk"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
audio.addEventListener("ended", () => {
|
||||||
audio.pause();
|
audio.pause();
|
||||||
mic.innerHTML="Talk"
|
audio.currentTime = 0;
|
||||||
}
|
mic.innerHTML = "Talk Again"
|
||||||
});
|
});
|
||||||
audio.addEventListener("ended", () => {
|
|
||||||
audio.pause();
|
|
||||||
audio.currentTime = 0;
|
|
||||||
mic.innerHTML = "Talk Again"
|
|
||||||
});
|
});
|
||||||
});
|
party.appendChild(seat);
|
||||||
hemicycle.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