From 7e89d45abcba9f0622dcf0eeb8f57e3ca58adced Mon Sep 17 00:00:00 2001
From: MrEidam <adammbrich@gmail.com>
Date: Sun, 11 Aug 2024 00:25:56 +0200
Subject: [PATCH] Dice war 0.3

---
 Games/DiceWar/Dices/0.png | Bin 0 -> 136 bytes
 Games/DiceWar/Dices/1.png | Bin 0 -> 145 bytes
 Games/DiceWar/Dices/2.png | Bin 0 -> 148 bytes
 Games/DiceWar/Dices/3.png | Bin 0 -> 146 bytes
 Games/DiceWar/Dices/4.png | Bin 0 -> 149 bytes
 Games/DiceWar/Dices/5.png | Bin 0 -> 156 bytes
 Games/DiceWar/Dices/6.png | Bin 0 -> 149 bytes
 Games/DiceWar/Dices/7.png | Bin 0 -> 158 bytes
 Games/DiceWar/index.html  |  41 ++++++++++++++++++++++
 Games/DiceWar/main.js     |  70 ++++++++++++++++++++++++++++++++++++++
 Games/DiceWar/style.css   |  56 ++++++++++++++++++++++++++++++
 Games/index.html          |   1 +
 12 files changed, 168 insertions(+)
 create mode 100644 Games/DiceWar/Dices/0.png
 create mode 100644 Games/DiceWar/Dices/1.png
 create mode 100644 Games/DiceWar/Dices/2.png
 create mode 100644 Games/DiceWar/Dices/3.png
 create mode 100644 Games/DiceWar/Dices/4.png
 create mode 100644 Games/DiceWar/Dices/5.png
 create mode 100644 Games/DiceWar/Dices/6.png
 create mode 100644 Games/DiceWar/Dices/7.png
 create mode 100644 Games/DiceWar/index.html
 create mode 100644 Games/DiceWar/main.js
 create mode 100644 Games/DiceWar/style.css

diff --git a/Games/DiceWar/Dices/0.png b/Games/DiceWar/Dices/0.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b15753adfd76489ce2388a272deaf8496413999
GIT binary patch
literal 136
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~&3?$8t&j<igjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCik>1AIbU|NsBL{D|}kAeXbiBeIx*f$uN~Gak=hkpdLt^K@|x(Kw$h!D_<H
a!^6NB$H2(++vYt`hQZU-&t;ucLK6TSTOk+#

literal 0
HcmV?d00001

diff --git a/Games/DiceWar/Dices/1.png b/Games/DiceWar/Dices/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee9dd0c0a6d5077ca51c7a2efd29cd3ea93e4e7b
GIT binary patch
literal 145
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~&3?$8t&j<igjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCils0(?ST|Ns9FWQHEPTnD5$3p^r=85sBugD~Uq{1qucK@m?E#}JM4$r2?F
i0RatMdk!*4NHDDNWcdBLtH2H@&*16m=d#Wzp$PzU)+Pl2

literal 0
HcmV?d00001

diff --git a/Games/DiceWar/Dices/2.png b/Games/DiceWar/Dices/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d5367425aea5db023bf46762298d5bc64961b55
GIT binary patch
literal 148
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~&3?$8t&j<igjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCils0(?ST|Ns9FWQHEPTnD5$3p^r=85sBugD~Uq{1qucL2*wP#}JM4$qHN?
lTwDQ-=06y6{~kTSz!2`t`1Qz=SQDTU22WQ%mvv4FO#tE=CkOxl

literal 0
HcmV?d00001

diff --git a/Games/DiceWar/Dices/3.png b/Games/DiceWar/Dices/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..5515f936676967d2a83b4cdcac5d53c09c58b7b4
GIT binary patch
literal 146
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~&3?$8t&j<igjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCils0(?ST|Ns9FWQHEPTnD5$3p^r=85sBugD~Uq{1qucK~YZ^#}JM4$qHN?
jTwDQ-=9k_iB``2B*)qM?HCU|%RKVcr>gTe~DWM4fZ}TK{

literal 0
HcmV?d00001

diff --git a/Games/DiceWar/Dices/4.png b/Games/DiceWar/Dices/4.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd06bc05f7f527d28c87f611fd105b522b8dc31d
GIT binary patch
literal 149
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~&3?$8t&j<igjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCils0(?ST|Ns9FWQHEPTnD5$3p^r=85sBugD~Uq{1qucK?zS6#}JM4$p^Su
mSXn1z6je5hU$|D!!^5yvgZZV-635j*H4L7velF{r5}E)LJ11KJ

literal 0
HcmV?d00001

diff --git a/Games/DiceWar/Dices/5.png b/Games/DiceWar/Dices/5.png
new file mode 100644
index 0000000000000000000000000000000000000000..f561fc8ad4fac3fa13bb6a7414654aaf2f3ca265
GIT binary patch
literal 156
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~&3?$8t&j<igjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCils0(?ST|Ns9FWQHEPTnD5$3p^r=85sBugD~Uq{1qucL3vLX#}JM4$p^Su
uSXn1z6jd%^46%Lk$zyZ3*}voj28IYFmd6*$Qgnby89ZJ6T-G@yGyworsw&O^

literal 0
HcmV?d00001

diff --git a/Games/DiceWar/Dices/6.png b/Games/DiceWar/Dices/6.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a33870b7a710376d462c91f034b1591b2e6da4b
GIT binary patch
literal 149
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~&3?$8t&j<igjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCils0(?ST|Ns9FWQHEPTnD5$3p^r=85sBugD~Uq{1qucK?zS6#}JM4$p^Su
mSXn1z6jdH+ewZrH%*?<n!+Q5-%dAO2H4L7velF{r5}E)Hj3+|?

literal 0
HcmV?d00001

diff --git a/Games/DiceWar/Dices/7.png b/Games/DiceWar/Dices/7.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f2ce22e4bc1f9fd1569932e419afaf218c1086f
GIT binary patch
literal 158
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~&3?$8t&j<igjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCils0(?ST|Ns9FWQHEPTnD5$3p^r=85sBugD~Uq{1qucK}Am&#}JM4$p^Su
wSXn1z6jdH!o=_#BHs5_#Esx1(d1hvYb?j`{S>6bo2P$UpboFyt=akR{0DXul)c^nh

literal 0
HcmV?d00001

diff --git a/Games/DiceWar/index.html b/Games/DiceWar/index.html
new file mode 100644
index 0000000..a5d1360
--- /dev/null
+++ b/Games/DiceWar/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="./icon.png" type="image/x-icon">
+
+    <title>Dice War</title>
+</head>
+<body>
+    <article>
+        <div style="--clr: #cd2525;">
+            <section>
+                <img src="./Dices/7.png" alt="Enemy Dice" id="enDice1">
+                <img src="./Dices/7.png" alt="Enemy Dice" id="enDice2">
+                <img src="./Dices/7.png" alt="Enemy Dice" id="enDice3">
+                <img src="./Dices/7.png" alt="Enemy Dice" id="enDice4">
+                <img src="./Dices/7.png" alt="Enemy Dice" id="enDice5">
+            </section>
+            <h2>Enemy score: <span id="enemyScore">0</span></h2>
+        </div>
+        <div style="--clr: #2525cd;">
+            <h2>Your score: <span id="playerScore">0</span></h2>
+            <section>
+                <img src="./Dices/7.png" alt="Player Dice" id="plDice1">
+                <img src="./Dices/7.png" alt="Player Dice" id="plDice2">
+                <img src="./Dices/7.png" alt="Player Dice" id="plDice3">
+                <img src="./Dices/7.png" alt="Player Dice" id="plDice4">
+                <img src="./Dices/7.png" alt="Player Dice" id="plDice5">
+            </section>
+            <main>
+                <h3>Do you think that you have <select id="choice"><option value="1">more</option><option value="2">less</option></select> score then the Enemy?</h3>
+                <button onclick="gamble()">Let's find out!</button>
+            </main>
+        </div>
+    </article>
+    <script src="main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Games/DiceWar/main.js b/Games/DiceWar/main.js
new file mode 100644
index 0000000..fb9fe3d
--- /dev/null
+++ b/Games/DiceWar/main.js
@@ -0,0 +1,70 @@
+let enemy = [
+    document.querySelector('#enDice1'),
+    document.querySelector('#enDice2'),
+    document.querySelector('#enDice3'),
+    document.querySelector('#enDice4'),
+    document.querySelector('#enDice5'),
+];
+let player = [
+    document.querySelector('#plDice1'),
+    document.querySelector('#plDice2'),
+    document.querySelector('#plDice3'),
+    document.querySelector('#plDice4'),
+    document.querySelector('#plDice5'),
+];
+let enScore = document.querySelector('#enemyScore');
+let plaScore = document.querySelector('#playerScore');
+
+let enemyScore = 0;
+let playerScore = 0;
+
+function ranD6(){
+    return Math.floor(Math.random()*6)+1;
+}
+
+function enemyRoll(){
+    enemyScore = 0;
+    enemy.forEach(e => {
+        const point = ranD6();
+        enemyScore += point;
+        e.src = `./Dices/${point}.png`;
+        e.classList.value="";
+        e.classList.add("pop");
+        setTimeout(() => {
+            e.classList.remove('pop');
+        },500);
+    });
+    enScore.innerHTML = enemyScore;
+}
+
+function playerRoll(){
+    playerScore = 0;
+
+    player.forEach(e => {
+        const point = ranD6();
+        playerScore += point;
+        e.src = `./Dices/${point}.png`;
+        e.classList.value="";
+        e.classList.add("pop");
+        setTimeout(() => {
+            e.classList.remove('pop');
+        },500);
+    });
+    plaScore.innerHTML = playerScore;
+}
+
+function gamble(){
+    enemyRoll();
+    playerRoll();
+    setTimeout(() => {
+        if(playerScore>enemyScore){
+            alert('You won!');
+        }else if(playerScore<enemyScore){
+            alert(`You've lost`);
+        }else{
+            alert('Draw');
+            console.log(`Player: ${playerScore}`);
+            console.log(`Enemy: ${enemyScore}`);
+        }
+    }, 700);
+}
\ No newline at end of file
diff --git a/Games/DiceWar/style.css b/Games/DiceWar/style.css
new file mode 100644
index 0000000..b51bd52
--- /dev/null
+++ b/Games/DiceWar/style.css
@@ -0,0 +1,56 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 100vh;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+}
+img{
+    width: 100px;
+    height: 100px;
+    margin: 1rem;
+    border-radius: 10px;
+    filter: drop-shadow(1.5px 1.5px 6px #aaa);
+}
+div{
+    min-height: 50vh;
+    min-width: 100dvw;
+    background-color: var(--clr);
+
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+button{
+    margin-top: .5rem;
+}
+img.pop{
+    animation: pop 0.2s ease-in-out;
+}
+@keyframes pop{
+    0%{
+        scale: 0.1;
+    }
+    100%{
+        scale: 1;
+    }
+}
+
+
+@media screen and (max-width: 500px){
+    img{
+        width: 40px;
+        height: 40px;
+        margin: .75rem;
+        border-radius: 5px;
+    }
+}
\ No newline at end of file
diff --git a/Games/index.html b/Games/index.html
index ee51c34..a6b6226 100644
--- a/Games/index.html
+++ b/Games/index.html
@@ -9,5 +9,6 @@
     <a href="./2048/">2048</a>
     <a href="./RockPaperScissors/">RockPaperScissors</a>
     <a href="./QuessNumber-1D6/">QuessNumber-1D6</a>
+    <a href="./DiceWar/">DiceWar</a>
 </body>
 </html>
\ No newline at end of file