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 { } else {
console.error('Failed to load white stone SVG:', whiteResponse.status); console.error('Failed to load white stone SVG:', whiteResponse.status);
} }
console.log('Stone SVGs pre-loaded successfully');
} catch (error) { } catch (error) {
console.error('Error pre-loading stone SVGs:', error); console.error('Error pre-loading stone SVGs:', error);
} }
@ -31,7 +29,7 @@ async function preloadStoneSvgs() {
preloadStoneSvgs(); preloadStoneSvgs();
// Create bouncing stone animation without anime.js // 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'); const gameBoard = document.getElementById('game-board');
if (!gameBoard) return; if (!gameBoard) return;
@ -44,15 +42,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
// Create stone elements with pre-loaded SVG content // Create stone elements with pre-loaded SVG content
function createStones() { function createStones() {
// Get the appropriate pre-loaded SVG content for (let i = 0; i < whiteCount + blackCount; i++) {
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++) {
const stone = document.createElement('div'); const stone = document.createElement('div');
stone.className = 'animation-stone'; stone.className = 'animation-stone';
stone.style.position = 'absolute'; stone.style.position = 'absolute';
@ -63,7 +53,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
stone.style.opacity = '1'; stone.style.opacity = '1';
// Set the pre-loaded SVG content as innerHTML // 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 // Make sure the SVG inside fills the container
const svg = stone.querySelector('svg'); const svg = stone.querySelector('svg');
@ -125,7 +115,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
function fadeOut() { function fadeOut() {
const animationStones = document.querySelectorAll('.animation-stone'); const animationStones = document.querySelectorAll('.animation-stone');
const fadeStartTime = performance.now(); const fadeStartTime = performance.now();
const fadeDuration = 15 * 100; // 100 = 1sec const fadeDuration = 500;
function fade(currentTime) { function fade(currentTime) {
const elapsed = currentTime - fadeStartTime; const elapsed = currentTime - fadeStartTime;
@ -152,7 +142,8 @@ async function createBouncingStonesAnimation(color, count = 20) {
if (!startTime) startTime = currentTime; if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime; const elapsed = currentTime - startTime;
if (elapsed < 5000) { // Wait 15s to fade away
if (elapsed < 15000) {
animateStones(); animateStones();
animationId = requestAnimationFrame(animate); animationId = requestAnimationFrame(animate);
} else { } else {
@ -192,20 +183,18 @@ async function createBouncingStonesAnimation(color, count = 20) {
const animations = {}; 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'] = () => { animations['black-victory'] = () => {
return createBouncingStonesAnimation('black', 40); return createBouncingStonesAnimation(0, 40);
}; };
animations['white-victory'] = () => { animations['white-victory'] = () => {
return createBouncingStonesAnimation('white', 40); return createBouncingStonesAnimation(40, 0);
}; };
animations['draw'] = () => { animations['draw'] = () => {
// For draw, create 10 black and 10 white stones return createBouncingStonesAnimation(20, 20);
const blackAnimation = createBouncingStonesAnimation('black', 20);
const whiteAnimation = createBouncingStonesAnimation('white', 20);
return [blackAnimation, whiteAnimation];
}; };
document.addEventListener('htmx:wsAfterMessage', async function (e) { document.addEventListener('htmx:wsAfterMessage', async function (e) {
@ -219,19 +208,10 @@ document.addEventListener('htmx:wsAfterMessage', async function (e) {
return; return;
} }
// Play the requested animation
const animationFn = animations[msg.animation]; const animationFn = animations[msg.animation];
if (animationFn) { if (animationFn) {
console.log('Playing animation:', msg.animation); animationFn().play();
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();
}
} else { } else {
console.log('Unknown animation:', msg.animation); console.error('Unknown animation:', msg.animation);
} }
}); });