sepia
/
gomoku
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix draw animation

This commit is contained in:
sepia 2025-07-29 19:38:43 -05:00
parent eceefcc19c
commit 55b16f6712
1 changed files with 13 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/scripts/make-animations.js
View File

@ -20,8 +20,6 @@ async function preloadStoneSvgs() {
} else {
console.error('Failed to load white stone SVG:', whiteResponse.status);
}
console.log('Stone SVGs pre-loaded successfully');
} catch (error) {
console.error('Error pre-loading stone SVGs:', error);
}
@ -31,7 +29,7 @@ async function preloadStoneSvgs() {
preloadStoneSvgs();
// Create bouncing stone animation without anime.js
async function createBouncingStonesAnimation(color, count = 20) {
function createBouncingStonesAnimation(whiteCount = 20, blackCount = 20) {
const gameBoard = document.getElementById('game-board');
if (!gameBoard) return;
@ -44,15 +42,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
// Create stone elements with pre-loaded SVG content
function createStones() {
// Get the appropriate pre-loaded SVG content
const svgContent = color === 'black' ? blackStoneSvg : whiteStoneSvg;
if (!svgContent) {
console.error(`No pre-loaded SVG content available for ${color} stone`);
return;
}
for (let i = 0; i < count; i++) {
for (let i = 0; i < whiteCount + blackCount; i++) {
const stone = document.createElement('div');
stone.className = 'animation-stone';
stone.style.position = 'absolute';
@ -63,7 +53,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
stone.style.opacity = '1';
// Set the pre-loaded SVG content as innerHTML
stone.innerHTML = svgContent;
stone.innerHTML = i < whiteCount ? whiteStoneSvg : blackStoneSvg;
// Make sure the SVG inside fills the container
const svg = stone.querySelector('svg');
@ -125,7 +115,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
function fadeOut() {
const animationStones = document.querySelectorAll('.animation-stone');
const fadeStartTime = performance.now();
const fadeDuration = 15 * 100; // 100 = 1sec
const fadeDuration = 500;
function fade(currentTime) {
const elapsed = currentTime - fadeStartTime;
@ -152,7 +142,8 @@ async function createBouncingStonesAnimation(color, count = 20) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
if (elapsed < 5000) {
// Wait 15s to fade away
if (elapsed < 15000) {
animateStones();
animationId = requestAnimationFrame(animate);
} else {
@ -192,20 +183,18 @@ async function createBouncingStonesAnimation(color, count = 20) {
const animations = {};
// Define the three animations
// We use functions so that we have time to pre-load the svgs before trying to create the animations
// which isn't actually ideal because what if the animation plays right away, but, it works!
animations['black-victory'] = () => {
return createBouncingStonesAnimation('black', 40);
return createBouncingStonesAnimation(0, 40);
};
animations['white-victory'] = () => {
return createBouncingStonesAnimation('white', 40);
return createBouncingStonesAnimation(40, 0);
};
animations['draw'] = () => {
// For draw, create 10 black and 10 white stones
const blackAnimation = createBouncingStonesAnimation('black', 20);
const whiteAnimation = createBouncingStonesAnimation('white', 20);
return [blackAnimation, whiteAnimation];
return createBouncingStonesAnimation(20, 20);
};
document.addEventListener('htmx:wsAfterMessage', async function (e) {
@ -219,19 +208,10 @@ document.addEventListener('htmx:wsAfterMessage', async function (e) {
return;
}
// Play the requested animation
const animationFn = animations[msg.animation];
if (animationFn) {
console.log('Playing animation:', msg.animation);
const result = await animationFn();
// Handle both single animations and arrays of animations (for draw)
if (Array.isArray(result)) {
result.forEach((animation) => animation.play());
} else if (result) {
result.play();
}
animationFn().play();
} else {
console.log('Unknown animation:', msg.animation);
console.error('Unknown animation:', msg.animation);
}
});