{{- $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>