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

Refactor animeCat.js to improve layout and structure

Browse Source
This commit is contained in:
Victor Giers
2025-05-26 07:26:19 +02:00
parent d66c385805
commit e5334996e5
1 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
animeCat.js
View File

@@ -33,42 +33,54 @@ window.AnimeCat = class AnimeCat {
} }
_createElements() { _createElements() {
// Outer wrapper (relativ für absolute Kinder!) // Outer Wrapper für Flex-Layout
this.wrapper = document.createElement('div'); this.wrapper = document.createElement('div');
Object.assign(this.wrapper.style, { Object.assign(this.wrapper.style, {
position: 'relative', position: 'relative',
width: '100px',
height: '80px',
display: 'flex', display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end', alignItems: 'flex-end',
minHeight: '80px',
minWidth: '180px',
zIndex: 1 zIndex: 1
}); });
// --- Glow (unter der Katze) --- // Innerer Container für Glow + Katze (Stack!)
this.catContainer = document.createElement('div');
Object.assign(this.catContainer.style, {
position: 'relative',
width: '90px',
height: '70px',
minWidth: '90px',
minHeight: '70px',
zIndex: 2
});
// Glow (hinter der Katze)
this.glow = document.createElement('div'); this.glow = document.createElement('div');
this.glow.id = 'cat-glow'; this.glow.id = 'cat-glow';
Object.assign(this.glow.style, { Object.assign(this.glow.style, {
position: 'absolute', position: 'absolute',
left: '50%', left: '50%',
top: '50%', top: '57%',
transform: 'translate(-50%, -52%)', transform: 'translate(-50%, -50%)',
borderRadius: '50%', borderRadius: '50%',
width: '120px', width: '120px',
height: '80px', height: '80px',
pointerEvents: 'none', pointerEvents: 'none',
zIndex: 1, zIndex: 1,
transition: 'background 0.4s, width 0.2s, height 0.2s, opacity 0.3s' transition: 'background 0.4s, width 0.2s, height 0.2s, opacity 0.3s'
}); });
this.wrapper.appendChild(this.glow); this.catContainer.appendChild(this.glow);
// --- Cat image (über Glow) --- // Cat image (über dem Glow, mittig im catContainer)
this.img = document.createElement('img'); this.img = document.createElement('img');
this.img.src = this.images.default; this.img.src = this.images.default;
Object.assign(this.img.style, { Object.assign(this.img.style, {
position: 'absolute', position: 'absolute',
left: '50%', left: '50%',
top: '50%', top: '44%',
transform: 'translate(-50%, -60%)', transform: 'translate(-50%, -50%)',
width: '62px', width: '62px',
height: '50px', height: '50px',
zIndex: 2, zIndex: 2,
@@ -80,14 +92,14 @@ window.AnimeCat = class AnimeCat {
pointerEvents: 'auto' pointerEvents: 'auto'
}); });
this.img.draggable = false; this.img.draggable = false;
this.wrapper.appendChild(this.img); this.catContainer.appendChild(this.img);
// --- Speech bubble (daneben, nicht überlagert) --- // Sprechblase (direkt im wrapper)
this.bubble = document.createElement('div'); this.bubble = document.createElement('div');
Object.assign(this.bubble.style, { Object.assign(this.bubble.style, {
position: 'relative', position: 'relative',
marginLeft: '14px', marginLeft: '12px',
marginBottom: '11px', marginBottom: '16px',
padding: '10px 16px', padding: '10px 16px',
background: 'white', background: 'white',
border: '1px solid #ccc', border: '1px solid #ccc',
@@ -108,12 +120,12 @@ window.AnimeCat = class AnimeCat {
alignItems: 'center' alignItems: 'center'
}); });
// --- Bubble "Tail" (kleines Dreieck) --- // Bubble Tail
this.bubblePointer = document.createElement('div'); this.bubblePointer = document.createElement('div');
Object.assign(this.bubblePointer.style, { Object.assign(this.bubblePointer.style, {
position: 'absolute', position: 'absolute',
left: '-13px', left: '-13px',
bottom: '12px', bottom: '14px',
width: '0', width: '0',
height: '0', height: '0',
borderTop: '8px solid transparent', borderTop: '8px solid transparent',
@@ -124,15 +136,16 @@ window.AnimeCat = class AnimeCat {
}); });
this.bubble.appendChild(this.bubblePointer); this.bubble.appendChild(this.bubblePointer);
// --- Wrapper komplettieren --- // Zusammenbauen
this.wrapper.appendChild(this.bubble); this.wrapper.appendChild(this.catContainer); // LINKS (Stack: Glow, Katze)
this.wrapper.appendChild(this.bubble); // RECHTS
this.container.appendChild(this.wrapper); this.container.appendChild(this.wrapper);
// --- Herz-Emitter (für Animationen) --- // Herz-Emitter, bleibt wie gehabt
this.heartEmitter = document.createElement('div'); this.heartEmitter = document.createElement('div');
Object.assign(this.heartEmitter.style, { Object.assign(this.heartEmitter.style, {
position: 'absolute', position: 'absolute',
left: '82px', left: '90px',
bottom: '32px', bottom: '32px',
pointerEvents: 'none', pointerEvents: 'none',
width: '1px', width: '1px',
@@ -142,7 +155,6 @@ window.AnimeCat = class AnimeCat {
this.container.appendChild(this.heartEmitter); this.container.appendChild(this.heartEmitter);
} }
// Hilfsfunktionen zur Farbinterpolation // Hilfsfunktionen zur Farbinterpolation
_lerp(a, b, t) { return a + (b - a) * t; } _lerp(a, b, t) { return a + (b - a) * t; }
_lerpColor(a, b, t) { _lerpColor(a, b, t) {