PIXI.Assets.backgroundLoad('/images/2024/02/displacement_map_repeat.jpg')

window.addEventListener('load', () => {
    let displacementSrc = '/images/2024/02/displacement_map_repeat.jpg';
    let displacementAssetPromise = PIXI.Assets.load(displacementSrc);
    let canvasContainer = document.getElementById('script-target');
    let appWidth = 1000;
    let appHeight = 500;

    let app = new PIXI.Application({
        width: appWidth,
        height: appHeight,
    });

    let textContents = '';
    let canvasOpacity = 0;

    if (canvasContainer) {
        canvasContainer.style.opacity = `${canvasOpacity}`;
        textContents = `${canvasContainer.textContent}`;
        textContents = textContents.replaceAll("\n", "\n\n");
        console.log(textContents);
        canvasContainer.innerHTML = '';
        canvasContainer.appendChild(app.view);
        app.view.style.width = '100%';
        // appWidth = canvasContainer.offsetWidth;
    } else {
        throw new Error('No target found');
    }

    app.stage.eventMode = 'static';

        console.log('Displacement map loaded');
        let displacementSprite = PIXI.Sprite.from(displacementSrc);

        displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
        app.stage.addChild(displacementSprite);

        let makeText = ((fill, amt) => {

            let txtStyle = new PIXI.TextStyle({
                fontFamily: 'Roboto, sans-serif',
                fill,
                fontSize: 40,
                fontWeight: '100',
                wordWrap: true,
                wordWrapWidth: appWidth - 200,
            });
            let basicText = new PIXI.Text(textContents, txtStyle);

            basicText.x = 50;
            basicText.y = 0;


            let displacementFilter = new PIXI.DisplacementFilter(displacementSprite);
            displacementFilter.padding = 10 * amt;
            displacementSprite.position = basicText.position;

            basicText.filters = [displacementFilter];

            displacementFilter.scale.x = 30 * amt;
            displacementFilter.scale.y = 20 * amt;
            app.stage.addChild(basicText);
            return basicText;
        });

        makeText('white', 1);
        makeText('#fff4', -1);

        let lastTime = Date.now();

        app.ticker.add(() => {
            let now = Date.now();
            let deltaTime = now - lastTime;
            lastTime = now;
            
            // Offset the sprite position to make vFilterCoord update to larger value.
            // Repeat wrapping makes sure there's still pixels on the coordinates.
            displacementSprite.y += deltaTime * 0.02;
            // Reset x to 0 when it's over width to keep values from going to very huge numbers.
            if (displacementSprite.x > displacementSprite.width) { displacementSprite.x = 0; }
            if (canvasOpacity < 1) {
                canvasOpacity += 0.01;
                canvasContainer.style.opacity = `${canvasOpacity}`;
            }
        });
        console.log('Ticker added');
        window.app = app;


});