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

Refactor bubble positioning logic in animeCat.js

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

35
animeCat.js
View File

@@ -207,35 +207,38 @@ animateCatGlow(commitCount) {
glow.style.background = `radial-gradient(circle, rgba(${r},${g},${b},0.85) 0%, rgba(${r},${g},${b},0.14) 70%, rgba(0,0,0,0) 100%)`; glow.style.background = `radial-gradient(circle, rgba(${r},${g},${b},0.85) 0%, rgba(${r},${g},${b},0.14) 70%, rgba(0,0,0,0) 100%)`;
} }
// Bubble-Position absolut anpassen, wenn detached // Bubble für Animation absolut an Position der Katze anheften
_positionBubbleDetached() { _positionBubbleDetached() {
// Katze relativ im Container finden // Katzen-Bild in catContainer suchen!
const catRect = this.img.getBoundingClientRect(); const catRect = this.catContainer.getBoundingClientRect();
const contRect = this.container.getBoundingClientRect(); const contRect = this.container.getBoundingClientRect();
// "Andockpunkt": rechts neben der Katze, leicht versetzt nach oben
const left = (catRect.right - contRect.left) + 12; // Position: leicht rechts, minimal nach oben (bei Bedarf feintunen)
const bottom = (contRect.bottom - catRect.bottom) + 8; const left = (catRect.right - contRect.left) + 16;
const bottom = (contRect.bottom - catRect.bottom) + 18;
Object.assign(this.bubble.style, { Object.assign(this.bubble.style, {
position: 'absolute', position: 'absolute',
left: `${left}px`, left: `${left}px`,
bottom: `${bottom}px`, bottom: `${bottom}px`,
marginLeft: '0', marginLeft: '0',
marginBottom: '0' marginBottom: '0'
}); });
// Tail bleibt am linken Rand der Bubble! // Tail am linken Rand
this.bubblePointer.style.left = '-13px'; this.bubblePointer.style.left = '-13px';
this.bubblePointer.style.bottom = '12px'; this.bubblePointer.style.bottom = '14px';
} }
// Zurück zum Flex-Layout
_resetBubbleAttach() { _resetBubbleAttach() {
Object.assign(this.bubble.style, { Object.assign(this.bubble.style, {
position: 'relative', position: 'relative',
left: '', left: '',
bottom: '', bottom: '',
marginLeft: '14px', marginLeft: '12px',
marginBottom: '11px' marginBottom:'16px'
}); });
this.bubblePointer.style.left = '-13px'; this.bubblePointer.style.left = '-13px';
this.bubblePointer.style.bottom = '12px'; this.bubblePointer.style.bottom = '14px';
} }
_startBlinking() { _startBlinking() {