Open manchuwook opened 5 months ago
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>
EDIT: The goal here is to have dynamic word bubbles near a character on the lower right side of an OBS scene to broadcast messages to the viewer. The tail will always be to the right and point to a specific region (the head). I'll want the bubble to appear for variable amounts of time, with successive messages in the same topic appending below it. After a while, I want them to disappear.
I'm using the SkyPack CDN to get the library. It isn't able to get the _currentStyle property from the project object, which I had assumed was being set with the paper.setup call. The exports are coming in, they just don't seem to be working.