manzolo/leggenda-del-regolo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Mappa a gradini con le miniature; Campomigliaio dalle foto dell'Arcu; Marco Arcuri nei crediti

Browse Source 
- la mappa: una scheda per posto con la miniatura del suo sfondo e il nome, in quattro fasce come il paese
  a gradini, le strade disegnate fra le schede; sta in una schermata sul desktop
- tools/miniature.py (make miniature): le miniature 128x72 a 64 colori in assets/scenes/mini/
- tre sfondi di Campomigliaio generati da Codex dalle foto di Marco Arcuri (ponte, Circolo SMS, strada),
  pronti a 640x360 ma non ancora collegati
- Marco Arcuri «l'Arcu» nei crediti, fra le fotografie

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ApqNBvNbNCwXqR2RLo8QJh
This commit is contained in:
manzolo
2026-10-24 14:15:02 +02:00
co-authored by Claude Opus 5.5
parent b0586e3061
commit b9d2f1161c
48 changed files with 121 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+20 -11
View File
@@ -146,17 +146,23 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
.load-error { margin: .6em 0 0; padding: .4em .8em; color: #fff; background: #7a1f1f; border-radius: 6px; font-size: max(9px, calc(var(--u) * 1.4)); }
#map { z-index: 3; justify-content: flex-start; padding-top: 2.5%; background: rgba(15, 10, 20, .94); }
#map h2 { font-size: clamp(12.96px, 2.16vw, 23.04px); }
/* Sui telefoni la pianta resta grande quanto serve per leggerla e si scorre col dito. */
#map-scroll { width: 92%; flex: 1; min-height: 0; margin: .3em 0; overflow: auto; -webkit-overflow-scrolling: touch; }
#map-board { position: relative; width: 100%; height: 100%; min-width: 900px; min-height: 380px;
background: repeating-linear-gradient(transparent 0 calc(25% - 1px), rgba(185, 169, 194, .12) calc(25% - 1px) 25%), radial-gradient(circle at 50% 60%, #3a2d42, #231a29); border-radius: 8px; }
#map-roads { position: absolute; inset: 0; width: 100%; height: 100%; }
#map-roads line { stroke: #b9a9c2; stroke-width: 2.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .7; }
#map-board button { position: absolute; transform: translate(-50%, -50%); font: 9px var(--font); padding: .35em .45em;
color: var(--bg); background: var(--ink); border: 2px solid #000; border-radius: 6px; cursor: pointer; white-space: nowrap; }
#map-board button:hover { background: var(--accent); }
#map-board button.here { color: var(--ink); background: #2f5fb3; cursor: default; }
#map-board button.here::after { content: ' · sei qui'; font-weight: normal; }
/* La mappa a gradini: una fascia per livello del paese, schede con miniatura e nome; si scorre se non ci sta. */
#map-scroll { width: 94%; flex: 1; min-height: 0; margin: .3em 0; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 8px;
background: radial-gradient(circle at 50% 60%, #3a2d42, #231a29); }
#map-board { position: relative; display: flex; flex-direction: column; justify-content: space-around; gap: 4px; min-height: 100%; padding: 6px; box-sizing: border-box; }
#map-roads { position: absolute; left: 0; top: 0; pointer-events: none; }
#map-roads line { stroke: #b9a9c2; stroke-width: 2; stroke-dasharray: 4 4; opacity: .55; }
.map-band { position: relative; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; gap: 6px 4px;
padding-bottom: 4px; border-bottom: 1px solid rgba(185, 169, 194, .12); }
.map-band:last-child { border-bottom: 0; }
#map-board button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; padding: 3px; font: 7px var(--font);
color: var(--ink); background: #2a2031; border: 2px solid #4b3a55; border-radius: 6px; cursor: pointer; line-height: 1.2; }
#map-board button img { width: 76px; aspect-ratio: 16 / 9; image-rendering: pixelated; border-radius: 3px; background: #1b1420; }
#map-board button span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-align: center; height: 4.2em; line-height: 1.4; }
#map-board button:hover, #map-board button:focus-visible { border-color: var(--accent); }
#map-board button.here { border-color: #5b8ff0; background: #2f5fb3; cursor: default; }
#map-board button.here::before { content: 'sei qui'; position: absolute; top: 1px; left: 50%; transform: translateX(-50%); padding: 1px 4px;
font-size: 6px; color: var(--bg); background: var(--accent); border-radius: 3px; white-space: nowrap; }
/* I crediti crescono con chi contribuisce: scorre solo l'elenco, dedica e Chiudi restano sempre in vista. */
#credits { justify-content: flex-start; overflow: hidden; padding-top: 4%; background: rgba(15, 10, 20, .96); }
#credits .credits-dedication { margin: .2em 0 .5em !important; font-size: clamp(10px, 1.6vw, 17px); }
@@ -198,6 +204,9 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
.buttons { gap: 6px; margin-top: .2em; }
.buttons button { font-size: 10px; padding: .45em 1em; }
.pause-buttons { min-width: 12em; }
/* Mappa: schede più piccole, ne stanno cinque o sei per riga. */
#map-board button { width: 68px; }
#map-board button img { width: 60px; }
#pause .hint { font-size: 8px; }
#choices { min-height: 0; padding: 6px 8px 6px 2em; }
}