mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 01:36:02 +08:00
121 lines
4.6 KiB
HTML
121 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Webcomponent GUI</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div style=" background-color: #fff; max-width: 800px; margin: auto;">
|
|
<h2 style="text-align: center; color: #333;">Meet our team!</h2>
|
|
<h3 style="text-align: center; color: #333;">Hover to the widgets to make them jump, or click on them to change randomly the default animation.</h3>
|
|
<div id="team-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%;">
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { createSkeleton } from '../dist/esm/spine-webcomponents.mjs';
|
|
|
|
const container = document.getElementById("team-container");
|
|
|
|
const members = [
|
|
{ skin: "mario", name: "Mario", role: "Developer" },
|
|
{ skin: "misaki", name: "Misaki", role: "Artist" },
|
|
{ skin: "erikari", name: "Erika", role: "Artist" },
|
|
{ skin: "nate", name: "Nate", role: "Developer" },
|
|
{ skin: "luke", name: "Luke", role: "Support" },
|
|
{ skin: "sinisa", name: "Sinisa", role: "Artist" },
|
|
{ skin: "harri", name: "Harri", role: "Developer" },
|
|
{ skin: "soeren", name: "Sören", role: "Artist" },
|
|
{ skin: "spineboy", name: "Spineboy", role: "Mascotte" },
|
|
];
|
|
|
|
const style = document.createElement("style");
|
|
style.innerHTML = `
|
|
.team-member:hover {
|
|
transform: scale(1.25);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
members.forEach(async (member, i) => {
|
|
const div1 = document.createElement("div");
|
|
container.appendChild(div1);
|
|
div1.style.display = "flex";
|
|
div1.style.flexDirection = "column";
|
|
div1.style.alignItems = "center";
|
|
div1.style.textAlign = "center";
|
|
div1.style.backgroundColor = "#f9f9f9";
|
|
div1.style.padding = "1rem";
|
|
div1.style.borderRadius = "8px";
|
|
div1.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";
|
|
div1.style.transition = "transform 0.3s ease";
|
|
div1.classList.add("team-member");
|
|
|
|
|
|
const div2 = document.createElement("div");
|
|
div1.appendChild(div2);
|
|
div2.style.width = "150px";
|
|
div2.style.height = "150px";
|
|
div2.style.border = "4px solid #333";
|
|
|
|
const widget = createSkeleton({
|
|
identifier: member.skin,
|
|
atlasPath: "/assets/chibi-stickers-pma.atlas",
|
|
skeletonPath: "/assets/chibi-stickers.json",
|
|
skin: member.skin,
|
|
animation: "emotes/wave",
|
|
padTop: "0.05",
|
|
padBottom: "0.05",
|
|
interactive: true,
|
|
});
|
|
|
|
div2.appendChild(widget);
|
|
|
|
const div3 = document.createElement("div");
|
|
div1.appendChild(div3);
|
|
div3.style.marginTop = "15px";
|
|
div3.style.width = "100%";
|
|
|
|
const div4 = document.createElement("div");
|
|
div3.appendChild(div4);
|
|
div4.innerHTML = member.name;
|
|
div4.style.fontWeight = "bold";
|
|
div4.style.fontSize = "1.1rem";
|
|
div4.style.marginBottom = "5px";
|
|
div4.style.color = "#333";
|
|
|
|
const div5 = document.createElement("div");
|
|
div3.appendChild(div5);
|
|
div5.classList.add("team-member-role");
|
|
div5.innerHTML = member.role;
|
|
div5.style.fontSize = "0.9rem";
|
|
div5.style.color = "#666";
|
|
|
|
await widget.whenReady;
|
|
|
|
const emotes = widget.skeleton.data.animations.reduce((acc, { name }) => name.startsWith("emotes") ? [...acc, name] : acc, []);
|
|
let leaveAnimation = "emotes/wave";
|
|
widget.pointerEventCallback = (event) => {
|
|
if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
|
|
else if (event === "leave") widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
|
|
else if (event === "down") {
|
|
leaveAnimation = emotes[Math.floor(Math.random() * emotes.length)];
|
|
widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |