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

        <title>PIXI Badge</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>
    </head>
    <body onload="Doctest.run()">
        <h1>Badge</h1>
        <p>
            Small and adaptive tag for adding context to just about any content.
        </p>
        <p>Let's look at some badge examples:</p>
        <br />
        <canvas id="canvas" class="interactive"></canvas>
        <p>
            What you should see: Badges, badges, badges...
        </p>
        <script class="doctest">
            const app = new PIXIApp({
                view: canvas,
                width: 900,
                height: 250
            })
                .setup()
                .run()

            const circle1 = new PIXI.Graphics()
            circle1.beginFill(0x5251a3)
            circle1.drawCircle(50, 50, 40)

            const circle2 = new PIXI.Graphics()
            circle2.beginFill(0x8ca351)
            circle2.drawCircle(150, 50, 40)

            const button1 = new Button({
                x: 10,
                y: 110,
                label: 'Button with Badge'
            })

            const button2 = new Button({
                x: 230,
                y: 110,
                label: 'Button with Video-Badge'
            })

            const button3 = new Button({
                x: 480,
                y: 110,
                label: 'Button and ',
                badge: 'Badge'
            })

            const button4 = new Button({
                x: 640,
                y: 110,
                label: 'Button',
                badge: {
                    content: 'IWM',
                    align: 'center',
                    verticalAlign: 'bottom',
                    offsetTop: 6,
                    radius: 16,
                    fill: 0xfe832d
                }
            })

            const button5 = new Button({
                x: 740,
                y: 110,
                label: 'Button',
                badge: {
                    content: '1',
                    radius: 16,
                    tooltip: 'One'
                }
            })

            const button6 = new Button({
                x: 740,
                y: 180,
                label: 'Change Badge',
                action: () => {
                    button5.badge.content = '2'
                }
            })

            let badge1 = new Badge({
                x: 60,
                y: 10,
                content: 'New'
            })

            let badge2 = new Badge({
                content: '7',
                x: 160,
                y: 10,
                fill: 0x1078fc
            })

            let badge3 = new Badge({
                x: 170,
                y: 95,
                padding: 5,
                radius: 16,
                content: '142',
                fill: 0xfe9727
            })

            let sprite1 = new PIXI.Sprite(
                PIXI.Texture.from('./assets/badge-1.mp4')
            )
            sprite1.scale.set(0.05, 0.05)

            let texture1 = PIXI.Texture.from('./assets/badge-1.mp4')
            texture1.baseTexture.on('loaded', e => {
                let sprite1 = new PIXI.Sprite(texture1)
                sprite1.scale.set(0.05, 0.05)
                sprite1.alpha = 0.5
                let badge4 = new Badge({
                    x: 300,
                    y: 152,
                    stroke: 0x5ec7f8,
                    strokeWidth: 3,
                    fillAlpha: 0.7,
                    padding: 0,
                    radius: 1,
                    content: sprite1,
                    tooltip: 'Earth in Space'
                })
                app.scene.addChild(badge4)
            })

            app.scene.addChild(circle1, circle2)
            app.scene.addChild(
                button1,
                button2,
                button3,
                button4,
                button5,
                button6
            )
            app.scene.addChild(badge1, badge2, badge3)
        </script>
    </body>
</html>