giers10/auto-git-gui
1
0
Fork 0
Code Releases Activity

Refactor glow animation logic in animeCat.js

Browse Source
This commit is contained in:
Victor Giers
2025-05-26 07:15:59 +02:00
parent 3d44f9b4db
commit 2cf57ddbe1
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
animeCat.js
View File

@@ -77,10 +77,6 @@ window.AnimeCat = class AnimeCat {
this.img.style.zIndex = '2'; this.img.style.zIndex = '2';
this.img.style.position = 'relative'; // wichtig für Layering this.img.style.position = 'relative'; // wichtig für Layering
// --- Reihenfolge: Glow, dann Katze, dann Bubble ---
this.wrapper.appendChild(this.glow);
this.wrapper.appendChild(this.img);
// --- Speech bubble --- // --- Speech bubble ---
this.bubble = document.createElement('div'); this.bubble = document.createElement('div');
Object.assign(this.bubble.style, { Object.assign(this.bubble.style, {
@@ -129,6 +125,8 @@ window.AnimeCat = class AnimeCat {
this.glow.id = 'cat-glow'; this.glow.id = 'cat-glow';
this.wrapper.insertBefore(this.glow, this.img); this.wrapper.insertBefore(this.glow, this.img);
} }
this.wrapper.appendChild(this.glow);
this.wrapper.appendChild(this.img); this.wrapper.appendChild(this.img);
this.wrapper.appendChild(this.bubble); this.wrapper.appendChild(this.bubble);
this.container.appendChild(this.wrapper); this.container.appendChild(this.wrapper);
@@ -159,21 +157,29 @@ window.AnimeCat = class AnimeCat {
]; ];
} }
animateCatGlow(commitCount) { animateCatGlow(commitCount) {
// Glow zwischen grün und orange interpolieren (0-500 Commits) const glow = this.glow;
const minColor = [60, 230, 100]; // grün if (!glow) return;
const maxColor = [255, 100, 0]; // orange
const t = Math.min(commitCount, 500) / 500;
const [r, g, b] = this._lerpColor(minColor, maxColor, t);
// ... wie gehabt: Größe, Opazität, etc. // Farbinterpolation je nach Commits:
// Beispiel: function getGlowColor(count) {
if (count < 10) return [60, 230, 100]; // grün
if (count < 50) return [100, 180, 255]; // blau
if (count < 100) return [180, 120, 255]; // lila
if (count < 500) return [255, 180, 60]; // orange
return [255, 100, 0]; // voll orange
}
const [r, g, b] = getGlowColor(commitCount);
// Skalierung bleibt wie gehabt
const minSize = 80, maxSize = 170; const minSize = 80, maxSize = 170;
const size = minSize + t * (maxSize - minSize); const factor = Math.min(commitCount / 500, 1); // jetzt auf 500 skalieren!
const size = minSize + factor * (maxSize - minSize);
this.glow.style.width = `${size}px`; glow.style.width = `${size}px`;
this.glow.style.height = `${size}px`; glow.style.height = `${size}px`; // jetzt immer Kreis!
this.glow.style.opacity = 0.25 + 0.65 * t; glow.style.opacity = 0.25 + 0.65 * factor;
this.glow.style.background = `radial-gradient(circle, rgba(${r},${g},${b},0.9) 0%, rgba(${r},${g},${b},0.13) 65%, rgba(0,0,0,0) 100%)`; glow.style.background = `radial-gradient(circle, rgba(${r},${g},${b},0.9) 0%, rgba(${r},${g},${b},0.13) 65%, rgba(0,0,0,0) 100%)`;
} }
// Bubble-Position absolut anpassen, wenn detached // Bubble-Position absolut anpassen, wenn detached