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

Refactor glow color and size calculation in animeCat.js

Browse Source
This commit is contained in:
Victor Giers
2025-05-26 07:11:39 +02:00
parent 91c6410a51
commit 34c6789c76
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
animeCat.js
View File

@@ -153,18 +153,28 @@ window.AnimeCat = class AnimeCat {
const glow = this.glow; const glow = this.glow;
if (!glow) return; if (!glow) return;
const factor = Math.min(commitCount / 10, 1); // Farbinterpolation je nach Commits:
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 factor = Math.min(commitCount / 500, 1); // jetzt auf 500 skalieren!
const size = minSize + factor * (maxSize - minSize); const size = minSize + factor * (maxSize - minSize);
glow.style.width = `${size}px`; glow.style.width = `${size}px`;
glow.style.height = `${size * 0.66}px`; glow.style.height = `${size}px`; // jetzt immer Kreis!
glow.style.opacity = 0.2 + 0.8 * factor; glow.style.opacity = 0.25 + 0.65 * factor;
glow.style.background = `radial-gradient(circle, rgba(255,230,100,${0.7 + factor*0.3}) 0%, rgba(255,230,100,${0.10 + 0.5*factor}) 70%, 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
_positionBubbleDetached() { _positionBubbleDetached() {
// Katze relativ im Container finden // Katze relativ im Container finden

6
index.html
View File

@@ -165,14 +165,12 @@
/*maybe move this into the cat later*/ /*maybe move this into the cat later*/
#cat-glow { #cat-glow {
background: radial-gradient(circle, rgba(255,230,100,0.9) 0%, rgba(255,230,100,0.15) 75%, rgba(0,0,0,0) 100%);
position: absolute; position: absolute;
left: 50%; top: 50%; left: 50%; top: 50%;
transform: translate(-50%, -60%); transform: translate(-50%, -50%);
width: 120px; height: 80px;
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
opacity: 1; border-radius: 50%;
transition: transition:
box-shadow 0.5s cubic-bezier(.8,.2,.2,1), box-shadow 0.5s cubic-bezier(.8,.2,.2,1),
background 0.5s cubic-bezier(.8,.2,.2,1), background 0.5s cubic-bezier(.8,.2,.2,1),