Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@im-parsa
im-parsa authored Sep 14, 2021
1 parent 0f0590e commit ac39991
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 59 deletions.
53 changes: 29 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,40 @@

</head>

<body>
<body id='particles-js'>

<main>

<section class="player player--0 player--active">
<h2 class="name" id="name--0">Player 1</h2>
<p class="score" id="score--0">43</p>
<div class="current">
<p class="current-label">Current</p>
<p class="current-score" id="current--0">0</p>
</div>
</section>

<section class="player player--1">
<h2 class="name" id="name--1">Player 2</h2>
<p class="score" id="score--1">24</p>
<div class="current">
<p class="current-label">Current</p>
<p class="current-score" id="current--1">0</p>
</div>
</section>

<img src="dice-5.png" alt="Playing dice" class="dice" />

<button class="btn btn--new"><i class="fa-solid fa-retweet"></i> New game</button>
<button class="btn btn--roll"><i class="fa-solid fa-dice"></i> Roll dice</button>
<button class="btn btn--hold"><i class="fa-solid fa-pause"></i> Hold</button>
<section style='margin-left: -100px' class="player player--0 player--active">
<h2 class="name" id="name--0">بازیکن اول</h2>
<p class="score" id="score--0">0</p>
<div class="current">
<p class="current-label">امتیاز</p>
<p class="current-score" id="current--0">0</p>
</div>
</section>

<section style='margin-right: -100px' class="player player--1">
<h2 class="name" id="name--1">بازیکن دوم</h2>
<p class="score" id="score--1">0</p>
<div class="current">
<p class="current-label">امتیاز</p>
<p class="current-score" id="current--1">0</p>
</div>
</section>

<img src="dice-5.png" alt="Playing dice" class="dice" />

<button class="btn btn--new"><i class="fa-solid fa-retweet"></i> شروع مجدد</button>
<button class="btn btn--roll"><i class="fa-solid fa-dice"></i> چرخش تاس</button>
<button class="btn btn--hold"><i class="fa-solid fa-pause"></i> توقف</button>

</main>

<a class='my-link' href='https://parsa-firoozi.ir/' >
<i class="fa-solid fa-p"></i>
</a>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="script.js"></script>

</body>
Expand Down
145 changes: 130 additions & 15 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
'use strict';

// Selecting elements
const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');
const score0El = document.querySelector('#score--0');
const score1El = document.getElementById('score--1');
const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');
const
player0El = document.querySelector('.player--0'),
player1El = document.querySelector('.player--1'),
score0El = document.querySelector('#score--0'),
score1El = document.getElementById('score--1'),
current0El = document.getElementById('current--0'),
current1El = document.getElementById('current--1'),

const diceEl = document.querySelector('.dice');
const btnNew = document.querySelector('.btn--new');
const btnRoll = document.querySelector('.btn--roll');
const btnHold = document.querySelector('.btn--hold');
diceEl = document.querySelector('.dice'),
btnNew = document.querySelector('.btn--new'),
btnRoll = document.querySelector('.btn--roll'),
btnHold = document.querySelector('.btn--hold');

let scores, currentScore, activePlayer, playing;
let
scores,
currentScore,
activePlayer,
playing;

// Starting conditions
const init = function ()
Expand Down Expand Up @@ -62,9 +67,7 @@ btnRoll.addEventListener('click', function ()
{
// Add dice to current score
currentScore += dice;
document.getElementById(
`current--${activePlayer}`
).textContent = currentScore;
document.getElementById(`current--${activePlayer}`).textContent = currentScore;
}
else
// Switch to next player
Expand All @@ -87,8 +90,8 @@ btnHold.addEventListener('click', function ()
if (scores[activePlayer] >= 100)
{
// Finish the game
playing = false;
diceEl.classList.add('hidden');
playing = false;

document
.querySelector(`.player--${activePlayer}`)
Expand All @@ -104,3 +107,115 @@ btnHold.addEventListener('click', function ()
});

btnNew.addEventListener('click', init);


const divParticlesJS = document.querySelector('#particles-js');

if (divParticlesJS)
particlesJS("particles-js",
{
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 1200
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
},
"opacity": {
"value": 0.3,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 180,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
);
60 changes: 40 additions & 20 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');

*
{
Expand All @@ -15,11 +15,11 @@ html

body
{
font-family: 'Nunito', sans-serif;
font-family: 'Lalezar', sans-serif;
font-weight: 400;
height: 100vh;
color: #333;
background-image: linear-gradient(to top left, #48aeff 0%, #2e41bf 100%);
background-image: linear-gradient(to top left, #033c93 0%, #2e41bf 100%);
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -28,19 +28,39 @@ body
/* LAYOUT */
main
{
position: relative;
width: 100rem;
background: rgba( 255, 255, 255, 0.6 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
position: absolute;
width: 110rem;
height: 60rem;
background-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(200px);
filter: blur();
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
border-radius: 9px;
border-radius: 25px;
overflow: hidden;
display: flex;
transform: scale(1.2);
}

.my-link
{
border-radius: 50rem;
width: 70px;
height: 70px;
background: white;
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.3 );
display: flex;
justify-items: center;
align-items: center;
justify-content: center;
margin: auto;
color: #2e41bf;
font-size: 22px;
text-decoration: none;
position: absolute;
bottom: 20px;
right: 20px;
}

.player
{
flex: 50%;
Expand All @@ -57,7 +77,6 @@ main
position: relative;
font-size: 4rem;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 2px;
font-weight: 300;
margin-bottom: 1rem;
Expand All @@ -69,6 +88,9 @@ main
font-weight: 300;
color: #3a73dc;
margin-bottom: auto;
background: -webkit-linear-gradient(50deg, #3c6fcf, #183d81);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.player--active
Expand All @@ -91,9 +113,9 @@ main

.current
{
background-color: #48aeff;
background-color: rgba(0, 0, 0, 0.055);
opacity: 0.8;
border-radius: 9px;
border-radius: 25px;
color: #fff;
width: 65%;
padding: 2rem;
Expand All @@ -106,7 +128,7 @@ main
text-transform: uppercase;
margin-bottom: 1rem;
font-size: 1.7rem;
color: #ddd;
color: #f1f1f1;
}

.current-score
Expand All @@ -121,25 +143,23 @@ main
left: 50%;
transform: translateX(-50%);
color: #444;
background: none;
border: none;
font-family: inherit;
font-size: 1.8rem;
text-transform: uppercase;
cursor: pointer;
font-weight: 400;
transition: all 0.2s;
background-color: white;
background-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(10px);
padding: 0.7rem 2.5rem;
border-radius: 50rem;
padding: 0.7rem 1.2rem;
border-radius: 1.5rem;
box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
}

.btn:hover
{
background-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.2);
}

Expand Down

0 comments on commit ac39991

Please sign in to comment.