433 lines
16 KiB
JavaScript
433 lines
16 KiB
JavaScript
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: '❌' },
|
|
];
|
|
// Warten, bis das DOM vollständig geladen ist
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const banner = document.querySelector('.horse_banner');
|
|
if (banner) {
|
|
const div = document.createElement('div');
|
|
div.className = 'collector_ui';
|
|
Object.assign(div.style, {
|
|
position: 'absolute',
|
|
right: '-220px',
|
|
top: '20px',
|
|
zIndex: '1',
|
|
padding: '10px',
|
|
backgroundColor: '#FFFFFFD9',
|
|
width: '180px',
|
|
minHeight: '50px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '10px'
|
|
});
|
|
const serverIsRunning = checkServerStatus(div);
|
|
// Container für die Buttons
|
|
const buttonContainer = document.createElement('div');
|
|
Object.assign(buttonContainer.style, {
|
|
display: 'flex',
|
|
gap: '5px',
|
|
justifyContent: 'space-between',
|
|
width: '100%'
|
|
});
|
|
// Textbox für Notizen
|
|
const notesTextbox = document.createElement('textarea');
|
|
notesTextbox.id = 'notesTextbox';
|
|
notesTextbox.placeholder = 'Notes...';
|
|
notesTextbox.type = 'text';
|
|
Object.assign(notesTextbox.style, {
|
|
width: '100%',
|
|
minHeight: '30px',
|
|
padding: '0px',
|
|
fontSize: '14px',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '5px',
|
|
resize: 'vertical'
|
|
});
|
|
// Update Horse Button
|
|
const updateHorseButton = document.createElement('button');
|
|
updateHorseButton.textContent = 'Update';
|
|
Object.assign(updateHorseButton.style, {
|
|
padding: '10px 15px',
|
|
flex: '3',
|
|
backgroundColor: '#ffa200',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '5px',
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.3s ease'
|
|
});
|
|
updateHorseButton.addEventListener("click", function () {
|
|
chrome.runtime.sendMessage({ action: "updateHorseData" });
|
|
});
|
|
updateHorseButton.addEventListener('mouseenter', function () {
|
|
updateHorseButton.style.backgroundColor = '#bf8700';
|
|
});
|
|
updateHorseButton.addEventListener('mouseleave', function () {
|
|
updateHorseButton.style.backgroundColor = '#ffa200';
|
|
});
|
|
|
|
// Delete Horse Button
|
|
const deleteHorseButton = document.createElement('button');
|
|
deleteHorseButton.textContent = 'X';
|
|
Object.assign(deleteHorseButton.style, {
|
|
padding: '5px',
|
|
flex: '1',
|
|
backgroundColor: '#ff0000',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '5px',
|
|
cursor: 'pointer',
|
|
textAlign: 'center',
|
|
transition: 'background-color 0.3s ease'
|
|
});
|
|
deleteHorseButton.addEventListener("click", function () {
|
|
chrome.runtime.sendMessage({ action: "deleteHorse" });
|
|
});
|
|
deleteHorseButton.addEventListener('mouseenter', function () {
|
|
deleteHorseButton.style.backgroundColor = '#bf0000';
|
|
});
|
|
deleteHorseButton.addEventListener('mouseleave', function () {
|
|
deleteHorseButton.style.backgroundColor = '#ff0000';
|
|
});
|
|
|
|
// Buttons zum Container hinzufügen
|
|
buttonContainer.appendChild(updateHorseButton);
|
|
buttonContainer.appendChild(deleteHorseButton);
|
|
|
|
// Buttons oben hinzufügen
|
|
div.appendChild(buttonContainer);
|
|
|
|
// Labels mit Checkboxen hinzufügen
|
|
const labelContainer = document.createElement('div');
|
|
Object.assign(labelContainer.style, {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '10px'
|
|
});
|
|
|
|
// Labels mit Checkboxen hinzufügen
|
|
const labels = [
|
|
{ name: "RAB", id: "RAB" },
|
|
{ name: "Seal", id: "Seal" },
|
|
{ name: "Flaxen", id: "Flaxen" },
|
|
{ name: "Sooty", id: "Sooty" },
|
|
{ name: "Pangare", id: "Pangare" },
|
|
{ name: "Sabino", id: "Sabino" }
|
|
];
|
|
|
|
labels.forEach(label => {
|
|
const labelRow = document.createElement('div');
|
|
Object.assign(labelRow.style, {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: '5px'
|
|
});
|
|
|
|
const labelText = document.createElement('label');
|
|
labelText.textContent = label.name;
|
|
Object.assign(labelText.style, {
|
|
flex: '1',
|
|
fontSize: '14px',
|
|
color: '#333'
|
|
});
|
|
|
|
const checkboxContainer = document.createElement('div');
|
|
Object.assign(checkboxContainer.style, {
|
|
display: 'flex',
|
|
gap: '5px'
|
|
});
|
|
|
|
// Erste Checkbox
|
|
const checkbox1 = document.createElement('input');
|
|
checkbox1.type = 'checkbox';
|
|
checkbox1.id = `checkbox${label.id}1`; // ID mit Suffix 1
|
|
|
|
// Zweite Checkbox
|
|
const checkbox2 = document.createElement('input');
|
|
checkbox2.type = 'checkbox';
|
|
checkbox2.id = `checkbox${label.id}2`; // ID mit Suffix 2
|
|
|
|
checkboxContainer.appendChild(checkbox1);
|
|
checkboxContainer.appendChild(checkbox2);
|
|
|
|
labelRow.appendChild(labelText);
|
|
labelRow.appendChild(checkboxContainer);
|
|
|
|
labelContainer.appendChild(labelRow);
|
|
});
|
|
|
|
|
|
// Überprüfen, ob der Tab "Genetics" gewählt ist, und Labels aktivieren/deaktivieren
|
|
function updateLabelStates() {
|
|
const isGeneticsTab = getTabselText() === "Genetics";
|
|
Array.from(labelContainer.querySelectorAll('input')).forEach(input => {
|
|
input.disabled = !isGeneticsTab;
|
|
input.style.opacity = isGeneticsTab ? '1' : '0.5';
|
|
});
|
|
Array.from(labelContainer.querySelectorAll('label')).forEach(label => {
|
|
label.style.color = isGeneticsTab ? '#333' : '#aaa';
|
|
});
|
|
if (!isGeneticsTab)
|
|
{
|
|
document.querySelector('#optionalColorTextbox').disabled = true;
|
|
document.querySelector('#optionalColorTextbox').style.opacity = '0.5';
|
|
}
|
|
else
|
|
{
|
|
document.querySelector('#optionalColorTextbox').disabled = false;
|
|
document.querySelector('#optionalColorTextbox').style.opacity = '1';
|
|
}
|
|
}
|
|
|
|
|
|
// Tabelle erstellen
|
|
const table = document.createElement('div');
|
|
Object.assign(table.style, {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
gap: '12px'
|
|
});
|
|
|
|
// Zeilen für Tabelle hinzufügen (bleibt unverändert)
|
|
rows.forEach(row => {
|
|
const rowDiv = document.createElement('div');
|
|
Object.assign(rowDiv.style, {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
width: '100%'
|
|
});
|
|
|
|
const labelCell = document.createElement('div');
|
|
labelCell.textContent = row.label;
|
|
labelCell.style.flex = '1';
|
|
|
|
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';
|
|
|
|
rowDiv.appendChild(labelCell);
|
|
rowDiv.appendChild(emojiCell);
|
|
table.appendChild(rowDiv);
|
|
});
|
|
|
|
div.appendChild(notesTextbox);
|
|
div.appendChild(table);
|
|
// Labels und Checkboxen zum Div hinzufügen
|
|
div.appendChild(labelContainer);
|
|
// Textbox für optionale Farbe
|
|
const optionalColorTextbox = document.createElement('textarea');
|
|
optionalColorTextbox.type = 'text';
|
|
optionalColorTextbox.placeholder = 'Additional Color...';
|
|
optionalColorTextbox.id = 'optionalColorTextbox';
|
|
Object.assign(optionalColorTextbox.style, {
|
|
width: '100%',
|
|
height: '30px',
|
|
padding: '0px',
|
|
fontSize: '14px',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '5px',
|
|
resize: 'vertical'
|
|
});
|
|
div.appendChild(optionalColorTextbox);
|
|
|
|
// Linie hinzufügen
|
|
const line = document.createElement('hr');
|
|
Object.assign(line.style, {
|
|
width: '100%',
|
|
border: '0',
|
|
height: '1px',
|
|
backgroundColor: '#ddd',
|
|
margin: '10px 0'
|
|
});
|
|
|
|
const legendTitle = document.createElement('div');
|
|
legendTitle.textContent = 'Legend:';
|
|
Object.assign(legendTitle.style, {
|
|
fontWeight: 'bold',
|
|
fontSize: '14px',
|
|
color: '#555'
|
|
});
|
|
|
|
const legendTexts = [
|
|
{ emoji: '✅', text: 'Loaded' },
|
|
{ emoji: '☑️', text: 'Dynamic' },
|
|
{ emoji: '🔄', text: 'Needs Refresh' },
|
|
{ emoji: '❌', text: 'Not Loaded' },
|
|
];
|
|
const legend = document.createElement('div');
|
|
Object.assign(legend.style, {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '5px',
|
|
fontSize: '12px',
|
|
color: '#333'
|
|
});
|
|
|
|
legendTexts.forEach(item => {
|
|
const legendRow = document.createElement('div');
|
|
Object.assign(legendRow.style, {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '5px'
|
|
});
|
|
|
|
const emoji = document.createElement('span');
|
|
emoji.textContent = item.emoji;
|
|
emoji.style.fontSize = '14px';
|
|
|
|
const text = document.createElement('span');
|
|
text.textContent = item.text;
|
|
|
|
legendRow.appendChild(emoji);
|
|
legendRow.appendChild(text);
|
|
legend.appendChild(legendRow);
|
|
});
|
|
|
|
div.appendChild(line);
|
|
div.appendChild(legendTitle);
|
|
div.appendChild(legend);
|
|
banner.appendChild(div);
|
|
|
|
// Tab-Wechsel überwachen
|
|
document.addEventListener("click", updateLabelStates);
|
|
updateLabelStates(); // Initialer Zustand
|
|
|
|
const horseId = document.querySelector('.right:nth-child(2)').innerText.replace('#', '');
|
|
if (serverIsRunning)
|
|
updateLoadStateUI(horseId);
|
|
}
|
|
});
|
|
async function checkServerStatus(div) {
|
|
const serverIsRunning = await pingServer();
|
|
if (!serverIsRunning){
|
|
// Erstelle das Overlay
|
|
const overlay = document.createElement('div');
|
|
|
|
// Style für das Overlay
|
|
overlay.style.position = 'absolute';
|
|
overlay.style.top = '0';
|
|
overlay.style.left = '0';
|
|
overlay.style.width = '100%';
|
|
overlay.style.height = '100%';
|
|
overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
|
|
overlay.style.display = 'flex';
|
|
overlay.style.justifyContent = 'center';
|
|
overlay.style.alignItems = 'center';
|
|
overlay.style.zIndex = '9999';
|
|
|
|
// Erstelle den Text
|
|
const text = document.createElement('div');
|
|
text.innerText = 'Server not running ❌';
|
|
text.style.color = 'black';
|
|
text.style.fontSize = '1.5em';
|
|
text.style.fontWeight = 'bold';
|
|
|
|
// Text in das Overlay einfügen
|
|
overlay.appendChild(text);
|
|
div.appendChild(overlay);
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
// Funktion zur Ermittlung des Tabs
|
|
function getTabselText() {
|
|
return document.querySelector('div.tabsel')?.textContent?.trim() || "Unknown";
|
|
}
|
|
async function updateLoadStateUI(horseId) {
|
|
const loadState = await getHorseLoadStateAPIAsync(horseId);
|
|
if (!loadState) {
|
|
console.info("Failed to retrieve load state.");
|
|
return;
|
|
}
|
|
|
|
// Mappe die LoadState-Werte auf die UI-Emojis
|
|
const loadStateMapping = {
|
|
Basic: loadState.basicInfoLoaded ? (loadState.basicInfoNeedsRefresh ? '🔄' : '✅') : '❌',
|
|
Summary: loadState.summaryLoaded ? (loadState.summaryNeedsRefresh ? '🔄' : '✅') : '❌',
|
|
Training: loadState.trainingLoaded ? (loadState.trainingNeedsRefresh ? '🔄' : '✅') : '❌',
|
|
Genetics: loadState.geneticsLoaded ? (loadState.geneticsNeedsRefresh ? '🔄' : '✅') : '❌',
|
|
Achievements: loadState.achievementsLoaded ? (loadState.achievementsNeedsRefresh ? '🔄' : '☑️') : '❌',
|
|
Health: loadState.healthLoaded ? (loadState.healthNeedsRefresh ? '🔄' : '✅') : '❌',
|
|
};
|
|
// Aktualisiere die Rows in der UI
|
|
rows.forEach(row => {
|
|
const emojiElement = document.getElementById(row.emojiId);
|
|
if (emojiElement && loadStateMapping[row.label]) {
|
|
emojiElement.textContent = loadStateMapping[row.label]; // Setze das Emoji basierend auf dem Ladezustand
|
|
}
|
|
});
|
|
const colors = await getColorsAPIAsync(horseId);
|
|
if (colors) {
|
|
// Update die Checkboxen basierend auf den Farben
|
|
updateColors(colors);
|
|
}
|
|
const notes = await getHorseNotesAPIAsync(horseId);
|
|
if (notes) {
|
|
// Update die Notizen
|
|
document.querySelector('#notesTextbox').value = notes;
|
|
}
|
|
}
|
|
function updateColors(colors) {
|
|
const mappings = {
|
|
RAB: '#checkboxRAB',
|
|
Seal: '#checkboxSeal',
|
|
Flaxen: '#checkboxFlaxen',
|
|
Sooty: '#checkboxSooty',
|
|
Pangare: '#checkboxPangare',
|
|
Sabino: '#checkboxSabino'
|
|
};
|
|
|
|
Object.entries(mappings).forEach(([key, baseId]) => {
|
|
const checkbox1 = document.querySelector(`${baseId}1`);
|
|
const checkbox2 = document.querySelector(`${baseId}2`);
|
|
|
|
if (colors[key]) {
|
|
// Farben in der Form "RAB/RAB", "RAB/n", "n/RAB", "n/n"
|
|
const [left, right] = colors[key].split('/');
|
|
|
|
// Aktualisiere Checkboxen basierend auf den Werten
|
|
if (checkbox1) checkbox1.checked = left !== 'n';
|
|
if (checkbox2) checkbox2.checked = right !== 'n';
|
|
} else {
|
|
// Wenn keine Farben vorhanden, Checkboxen deaktivieren
|
|
if (checkbox1) checkbox1.checked = false;
|
|
if (checkbox2) checkbox2.checked = false;
|
|
}
|
|
});
|
|
if ("Custom" in colors)
|
|
{
|
|
document.querySelector('#optionalColorTextbox').value = colors["Custom"];
|
|
}
|
|
}
|
|
function updateSingleLoadStateUI(loadStateKey, isLoaded, needsRefresh) {
|
|
// Mappe das LoadState-Schlüssel auf das Emoji
|
|
const loadStateMapping = {
|
|
true: needsRefresh ? '☑️' : '✅', // Geladen, aber möglicherweise veraltet
|
|
false: '❌' // Nicht geladen
|
|
};
|
|
|
|
// Suche die passende Row basierend auf dem Schlüssel
|
|
const row = rows.find(row => row.label === loadStateKey);
|
|
if (!row) {
|
|
console.error(`Row for ${loadStateKey} not found.`);
|
|
return;
|
|
}
|
|
|
|
// Aktualisiere das Emoji in der UI
|
|
const emojiElement = document.getElementById(row.emojiId);
|
|
if (emojiElement) {
|
|
emojiElement.textContent = loadStateMapping[isLoaded]; // Setze das Emoji entsprechend des Status
|
|
} else {
|
|
console.error(`Emoji element for ${loadStateKey} not found.`);
|
|
}
|
|
}
|