121 lines
5 KiB
JavaScript
121 lines
5 KiB
JavaScript
// Warten, bis das DOM vollständig geladen ist
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Suche nach dem Element mit der Klasse 'horse_banner'
|
|
const banner = document.querySelector('.horse_banner');
|
|
if (banner) {
|
|
// Erstelle das container div
|
|
const div = document.createElement('div');
|
|
div.className = 'collector_ui';
|
|
Object.assign(div.style, {
|
|
position: 'absolute',
|
|
right: '-160px',
|
|
top: '20px',
|
|
zIndex: '1',
|
|
padding: '10px',
|
|
backgroundColor: '#FFFFFFD9',
|
|
width: '120px',
|
|
minHeight: '50px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
gap: '10px' // Abstand zwischen Button und Tabelle
|
|
});
|
|
|
|
// Erstelle den Button
|
|
const updateHorseButton = document.createElement('updateHorseButton');
|
|
updateHorseButton.textContent = 'Update Horse';
|
|
Object.assign(updateHorseButton.style, {
|
|
padding: '10px 15px',
|
|
backgroundColor: '#ffa200',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '5px',
|
|
cursor: 'pointer',
|
|
alignSelf: 'stretch', // Button auf volle Breite dehnen
|
|
transition: 'background-color 0.3s ease' // Übergang für den Hover-Effekt
|
|
});
|
|
updateHorseButton.addEventListener("click", function() {
|
|
chrome.runtime.sendMessage({ action: "updateHorseData" });
|
|
});
|
|
|
|
// Hover-Effekt hinzufügen
|
|
updateHorseButton.addEventListener('mouseenter', function () {
|
|
updateHorseButton.style.backgroundColor = '#bf8700'; // Hover-Farbe
|
|
});
|
|
updateHorseButton.addEventListener('mouseleave', function () {
|
|
updateHorseButton.style.backgroundColor = '#ffa200'; // Originalfarbe
|
|
});
|
|
|
|
// Flex-Container für die Tabelle
|
|
const table = document.createElement('div');
|
|
Object.assign(table.style, {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
gap: '12px' // Abstand zwischen den Zeilen
|
|
});
|
|
|
|
// Beschriftungen und Emoji-Elemente
|
|
const rows = [
|
|
{ label: 'Basic', emojiId: 'emojiBasic', emoji: '❌' },
|
|
{ label: 'Summary', emojiId: 'emojiSummary', emoji: '❌' },
|
|
{ label: 'Training', emojiId: 'emojiTraining', emoji: '❌' },
|
|
{ label: 'Genetics', emojiId: 'emojiGenetics', emoji: '❌' },
|
|
{ label: 'Achievements', emojiId: 'emojiAchievements', emoji: '❌' },
|
|
{ label: 'Health', emojiId: 'emojiHealth', emoji: '❌' },
|
|
];
|
|
|
|
// Erstelle Zeilen für jede Beschriftung
|
|
rows.forEach(row => {
|
|
const rowDiv = document.createElement('div');
|
|
Object.assign(rowDiv.style, {
|
|
display: 'flex',
|
|
justifyContent: 'space-between', // Beschriftung links, Emoji rechts
|
|
width: '100%'
|
|
});
|
|
|
|
// Linkes Element für die Beschriftung
|
|
const labelCell = document.createElement('div');
|
|
labelCell.textContent = row.label;
|
|
labelCell.style.flex = '1'; // Beschriftung auf der linken Seite
|
|
|
|
// Rechtes Element für das Emoji
|
|
const emojiCell = document.createElement('div');
|
|
const emojiSpan = document.createElement('span');
|
|
emojiSpan.id = row.emojiId;
|
|
emojiSpan.textContent = row.emoji;
|
|
emojiCell.appendChild(emojiSpan);
|
|
emojiCell.style.flex = '0'; // Emoji auf der rechten Seite
|
|
|
|
// Zeile zur Tabelle hinzufügen
|
|
rowDiv.appendChild(labelCell);
|
|
rowDiv.appendChild(emojiCell);
|
|
table.appendChild(rowDiv);
|
|
});
|
|
const infoTextLoaded = document.createElement('p');
|
|
infoTextLoaded.textContent = '✅ Loaded';
|
|
infoTextLoaded.justifyContent = 'space-between';
|
|
infoTextLoaded.width = '100%';
|
|
const infoTextDynamic = document.createElement('p');
|
|
infoTextDynamic.textContent = '☑️ Dynamic';
|
|
infoTextDynamic.justifyContent = 'space-between';
|
|
infoTextDynamic.width = '100%';
|
|
const infoTextNeedRefresh = document.createElement('p');
|
|
infoTextNeedRefresh.textContent = '🔄 Needs Refresh';
|
|
infoTextNeedRefresh.justifyContent = 'space-between';
|
|
infoTextNeedRefresh.width = '100%';
|
|
const infoTextNotLoaded = document.createElement('p');
|
|
infoTextNotLoaded.textContent = '❌ Not Loaded';
|
|
infoTextNotLoaded.justifyContent = 'space-between';
|
|
infoTextNotLoaded.width = '100%';
|
|
|
|
// Button oben hinzufügen, dann die Tabelle
|
|
div.appendChild(updateHorseButton);
|
|
div.appendChild(table);
|
|
div.appendChild(infoTextLoaded);
|
|
div.appendChild(infoTextDynamic);
|
|
div.appendChild(infoTextNotLoaded);
|
|
div.appendChild(infoTextNeedRefresh);
|
|
banner.appendChild(div);
|
|
}
|
|
});
|