From 5b6c5d9431b352d58f7686204cea60a7417917b1 Mon Sep 17 00:00:00 2001
From: MrEidam <adammbrich@gmail.com>
Date: Wed, 14 Aug 2024 12:09:08 +0200
Subject: [PATCH] Dice war logic

---
 Games/DiceWar/main.js   | 36 +++++++++++++++++++++++++++++++++---
 Games/DiceWar/style.css | 40 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/Games/DiceWar/main.js b/Games/DiceWar/main.js
index fb9fe3d..bbfdb2a 100644
--- a/Games/DiceWar/main.js
+++ b/Games/DiceWar/main.js
@@ -53,16 +53,46 @@ function playerRoll(){
     plaScore.innerHTML = playerScore;
 }
 
+async function won(){
+    let won = document.createElement('h1');
+    won.classList.add('result', 'won');
+    won.innerText = "You've won!";
+    document.body.append(won);
+    setTimeout(() => {
+        won.remove();
+    }, 600);
+}
+
+async function lost(){
+    let lost = document.createElement('h1');
+    lost.classList.add('result', 'lost');
+    lost.innerText = "You've lost!";
+    document.body.append(lost);
+    setTimeout(() => {
+        lost.remove();
+    }, 600);
+}
+
+async function draw(){
+    let draw = document.createElement('h1');
+    draw.classList.add('result', 'draw');
+    draw.innerText = "It's a draw!";
+    document.body.append(draw);
+    setTimeout(() => {
+        draw.remove();
+    }, 600);
+}
+
 function gamble(){
     enemyRoll();
     playerRoll();
     setTimeout(() => {
         if(playerScore>enemyScore){
-            alert('You won!');
+            won();
         }else if(playerScore<enemyScore){
-            alert(`You've lost`);
+            lost();
         }else{
-            alert('Draw');
+            draw();
             console.log(`Player: ${playerScore}`);
             console.log(`Enemy: ${enemyScore}`);
         }
diff --git a/Games/DiceWar/style.css b/Games/DiceWar/style.css
index b51bd52..a96d0fa 100644
--- a/Games/DiceWar/style.css
+++ b/Games/DiceWar/style.css
@@ -32,10 +32,47 @@ div{
 }
 button{
     margin-top: .5rem;
+    padding: .5rem;
+    border: none;
+    border-radius: 5px;
+    box-shadow: 
+        inset 2px 2px 5px #ddddddcc,
+        2px 2px 5px #111;
+    background: darkblue;
+    color: #fff;
 }
 img.pop{
     animation: pop 0.2s ease-in-out;
 }
+
+.result{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    filter: drop-shadow(1.5px 1.5px 6px #000);
+    text-transform: uppercase;
+    font-size: 125px;
+}
+
+.won{
+    color: #0f0;
+    animation: pop 0,5s ease-in-out;
+    transition: .5s;
+}
+
+.lost{
+    color: #f00;
+    animation: pop 0,5s ease-in-out;
+    transition: .5s;
+}
+
+.draw{
+    color: #ff0;
+    animation: pop 0,5s ease-in-out;
+    transition: .5s;
+}
+
 @keyframes pop{
     0%{
         scale: 0.1;
@@ -53,4 +90,7 @@ img.pop{
         margin: .75rem;
         border-radius: 5px;
     }
+    .result{
+        font-size: 69px;
+    }
 }
\ No newline at end of file