feat: hit

1 files changed, 53 insertions, 18 deletions

diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
index f0a02ad..adc72e4 100644
--- a/layouts/blog/baseof.html
+++ b/layouts/blog/baseof.html
@@ -377,47 +377,80 @@
                 {{- $img1x := $img.Resize "100x webp" }}
                 {{- $img2x := $img.Resize "200x webp" }}
                 right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state5:{
+                {{- $img := resources.Get "blog/logo/hit.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/hit.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/hit.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
             }
         }
         
         let health = 100;
         let state = "normal"
+        let inAnimation = false;
 
         const faceImg = document.getElementById('face');
 
-        setTimeout(() => {
+        document.addEventListener('DOMContentLoaded', function() {
             const moneyLink = document.getElementById('moneyLink');
             
-            moneyLink.addEventListener( 'mouseover', function() {
-                health = "300"
-                state = "state4"
-
-                updateFace(getStateFaces().front);
-            })
-        }, 100)
+            if(moneyLink) {
+                moneyLink.addEventListener( 'mouseover', function() {
+                    health = "300"
+                    state = "state4"
+                    
+                    updateFace(getStateFaces().front);
+                })
+            }
+        })
         
-         
         
-        faceImg.addEventListener( 'click', function() {
-            health--;
-
+        const updateState = () => {
             if(health < 100) { state = "state1" }
             if(health < 50) { state = "state2" }
             if(health < 1) {
                 state = "state3"
             }
+        }
 
-            updateFace(getStateFaces().front);
+        faceImg.addEventListener( 'click', function() {
+            health--;
+            updateState();
 
             if(state !== "state3") {
                 document.body.style.background = "#ff0000";
+                state = "state5";
+                updateFace(getStateFaces().front);
+                
                 setTimeout(
-                    () => { document.body.style.background = null },
-                    10)
+                    () => {
+                        document.body.style.background = null
+                    }, 10)
+                
+                if(!inAnimation) {
+                    setTimeout(
+                        () => {
+                            inAnimation = false;
+                            updateState();
+                            updateFace(getStateFaces().front);
+                        }, 200)
+                }
+                                inAnimation = true;
+
             }
             else {
                 document.body.style.background = "#000";
-            }           
+            }
+
             console.log(`state: ${state}; health: ${health}`);
         })
         
@@ -426,8 +459,10 @@
         }
 
         const updateFace = (faceUrls) => {
-            faceImg.src = faceUrls[0];
-            faceImg.srcset = ` ${faceUrls[0]} 1x, ${faceUrls[1]} 2x`
+            if(!inAnimation) {
+                faceImg.src = faceUrls[0];
+                faceImg.srcset = ` ${faceUrls[0]} 1x, ${faceUrls[1]} 2x`
+            }
         }
 
         lookFront = () => {