PERGAMEMORY - I Segreti dei Bevill by @ediede - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<iframe>Crea un frame all'interno di una pagina HTML.
idIdentifica univocamente un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

Background Property > filter() met

Notizie dai Monti

3 LS 29-01 TABELLA

My Anime Blog - Ninjas and Dragons(2)

Countdown Passaporto

pagina_personale

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PERGAMEMORY - I Segreti dei Bevillacqua</title>
    <link rel="stylesheet" href="style.css">
    <!-- Potresti aggiungere un font calligrafico da Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Source+Sans+3:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>

    <header>
        <h1>PERGAMEMORY</h1>
        <h2>I Segreti dei Bevillacqua</h2>
    </header>

    <main>
        <section id="intro">
            <p>L'Antico Archivio Digitale Bevilacqua è andato in frantumi.<br>
            Le pergamene si sono mischiate. I documenti si confondono.<br>
            La memoria della famiglia è in pericolo!<br>
            Ricostruisci le connessioni tra i documenti per salvare la verità.</p>
            <!-- Qui potresti aggiungere la scelta del personaggio in futuro -->
        </section>

        <section id="game-info">
            <p>Coppie Trovate: <span id="pairs-found">0</span></p>
            <p>Tentativi: <span id="attempts">0</span></p>
            <button id="reset-button" class="hidden">Gioca Ancora</button>
        </section>

        <section id="game-board">
            <!-- Le carte verranno generate qui da JavaScript -->
        </section>

        <section id="narrative-unlock" class="hidden">
            <h3>Frammento Sbloccato!</h3>
            <p id="narrative-text"></p>
        </section>
    </main>

    <footer>
        <p>"Ogni memoria è un enigma. Ogni pergamena, una chiave."</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

/* Stili Generali e Tema Pergamena */
:root {
    --parchment-bg: #f5e8c8; /* Colore pergamena chiaro */
    --ink-color: #4a3f35;    /* Colore inchiostro scuro */
    --seal-color: #a03d3e;   /* Colore ceralacca */
    --border-color: #d3c0a5; /* Colore bordo leggermente più scuro */
    --font-title: 'Uncial Antiqua', cursive; /* Font per titoli */
    --font-body: 'Source Sans 3', sans-serif; /* Font per testo leggibile */
}

body {
    font-family: var(--font-body);
    background-color: var(--parchment-bg);
    color: var(--ink-color);
    margin: 0;
    padding: 20px;
    background-image: url('img/parchment-texture.jpg'); /* Opzionale: aggiungi una texture */
    background-size: cover;
}

header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 15px;
}

header h1 {
    font-family: var(--font-title);
    font-size: 3em;
    margin-bottom: 0;
    color: var(--seal-color);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

header h2 {
    font-family: var(--font-title);
    font-size: 1.5em;
    margin-top: 5px;
    font-weight: normal;
}

main {
    max-width: 900px;
    margin: 0 auto;
}

#intro p {
    text-align: center;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 30px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.3); /* Sfondo leggermente trasparente */
    border: 1px dashed var(--border-color);
    border-radius: 5px;
}

#game-info {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
}

#game-info p {
    display: inline-block;
    margin: 0 15px;
}

#reset-button {
    padding: 8px 15px;
    font-family: var(--font-title);
    background-color: var(--seal-color);
    color: var(--parchment-bg);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
    margin-left: 20px;
}

#reset-button:hover {
    background-color: #7c2e2f; /* Ceralacca più scura */
}

/* Stili per la Griglia del Memory */
#game-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Griglia responsiva */
    gap: 15px;
    perspective: 1000px; /* Necessario per l'effetto 3D flip */
    margin-bottom: 30px;
}

.card {
    background-color: transparent;
    width: 100%;
    aspect-ratio: 2 / 3; /* Mantiene le proporzioni della carta */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d; /* Mantiene l'elemento figlio 3D */
    transition: transform 0.6s;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}

.card.flipped {
    transform: rotateY(180deg);
}

.card.matched {
    cursor: default;
    opacity: 0.6;
    box-shadow: none;
    /* Potresti aggiungere un bordo verde o un effetto speciale */
    border: 2px solid #5a8a5a;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Nasconde il lato posteriore durante il flip */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden; /* Nasconde testo troppo lungo */
}

.card-front {
    /* Stile della carta coperta (es. sigillo o pergamena arrotolata) */
    background-color: var(--seal-color); /* Colore ceralacca */
    /* O usa un'immagine: background-image: url('img/card-back.png'); */
    background-size: cover;
    color: var(--parchment-bg);
    font-size: 2.5em; /* Dimensione icona/sigillo */
    font-family: var(--font-title);
}
/* Semplice sigillo con testo o emoji */
.card-front::before {
    content: '?'; /* O un'icona font, o testo come 'B' */
}


.card-back {
    background-color: #fffef0; /* Pergamena un po' più chiara per il testo */
    color: var(--ink-color);
    transform: rotateY(180deg); /* Gira il retro */
    font-size: 0.8em; /* Riduci dimensione per farci stare il testo */
}

.card-title {
    font-weight: bold;
    font-size: 0.9em; /* Riduci un po' */
    margin-bottom: 5px;
}

.card-year {
    font-style: italic;
    font-size: 0.8em;
    margin-bottom: 8px;
}

.card-desc {
    font-size: 0.75em; /* Ancora più piccolo */
    line-height: 1.3;
}

/* Sezione Narrativa */
#narrative-unlock {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(230, 220, 200, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    text-align: center;
}

#narrative-unlock h3 {
    font-family: var(--font-title);
    color: var(--seal-color);
    margin-top: 0;
}

/* Utilità */
.hidden {
    display: none;
}

/* Media Query per schermi piccoli */
@media (max-width: 600px) {
    header h1 { font-size: 2em; }
    header h2 { font-size: 1.2em; }
    #game-board { grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Adatta la griglia */
    .card-back { font-size: 0.7em; }
     .card-title { font-size: 0.8em; }
     .card-desc { font-size: 0.7em; }
}

document.addEventListener('DOMContentLoaded', () => {
    const gameBoard = document.getElementById('game-board');
    const pairsFoundDisplay = document.getElementById('pairs-found');
    const attemptsDisplay = document.getElementById('attempts');
    const narrativeSection = document.getElementById('narrative-unlock');
    const narrativeText = document.getElementById('narrative-text');
    const resetButton = document.getElementById('reset-button');

    // --- DATI DELLE CARTE (Esempio - Espandere con dati reali) ---
    // Ogni oggetto rappresenta UNA CARTA.
    // 'pairId' collega le carte che formano una coppia.
    // 'narrative' è il testo sbloccato da quella coppia.
    const cardData = [
        { id: 1, pairId: 'processo1737', title: "Processo Bevilacqua vs. Zambelli", year: 1737, desc: "Atto di citazione per disputa ereditaria.", narrative: "La faida per l'eredità di Giovanni Bevilacqua iniziò con aspre accuse nel 1737..." },
        { id: 2, pairId: 'processo1737', title: "Sentenza: reintegro beni", year: 1739, desc: "Decisione del tribunale a favore dei Bevilacqua.", narrative: "La faida per l'eredità di Giovanni Bevilacqua iniziò con aspre accuse nel 1737..." },
        { id: 3, pairId: 'lettera1688', title: "Lettera a Suor Angelica", year: 1688, desc: "Richiesta di intercessione per affare delicato.", narrative: "Anche nei conventi, gli echi degli affari familiari Bevilacqua risuonavano forti..." },
        { id: 4, pairId: 'lettera1688', title: "Risposta da Suor Angelica", year: 1688, desc: "Promessa di preghiere e discrezione.", narrative: "Anche nei conventi, gli echi degli affari familiari Bevilacqua risuonavano forti..." },
        { id: 5, pairId: 'inventario1802', title: "Inventario beni post-mortem", year: 1802, desc: "Elenco dettagliato proprietà di Marco Bevilacqua.", narrative: "L'inventario del 1802 rivela la ricchezza accumulata, ma anche debiti nascosti." },
        { id: 6, pairId: 'inventario1802', title: "Testamento Olografo", year: 1801, desc: "Ultime volontà e disposizioni di Marco Bevilacqua.", narrative: "L'inventario del 1802 rivela la ricchezza accumulata, ma anche debiti nascosti." },
        { id: 7, pairId: 'attoNotarile1755', title: "Atto di Compravendita", year: 1755, desc: "Acquisto del podere 'La Quercia'.", narrative: "L'espansione terriera fu una costante ambizione, come dimostra l'acquisto del 1755." },
        { id: 8, pairId: 'attoNotarile1755', title: "Mappa Catastale", year: 1755, desc: "Rappresentazione dei confini del podere 'La Quercia'.", narrative: "L'espansione terriera fu una costante ambizione, come dimostra l'acquisto del 1755." }
        // Aggiungere più coppie qui... Almeno 6-8 coppie per un buon gioco.
    ];

    let cards = []; // Array che conterrà gli elementi HTML delle carte
    let flippedCards = []; // Tiene traccia delle carte girate (max 2)
    let matchedPairs = 0;
    let attempts = 0;
    let lockBoard = false; // Blocca la board durante il controllo/animazione

    // --- FUNZIONI DI GIOCO ---

    function shuffle(array) {
        // Algoritmo Fisher-Yates (moderno) per mischiare l'array
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]]; // Scambia elementi
        }
        return array;
    }

    function createBoard() {
        // Pulisce la board precedente e resetta stati
        gameBoard.innerHTML = '';
        narrativeSection.classList.add('hidden');
        resetButton.classList.add('hidden');
        matchedPairs = 0;
        attempts = 0;
        flippedCards = [];
        lockBoard = false;
        updateInfo();

        // Duplica i dati per creare le coppie effettive e mischia
        const gameCardsData = shuffle([...cardData, ...cardData]);

        gameCardsData.forEach(data => {
            const cardElement = document.createElement('div');
            cardElement.classList.add('card');
            // Aggiungi un data attribute per identificare la coppia
            cardElement.dataset.pairId = data.pairId;
            cardElement.dataset.narrative = data.narrative; // Porta con sé la narrativa

            cardElement.innerHTML = `
                <div class="card-face card-front"></div>
                <div class="card-face card-back">
                    <div class="card-title">${data.title}</div>
                    <div class="card-year">${data.year}</div>
                    <div class="card-desc">${data.desc}</div>
                </div>
            `;

            cardElement.addEventListener('click', handleCardClick);
            gameBoard.appendChild(cardElement);
            cards.push(cardElement); // Aggiunge l'elemento all'array delle carte
        });
    }

    function handleCardClick() {
        // Ignora click se la board è bloccata, la carta è già girata o già abbinata
        if (lockBoard || this.classList.contains('flipped') || this.classList.contains('matched')) {
            return;
        }

        this.classList.add('flipped');
        flippedCards.push(this);

        if (flippedCards.length === 2) {
            lockBoard = true; // Blocca ulteriori click
            attempts++;
            updateInfo();
            checkForMatch();
        }
    }

    function checkForMatch() {
        const [card1, card2] = flippedCards;
        const isMatch = card1.dataset.pairId === card2.dataset.pairId;

        if (isMatch) {
            disableCards();
            unlockNarrative(card1.dataset.narrative); // Mostra la narrativa
        } else {
            unflipCards();
        }
    }

    function disableCards() {
        flippedCards.forEach(card => {
            card.removeEventListener('click', handleCardClick); // Rimuove interazione
            card.classList.add('matched');
        });
        matchedPairs++;
        updateInfo();
        resetFlipState(); // Pulisce l'array delle carte girate
        checkWinCondition();
    }

    function unflipCards() {
        setTimeout(() => {
            flippedCards.forEach(card => {
                card.classList.remove('flipped');
            });
            resetFlipState(); // Pulisce l'array e sblocca la board
        }, 1000); // Aspetta 1 secondo prima di rigirare
    }

    function resetFlipState() {
        flippedCards = [];
        lockBoard = false;
    }

    function updateInfo() {
        pairsFoundDisplay.textContent = matchedPairs;
        attemptsDisplay.textContent = attempts;
    }

    function unlockNarrative(text) {
        narrativeText.textContent = text;
        narrativeSection.classList.remove('hidden');
        // Scrolla per rendere visibile la narrativa (opzionale)
        narrativeSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function checkWinCondition() {
        if (matchedPairs === cardData.length) { // Se tutte le coppie originali sono state trovate
            // Mostra un messaggio di vittoria o un pulsante per rigiocare
            setTimeout(() => {
                alert('Congratulazioni! Hai ricomposto l'archivio!');
                resetButton.classList.remove('hidden');
                 resetButton.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 500); // Piccolo ritardo per apprezzare l'ultimo match
        }
    }

    // --- INIZIALIZZAZIONE ---
    resetButton.addEventListener('click', createBoard); // Associa il reset al pulsante
    createBoard(); // Crea la board all'avvio

}); // Fine DOMContentLoaded