<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>PIXI Resolution Doctest</title>

        <script src="../../dist/iwmlib.3rdparty.js"></script>
        <script src="../../dist/iwmlib.js"></script>
        <script src="../../dist/iwmlib.pixi.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js"></script>

        <style>
            body {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>

        <script class="doctest">
            const app = new PIXIApp({
                view: canvas,
                fpsLogging: true,
                transparent: false
            })

            app.setup()
            app.run()

            const textProps = {fontSize: 72, fill: 0xffffff}

            Mousetrap.bind(['1', '2', '3', '4', '5'], (event, key) => {

                app.stage.removeChildren()

                let sprite = null
                let label = null

                if (key === '1') {
                    sprite = PIXI.Sprite.from('resolution/image-4k.jpg')
                    label = `4096 * 2732 ~ 4K`
                } else if (key === '2') {
                    sprite = PIXI.Sprite.from('resolution/image-8k.jpg')
                    label = `7952 * 5304 ~ 8K`
                } else if (key === '3') {
                    const texture = PIXI.Texture.from('resolution/video-1k.mp4')
                    texture.baseTexture.resource.source.loop = true
                    sprite = new PIXI.Sprite(texture)
                    label = `1920 * 1080 = 1K`
                } else if (key === '4') {
                    const texture = PIXI.Texture.from('resolution/video-4k.mp4')
                    texture.baseTexture.resource.source.loop = true
                    sprite = new PIXI.Sprite(texture)
                    label = `3840 * 2160 = 4K`
                } else if (key === '5') {
                    const texture = PIXI.Texture.from('resolution/video-8k.mp4')
                    texture.baseTexture.resource.source.loop = true
                    sprite = new PIXI.Sprite(texture)
                    label = `7680 * 4320 ~ 8K`
                }

                app.stage.addChild(sprite)

                // texts
                //--------------------
                const shortcuts = new PIXI.Text(`Press 1 - 5 to change Sprites`, textProps)
                shortcuts.x = 100
                shortcuts.y = 100

                const width = new PIXI.Text(`Width: ${app.renderer.width}`, textProps)
                width.x = 100
                width.y = shortcuts.y + shortcuts.height * 2

                const height = new PIXI.Text(`Height: ${app.renderer.height}`, textProps)
                height.x = 100
                height.y = width.y + width.height + 10

                const resolution = new PIXI.Text(`Resolution: ${app.renderer.resolution}`, textProps)
                resolution.x = 100
                resolution.y = height.y + height.height + 10

                const devicePixelRatio = new PIXI.Text(`devicePixelRatio: ${window.devicePixelRatio}`, textProps)
                devicePixelRatio.x = 100
                devicePixelRatio.y = resolution.y + resolution.height + 10

                const text = new PIXI.Text(label, textProps)
                text.x = 100
                text.y = devicePixelRatio.y + devicePixelRatio.height * 2

                app.stage.addChild(shortcuts, width, height, resolution, devicePixelRatio, text)
            })

            Mousetrap.trigger('1')
        </script>
    </body>
</html>