Modifs Lulu

index.html

@@ -15,42 +15,54 @@
   
     <div class="container">
 		<!-- Header -->
-        <div style="visibility:hidden" class="row text-center">
+        <div style="visibility:hidden" id="turn_canvas" class="row text-center">
             <h3 id=turn class="turn-hacker">Hacker's turn</h3>
         </div>
 
 		<!-- Question -->
         <div class="row text-center">
-            <h1 class="title">Input players pseudo</h1>
+            <h1 id="title">Input players pseudo</h1>
         </div>
 		
 		<!-- Input pseudo -->
-		<div class="row text-center">
+		<div id="pseudo_canvas" class="row text-center">
 			<div class="col-md-6">
-				<input type="text" placeholder="Player 1"/>
+				<input id="player_one_input" type="text" placeholder="Player 1"/>
 			</div>
 			<div class="col-md-6">
-				<input type="text" placeholder="Player 2"/>
+				<input id="player_two_input" type="text" placeholder="Player 2"/>
 			</div>
 			<div class="col-md-12">
-				<input type="button" value="Let's start the game"/>
+				<input onclick="startGame()" class="btn btn-primary" type="button" value="Let's start the game"/>
 			</div>
 		</div>
 		<!-- Answers -->
-        <div style="visibility:hidden" class="row text-center bot">
+        <div id="answers_canvas" class="row text-center bot">
             <div class=" col-md-6">
-                <div class="choose-btn green">
-                    Hack the NSA
-                </div>
+                <div onclick="nextTurn(turn)" id="answer1" class="choose-btn green"></div>
             </div>
             <div class="col-md-6">
-                <div class="choose-btn purple">
-                    Hack the bakery
-                </div>
+                <div onclick="nextTurn(turn)" id="answer2" class="choose-btn purple"></div>
             </div>
         </div>
     </div>
        
+	<script>
+		let turnCanvasElement = document.getElementById("turn_canvas");
+		let turnTitle = document.getElementById("turn");
+	
+		let pseudoCanvasElement = document.getElementById("pseudo_canvas");
+		let playerOneInput = document.getElementById("player_one_input");
+		let playerTwoInput = document.getElementById("player_two_input");
+		
+		let titleElement = document.getElementById("title");
+		
+		let answersCanvasElement = document.getElementById("answers_canvas");
+		let answerOneInput = document.getElementById("answer1");
+		let answerTwoInput = document.getElementById("answer2");
+		
+		answersCanvasElement.style.visibility = "hidden";
+	</script>
 	<script src="data.js"></script>
 	<script src="script.js"></script>
 

script.js

@@ -0,0 +1,84 @@
+let turn = 0;
+
+let playerHacker = "";
+let playerCyber = "";
+
+let expHacker = 0;
+let expCyber = 0;
+
+function main() {
+	
+	// test
+	expCyber = 10;
+	
+	nextTurn(turn);
+	answersCanvasElement.style.visibility = "visible";
+	turnCanvasElement.style.visibility = "visible";
+	
+}
+
+function nextTurn(id) {
+	var titles = [
+		"Hacker's turn (" + playerHacker + ")",
+		"Cybersecurity engineer's turn (" + playerCyber + ")"
+	]
+	
+	if (id != 20) {
+		turnTitle.innerText = titles[id % 2];
+		
+		if (id % 2 == 0) {
+			/* Hacker Turn */
+			turnTitle.classList.remove("turn-cyber");
+			turnTitle.classList.add("turn-hacker");
+		} else {
+			/* Cyber Turn */
+			turnTitle.classList.remove("turn-hacker");
+			turnTitle.classList.add("turn-cyber");
+		}
+		
+		titleElement.innerText = data[id].question;
+		answerOneInput.innerText = data[id].answers[0];
+		answerTwoInput.innerText = data[id].answers[1];
+		
+		turn++;
+	} else {
+		turnCanvasElement.style.visibility = "hidden";
+		answersCanvasElement.style.visibility = "hidden";
+		
+		if (expHacker > expCyber) {
+			titleElement.innerText = playerHacker + " Won!";
+		} else {
+			titleElement.innerText = playerCyber + " Won!";
+		}
+	}
+}
+
+function startGame() {
+	playerOneName = playerOneInput.value;
+	playerTwoName = playerTwoInput.value;
+	
+	if (playerOneName == "") {
+	    playerOneName = "Player 1";
+	}
+	
+	if (playerTwoName == "") {
+	    playerTwoName = "Player 2";
+	}
+	
+	console.log(playerOneName);
+	console.log(playerTwoName);
+	
+	/* Cacher le menu de d'input des pseudos */
+	pseudoCanvasElement.style.visibility = "hidden";
+	
+	/* Attribue les pseudos */
+	if (Math.random() < 0.5) {
+		playerHacker = playerOneName;
+		playerCyber = playerTwoName;
+	} else {
+		playerHacker = playerTwoName;
+		playerCyber = playerOneName;
+	}
+	
+	main();
+}

style.css

@@ -17,6 +17,14 @@
 
 .container {min-height: 100vh;}
 
+body {
+	// background: rgb(9,9,121);
+	// background: linear-gradient(140deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
+	
+	// background: rgb(121,9,9);
+	// background: linear-gradient(214deg, rgba(121,9,9,1) 0%, rgba(255,0,39,1) 100%);
+}
+
 #turn {
     text-align: center;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
@@ -24,7 +32,7 @@
 }
 
 .turn-hacker {background-color: var(--red);}
-.turn-cyber {color:var(--blue);}
+.turn-cyber {background-color:var(--blue);}
 
 .title {margin: 100px 0;}