Restructure into src/templates/assets; add chat, live counts, onboarding

[adelitoo]

Cosa è stato fatto in questa modifica

Prima tutto il codice del progetto stava dentro un unico file enorme chiamato main.py. Immagina di avere un cassetto in cui butti dentro vestiti, posate, chiavi e documenti tutti insieme: trovare le cose diventa impossibile.

Adesso il progetto è organizzato in cartelle separate, ognuna con il suo scopo:

• src/ — il "cervello" del progetto, scritto in linguaggio Python. Qui ci sono i pezzi che costruiscono la mappa: le impostazioni, la lettura dei dati, le icone dei pallini, i popup che si aprono al click, e il costruttore principale che mette tutto insieme.
• templates/ — i "modelli" delle parti grafiche della pagina (la chat, il pulsante "?", la legenda, il messaggio di benvenuto). Sono come dei moduli prestampati che vengono riempiti con i dati veri.
• assets/ — la roba che fa funzionare la pagina nel browser:
  • css/ per lo stile (colori, dimensioni, posizioni)
  • js/ per i comportamenti interattivi (chat, ricerca, contatori live, finestra di benvenuto)
• data/ — i dati veri e propri, salvati in file .json (un formato di testo strutturato):
  • boulders.json → la lista dei massi con le vie che noi abbiamo scalato
  • madboulder.json → 89 massi presi dal sito MadBoulder (con link a video YouTube)
  • sector_mapping.json → la mappa che dice in quale settore si trova ciascun masso

Le nuove funzionalità aggiunte

1. 89 massi da MadBoulder mostrati come pallini grigi sulla mappa, con link ai video di YouTube per vedere come si scala ognuno. Se un masso era già nella nostra lista, non lo duplichiamo.
2. Sfondo della mappa cambiato in OpenTopoMap, una mappa con le curve di livealtitudine — utili per capire come arrivare al masso a piedi).
3. Pallini con emoji 🪨 al posto della vecchia immagine di una pietra.
4. Contatore di scalatori live (finto, per ora): ogni masso mostra quante pern questo momento, con un totale in alto a destra.
5. Finestra di benvenuto che appare la prima volta che apri il sito, con un pulsante "?" per riaprirla quando vuoi.
6. Chat finta con 7 scalatori simulati che chiacchierano tra loro.

---

🪨 Come si aggiunge un masso nuovo

Tutto sta nel file data/boulders.json. È un file di testo che segue una struttura ben precisa, come una lista organizzata. Ti mostro un esempio reale:

{ "sector_name": "Ponte del Baffo",
"boulders": [ {
"name": "Blocco 1 - Bad Ass", "coords": [46.1937559, 9.6252532],
"lines": [ {
"name": "Studio Line 7B", "link": "https://www.instagram.com/p/DJHwetSt06b/"
} ]
} ]
}
Cosa significa, riga per riga:

• sector_name → il nome del settore (la zona della valle), per esempio "Ponte del Baffo", "Zocca", "Remenno". - boulders → la lista dei massi che si trovano in quel settore.
• Per ogni masso: - name → come lo chiami (es. "Blocco 1 - Bad Ass").
  • coords → le coordinate GPS dove sta il masso (latitudine e longitudine). Sono due numeri che dicono al sito dove mettere il pallino sulla mappa. Si trovano facilmente con Google Maps: cliccando con il tasto destro su un punto, ti dà le coordinate da copia
  • lines → le vie che hai salito su quel masso. Ogni via ha:
    • name → il nome della via e il grado (es. "Studio Line 7B")
    • link → un link al video (Instagram, YouTube, ecc.)

Quindi per aggiungere un masso nuovo

1. Apri data/boulders.json.
2. Cerchi il settore giusto (o ne crei uno nuovo se il masso è in una zona an
3. Aggiungi un nuovo "boulder" con nome, coordinate e vie.
4. Salvi il file.
5. Si fa girare il "build" del progetto (un comando che ricostruisce la pagina index.html partendo dai dati). A quel punto il nuovo pallino apparirà sulla mappa.

Niente database, niente server: è tutto un file di testo che chiunque sa modificare con un editor.

---

💬 Come funziona la chat

Importante: la chat è FINTA. Non c'è nessun server da nessuna parte, e i messssuno. È una simulazione che fa sembrare il sito vivo.

Il codice sta in assets/js/chat.js. Ti spiego come funziona pezzo per pezzo.

1. I "finti scalatori" (bot)

Dentro il file c'è una lista di 7 personaggi inventati con nome, zona preferi

Marco (Remenno), Giulia (Zocca), Luca (Ponte del Baffo),
Sara (La Collinetta), Teo (Scivolo), Ale (La Mota),
Federica (Tarzan)

2. Le frasi pronte

C'è una lista di circa 18 frasi tipiche da scalatore — cose come "Cerco partnuno?", "Roccia asciutta qui, condizioni top 🔥", "Ho un crashpad in più alparcheggio se serve 🧗".

3. Cosa succede quando apri il sito

• La chat parte con 5 messaggi già scritti (i "seed") con orari finti degli ultimi minuti, così sembra che la conversazione fosse già in corso.
• In alto vedi scritto "X climbers online" (es. "12 climbers online"). Quel nnche lui finto: ogni 9 secondi sale o scende di 1, così sembra che la genteentri ed esca.

4. I messaggi automatici

Ogni 12-30 secondi (un tempo a caso ogni volta), succede questo:

• Il sito sceglie a caso uno dei 7 bot.
• Sceglie a caso una delle frasi pronte.
• A volte (15% di probabilità) cambia anche il settore in cui dice di trovars
• Pubblica il messaggio in chat.

Quindi se lasci la chat aperta, vedi nuovi messaggi che arrivano come se fosse una vera community.

5. Quando TU scrivi un messaggio

• La prima volta che provi a inviare un messaggio, il sito ti chiede "Come ti chiami?". Il tuo nome viene salvato dentro il tuo browser (in una memoria chiamata localStorage), quindi la
  volta dopo non te lo chiederà più.
• Puoi scegliere dal menù a tendina un settore (es. "📍 Zocca") per dire dove ti trovi, oppure lasciarlo vuoto.
• Scrivi il messaggio e premi "Invia". Appare in chat con il tuo nome a destril colore del progetto).
• Con il 40% di probabilità, dopo qualche secondo (tra 2,5 e 7,5 secondi), uno dei bot ti risponde con una frase casuale tipo "Ci sono! Dove esattamente?" o "Arrivo tra poco 👍".

6. Cose importanti da sapere

• I messaggi vivono solo finché tieni la pagina aperta: appena ricarichi il sito, spariscono tutti (tranne i 5 iniziali che vengono ricreati). Non c'è nessuna memoria permanente.
• Nessun altro vede i tuoi messaggi: tutto succede dentro il tuo browser, in o di ruolo per dare l'impressione di una community attiva.
• Il pallino della chat in basso a destra ha un contatore di messaggi non letti: se la chat è chiusa e arriva un messaggio nuovo, vedi un numerino rosso. Quando apri la chat il
  contatore si azzera.

---

In sintesi

Il progetto è una mappa di arrampicata che funziona senza nessun server: tutto è un insieme di file statici (HTML, CSS, JavaScript, JSON) che si possono pubblicare gratis su GitHub Pages. Per aggiungere un masso basta modificare un file di testo. La chat è ussione di una vera community attiva, ma per ora è tutto finto.