Dice war logic

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}`);
         }

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;
+    }
 }