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

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

References

checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<table>Tag primario per la creazione di tabelle
minImposta il valore numerico o temporale minimo per un elemento input
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<strong>Definisce una parte del testo importante con formattazione in grassetto.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.

Users

Log in to search for users

Explore

Find inspiration

Tabella Marcatori Serie A 20

STATI HTML TEST TABELLA

Heads Or Tails Random Tally

CodeALongButton

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