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

        <title>PIXI Text</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="../../dist/iwmlib.3rdparty.js"></script>

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

        <script src="../3rdparty/d3.min.js"></script>
    </head>
    <body onload="Doctest.run()">
        <h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Text</h1>
        <p>
            The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction
            with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a
            tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do
            not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed
            when using a mouse).
        </p>
        <p>Let's look at some tooltip examples:</p>
        <br />
        <canvas id="canvas" class="interactive"></canvas>
        <p>What you should see: Ten colored circles with different tooltips.</p>
        <script class="doctest">
            const app = new PIXIApp({
                view: canvas,
                width: 900,
                height: 500,
                transparent: false,
                backgroundColor: 0x2c2d2b
            })
                .setup()
                .run()

            const container = new PIXI.Graphics()
            container.beginFill(0x58595b, 1)
            container.drawRect(0, 0, 700, 300)
            container.pivot.set(container.width / 2, container.height / 2)
            container.position.set(450, 250)
            app.scene.addChild(container)

            const sixthWidth = container.width / 6
            const halfHeight = container.height / 2

            app.loadSprites(
                ['./assets/stuttgart-library.jpg', './assets/Arial.fnt'],
                (sprites) => {
                    // PIXI.Text
                    //--------------------
                    const text = new PIXI.Text('Bibliothek\nStuttgart', { fontSize: 50 })
                    text.x = sixthWidth
                    text.y = halfHeight
                    text.pivot.set(text.width / 2, text.height / 2)
                    container.addChild(text)

                    // PIXI.BitmapText
                    //--------------------
                    const bitmapText = new PIXI.BitmapText('Bibliothek\nStuttgart', {
                        font: '50px Arial',
                        align: 'left'
                    })
                    bitmapText.x = sixthWidth * 3
                    bitmapText.y = halfHeight
                    bitmapText.pivot.set(bitmapText.width / 2, bitmapText.height / 2)
                    container.addChild(bitmapText)

                    // PIXI.Sprite
                    //--------------------
                    const sprite = sprites.get('./assets/stuttgart-library.jpg')
                    sprite.scale.set(0.05, 0.05)
                    sprite.x = sixthWidth * 5
                    sprite.y = halfHeight
                    sprite.anchor.set(0.5, 0.5)
                    container.addChild(sprite)

                    // Scale
                    //--------------------
                    const scaleContainer = d3.scaleLinear().domain([0, 50, 100]).range([0.05, 1, 50])
                    const scaleTexts = d3.scaleLinear().domain([0, 50, 100]).range([0.1, 1, 10])
                    const scaleSprite = d3.scaleLinear().domain([0, 50, 100]).range([0.005, 0.05, 0.5])

                    // Sliders
                    //--------------------
                    const sliderContainer = new Slider({
                        value: 50,
                        width: 500,
                        tooltip: 'Scale Container',
                        container: app.view,
                        onUpdate: function () {
                            const value = scaleContainer(this.value)
                            container.scale.set(value, value)
                        }
                    })
                    sliderContainer.x = app.size.width / 2 - sliderContainer.width / 2
                    sliderContainer.y = 10
                    app.scene.addChild(sliderContainer)

                    const sliderContainerAll = new Slider({
                        value: 50,
                        width: 500,
                        tooltip: 'Scale Container All',
                        container: app.view,
                        onUpdate: function () {
                            const value = scaleContainer(this.value)
                            container.scale.set(value, value)

                            text.scale.set(1 / value, 1 / value)
                            bitmapText.scale.set(1 / value, 1 / value)
                        }
                    })
                    sliderContainerAll.x = app.size.width / 2 - sliderContainerAll.width / 2
                    sliderContainerAll.y = 55
                    app.scene.addChild(sliderContainerAll)

                    const sliderText = new Slider({
                        value: 50,
                        tooltip: 'Scale PIXI.Text',
                        container: app.view,
                        onUpdate: function () {
                            const value = scaleTexts(this.value)
                            text.scale.set(value, value)
                        }
                    })
                    sliderText.x = app.size.width / 6 - sliderText.width / 2
                    sliderText.y = app.size.height - 10 - sliderText.height
                    app.scene.addChild(sliderText)

                    const sliderBitmapText = new Slider({
                        value: 50,
                        tooltip: 'Scale PIXI.extras.BitmapText',
                        container: app.view,
                        onUpdate: function () {
                            const value = scaleTexts(this.value)
                            bitmapText.scale.set(value, value)
                        }
                    })
                    sliderBitmapText.x = (app.size.width / 6) * 3 - sliderBitmapText.width / 2
                    sliderBitmapText.y = app.size.height - 10 - sliderBitmapText.height
                    app.scene.addChild(sliderBitmapText)

                    const sliderSprite = new Slider({
                        value: 50,
                        tooltip: 'Scale PIXI.Sprite',
                        container: app.view,
                        onUpdate: function () {
                            const value = scaleSprite(this.value)
                            sprite.scale.set(value, value)
                        }
                    })
                    sliderSprite.x = (app.size.width / 6) * 5 - sliderSprite.width / 2
                    sliderSprite.y = app.size.height - 10 - sliderSprite.height
                    app.scene.addChild(sliderSprite)
                },
                { resolutionDependent: false }
            )
        </script>
    </body>
</html>