feat: kill me

1 files changed, 121 insertions, 12 deletions

diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
index 0689e3d..0a05607 100644
--- a/layouts/blog/baseof.html
+++ b/layouts/blog/baseof.html
@@ -292,24 +292,133 @@
 
   <header>
     <div class="logo">
-      {{- $logo1x := resources.Get "blog/logo/front.png" }}
-      <a href="/blog">
-        <img
-          style="
-                 width: auto;
-                 height: 90px;"
-          src="{{ $logo1x.Permalink }}" 
-          width="{{ $logo1x.Width }}" 
-          height="{{ $logo1x.Height }}"
-          loading="lazy">
-      </a>
+      {{- $img := resources.Get "blog/logo/front.png" }}
+      {{- $img1x := $img.Resize "100x webp" }}
+      {{- $img2x := $img.Resize "200x webp" }} 
+      <img
+        alt="Michal"
+        id="face"
+        style="cursor: crosshair;"
+        src="{{ $img1x.Permalink }}" 
+        srcset="
+                {{ $img1x.Permalink }} 1x,
+                {{ $img2x.Permalink }} 2x
+                "
+        width="{{ $img1x.Width }}" 
+        height="{{ $img1x.Height }}"
+        >
+      <script>
+        const faces = {
+            normal:{
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/left.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/right.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state1:{
+                {{- $img := resources.Get "blog/logo/state-1-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-1-left.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-1-right.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state2:{
+                {{- $img := resources.Get "blog/logo/state-2-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-2-left.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-2-right.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state3:{
+                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            }
+        }
+        
+        let health = 100;
+        let state = "normal"
+
+        const faceImg = document.getElementById('face');
+
+        faceImg.addEventListener( 'click', function() {
+            health--;
+
+            if(health < 100) { state = "state1" }
+            if(health < 50) { state = "state2" }
+            if(health < 1) { state = "state3" }
+
+            updateFace(getStateFaces().front);
+            document.body.style.background = "#ff0000";
+            setTimeout(
+                () => { document.body.style.background = null },
+                10)
+            
+
+            console.log(`state: ${state}; health: ${health}`);
+
+        })
+        
+        const getStateFaces = () => {
+            return faces[state]
+        }
+
+        const updateFace = (faceUrls) => {
+            faceImg.src = faceUrls[0];
+            faceImg.srcset = ` ${faceUrls[0]} 1x, ${faceUrls[1]} 2x`
+        }
+
+        lookFront = () => {
+            updateFace(getStateFaces().front);
+            setTimeout(lookLeft, 5000);
+        }
+        lookLeft = () => {
+            updateFace(getStateFaces().left);
+            setTimeout(lookRight, 500);
+        }            
+        lookRight = () => {
+            updateFace(getStateFaces().right)
+            setTimeout(lookFront, 500);
+        }            
+
+        lookFront();
+
+      </script>
       
     </div><div class="name">
       <a href="/blog">Michał's weblog</a>
     </div><nav>
       <a href="/">Homepage</a>
       <a href="/about" target="_blank">About</a>
-      <a href="/blog/index.xml">Rss</a>
+      <a href="/blog/index.xml">RSS</a>
     </nav>
   </header>