115 lines
2.8 KiB
JavaScript
115 lines
2.8 KiB
JavaScript
// Global variables
|
|
let currentFact = null;
|
|
let imageHistory = [];
|
|
|
|
// DOM elements
|
|
const imageContainer = document.getElementById("imageContainer");
|
|
const spaceImage = document.getElementById("spaceImage");
|
|
const factOverlay = document.getElementById("factOverlay");
|
|
const factTitle = document.getElementById("factTitle");
|
|
const factDescription = document.getElementById("factDescription");
|
|
const prevBtn = document.getElementById("prevBtn");
|
|
const nextBtn = document.getElementById("nextBtn");
|
|
|
|
// Fetch random image from API
|
|
async function fetchRandomImage() {
|
|
try {
|
|
const response = await fetch("/api/random-image");
|
|
const imageData = await response.json();
|
|
|
|
if (imageData && !response.error) {
|
|
currentFact = imageData;
|
|
loadFact(currentFact);
|
|
// Add to history
|
|
imageHistory.push(currentFact);
|
|
|
|
// Limit history to 50 items
|
|
if (imageHistory.length > 50) {
|
|
imageHistory.shift();
|
|
}
|
|
} else {
|
|
console.error("Failed to fetch random image");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching random image:", error);
|
|
}
|
|
}
|
|
|
|
// Load a specific fact
|
|
function loadFact(fact) {
|
|
if (!fact) return;
|
|
|
|
spaceImage.src = `/api/image/${fact.id}`;
|
|
factTitle.textContent = fact.title;
|
|
factDescription.textContent = fact.description;
|
|
|
|
// Make sure overlay is visible when loading new image
|
|
factOverlay.classList.remove("hidden");
|
|
}
|
|
|
|
// Toggle fact overlay visibility
|
|
function toggleFactOverlay() {
|
|
if (factOverlay) {
|
|
factOverlay.classList.toggle("hidden");
|
|
}
|
|
}
|
|
|
|
// Load next image
|
|
async function loadNextImage() {
|
|
try {
|
|
const response = await fetch("/api/next-image");
|
|
const imageData = await response.json();
|
|
|
|
if (imageData && !response.error) {
|
|
currentFact = imageData;
|
|
loadFact(currentFact);
|
|
|
|
// Add to history
|
|
imageHistory.push(currentFact);
|
|
|
|
// Limit history to 50 items
|
|
if (imageHistory.length > 50) {
|
|
imageHistory.shift();
|
|
}
|
|
} else {
|
|
console.error("Failed to fetch next image");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching next image:", error);
|
|
}
|
|
}
|
|
|
|
// Load previous image from history
|
|
async function loadPreviousImage() {
|
|
if (imageHistory.length < 2) {
|
|
// If we're at the beginning, go back to random image
|
|
await fetchRandomImage();
|
|
return;
|
|
}
|
|
|
|
// Remove current item from history and get previous one
|
|
imageHistory.pop(); // Remove current
|
|
const prevFact = imageHistory[imageHistory.length - 1];
|
|
|
|
if (prevFact) {
|
|
currentFact = prevFact;
|
|
loadFact(currentFact);
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
imageContainer.addEventListener("click", toggleFactOverlay);
|
|
|
|
prevBtn.addEventListener("click", () => {
|
|
loadPreviousImage();
|
|
});
|
|
|
|
nextBtn.addEventListener("click", () => {
|
|
loadNextImage();
|
|
});
|
|
|
|
// Initialize the app
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
fetchRandomImage();
|
|
});
|