<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiff Reader</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="comic-container">
    <button id="prevBtn">⬅ Indietro</button>
    <img id="comic" src="" alt="Quiff">
    <button id="nextBtn">Avanti ➡</button>
    <br>
    <button id="randomBtn">Random Comic 🎲</button>
    <div id="counter"></div>
</div>

<script>
// PHP legge tutte le immagini nella cartella strisce
const strisce = ["strisce\/100.jpg","strisce\/101.gif","strisce\/102.gif","strisce\/103.gif","strisce\/106.gif","strisce\/110.gif","strisce\/111.gif","strisce\/112.gif","strisce\/118.gif","strisce\/120.gif","strisce\/123.gif","strisce\/124.gif","strisce\/125.gif","strisce\/127.gif","strisce\/133.gif","strisce\/134.gif","strisce\/135.gif","strisce\/136.gif","strisce\/137.gif","strisce\/140.gif","strisce\/141.gif","strisce\/142.gif","strisce\/143.gif","strisce\/144.gif","strisce\/145.gif","strisce\/146.gif","strisce\/147.gif","strisce\/148.gif","strisce\/159.gif","strisce\/167.gif","strisce\/172.jpg","strisce\/174.jpg","strisce\/176.jpg","strisce\/177.gif","strisce\/180.gif","strisce\/185.gif","strisce\/190.gif","strisce\/196.jpg","strisce\/70.gif","strisce\/89.gif","strisce\/91.gif","strisce\/93.gif","strisce\/94.gif","strisce\/95.gif","strisce\/96.gif","strisce\/97.gif","strisce\/98.gif","strisce\/99.gif"];

let current = 0;
const comicImg = document.getElementById('comic');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const randomBtn = document.getElementById('randomBtn');
const counter = document.getElementById('counter');

function showComic(index) {
    comicImg.src = strisce[index];
    counter.textContent = `Striscia ${index+1} / ${strisce.length}`;
}

// Loop infinito pulsanti
prevBtn.addEventListener('click', () => {
    current = (current - 1 + strisce.length) % strisce.length;
    showComic(current);
});

nextBtn.addEventListener('click', () => {
    current = (current + 1) % strisce.length;
    showComic(current);
});

// Pulsante random
randomBtn.addEventListener('click', () => {
    current = Math.floor(Math.random() * strisce.length);
    showComic(current);
});

// Navigazione tastiera
document.addEventListener('keydown', (e) => {
    if(e.key === "ArrowLeft") {
        current = (current - 1 + strisce.length) % strisce.length;
        showComic(current);
    }
    if(e.key === "ArrowRight") {
        current = (current + 1) % strisce.length;
        showComic(current);
    }
});

// Mostra la prima striscia
showComic(current);
</script>

</body>
</html>