JSFiddle - React, Tailwind, and code Playground

by takeshi1234

HTML

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script type="text/javascript" src="/pixi.js"></script-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.1/pixi.min.js"
            integrity="sha256-LzClwveZCCIyst3+wITowZNFFwZnm5NZKeNUkSmuAEI=" crossorigin="anonymous"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/viewport.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.3/nouislider.js"
            integrity="sha256-1iEKI5gRtYtJLs+aGn0vureDbMepHs7cKrmtOM/kKKE=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.3/nouislider.css"
          integrity="sha256-mCtu/3LpsOOnkI1qzGQGvZ+dzZ8drJ0bSweoC3G6xrU=" crossorigin="anonymous"/>

</head>

<body>
<div id="pixi" style="width: 80%"></div>
<div id="slider-play-time" style="width: 80%;margin: auto"></div>
</body>
<script>
    var pixi_container = document.getElementById('pixi');
    var w = pixi_container.clientWidth;
    var h = pixi_container.clientWidth;
    const app = new PIXI.Application()
    pixi_container.appendChild(app.view);

    // create viewport
    viewport = new Viewport.Viewport({
        screenWidth: w,
        screenHeight: h,
        worldWidth: 8000,
        worldHeight: 8000,

        interaction: app.renderer.plugins.interaction
    });

    // add the viewport to the stage
    app.stage.addChild(viewport);

    // activate plugins
    viewport
        .drag({wheelDrag: false})
        .clamp({top: 0, left: 0, right: 8000, bottom: 8000, underflow: 'center'})
        .pinch()
        .wheel()
        .clampZoom({minWidth: w, minHeight: h, maxWidth: 8000, maxHeight: 8000})

    // initial fit world
    resize()

    // add event listener
    window.addEventListener('resize', () => resize());

    pixi_container.addEventListener("wheel", function...