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> </head>
<body> <body>
<div class="container"> <div id="container" class="container">
<!-- Header --> <!-- Header -->
<div style="visibility:hidden" id="turn_canvas" 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> <h3 id=turn class="turn-hacker unselectable">Hacker's turn</h3>
</div> </div>
<!-- Question --> <!-- Question -->
<div class="row text-center"> <div style="padding-top: 30vh;" class="row text-center">
<h1 id="title">Input players pseudo</h1> <h1 id="title" class="unselectable">Input players pseudo</h1>
</div> </div>
<!-- Input pseudo --> <!-- 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"> <div class="col-md-6">
<input id="player_one_input" type="text" placeholder="Player 1"/> <input id="player_one_input" type="text" placeholder="Player 1"/>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="player_two_input" type="text" placeholder="Player 2"/> <input id="player_two_input" type="text" placeholder="Player 2"/>
</div> </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"/> <input onclick="startGame()" class="btn btn-primary" type="button" value="Let's start the game"/>
</div> </div>
</div> </div>
<!-- Answers --> <!-- 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 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>
<div class="col-md-6"> <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> </div>
</div> </div>
script.js
+12 -3
View File
@@ -8,9 +8,6 @@ let expCyber = 0;
function main() { function main() {
// test
expCyber = 10;
nextTurn(turn); nextTurn(turn);
answersCanvasElement.style.visibility = "visible"; answersCanvasElement.style.visibility = "visible";
turnCanvasElement.style.visibility = "visible"; turnCanvasElement.style.visibility = "visible";
@@ -30,12 +27,24 @@ function nextTurn(id) {
/* Hacker Turn */ /* Hacker Turn */
turnTitle.classList.remove("turn-cyber"); turnTitle.classList.remove("turn-cyber");
turnTitle.classList.add("turn-hacker"); 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 { } else {
/* Cyber Turn */ /* Cyber Turn */
turnTitle.classList.remove("turn-hacker"); turnTitle.classList.remove("turn-hacker");
turnTitle.classList.add("turn-cyber"); 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; titleElement.innerText = data[id].question;
answerOneInput.innerText = data[id].answers[0]; answerOneInput.innerText = data[id].answers[0];
answerTwoInput.innerText = data[id].answers[1]; answerTwoInput.innerText = data[id].answers[1];
style.css
+25 -26
View File
@@ -17,50 +17,49 @@
.container {min-height: 100vh;} .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 { #turn {
text-align: center; text-align: center;
border-radius: 0 0 var(--border-radius) var(--border-radius); border-radius: 0 0 var(--border-radius) var(--border-radius);
padding: 15px 0; padding: 15px 0;
transition: 0.25s all ease-in-out;
} }
.turn-hacker {background-color: var(--red);} #turn.turn-hacker {
.turn-cyber {background-color:var(--blue);} background-color: var(--red);
}
#turn.turn-cyber {
background-color:var(--blue);
}
.title {margin: 100px 0;} .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 { .choose-btn {
font-size: 2em; font-size: 2em;
margin: 5px; margin: 5px;
padding: 50px; padding: 50px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--white);
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
} }
.choose-btn:hover { .choose-btn:hover {
cursor: pointer; cursor: pointer;
box-shadow: 0px 0px 5px;
} }
.red {background-color: var(--red);} .unselectable {
.red:hover {box-shadow: 0 0 10px var(--red);} -webkit-touch-callout: none;
.red:active {background-color: var(--dark-red);} -webkit-user-select: none;
-khtml-user-select: none;
.blue {background-color: var(--blue);} -moz-user-select: none;
.blue:hover {box-shadow: 0 0 10px var(--blue);} -ms-user-select: none;
.blue:active {background-color: var(--dark-blue);} user-select: none;
}
.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);}