chore: date in blog

1 files changed, 190 insertions, 0 deletions

diff --git a/layouts/partials/blog/face-game.html b/layouts/partials/blog/face-game.html
new file mode 100644
index 0000000..df54451
--- /dev/null
+++ b/layouts/partials/blog/face-game.html
@@ -0,0 +1,190 @@
+{{- $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>
+
+        // A game - click on my face.
+        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 }} ],
+            },
+            state4:{
+                {{- $img := resources.Get "blog/logo/grim.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/right.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/left.png" }}
+                {{- $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');
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const moneyLink = document.getElementById('moneyLink');
+            
+            if(moneyLink) {
+                moneyLink.addEventListener( 'mouseover', function() {
+                    health = "300"
+                    state = "state4"
+                    
+                    updateFace(getStateFaces().front);
+                })
+            }
+        })
+        
+        
+        const updateState = () => {
+            if(health < 100) { state = "state1" }
+            if(health < 50) { state = "state2" }
+            if(health < 1) {
+                state = "state3"
+            }
+        }
+
+        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)
+                
+                if(!inAnimation) {
+                    setTimeout(
+                        () => {
+                            inAnimation = false;
+                            updateState();
+                            updateFace(getStateFaces().front);
+                        }, 200)
+                }
+                                inAnimation = true;
+
+            }
+            else {
+                document.body.style.background = "#000";
+            }
+
+            console.log(`state: ${state}; health: ${health}`);
+        })
+        
+        const getStateFaces = () => {
+            return faces[state]
+        }
+
+        const updateFace = (faceUrls) => {
+            if(!inAnimation) {
+                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>
+