styling: emdgame notif

src/css/game.css

@@ -131,6 +131,7 @@
     display: flex;
     flex-direction: column;
     border: 10px solid white;
+    border-radius: 10px;
 }
 
 .container-first .content .quiz h2 {
@@ -141,16 +142,23 @@
 }
 
 .container-first #scoreAlert {
-    margin-bottom: 30px;
+    text-align: center;
     padding: 10px;
     color: #ffdf12;
     font-size: 40px;
-    bottom: 40px;
+    bottom: 22px;
+    background-color: #101010f5;
     left: 50%;
     transform: translateX(-50%);
     position: absolute;
 }
 
+.container-first #scoreAlert.border {
+    width: 550px;
+    border: 6px solid white;
+    border-radius: 10px;
+}
+
 .container-first .content .quiz #btn-answer {
     color: #ffdf12;
     display: flex;
@@ -237,3 +245,20 @@
         transform: translate(-50%, -150%) scale(1.5)
     }
 }
+
+.dmg{
+    width: 800px;
+    
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+
+    z-index: 9999;
+    pointer-events: none;
+
+    display: none;
+    image-rendering: pixelated;
+    background-repeat: no-repeat;
+    background-size: cover;
+}

src/css/style.css

@@ -132,15 +132,11 @@ input:-webkit-autofill {
     justify-content: space-around;
     align-items: center;
     height: 100dvh;
-    /* Hapus properti background dari sini dan pindahkan ke ::before */
-
-    /* Tambahkan posisi relatif agar pseudo-element bisa diposisikan absolut di dalamnya */
     position: relative;
-    /* Pastikan konten di dalam container ada di atas latar */
     z-index: 1;
 }
 
-/* Pseudo-element untuk menampung gambar latar transparan */
+
 .container-board::before {
     content: "";
     position: absolute;
@@ -148,19 +144,12 @@ input:-webkit-autofill {
     left: 0;
     right: 0;
     bottom: 0;
-
-    /* Pindahkan properti background Anda ke sini */
     background-image: url(/assets/Design/CampFire8WESFIX!-export.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     image-rendering: pixelated;
-
-    /* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
     opacity: 1;
-    /* Contoh nilai 40% transparan */
-
-    /* Pindahkan latar ini ke lapisan paling bawah */
     z-index: -1;
 }
 

src/game/firstperson.html

@@ -21,7 +21,6 @@
         <div class="content">
             <div class="boss">
                 <img id="boss" src="/assets/Design/PYTHON-BOSSFIGHTMODEFINALt.gif" alt="">
-                <img id="dmg" class="dmg" src="/assets/Design/damageeffectNEWSLASH.gif"/>
             </div>
             <div class="hearts" id="hrt">
                 <img id="h1" src="/assets/Design/Heartfull.png">
@@ -38,6 +37,7 @@
                 </div>
             </div>
             <h2 id="scoreAlert"></h2>
+            <img id="dmg" class="dmg" src="/assets/Design/damageeffectNEWSLASH.gif"/>
         </div>
     </div>
     <script type="module" src="/js/firstperson.js"></script>

src/js/firstperson.js

@@ -129,6 +129,7 @@ function showScore(){
     bgm.play()
     setTimeout(()=> {
         const alerts = document.getElementById("scoreAlert")
+        alerts.classList.add("border")
         alerts.textContent = `you scored ${score} out of 200 !`;
     }, 200);
     setTimeout(()=> {