Skip to content

L
Learning JavaScript
Commit 2cd8e2d4 authored by MohammadAli Keshavarz's avatar MohammadAli Keshavarz
Browse files
Options

change code format of style.css and change current score of player by random number

parent 2f4f095d
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 100 deletions
section3/app.js
View file @ 2cd8e2d4
...@@ -5,4 +5,13 @@ GAME RULES: ...@@ -5,4 +5,13 @@ GAME RULES:
- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn - BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn
- The player can choose to 'Hold', which means that his ROUND score gets added to his GLBAL score. After that, it's the next player's turn - The player can choose to 'Hold', which means that his ROUND score gets added to his GLBAL score. After that, it's the next player's turn
- The first player to reach 100 points on GLOBAL score wins the game - The first player to reach 100 points on GLOBAL score wins the game
*/ */
\ No newline at end of file
var scores, dice, roundScore, activePlayer;
scores = [0, 0];
roundScore = 0;
activePlayer = 0;
dice = Math.floor(Math.random() * 6) + 1;
document.querySelector('#current-' + activePlayer ).textContent = dice;
section3/style.css
View file @ 2cd8e2d4
...@@ -3,152 +3,171 @@ ...@@ -3,152 +3,171 @@
**********************************************/ **********************************************/
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.clearfix::after { .clearfix::after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
body { body {
background-image: linear-gradient(rgba(62, 20, 20, 0.4), rgba(62, 20, 20, 0.4)), url(back.jpg); background-image: linear-gradient(
background-size: cover; rgba(62, 20, 20, 0.4),
background-position: center; rgba(62, 20, 20, 0.4)
font-family: Lato; ),
font-weight: 300; url(back.jpg);
position: relative; background-size: cover;
height: 100vh; background-position: center;
color: #555; font-family: Lato;
font-weight: 300;
position: relative;
height: 100vh;
color: #555;
} }
.wrapper { .wrapper {
width: 1000px; width: 1000px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: #fff; background-color: #fff;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3); box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
overflow: hidden; overflow: hidden;
} }
.player-0-panel, .player-0-panel,
.player-1-panel { .player-1-panel {
width: 50%; width: 50%;
float: left; float: left;
height: 600px; height: 600px;
padding: 100px; padding: 100px;
} }
/********************************************** /**********************************************
*** PLAYERS *** PLAYERS
**********************************************/ **********************************************/
.player-name { .player-name {
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 100; font-weight: 100;
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
} }
.player-score { .player-score {
text-align: center; text-align: center;
font-size: 80px; font-size: 80px;
font-weight: 100; font-weight: 100;
color: #EB4D4D; color: #eb4d4d;
margin-bottom: 130px; margin-bottom: 130px;
} }
.active { background-color: #f7f7f7; } .active {
.active .player-name { font-weight: 300; } background-color: #f7f7f7;
}
.active .player-name {
font-weight: 300;
}
.active .player-name::after { .active .player-name::after {
content: "\2022"; content: "\2022";
font-size: 47px; font-size: 47px;
position: absolute; position: absolute;
color: #EB4D4D; color: #eb4d4d;
top: -7px; top: -7px;
right: 10px; right: 10px;
} }
.player-current-box { .player-current-box {
background-color: #EB4D4D; background-color: #eb4d4d;
color: #fff; color: #fff;
width: 40%; width: 40%;
margin: 0 auto; margin: 0 auto;
padding: 12px; padding: 12px;
text-align: center; text-align: center;
} }
.player-current-label { .player-current-label {
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 12px; font-size: 12px;
color: #222; color: #222;
} }
.player-current-score { .player-current-score {
font-size: 30px; font-size: 30px;
} }
button { button {
position: absolute; position: absolute;
width: 200px; width: 200px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
color: #555; color: #555;
background: none; background: none;
border: none; border: none;
font-family: Lato; font-family: Lato;
font-size: 20px; font-size: 20px;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; cursor: pointer;
font-weight: 300; font-weight: 300;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
button:hover { font-weight: 600; } button:hover {
button:hover i { margin-right: 20px; } font-weight: 600;
}
button:hover i {
margin-right: 20px;
}
button:focus { button:focus {
outline: none; outline: none;
} }
i { i {
color: #EB4D4D; color: #eb4d4d;
display: inline-block; display: inline-block;
margin-right: 15px; margin-right: 15px;
font-size: 32px; font-size: 32px;
line-height: 1; line-height: 1;
vertical-align: text-top; vertical-align: text-top;
margin-top: -4px; margin-top: -4px;
transition: margin 0.3s; transition: margin 0.3s;
} }
.btn-new { top: 45px;} .btn-new {
.btn-roll { top: 403px;} top: 45px;
.btn-hold { top: 467px;} }
.btn-roll {
top: 403px;
}
.btn-hold {
top: 467px;
}
.dice { .dice {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 178px; top: 178px;
transform: translateX(-50%); transform: translateX(-50%);
height: 100px; height: 100px;
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10); box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1);
} }
.winner { background-color: #f7f7f7; } .winner {
.winner .player-name { font-weight: 300; color: #EB4D4D; } background-color: #f7f7f7;
\ No newline at end of file }
.winner .player-name {
font-weight: 300;
color: #eb4d4d;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment