Skip to content

Commit

Permalink
Merge pull request #4 from Hallimasa/test
Browse files Browse the repository at this point in the history 
Fixed broken functions and Added new css elements
  • Loading branch information
@Hallimasa
Hallimasa authored Sep 4, 2023
2 parents 0158757 + b1d1f51 commit 65ee3c9
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 60 deletions.
1 change: 1 addition & 0 deletions attach/github-mark-white.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions attach/github-mark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 31 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ <h1>Rock, Paper, Scissors</h1>
<section>
<button id="buttonPlay" class="actionButton visible" onclick="playButton()">PLAY</button>
<div id="buttonDifficulty" class="actionButton invisible" >
<button onclick="selectDifficult(0)"><span class="textGreen">EASY</span></button>
<button onclick="selectDifficult(1)"><span class="textOrange">NORMAL</span></button>
<button onclick="selectDifficult(2)"><span class="textRed">HARD</span></button>
<button onclick="selectDifficult(0)">EASY</button>
<button onclick="selectDifficult(1)">NORMAL</button>
<button onclick="selectDifficult(2)">HARD</button>
</div>
<div id="buttonActions" class="actionButton invisible" >
<button id="buttonAction" onclick="game(computerchoice,'Rock',difficulty[0])">&#128074</button>
Expand All @@ -30,27 +30,36 @@ <h1>Rock, Paper, Scissors</h1>
<p>You</p>
<p>Computer</p>
</div>
<div class="textLog">
<section id="footerCriticalInfo" class="invisible">
<p><span class="textRed">Critical move</span> only computer has a chance to use 2 moves instead of 1, and choose the best one.</p>
<ul>
<li><span class="textGreen">EASY</span> = <span class="textGreen">5%</span> Critical chance on computer moves</li>
<li><span class="textOrange">NORMAL</span> = <span class="textOrange">25%</span> Critical chance on computer moves</li>
<li><span class="textRed">HARD</span> = <span class="textRed">50%</span> Critical chance on computer moves</li>
</ul>
</section>
<section>
<div id="textActions" class="invisible">
<p id="round1"></p>
<p id="round2"></p>
<p id="round3"></p>
<p id="round4"></p>
<p id="round5"></p>
<p id="finalResults"></p>
</div>
<p id="textResults" class="text invisible"></p>
</section>
</div>
</main>
<footer>
<section id="footerCriticalInfo" class="invisible">
<p><span class="textRed">Critical move</span> only computer has a chance to use 2 moves instead of 1, and choose the best one.</p>
<ul>
<li><span class="textGreen">EASY</span> = <span class="textGreen">5%</span> Critical chance on computer moves</li>
<li><span class="textOrange">NORMAL</span> = <span class="textOrange">25%</span> Critical chance on computer moves</li>
<li><span class="textRed">HARD</span> = <span class="textRed">50%</span> Critical chance on computer moves</li>
</ul>
</section>
<section>
<div id="textActions" class="invisible">
<p id="round1"></p>
<p id="round2"></p>
<p id="round3"></p>
<p id="round4"></p>
<p id="round5"></p>
<p id="finalResults"></p>
</div>
<p id="textResults" class="text invisible"></p>
</section>
<div>
<a href="https://github.com/Hallimasa/rock-paper-scissors-odinProject">
<img src="./attach/github-mark.svg" style="width: 40px;" alt="Hallimasa">
<img src="./attach/github-mark-white.svg" id="gitImgHidden" style="width: 40px; position: absolute;" alt="Hallimasa">
<p>Hallimasa</p>
</a>
</div>
</footer>
<script src="./script.js"></script>
</body>
Expand Down
23 changes: 16 additions & 7 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,19 +142,28 @@ function game(computerchoice,playerchoice,level) {
document.getElementById("round3").innerHTML = `${emojiP[iR]} - Round ${iR+1} - ${rounds[iR]} - ${emojiC[iR]}`;
document.getElementById("round3").classList.add(`${rounds[iR]}`);
document.getElementById("mainTextId").innerHTML = "Round 4 of 5 choose your move !";
if ((rounds.filter(filterGameWin).length) >= 3 || (rounds.filter(filterGameLose).length) >= 3){
if ((rounds.filter(filterGameWin).length) == 3 || (rounds.filter(filterGameLose).length) == 3){
endGame(rounds,results);
}
} else if (iR == 3){
document.getElementById("round4").innerHTML = `${emojiP[iR]} - Round ${iR+1} - ${rounds[iR]} - ${emojiC[iR]}`;
document.getElementById("round4").classList.add(`${rounds[iR]}`);
document.getElementById("mainTextId").innerHTML = "Round 5 of 5 choose your move !";
if ((rounds.filter(filterGameWin).length) >= 3 ||
(rounds.filter(filterGameLose).length) >= 3 ||
((rounds.filter(filterGameTie).length>=2)&&(rounds.filter(filterGameWin).length>=2)||rounds.filter(filterGameLose).length>=2)
){

if (rounds.filter(filterGameWin).length == 3 || rounds.filter(filterGameLose).length == 3){
endGame(rounds,results);
console.log("test1");
console.log(rounds);
} else if (rounds.filter(filterGameTie).length == 2 && rounds.filter(filterGameWin).length == 2){
endGame(rounds,results);
console.log("test2");
console.log(rounds);
} else if (rounds.filter(filterGameTie).length == 2 && rounds.filter(filterGameLose).length == 2){
endGame(rounds,results);
console.log("test3");
console.log(rounds);
}

} else if (iR >= 4){
document.getElementById("round5").innerHTML = `${emojiP[iR]} - Round ${iR+1} - ${rounds[iR]} - ${emojiC[iR]}`;
document.getElementById("round5").classList.add(`${rounds[iR]}`);
Expand Down Expand Up @@ -226,9 +235,9 @@ function filterGameLose(value){
}
}
function filterGameTie(value){
if (value == "lose"){
if (value == "tie"){
return value
}
}
}

const rounds = [];
Expand Down
116 changes: 85 additions & 31 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
@import url('https://fonts.googleapis.com/css2?family=Handjet&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handjet&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@1,400;1,700&display=swap');

* {
font-family: 'Handjet', cursive !important;
font-family: 'Chakra Petch', sans-serif;
font-weight: 400;
box-sizing: border-box;
}

html {
height: 100vh;
width: 100vw;
min-width: 360px;
display: flex;
align-items:start;
justify-content: center;
}
body {
background-color: rgb(23, 26, 33);
color: rgb(199, 213, 224);
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: rgb(25,25,45);
color: rgb(255, 255, 255);
height: 680px;
width: 540px;
justify-content: space-between;
}

.actionButton {
Expand All @@ -33,73 +31,102 @@ body {

h1 , #finalResults {
font-weight: bold;
font-size: 4rem;
font-size: 3rem;
text-align: center;
}

p , li {
font-size: 1.8em;
font-size: 1.4em;
margin: 0;
}

a:link, a::after {
a:link, a:visited {
text-decoration: none;
color: black;
color: rgb(199, 213, 224);
}

main div {
display: flex;
justify-content: space-between;
}

div > p {
text-align: start;
main div p {
text-align:start;
margin: 6px 0;
padding: 2px 16px;
}

main p {
text-align: center;
margin: 12px 0px;
}

button {
border-radius: 12px;
margin: 0 12px;
padding: 6px 12px;
font-size: 1.8em;
font-size: 1.4em;
background-color: rgb(42, 71, 94);
color: rgb(199, 213, 224);

}

main {
flex-grow: 1;
height: fit-content;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

header {
background-color: rgb(27, 40, 56);
}

header, main section, footer{
height: 100px;
header, main section, .textLog{
display: flex;
align-items: center;
justify-content: center;
justify-content: start;
flex-direction: column;
}

footer {
.textLog {
height: 320px;
}

section > .actionButton, section > .text {
#textActions {
display: block;
}

section > .actionButton, section > .text , .textLog > section{
position: absolute;
}

#playersId {
margin: 46px auto 12px auto;
width: 400px;
}

#footerCriticalInfo {
width: 540px;
}

@media (max-width:560px) {
p , li {
font-size: 1.2em;
font-size: 0.8em;
}
#playersId {
width: 300px;
margin: auto;
}
h1 {
font-size: 3em;
font-size: 2em;
}
footer {
.textLog {
height: 200px;
}
#footerCriticalInfo {
width: 300px;
}
}

.textRed {
Expand All @@ -121,13 +148,40 @@ section > .actionButton, section > .text {
}

.win {
border: 3px solid green;
border: 2px solid green;
border-radius: 12px;
}

.lose {
border: 3px solid red;
border: 2px solid red;
border-radius: 12px;
}

.tie {
border: 3px solid orange;
}
border: 2px solid orange;
border-radius: 12px;
}


footer {
background-color: rgb(27, 40, 56);
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}

footer div a {
display: flex;
align-items: center;
}

footer div:hover {
#gitImgHidden {
visibility: hidden;
}
}

footer div p {
margin-left: 12px;
}

0 comments on commit 65ee3c9

Please sign in to comment.