diff --git a/main.py b/main.py index d15591c..ec86541 100644 --- a/main.py +++ b/main.py @@ -30,18 +30,18 @@ async def udji(kod : str, igrac : Igrac) -> Soba: raise HTTPException(status_code=404, detail="Soba ne postoji") @app.post("/sobe/kreiraj/") -async def kreiraj(postavke : SobaPostavke) -> str: +async def kreiraj() -> str: kod = str(random.randint(1000, 9999)) - soba = Soba(kod=kod, igraci=[], postavke=postavke) - print(soba.postavke.kategorije) + soba = Soba(kod=kod, igraci=[]) sobe.append(soba) asyncio.create_task(cisti(soba)) return kod @app.post("/sobe/zapocni/") -async def zapocni(kod : str): +async def zapocni(kod : str, postavke : SobaPostavke): soba = nadji_sobu(kod) + soba.postavke = postavke asyncio.create_task(zapocni_sobu(soba)) return 200 @@ -99,10 +99,10 @@ async def odabir(event : str, sid : str, data : str): async def update_sobu(soba : Soba): s = soba.model_dump() - - s["postavke"].pop("custom_pitanja") - s["postavke"].pop("kategorije") - + if(soba.postavke is not None): + s["postavke"].pop("custom_pitanja") + s["postavke"].pop("kategorije") + await sio.emit("soba_" + soba.kod, json.dumps(s)) async def odbroji(soba : Soba, vrjeme : int): diff --git a/models.py b/models.py index 5c0a8ca..3a2f07d 100644 --- a/models.py +++ b/models.py @@ -31,7 +31,7 @@ class Soba(BaseModel): stanje: str = "cekanje" trenutno_pitanje: int = 0 - postavke : SobaPostavke + postavke : SobaPostavke | None = None def nadji_igraca(self, ime, avatar) -> Igrac: return [igrac for igrac in self.igraci if (igrac.ime, igrac.avatar) == (ime, avatar)][0] diff --git a/static/img.png b/static/img.png new file mode 100644 index 0000000..532d1e1 Binary files /dev/null and b/static/img.png differ diff --git a/static/index.html b/static/index.html index 5a28dc5..6b3167e 100644 --- a/static/index.html +++ b/static/index.html @@ -6,8 +6,9 @@ - + + + @@ -17,241 +18,64 @@ - - - - + + - if (soba.stanje == "pitanje") { - $("#ulaz").addClass("nodisplay"); - $("#countdownDiv").addClass("nodisplay"); - $("#pitanjeDiv").removeClass("nodisplay"); - $("#pitanje").html(soba.pitanje.pitanje); - $("#leaderboardDiv").removeClass("nodisplay"); - $("#leaderboard").html(soba.igraci.map(e => `

${e.ime} - ${e.poeni}

`).join("")); - $("#odgovoriDiv").removeClass("nodisplay"); - $("#a").html(`${soba.pitanje.a}`); - $("#b").html(`${soba.pitanje.b}`); - $("#c").html(`${soba.pitanje.c}`); - $("#d").html(`${soba.pitanje.d}`); - $(`#a`).removeClass("text-success"); - $(`#b`).removeClass("text-success"); - $(`#c`).removeClass("text-success"); - $(`#d`).removeClass("text-success"); - $("#vrijeme").removeClass("nodisplay"); - $("#brojPitanja").removeClass("nodisplay"); - $("#vrijeme").html(soba.countdown); - $("#brojPitanja").html(`PITANJE ${soba.trenutno_pitanje}/${soba.postavke.broj_pitanja}`); - } - - if (soba.stanje == "otkrij") { - $(`#${soba.pitanje.tacan}`).addClass("text-success"); - $("#vrijeme").html(soba.countdown); - $("#leaderboard").html(soba.igraci.map(e => `

${e.ime} - ${e.poeni}

`).join("")); - } - - } - - function zapocniSobu() { - $.post("/sobe/zapocni/?kod=" + soba.kod); - } - - $(window).on('load', function () { - - $("#vrijemePitanja").on("input change", function () { - $("#vrijemePitanjaLabel").html("Vrijeme pitanja: " + $("#vrijemePitanja").val() + "s"); - }); - - $("#zapocniButton").on("click", function () { - zapocniSobu(); - }); - - $(".openbtn").on("click", function () { - openNav(); - }); - - $(".closebtn").on("click", function () { - closeNav(); - }); - - }); - - function openNav() { - document.getElementById("mySidebar").style.width = "300px"; - } + + - function closeNav() { - document.getElementById("mySidebar").style.width = "0"; - } + +
+ × + + + + - - + + +
+
+ CUSTOM PITANJA
+
- +
-
- + + +
-
-

KÔD ZA SOBU:

+
+

KOD KVIZA:

-
+
Učesnici: -
+
Nema učesnika
+
Prvo odaberite kategorije!
- +
-
+

@@ -259,55 +83,63 @@

4s

-

4/10

+

4/10

-
+

-

A

+

A

-
+
-

B

+

B

-
+
-

C

+

C

-
+
-

D

+

D

-
+
-
+

RANKING

+ +
+

KRAJ KVIZA

+
+
+ +
+
diff --git a/static/index.js b/static/index.js new file mode 100644 index 0000000..fc2a364 --- /dev/null +++ b/static/index.js @@ -0,0 +1,319 @@ +const socket = io(); + +var soba; + +$.post( + "/sobe/kreiraj/", function (kod) { + $("#kod").html(`

${kod}

`); + + socket.on("soba_" + kod, function (data) { + soba = JSON.parse(data) + socketEvent(soba) + }); + }, +); + +function socketEvent(soba) { + console.log(soba); + if (soba.igraci.length != 0) { + $("#nemaigraca").addClass("nodisplay"); + } else { + $("#nemaigraca").removeClass("nodisplay"); + } + + if (soba.stanje == "cekanje") { + $("#postavke").removeClass("nodisplay"); + $("#main").removeClass("nodisplay"); + $("#igraci").empty(); + soba.igraci.forEach(e => $("#igraci").append(`

${e.ime}

`)) + } + + if (soba.stanje == "countdown") { + $("#ulaz").addClass("nodisplay"); + $("#postavke").addClass("nodisplay"); + $("#main").addClass("nodisplay"); + $("#countdown-div").removeClass("nodisplay"); + $("#countdown").html(soba.countdown); + } + + if (soba.stanje == "pitanje") { + $("#ulaz").addClass("nodisplay"); + $("#countdown-div").addClass("nodisplay"); + $("#pitanje-div").removeClass("nodisplay"); + $("#pitanje").html(soba.pitanje.pitanje); + $("#leaderboard-div").removeClass("nodisplay"); + $("#leaderboard").html(soba.igraci.map(e => ` +

+ + ${e.ime} - ${e.poeni} +

`).join("")); + $("#odgovori-div").removeClass("nodisplay"); + $("#a").html(`${soba.pitanje.a}`); + $("#b").html(`${soba.pitanje.b}`); + $("#c").html(`${soba.pitanje.c}`); + $("#d").html(`${soba.pitanje.d}`); + $(`#a`).removeClass("text-success"); + $(`#b`).removeClass("text-success"); + $(`#c`).removeClass("text-success"); + $(`#d`).removeClass("text-success"); + $("#vrijeme").removeClass("nodisplay"); + $("#broj-pitanja").removeClass("nodisplay"); + $("#vrijeme").html(soba.countdown); + $("#broj-pitanja").html(`PITANJE ${soba.trenutno_pitanje}/${soba.postavke.broj_pitanja}`); + } + + if (soba.stanje == "otkrij") { + $(`#${soba.pitanje.tacan}`).addClass("text-success"); + $("#vrijeme").html(soba.countdown); + $("#leaderboard").html(soba.igraci.map(e => ` +

+ + ${e.ime} - ${e.poeni} +

`).join("")); + } + + if (soba.stanje == "zavrseno") { + $("#vrijeme").addClass("nodisplay"); + $("#pitanje-div").addClass("nodisplay"); + $("#leaderboard-div").addClass("nodisplay"); + $("#zavrseno-div").removeClass("nodisplay"); + soba.igraci.sort((a, b) => b.poeni - a.poeni); + + soba.igraci.forEach(e => $("#zavrsni-leaderboard").append(`

${e.ime} - ${e.poeni}

`)) + + } + +} + + +function zapocniSobu() { + console.log(customPitanja) + var kategorije = odabraneKategorije(); + + $.ajax({ + type: "POST", + url: "/sobe/zapocni/?kod=" + soba.kod, + data: JSON.stringify({ + broj_pitanja: $("#broj-pitanja").val(), + vrijeme_pitanja: $("#vrijeme-pitanja").val(), + vrijeme_otkrivanja: $("#vrijeme-otkrivanja").val(), + kategorije: kategorije, + custom_pitanja: customPitanja + }, + ), + contentType: "application/json", + }); +} + +var customPitanja; + + +$(window).on('load', function () { + $("#kategorije").on("click", function () { + updateKategorije(); + sacuvajKategorije(); + }); + $("#vrijeme-pitanja-label").html("Vrijeme pitanja: " + $("#vrijeme-pitanja").val() + "s"); + $("#vrijeme-otkrivanja-label").html("Vrijeme otkrivanja: " + $("#vrijeme-otkrivanja").val() + "s"); + $("#broj-pitanja-label").html("Broj pitanja: " + $("#broj-pitanja").val()); + + $("#vrijeme-pitanja").on("input change load", function () { + $("#vrijeme-pitanja-label").html("Vrijeme pitanja: " + $("#vrijeme-pitanja").val() + "s"); + }); + + $("#vrijeme-otkrivanja").on("input change load", function () { + $("#vrijeme-otkrivanja-label").html("Vrijeme otkrivanja: " + $("#vrijeme-otkrivanja").val() + "s"); + }); + + $("#broj-pitanja").on("input change load", function () { + $("#broj-pitanja-label").html("Broj pitanja: " + $("#broj-pitanja").val()); + }); + + $("#zapocni-button").on("click", function () { + zapocniSobu(); + }); + + $(".openbtn").on("click", function () { + openNav(); + }); + + $(".closebtn").on("click", function () { + closeNav(); + }); + + $("#add-custom").on("click", function () { + var index = customPitanja.length; + customPitanja.push( + { + pitanje: "", + a: "", + b: "", + c: "", + d: "", + tacan: "a" + } + ); + + dodajPitanje(index); + }); + + + var pitanja = localStorage.getItem("customPitanja"); + if (pitanja == null) { + customPitanja = []; + } else { + try { + customPitanja = JSON.parse(pitanja); + customPitanja.forEach((e, i) => { + dodajPitanje(i); + $(`#pitanje-${i}`).val(e.pitanje); + $(`#a-${i}`).val(e.a); + $(`#b-${i}`).val(e.b); + $(`#c-${i}`).val(e.c); + $(`#d-${i}`).val(e.d); + $(`input[name=${i}]`).each(function () { + if ($(this).parent().parent().children().first().html().toLowerCase() == e.tacan) { + $(this).prop("checked", true); + } + }); + }); + } catch { + customPitanja = []; + localStorage.setItem("customPitanja", JSON.stringify(customPitanja)); + } + } + +} +); + +$.get("/kategorije/", function (data) { + data.kategorije.forEach(e => { + $("#kategorije").append(`

${e.naziv}

`); + + e.potkategorije.forEach(p => $("#kategorije").append(` +
+ + +
+ `)) + }); + + var sacuvaneKategorije = localStorage.getItem("kategorije"); + if (sacuvaneKategorije != null) { + sacuvaneKategorije = JSON.parse(sacuvaneKategorije); + sacuvaneKategorije.forEach(e => { + console.log(e) + $(`#${e.replace(/\W/g, '_')}`).prop("checked", true); + }); + } + updateKategorije(); +}); + +function updateKategorije() { + var kategorije = odabraneKategorije(); + + if (kategorije.length == 0) { + $("#nema-kategorije-tekst").removeClass("nodisplay"); + $("#nema-kategorije-strijela").removeClass("nodisplay"); + } else { + $("#nema-kategorije-tekst").addClass("nodisplay"); + $("#nema-kategorije-strijela").addClass("nodisplay"); + } + +} + +function openNav() { + document.getElementById("postavke").style.transform = "translate(0, 0)"; +} + +function closeNav() { + document.getElementById("postavke").style.transform = "translate(100%, 0)"; +} + +function dodajPitanje(index) { + $("#custom-pitanja").append( + `
+
+ + + +
+ +
+ A + + +
+
+ B + + +
+
+ C + + +
+
+ D + + +
+
`); + + $(`#izbrisi-${index}`).on("click", + function () { + customPitanja.splice(index, 1); + $(this).parent().parent().remove(); + sacuvajPitanja(); + }); + + $(`#pitanje-${index}`).on("input change", function () { + customPitanja[index].pitanje = $(this).val(); + sacuvajPitanja(); + }); + + $(`#a-${index}`).on("input change", function () { + customPitanja[index].a = $(this).val(); + sacuvajPitanja(); + }); + + $(`#b-${index}`).on("input change", function () { + customPitanja[index].b = $(this).val(); + + sacuvajPitanja(); + }); + + $(`#c-${index}`).on("input change", function () { + customPitanja[index].c = $(this).val(); + sacuvajPitanja(); + + }); + + $(`#d-${index}`).on("input change", function () { + customPitanja[index].d = $(this).val(); + sacuvajPitanja(); + + }); + + $(`input[name=${index}]`).on("change", function () { + customPitanja[index].tacan = $(this).parent().parent().children().first().html().toLowerCase(); + sacuvajPitanja(); + }); +} + +function odabraneKategorije() { + var kategorije = []; + $("#kategorije input:checked").each(function () { + kategorije.push($(this).val()); + }); + return kategorije; +} + +function sacuvajPitanja() { + localStorage.setItem("customPitanja", JSON.stringify(customPitanja)); +} + +function sacuvajKategorije() { + localStorage.setItem("kategorije", JSON.stringify(odabraneKategorije())); +} diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..23d7ca9 --- /dev/null +++ b/static/style.css @@ -0,0 +1,129 @@ +html, +body { + width: 100%; + height: 100%; + font-family: 'Road Rage', sans-serif; + background-color: aliceblue; +} + +div { + font-size: 2rem; +} + +.btn-primary { + font-size: 2rem; + background-color: #31A062 !important; + border-color: #31A062 !important; +} + +.form-range::-moz-range-thumb { + background-color: #31A062; +} + +.form-range::-webkit-slider-thumb { + background-color: #31A062; +} + +.input-group-text { + font-size: 1.2rem !important; +} + +.form-control { + font-size: 1.2rem !important; +} + +h1 { + font-size: 6rem; + line-height: 7rem; +} + +#kod h1 { + font-size: 11rem; +} + +.nodisplay { + display: none; +} + +.sidebar { + height: 100%; + width: 0; + width: 300px; + position: fixed; + z-index: 1; + top: 0; + right: 0; + background-color: rgb(50, 50, 68); + overflow-x: hidden; + transition: 0.3s; + transform: translate(100%, 0); +} + +.sidebar * { + display: block; +} + +.sidebar .closebtn { + position: relative; + top: 0; + font-size: 36px; +} + +.openbtn { + cursor: pointer; + background-color: #00000000; + color: black; + border: none; + position: absolute; + right: 0; + top: 0; +} + +#main { + position: absolute; + padding: 20px; + right: 0; + top: 0; +} + +.closebtn { + color: white; + text-decoration: none; + padding-left: 15px; + position: relative; +} + +.odgovor { + height: 15vh; + margin: 20px; + padding: 2vh; + border-radius: 20px; +} + +.status { + position: absolute; + right: 0; + padding: 20px; +} + +.form-check { + font-size: 1.5rem; +} + +.h2 { + font-size: 4rem; +} + +#ucesnici { + overflow-y: auto !important; + max-height: 300px; +} + +#zavrsni-leaderboard { + overflow-y: auto !important; + max-height: 500px; +} + +.bi-trash { + cursor: pointer; +} \ No newline at end of file