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

Musica, vecchietti con sprite, nuove scene del paese e generatore degli sfondi

Browse Source 
Lavoro della sessione precedente: colonna sonora (titolo, paese, ricordi) con muto e volume,
vecchietta e vecchietto sulla panchina, scene di Pieve, oratorio, Via de' Medici, Villa Adami,
salita, campeggio, Bosco ai Frati e viale dei cipressi, panorama dell'introduzione,
tools/genera.py per gli sfondi dalle foto.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UdeKd62opy9PKgpQXtVctF
This commit is contained in:
manzolo
2026-10-23 12:59:57 +02:00
co-authored by Claude Opus 5.5
parent 5eeb634ceb
commit 33e2598718
45 changed files with 1556 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+31 -4
View File
@@ -11,7 +11,7 @@
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
#app { width: min(100vw, 1280px, calc((100dvh - 250px) * 16 / 9)); min-width: min(100vw, 320px); display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#app { width: min(100vw, 1280px, calc((100dvh - 250px) * 16 / 9)); min-width: min(100vw, 320px); margin-block: auto; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; user-select: none; touch-action: manipulation; }
#scene { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; }
@@ -21,15 +21,28 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000; }
#speech:empty { display: none; }
/* Musica: nota per il muto e cursore del volume, in alto a destra sopra la scena (anche sul titolo). */
#sound { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px;
background: rgba(27, 20, 32, .62); border-radius: 18px; }
#mute { width: 30px; height: 30px; padding: 0; font: bold 18px var(--font); color: var(--accent); background: none; border: 0; cursor: pointer; }
#mute[aria-pressed="true"] { color: var(--dim); text-decoration: line-through; }
#volume { width: clamp(60px, 10vw, 110px); accent-color: var(--accent); cursor: pointer; }
#sentence { min-height: 1.8em; padding: .25em .6em; text-align: center; color: var(--blue); font-size: clamp(15px, 2vw, 22px); font-weight: bold; background: var(--panel); }
#panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; padding: 8px; background: var(--panel); }
#verbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
/* Sette verbi su due righe piene: quattro sopra (3/12 ciascuno) e tre sotto (4/12). */
#verbs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-content: start; }
#verbs button { grid-column: span 4; }
#verbs button:nth-child(-n+4) { grid-column: span 3; }
#verbs button, #inventory button { font: inherit; color: var(--dim); background: #3a2d42; border: 2px solid #4b3a55; border-radius: 4px;
padding: .35em .2em; font-size: clamp(13px, 1.7vw, 19px); font-weight: bold; cursor: pointer; }
#verbs button:hover, #inventory button:hover { color: var(--ink); }
#verbs button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); }
#inventory { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(2.4em, auto); gap: 4px; align-content: start; }
#inventory { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(2.4em, auto); gap: 4px; align-content: start;
min-height: 5.4em; padding: 4px; background: #231a29; border: 2px solid #4b3a55; border-radius: 4px; }
#inventory:empty::before { content: 'Inventario'; grid-column: 1 / -1; align-self: center; text-align: center; color: var(--dim); opacity: .45;
font-size: clamp(13px, 1.7vw, 19px); font-weight: bold; letter-spacing: .08em; }
#inventory button { display: flex; align-items: center; gap: .35em; justify-content: center; color: var(--ink); }
#inventory button[aria-pressed="true"] { border-color: var(--accent); }
#inventory i { width: .8em; height: .8em; border-radius: 50% 50% 50% 0; flex: none; }
@@ -41,6 +54,20 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em;
padding: 16px; text-align: center; background: radial-gradient(circle at 50% 35%, rgba(60, 40, 70, .82), rgba(15, 10, 20, .96)); }
.overlay[hidden] { display: none; }
/* Titolo e introduzione: le illustrazioni a pixel netti, con una velatura per leggere il testo. */
#title { justify-content: flex-start; padding-top: 6%; image-rendering: pixelated;
background: linear-gradient(rgba(20, 12, 30, .55), rgba(20, 12, 30, .05) 45%, rgba(20, 12, 30, .7)), url(assets/scenes/titolo.png) center / cover; }
#title .buttons { margin-top: auto; }
#title .dedication { margin-bottom: 2%; text-shadow: 2px 2px 0 #000; }
#title .subtitle { color: var(--ink); text-shadow: 2px 2px 0 #000; }
#intro { justify-content: flex-start; padding-top: 7%; cursor: pointer; image-rendering: pixelated;
background: linear-gradient(rgba(20, 12, 30, .6), rgba(20, 12, 30, .1) 55%), url(assets/scenes/panorama-intro.png) center / cover, #2a2030; }
#intro-text { min-height: 4.2em; max-width: 30em; font-size: clamp(16px, 2.6vw, 30px); font-weight: bold; line-height: 1.3; color: var(--ink);
text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000; animation: appear .8s ease-out; }
#intro .hint { margin-top: auto; color: var(--dim); font-size: clamp(12px, 1.5vw, 16px); text-shadow: 1px 1px 0 #000; }
#skip-intro { position: absolute; right: 10px; bottom: 10px; font: bold 14px var(--font); padding: .3em .9em; border-radius: 6px; border: 0;
color: var(--bg); background: var(--dim); cursor: pointer; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }
.overlay h1 { margin: 0; font-size: clamp(30px, 7vw, 76px); line-height: 1; letter-spacing: .02em; color: var(--ink); text-shadow: 3px 3px 0 #000; }
.overlay h1 span { color: #7fe08a; }
.overlay h2 { margin: 0; font-size: clamp(24px, 5vw, 52px); color: var(--accent); }
@@ -62,7 +89,7 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
#side { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--panel); }
#sentence { font-size: 14px; }
#panel { grid-template-columns: 1fr; gap: 6px; padding: 6px; }
#verbs, #inventory { grid-template-columns: repeat(2, 1fr); }
#inventory { grid-template-columns: repeat(2, 1fr); min-height: 0; }
#verbs button, #inventory button, #choices li { font-size: 14px; }
#choices { min-height: 0; padding: 6px 8px 6px 2em; }
}