<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tetris</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">

    <link rel='preconnect' href='https://wasm.noahcohn.com'>
    <link rel='preconnect' href='https://js.1ink.us'>
    <link rel='preconnect' href='https://glsl.1ink.us'>
    <link rel='preconnect' href='https://css.1ink.us'>
    <link charset=utf-8 crossorigin rel='stylesheet' href='https://css.1ink.us/sh1.1iss'/>
    <style>
        html,
        body{height:100%;margin:0;padding:0;
        }
        #map,
        #pano{float:left;height:100vh;width:100vh;
        }

        .button {
            /* Initial button styles */
            background-color: #007bff; /* Blue */
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            transition: all 0.2s ease; /* Add smooth transition for all properties */
        }

        .button:active {
            /* Styles when the button is clicked/held down */
            background-color: #0056b3; /* Darker blue */
            transform: translateY(2px); /* Move down slightly */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
        }
    </style>
</head>
<body>
<img id=splash1 src=./image/shroud.jpg style='background-color:rgba(233,233,233,1.0);display:block;position:absolute;height:100vh;width:100vw;z-index:3590;'></img>
<img id=splash2 src=./image/spinner.gif style='background-color:rgba(47,47,47,1.0);display:block;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;height:20vh;width:20vh;z-index:3591;'></img>

<nav id=menu>
    <section class=menu-section id=menu-sections>
        <br>
        <div style='text-align:center;'>
            TIMESLIDER<br>(Seconds between video change)</div>
        <br><br>
        <ul class=menu-section-list>
            <div id=mnu>
                <div id=slideframe>
                    <input type=text id=timeslider/>
                </div>
                <div id=slideframe2>
                    <input type=text id=srslider>
                </div></div>
            <div class="selectboxs">
                <select id=sh1>
                    <option value="Random">Random</option>
                    <option value="Default">Default</option>
                    <option value="sleeplessdesign.glsl">Sleepless...</option>
                    <option value="movewithouttracvveling">Move Without Travelling</option>
                    <option value="crystalineballs">Crystal Palace</option>
                    <option value="WOOL">Infinite Wool</option>
                    <option value="hovercubes">Demoscene Cube</option>
                    <option value="melter">Northern Melt</option>
                    <option value="PSYfractal">Psychedelic Fractal</option>
                    <option value=drops>Drops</option>
                </select>
            </div>
            <br />
            <br />
        </ul></section>
    <div id=map style='height:50vh;width:50vh;position:absolute;z-index:2400;'></div>
</nav>
<main id=panel>
    <iframe src=./bezz.1ink id='circle' title='Circular mask'></iframe>
    <img id=btnGif1 src=./image/btn2i.gif style='background-color:rgba(0,0,0,0.0);height:5vh;width:5vh;position:absolute;display:none;right:25%;top:5%;z-index:3200;cursor: pointer;'></img>

    <input type=button id=startBtn style='background-color:gold;position:absolute;display:none;left:6%;top:9%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <input class="button" type=button id=moveFwd style='background-color:gold;position:absolute;display:none;width:6vh;height:5vh;left:47%;bottom:3%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <input class="button" type=button id=cruiseFwd style='background-color:red;position:absolute;display:none;width:6vh;height:5vh;left:47%;bottom:7%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <input hidden type=button id=startBtn5 style='background-color:yellow;position:absolute;display:none;left:2%;top:9%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;'></input>
    <input type=button class="button" id=ZmOutBtn style='background-color:tan;position:absolute;display:none;right:6%;top:9%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <input hidden type=button id=testBtn style='background-color:grey;position:absolute;display:none;left:6%;top:4%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <input type=button class="button" id=ZmInBtn style='background-color:tan;position:absolute;display:none;right:6%;top:4%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <input class="button" type=button id=menuBtn style='background-color:black;position:absolute;display:block;left:7%;top:7%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;'></input>
    <input type=button id=musicBtn style='background-color:cyan;position:absolute;display:block;left:3%;bottom:5%;z-index:3200;border:6px solid green;border-radius:20%;'></input>
    <input type=button id=sizeUp style='background-color:black;position:absolute;display:none;left:5%;top:86%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
    <input type=button id=sizeDown style='background-color:black;position:absolute;display:none;left:5%;top:90%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
    <input type=button id=moveDown style='background-color:black;position:absolute;display:none;right:5%;top:90%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
    <input type=button id=moveUp style='background-color:black;position:absolute;display:none;right:5%;top:86%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
    <input type=button id=moveLeft style='background-color:black;position:absolute;display:none;right:3%;top:90%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
    <input type=button id=moveRight style='background-color:black;position:absolute;display:none;right:7%;top:90%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
    <input hidden type=button id=startBtnI style='background-color:black;position:absolute;display:none;left:15%;top:12%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <input hidden type=button id=startBtn2 style='background-color:gold;position:absolute;display:none;left:9%;top:9%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <input class="button" type=button id=startBtnC style='background-color:green;position:absolute;display:block;left:10%;top:12%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
    <div class=emscripten id=status>|Loading WASM|</div>
    <div class=emscripten id=stat>|Loading WASM|</div>

    <div class=emscripten>
        <progress value=0 max=100 id=progress></progress>
    </div>
    <input type=checkbox id=di hidden/>
    <div hidden=true id=modulePath>https://wasm.noahcohn.com/b3hd/w0-011-mod.3ijs</div>
    <div hidden=true id=path>https://glsl.1ink.us/wgsl/melt.wgsl</div>
    <div hidden=true id=computePath>https://glsl.1ink.us/wgsl/compute_066t.wgsl</div>
    <div hidden=true id=computePathNovid>https://glsl.1ink.us/wgsl/compute_066v.wgsl</div>
    <div hidden=true id=fragPath>https://glsl.1ink.us/wgsl/fragment_005.wgsl</div>
    <div hidden=true id=vertPath>https://glsl.1ink.us/wgsl/vertex_003.wgsl</div>
    <div id=iwid hidden>0</div>
    <div id=ihig hidden>0</div>
    <div id=pmhig hidden>0</div>
    <div id=wid hidden>0</div>
    <div id=hig hidden>0</div>
    <div id=canvasSize hidden>0</div>
    <div id=lwid hidden>0</div>
    <div id=lhig hidden>0</div>
    <div id=ihid hidden>0</div>
    <div id=tim hidden>1750</div>
    <div id=shut hidden>2</div>
    <div id=isrc hidden>./intro.mp4</div>
    <div id=idur hidden>0</div>
    <div id=itim hidden>0</div>
    <div id=vsiz hidden>0</div>
    <div id=srsiz hidden>1000</div>

    <div id=wrap>
        <div id=contain1>
            <div id=root>
            </div>

            <script src='./index.js' type='module'></script>

        <canvas class=emscripten id=scanvas style='pointer-events:none;display:block;position:absolute;z-index:3;background-color:rgba(255,255,255,1.0);top:0;height:100vh;width:100vh;image-rendering: pixelated;transform:scaleY(-1.0);'></canvas>
        <div id=outText style="opacity:0.0;background-color:green;position:absolute;top:50vh;left:47vw;z-index:4200;"></div>
        <div id=outText1 style="opacity:0.0;background-color:green;position:absolute;top:52vh;left:47vw;z-index:4200;"></div>
        <div id=outText2 style="opacity:0.0;background-color:green;position:absolute;top:54vh;left:47vw;z-index:4200;"></div>
    </div>
        <div id=contain2>
            <canvas id=bcanvas hidden style='opacity:0.0;pointer-events:none;display:block;z-index:1;position:absolute;height:100vh;width:100vh;margin-left:auto;margin-right:auto;background-color:rgba(255,255,255,1.0);top:0;image-rendering: pixelated;'></canvas>
            <div id=info>
        </div> <div id=info1>
        </div> <div id=info2>
        </div> <div id=info3>
        </div>
        </div>
    </div>
    </div>
</main>
<audio crossorigin id=track preload=auto hidden style='pointer-events:none;'></audio>
<audio crossorigin src='https://stream.zeno.fm/ywcmn7hpha0uv' id=Gtrack preload=none hidden style='pointer-events:none;'></audio>


<script type="module">

    document.querySelector('#musicBtn').addEventListener('click',function(){
        document.querySelector('#Gtrack').play();
    });
    setTimeout(function(){
        var canvv=document.querySelector("#mvi");
       // canvv[0].id='mvi';
        canvv.hidden=true;
        canvv.opacity=0.0;
        canvv.style.zIndex=1;
        console.log(canvv);
    },1300);

    document.getElementById("startBtn5").addEventListener('click',function(){

        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://wasm.noahcohn.com/b3hd/w0-011-load-32.3ijs', true); // Replace with your filename
        xhr.responseType = 'arraybuffer'; // Get raw binary data
        console.log('got run');

        function decodeUTF32(uint8Array, isLittleEndian = true) {
            const dataView = new DataView(uint8Array.buffer);
            let result = "";
            for (let i = 0; i < uint8Array.length; i += 4) {
                let codePoint;
                if (isLittleEndian) {
                    codePoint = dataView.getUint32(i, true); // Little-endian
                } else {
                    codePoint = dataView.getUint32(i, false); // Big-endian
                }
                result += String.fromCodePoint(codePoint);
            }
            return result;
        }

        xhr.onload = function() {
            console.log('got load');
            if (xhr.status === 200) {
                console.log('got script');
                const utf32Data = xhr.response;
                //  const decoder = new TextDecoder('utf-32'); // Or 'utf-32be'
                const jsCode = decodeUTF32(new Uint8Array(utf32Data), true); // Assuming little-endian
                const scr = document.createElement('script');
                //  scr.type = 'module';
                scr.text = jsCode;
                //    scr.dataset.moduleUrl = 'https://wasm.noahcohn.com/b3hd/'; // Base URL for module's relative paths
                document.body.appendChild(scr);
                setTimeout(function(){
                    var Module = libload();
                    Module.onRuntimeInitialized = function(){
                        Module.callMain();
                        console.log('call main');
                    };
                },2500);
            }
        };
        xhr.send();

    });
    document.getElementById('mvi').height=parseInt(window.innerHeight,10);
    document.getElementById('mvi').width=parseInt(window.innerHeight,10);
    setTimeout(function(){

        document.getElementById('vsiz').innerHTML=parseInt(window.innerHeight,10);
// document.getElementById('vsiz').innerHTML=parseInt(window.innerHeight,10)*3.0;
        document.getElementById('startBtn5').click();
    },750);
    setTimeout(function(){
        window.scrollTo({
            top: 0,
            left: 0,
            behavior: "smooth",
        });
    },250);


    function flipImageData2(imageData){
        const { width, height, data } = imageData;
        for(let y=0;y<height/2;y++){
            for(let x=0;x<width;x++){
                const topIndex=(y*width+x)*4;
                const bottomIndex=((height-1-y)*width+x)*4;
                for(let c=0;c<4;c++){
                    [data[topIndex+c],data[bottomIndex+c]]=[data[bottomIndex+c],data[topIndex+c]];
                }
                data[topIndex+3]=1.0;
            }}
        return imageData;
    }

    function flipImageData3(imageData){
        const width=imageData.width;
        const height=imageData.height;
        const data=imageData.data;
        for(let y=0;y<height/2;y++){
            for(let x=0;x<width;x++){
                const topIndex=(y*width+x)*4;
                const bottomIndex=((height-1-y)*width+x)*4;
                for(let c=0;c<4;c++){
                    [data[topIndex+c],data[bottomIndex+c]]=[data[bottomIndex+c],data[topIndex+c]];
                }}}
        return imageData;
    }

    document.querySelector('#btnGif1').addEventListener('click', () => {
        document.querySelector('#btnGif1').src = './image/btn2.gif'; // Reset the GIF to the beginning
        var canvas = document.querySelector('#scanvas'); // Replace 'myCanvas' with your canvas ID

        var newCanvas = document.createElement('canvas');
        newCanvas.width = canvas.width;
        newCanvas.height = canvas.height;
        newCanvas.id = 'fcan';
        document.body.appendChild(newCanvas);

        var flippedCanvas = document.querySelector('#fcan');

        var flippedContext = flippedCanvas.getContext('2d');

        flippedContext.imageSmoothingEnabled = false;
        flippedContext.save();
        flippedContext.scale(-1,-1);

// var image=flippedContext.getImageData(0,0,canvas.width,canvas.height);
        var image=new Image();

// var image=flipImageData(flippedContext.getImageData(0,0,canvas.width,canvas.height));

// flippedContext.drawImage(image, 0, 0);
// flippedContext.putImageData(image, 0, 0);

        var dataURL2 = canvas.toDataURL('image/jpeg',1.0); // Or 'image/png', 'image/webp', etc.
        image.src=dataURL2;
        flippedContext.drawImage(image, canvas.height*-1, canvas.height*-1,canvas.height,canvas.height);

        var dataURL = canvas.toDataURL('image/jpeg',1.0); // Or 'image/png', 'image/webp', etc.

        var timestamp = new Date().toISOString().replace(/[-:.]/g, ''); // Format: YYYYMMDDTHHMMSS
        var filename = `Snapshot_${timestamp}.jpg`;

        var link = document.createElement('a');
        link.download = filename;  // Set the desired filename
        link.href = dataURL;
        link.click();
        // flippedCanvas.remove(); // Remove from DOM
        // flippedCanvas = null;  // Nullify reference
    });


    setTimeout(function(){
        document.querySelector('#splash2').style.zIndex=3000;
        document.querySelector('#splash2').style.display='none';

    },6300);

    setTimeout(function(){
        document.querySelector('#splash1').style.zIndex=3000;
        document.querySelector('#splash1').style.display='none';
    },8800);
    setTimeout(function(){
        document.querySelector('#startBtnC').click();
    },6500);
</script>

</body>