grgr
/
the-parliament
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

division in parties and flexbox for each party-rack

Browse Source
master
grgr 3 years ago
parent 25776eb1a7
commit 3146ec57fa
3 changed files with 72 additions and 35 deletions
Show Stats Download Patch File Download Diff File

3
index.html
Unescape Escape View File

@ -9,12 +9,15 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<h1>The Parliament</h1>
<div class="hemicycle"> <div class="hemicycle">
<div class="party"id="partyRef">
<div class="seat" id="seatRef"> <div class="seat" id="seatRef">
<button class="mic">Loading...</button> <button class="mic">Loading...</button>
<div class="label">name</div> <div class="label">name</div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html>l </html>l

31
script.js
Unescape Escape View File

@ -1,20 +1,26 @@
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
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 party = partyRef.cloneNode(true);
party.id = group
for (representative of parliament[group]){
let seat = seatRef.cloneNode(true); let seat = seatRef.cloneNode(true);
seat.querySelector(".label").innerHTML = representative.who; seat.querySelector(".label").innerHTML = representative.who;
seat.id = representative.who; seat.id = representative.who;
let filename = source_url + representative.filename; let filename = source_url + group + '/' + representative.filename;
let audio = new Audio(filename) let audio = new Audio(filename)
audio.addEventListener("canplaythrough", (e) => { audio.addEventListener("canplaythrough", (e) => {
console.log(filename); console.log(filename);
@ -37,8 +43,21 @@ function populateSeats(representatives) {
mic.innerHTML = "Talk Again" mic.innerHTML = "Talk Again"
}); });
}); });
hemicycle.appendChild(seat); party.appendChild(seat);
}
hemicycle.appendChild(party);
} }
} }
/*
TODO
- upload svg
- loop through the elements to associate seat to each of them
- create label
- rotation?
*/

23
style.css
Unescape Escape View File

@ -16,20 +16,32 @@ body, html{
.hemicycle{ .hemicycle{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-between; width: 100vw;
width: 80vw;
margin: 0 auto; margin: 0 auto;
} }
h1{
font-size: 60px;
text-align: center;
}
#partyRef,
#seatRef{ #seatRef{
display: none; display: none;
} }
.party{
border: solid 1px black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
width: 20vw;
}
.seat{ .seat{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-content: center;
margin: 4px 4px; margin: 4px 1px;
width: 100px; width: 100px;
} }
@ -41,3 +53,6 @@ body, html{
background-color: white; background-color: white;
color: currentColor; color: currentColor;
} }
.label{
width: 80px;
}

Write Preview
Loading…
Cancel
Save