Proto fonctionnel

Took 3 hours 54 minutes

views/about_us.pug

@@ -0,0 +1,11 @@
+include components/navbar
+
+html
+  head
+    title About Us
+    link(rel='stylesheet', href='/bulma.css')
+  body
+    +navbar
+
+    main.container.pt-6
+      h1.title About Us

views/components/navbar.pug

@@ -0,0 +1,15 @@
+mixin navbar
+  nav.navbar.is-fixed-top
+    .navbar-brand
+      a.navbar-item Nuit de l'info
+      a.navbar-burger(role="button", aria-label="menu", aria-expanded=false)
+        span(aria-hidden=true)
+        span(aria-hidden=true)
+        span(aria-hidden=true)
+
+    .navbar-menu
+      .navbar-end
+        a.navbar-item(href='/') Accueil
+        a.navbar-item(href='/play') Jouer
+        a.navbar-item(href='/more-info') En savoir+
+        a.navbar-item(href='/about-us') A Propos

views/home.pug

@@ -0,0 +1,24 @@
+include components/navbar
+
+html
+  head
+    title Home
+    link(rel='stylesheet', href='/bulma.css')
+
+  body
+    +navbar
+
+    section.hero.is-fullheight(style='background-image: url(/img/hero.jpg)')
+      .hero-body
+        div
+          p.title.has-text-white
+            | Sauvons la planete,
+            br
+            | distinguons la réalité
+            br
+            | des idées reçues
+          p.subtitle.has-text-white
+            | Défiez les idées reçues sur l'écologie avec notre quiz captivant !
+            br
+            | Testez-vous dès maintenant pour une expérience éducative et amusante.
+          a#playButton.button.is-primary(href="/play") Essayer ce jeu

views/more_info.pug

@@ -0,0 +1,11 @@
+include components/navbar
+
+html
+  head
+    title More Info
+    link(rel='stylesheet', href='/bulma.css')
+  body
+    +navbar
+
+    main.container.pt-6
+      h1.title More Info

views/play.pug

@@ -0,0 +1,25 @@
+include components/navbar
+
+html
+  head
+    title Play
+    link(rel='stylesheet', href='/bulma.css')
+    script(src="/socket.io/socket.io.js")
+    script(defer=true, type="module")
+      include scripts/play.js
+  body.is-fullheight.is-flex
+    +navbar
+
+    section#option_0.is-flex.is-justify-content-center.is-align-items-center.p-4(style="cursor: pointer; width:50%; background-color: #88AB8E;")
+      p.is-centered.is-block.is-size-5  Hello
+    section#option_1.is-flex.is-justify-content-center.is-align-items-center.p-4(style="cursor: pointer; width:50%; background-color: #F2F1EB;")
+      p.is-centered.is-block.is-size-5  World
+
+    section.card(style="position: fixed; bottom: 10%; left: 50%;transform: translateX(-50%);")
+      .card-content
+        h1#card_title.title Question
+        p#card_description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quaerat
+          | tempore vitae voluptates. Aperiam corporis excepturi expedita, fugiat
+          | illo magni molestiae molestias mollitia natus neque perferendis quas
+          | qui sed? Numquam?
+        button#next_question.is-hidden.button Prochaine question

views/scripts/play.js

@@ -0,0 +1,47 @@
+const socket = io();
+
+// Sockets
+socket.on('connected', res => console.log(res));
+
+const option0Element = document.querySelector('#option_0');
+const option1Element = document.querySelector('#option_1');
+
+
+socket.on('init_game', score => console.log(score))
+
+socket.on('question', question => {
+  // TODO: Show score
+
+  option0Element.querySelector("p").innerText = question.options[0].text;
+  option1Element.querySelector("p").innerText = question.options[1].text;
+  document.querySelector('#card_description').innerText = question.question;
+
+  option0Element.addEventListener('click', handleOption0Click);
+  option1Element.addEventListener('click', handleOption1Click);
+});
+
+const handleOption0Click = () => {
+  socket.emit('answer_question', 0);
+  option0Element.removeEventListener('click', handleOption0Click);
+}
+const handleOption1Click = () => {
+  socket.emit('answer_question', 1)
+  option1Element.removeEventListener('click', handleOption1Click);
+}
+
+socket.on("result", (result) => {
+  document.querySelector('#card_title').innerText = result.isCorrect ? "Correct!" : "Incorrect!";
+  document.querySelector('#card_description').innerText = result.description;
+  document.querySelector('button#next_question').classList.remove('is-hidden');
+});
+
+document.querySelector('button#next_question').addEventListener('click', () => {
+  socket.emit('next_question');
+  document.querySelector('#card_title').innerText = "Question";
+  document.querySelector('button#next_question').classList.add('is-hidden');
+});
+
+socket.on('game_end', score => {
+  document.querySelector('#card_title').innerText = "Game Finished!";
+  document.querySelector('#card_description').innerText = `Your score is ${score}`;
+});