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

    <title>PIXI Application Resolution Doctest</title>

    <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
    <link rel="stylesheet" href="../../css/doctest.css">

    <script src=".././3rdparty/highlight/highlight.pack.js"></script>
    <script src=".././3rdparty/all.js"></script>

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

    <style>
        #dpi {
            height: 1in;
            left: -100%;
            position: absolute;
            top: -100%;
            width: 1in;
        }
    </style>
</head>
<body onload="Doctest.run()">
    <h1>Application Resolution</h1>
    <p>
            This is a doc test page to examine the width and height of canvas elements at different resolutions.
    </p>
    <p>Further documentation:</p>
    <ul>
        <li><a href="https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html">WebGL Fundamentals</a></li>
        <li><a href="https://www.khronos.org/webgl/wiki/HandlingHighDPI">Handling High DPI</a></li>
    </ul>
    <p>Device properties:</p>
    <ul>
        <li id="dpi-result">Your screen has <span></span> dpi.</li>
        <li id="dpr-result">Your screen has a device-pixel-ratio of <span></span>.</li>
    </ul>
    <p>
        Set width and height per CSS: <input type="checkbox" />
    </p>
    <script>
        let scaled = false
        $('input[type="checkbox"]').click(function(e) {
            if ($(this).prop('checked')) {
                $('#canvas1').css({width: '100px', height: '100px'})
                $('#canvas2').css({width: '100px', height: '100px'})
                $('#canvas3').css({width: '100px', height: '100px'})
                $('#canvas4').css({width: '100px', height: '100px'})
            } else {
                $('#canvas1').css({width: 'auto', height: 'auto'})
                $('#canvas2').css({width: 'auto', height: 'auto'})
                $('#canvas3').css({width: 'auto', height: 'auto'})
                $('#canvas4').css({width: 'auto', height: 'auto'})
            }
        })
    </script>
    <p>Let's look at some canvas resolution examples:</p>

    <div id="dpi"></div>

    <script>
        $('#dpi-result span').text(document.getElementById("dpi").offsetHeight)
        $('#dpr-result span').text(window.devicePixelRatio)
    </script>

    <script>
const style = new PIXI.TextStyle({
    fontStyle: 'italic',
    fontWeight: 'bold',
    fill: ['#ffffff', '#00ff99'],
    stroke: '#4a1850',
    strokeThickness: 5,
    wordWrap: true,
    wordWrapWidth: 440
})
    </script>

    <canvas id="canvas1" class="interactive"></canvas>
    <script class="doctest">
const app1 = new PIXI.Application({width: 100, height: 100, resolution: 1, backgroundColor : 0xf8ce2d, view: canvas1})
const text11 = new PIXI.Text('AaBb12')
const text12 = new PIXI.Text('IWM', style)
text12.y = 30
app1.stage.addChild(text11, text12)
    </script>

    <canvas id="canvas2" class="interactive"></canvas>
    <script class="doctest">
const app2 = new PIXI.Application({width: 100, height: 100, resolution: 2, backgroundColor : 0xfd6b6a, view: canvas2})
const text21 = new PIXI.Text('AaBb12')
const text22 = new PIXI.Text('IWM', style)
text22.y = 30
app2.stage.addChild(text21, text22)
    </script>

    <canvas id="canvas3" class="interactive"></canvas>
    <script class="doctest">
const app3 = new PIXI.Application({width: 100, height: 100, resolution: 3, backgroundColor : 0x40c3f2, view: canvas3})
const text31 = new PIXI.Text('AaBb12')
const text32 = new PIXI.Text('IWM', style)
text32.y = 30
app3.stage.addChild(text31, text32)
    </script>

    <canvas id="canvas4" class="interactive"></canvas>
    <script class="doctest">
const app4 = new PIXI.Application({width: 100, height: 100, resolution: window.devicePixelRatio, backgroundColor : 0xd7a3f9, view: canvas4})
const text41 = new PIXI.Text('AaBb12')
const text42 = new PIXI.Text('IWM', style)
text42.y = 30
app4.stage.addChild(text41, text42)
    </script>
</body>