lucasvbr/EnglishRolePlayGame
1
0
Fork 0
mirror of https://github.com/LucasVbr/EnglishRolePlayGame.git synced 2026-05-13 17:11:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

final

Browse Source
This commit is contained in:
LucasVbr
2021-10-14 15:57:27 +02:00
parent 888080229b
commit 672806d493
3 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9 -9
View File
@@ -13,36 +13,36 @@
</head>
<body>
<div class="container">
<div id="container" class="container">
<!-- Header -->
<div style="visibility:hidden" id="turn_canvas" class="row text-center">
<h3 id=turn class="turn-hacker">Hacker's turn</h3>
<h3 id=turn class="turn-hacker unselectable">Hacker's turn</h3>
</div>
<!-- Question -->
<div class="row text-center">
<h1 id="title">Input players pseudo</h1>
<div style="padding-top: 30vh;" class="row text-center">
<h1 id="title" class="unselectable">Input players pseudo</h1>
</div>
<!-- Input pseudo -->
<div id="pseudo_canvas" class="row text-center">
<div id="pseudo_canvas" style="padding-bottom: 50px;" class="row text-center fixed-bottom">
<div class="col-md-6">
<input id="player_one_input" type="text" placeholder="Player 1"/>
</div>
<div class="col-md-6">
<input id="player_two_input" type="text" placeholder="Player 2"/>
</div>
<div class="col-md-12">
<div style="margin-top: 100px;" class="col-md-12">
<input onclick="startGame()" class="btn btn-primary" type="button" value="Let's start the game"/>
</div>
</div>
<!-- Answers -->
<div id="answers_canvas" class="row text-center bot">
<div id="answers_canvas" style="margin-bottom: 5px;" class="row text-center fixed-bottom">
<div class=" col-md-6">
<div onclick="nextTurn(turn)" id="answer1" class="choose-btn green"></div>
<div onclick="nextTurn(turn)" id="answer1" class="btn choose-btn unselectable"></div>
</div>
<div class="col-md-6">
<div onclick="nextTurn(turn)" id="answer2" class="choose-btn purple"></div>
<div onclick="nextTurn(turn)" id="answer2" class="btn choose-btn unselectable"></div>
</div>
</div>
</div>
script.js
+12 -3
View File
@@ -8,9 +8,6 @@ let expCyber = 0;
function main() {
// test
expCyber = 10;
nextTurn(turn);
answersCanvasElement.style.visibility = "visible";
turnCanvasElement.style.visibility = "visible";
@@ -30,12 +27,24 @@ function nextTurn(id) {
/* Hacker Turn */
turnTitle.classList.remove("turn-cyber");
turnTitle.classList.add("turn-hacker");
answerOneInput.style.boxShadow = "var(--red) 0px 0px 25px";
answerTwoInput.style.boxShadow = "var(--red) 0px 0px 25px";
expHacker += Math.floor(1+ Math.random() * 4);
} else {
/* Cyber Turn */
turnTitle.classList.remove("turn-hacker");
turnTitle.classList.add("turn-cyber");
answerOneInput.style.boxShadow = "var(--blue) 0px 0px 25px";
answerTwoInput.style.boxShadow = "var(--blue) 0px 0px 25px";
expCyber += Math.floor(1 + Math.random() * 4);
}
console.log(`expCyber:${expCyber}\nexpHacker:${expHacker}`);
titleElement.innerText = data[id].question;
answerOneInput.innerText = data[id].answers[0];
answerTwoInput.innerText = data[id].answers[1];
style.css
+25 -26
View File
@@ -17,50 +17,49 @@
.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);
padding: 15px 0;
transition: 0.25s all ease-in-out;
}
.turn-hacker {background-color: var(--red);}
.turn-cyber {background-color:var(--blue);}
#turn.turn-hacker {
background-color: var(--red);
}
#turn.turn-cyber {
background-color:var(--blue);
}
.title {margin: 100px 0;}
#answers_canvas.turn_hacker .choose-btn {
box-shadow: var(--red) 0px 0px 25px;
}
#answers_canvas.turn_hacker .choose-btn {
box-shadow: var(--blue) 0px 0px 25px;
}
.choose-btn {
font-size: 2em;
margin: 5px;
padding: 50px;
border-radius: var(--border-radius);
color: var(--white);
transition: all 0.1s ease-out;
}
.choose-btn:hover {
cursor: pointer;
box-shadow: 0px 0px 5px;
}
.red {background-color: var(--red);}
.red:hover {box-shadow: 0 0 10px var(--red);}
.red:active {background-color: var(--dark-red);}
.blue {background-color: var(--blue);}
.blue:hover {box-shadow: 0 0 10px var(--blue);}
.blue:active {background-color: var(--dark-blue);}
.green {background-color: var(--green);}
.green:hover {box-shadow: 0 0 10px var(--green);}
.green:active {background-color: var(--dark-green);}
.purple {background-color: var(--purple);}
.purple:hover {box-shadow: 0 0 10px var(--purple);}
.purple:active {background-color: var(--dark-purple);}
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}