EDIT: The goal here is to have dynamic word bubbles near a character on the lower righ

Browser: Project is null, _currentStyle not being set about comical-js HOT 1 OPEN

manchuwook commented on June 26, 2024

Browser: Project is null, _currentStyle not being set

from comical-js.

Comments (1)

manchuwook commented on June 26, 2024

Even by being more faithful to what is in storybook, still not getting the project:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
    <title>Chat Bubbles</title>
</head>

<body>
    <div id="chat-bubble">

    </div>
    <script type="module">
        import { Comical, Bubble } from 'https://cdn.skypack.dev/comicaljs';
        paper.install(window);

        const wrapDiv = document.createElement("div");
        wrapDiv.style.position = "relative";
        wrapDiv.style.height = "600px";
        const canvas = document.createElement("canvas");
        canvas.height = 500;
        canvas.width = 500;
        wrapDiv.appendChild(canvas);
        paper.setup(canvas);

        const textDiv2 = document.createElement("div");
        textDiv2.innerText =
            "This is a text block meant to represent shouting. It is 200px wide. It has a bit more text to make it squarer.";
        textDiv2.style.width = "200px";
        textDiv2.style.textAlign = "center";
        //textDiv2.style.backgroundColor = "pink";
        textDiv2.style.position = "absolute";
        textDiv2.style.top = "250px";
        textDiv2.style.left = "120px";
        wrapDiv.appendChild(textDiv2);

        const bubble = new Bubble(textDiv2);
        bubble.setBubbleSpec({
            version: "1.0",
            style: "shout",
            tails: [{ tipX: 420, tipY: 400, midpointX: 320, midpointY: 375 }],
            level: 1
        });
        setTimeout(() => {
            bubble.initialize();
        }, 200);

        document.getElementById("chat-bubble").appendChild(wrapDiv);
    </script>
</body>

</html>