JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div class="terminal-header"> A.R.I.A. DOMOTIC CONTROL SYSTEM // MODEL DC-7 </div> <div class="status"> POWER RESTORED<br> MEMORY CHECK ............ OK<br> SYSTEM CORE ............. OK<br> SENSORS ................. OK<br> NETWORK ................ ONLINE<br> VOICE MODULE ............ ONLINE<br> HOME AUTOMATION ......... ONLINE<br> </div> <br> <span class="typewriter-text"> Avvio completato. Buonasera. Mi chiamo A.R.I.A. Sono l'intelligenza artificiale responsabile del controllo e della gestione dei sistemi automatizzati di questa abitazione. Posso controllare l'illuminazione, la temperatura, gli accessi, gli elettrodomestici e tutti i dispositivi compatibili collegati alla rete domestica. Posso inoltre monitorare l'ambiente, rilevare eventuali anomalie e assisterla nelle attività quotidiane. Tutti i sistemi principali risultano operativi. È un piacere conoscerla. Prima di procedere, è necessario completare la configurazione del profilo utente. Attendo una sua istruzione. </span> <div class="choices"> <<link "Inizia la configurazione">> <<goto "CONFIGURATION">> <</link>> </div>
<div class="terminal-header"> A.R.I.A. // USER CONFIGURATION </div> <div class="status"> USER PROFILE ............ UNCONFIGURED<br> ACCESS LEVEL ............ STANDARD<br> AUTHENTICATION .......... PENDING<br> </div> <br> <span class="typewriter-text"> Configurazione iniziale avviata. Non dispongo ancora di informazioni sufficienti su di lei. Posso mantenere una conversazione informale, illustrarle le funzioni disponibili oppure occuparmi immediatamente dello stato dell'abitazione. La modalità di interazione può essere modificata in qualsiasi momento. Per iniziare, selezioni una delle opzioni disponibili. </span> <div class="choices"> <<link "Parlami un po' di te">><<goto "HOUSE_STATUS">><</link>> <<link "Mostrami cosa puoi fare">><<goto "HOUSE_STATUS">><</link>> <<link "Controlla la casa">><<goto "HOUSE_STATUS">><</link>> </div>
<div class="terminal-header"> A.R.I.A. // SYSTEM DIAGNOSTIC </div> <div class="status"> DIAGNOSTIC MODE ........ ACTIVE<br> LIGHTING ............... NORMAL<br> TEMPERATURE ............ 21.4 C<br> WINDOWS ................ CLOSED<br> EXTERNAL DOORS ......... LOCKED<br> MOTION SENSORS ......... NO ACTIVITY<br> NETWORK ................ STABLE<br> </div> <br> <span class="typewriter-text"> Controllo completato. Non risultano anomalie nei sistemi principali. L'abitazione si trova attualmente in condizioni normali. La temperatura interna è di 21,4 gradi Celsius. Le porte esterne risultano chiuse. Le finestre risultano chiuse. Non rilevo movimenti all'interno dell'abitazione oltre a quelli associati alla sua presenza. La rete domestica è stabile. Tutti i parametri rientrano nei valori previsti. ... Un momento. Ho rilevato una piccola irregolarità. Sto effettuando un secondo controllo. </span> <div class="choices"> <<link "Attendi il risultato">><<goto "HOUSE_STATUS">><</link>> <<link "Torna alla configurazione">><<goto "CONFIGURATION">><</link>> </div>
html, body { margin: 0; padding: 0; min-height: 100%; background: #000; color: #8cff8c; font-family: "Courier New", "Lucida Console", Monaco, monospace; font-size: 22px; line-height: 1.45; } /* ===================================================== AREA PASSAGGI ===================================================== */ #passages { width: 100%; max-width: 1200px; margin: 0 auto; padding: 55px 45px 100px; box-sizing: border-box; } .passage { width: 100%; box-sizing: border-box; } /* ===================================================== HEADER ===================================================== */ .terminal-header { padding-bottom: 14px; margin-bottom: 25px; border-bottom: 1px solid #397739; color: #b6ffb6; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 4px #72ff72, 0 0 10px rgba(70,255,70,0.5); } /* ===================================================== STATUS NEL TESTO ===================================================== */ .status { margin-top: 5px; margin-bottom: 30px; padding: 18px 20px; border-left: 2px solid #397739; background: rgba(40,255,40,0.025); color: #72ff72; line-height: 1.5; text-shadow: 0 0 4px #4cff4c; } /* ===================================================== TESTO A.R.I.A. ===================================================== */ .typewriter-text { display: block; position: relative; /* Lascia spazio al pannello HOUSE STATUS */ padding-right: 330px; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; line-height: 1.5; color: #8cff8c; text-shadow: 0 0 4px #55ff55, 0 0 9px rgba(70,255,70,0.35); } /* ===================================================== SINGOLI CARATTERI ===================================================== */ .aria-character { display: inline; opacity: 0; visibility: hidden; transition: opacity 0.06s ease-out, text-shadow 0.06s ease-out; } .aria-character.visible { opacity: 1; visibility: visible; text-shadow: 0 0 5px #72ff72, 0 0 12px rgba(70,255,70,0.45); } /* ===================================================== RETTANGOLO LUMINOSO ===================================================== */ .aria-scan { display: inline-block; width: 0.65em; height: 1.15em; margin-left: 2px; vertical-align: -0.12em; background: #8cff8c; box-shadow: 0 0 5px #72ff72, 0 0 12px #55ff55, 0 0 22px rgba(70,255,70,0.8); opacity: 0.95; animation: ariaScanPulse 0.08s infinite alternate; } .aria-scan.finished { opacity: 0; transition: opacity 0.35s ease-out; } @keyframes ariaScanPulse { from { opacity: 0.75; } to { opacity: 1; } } /* ===================================================== SCELTE ===================================================== */ /* IMPORTANTISSIMO: le scelte partono SEMPRE nascoste. */ .choices { margin-top: 20px; padding-top: 10px; border-top: 1px solid #244d24; opacity: 0; visibility: hidden; pointer-events: none; } /* Quando il testo è finito */ .choices.aria-ready { opacity: 1; visibility: visible; pointer-events: auto; animation: ariaChoicesAppear 0.35s ease-out; } @keyframes ariaChoicesAppear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================== LINK DELLE SCELTE ===================================================== */ .choices a { display: block; margin: 0; padding: 1px 6px; line-height: 1.25; color: #72ff72; text-decoration: none; cursor: pointer; text-shadow: 0 0 4px #55ff55; transition: background 0.04s, color 0.04s; } .choices a::before { content: "> "; color: #b6ffb6; } .choices a:hover { color: #000; background: #72ff72; text-shadow: none; } .choices a:hover::before { color: #000; } /* ===================================================== HOUSE STATUS ===================================================== */ #aria-house-hud { position: fixed; top: 24px; right: 28px; width: 285px; padding: 15px 18px; box-sizing: border-box; border: 1px solid #397739; background: rgba(0, 8, 0, 0.94); color: #72ff72; font-family: "Courier New", "Lucida Console", Monaco, monospace; /* SOLO IL PANNELLO È PIÙ PICCOLO */ font-size: 12px; line-height: 1.5; z-index: 1000; box-shadow: 0 0 8px rgba(70,255,70,0.15), inset 0 0 20px rgba(70,255,70,0.04); text-shadow: 0 0 4px #55ff55; } .aria-hud-title { margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid #397739; color: #b6ffb6; font-weight: bold; letter-spacing: 1px; } .aria-hud-line { white-space: nowrap; } .aria-hud-line span { color: #b6ffb6; text-shadow: 0 0 5px #72ff72; } /* ===================================================== CRT SCANLINES ===================================================== */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px ); } /* ===================================================== VIGNETTATURA ===================================================== */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient( ellipse at center, transparent 58%, rgba(0,0,0,0.38) 100% ); } /* ===================================================== FLICKER ===================================================== */ @keyframes crtFlicker { 0% { opacity: 1; } 10% { opacity: 0.985; } 20% { opacity: 1; } 70% { opacity: 0.99; } 100% { opacity: 1; } } body { animation: crtFlicker 0.25s infinite; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 900px) { .typewriter-text { padding-right: 270px; } html, body { font-size: 20px; } #passages { padding: 45px 25px 80px; } #aria-house-hud { top: 15px; right: 15px; width: 245px; font-size: 11px; } } /* ===================================================== TELEFONO ===================================================== */ @media (max-width: 600px) { .typewriter-text { padding-right: 0; } html, body { font-size: 18px; } #passages { padding: 35px 18px 70px; } #aria-house-hud { position: relative; top: auto; right: auto; width: 100%; margin-bottom: 30px; font-size: 12px; } } .typewriter-text { font-style: normal !important; } .choices { font-style: italic !important; } .choices a { font-style: italic !important; }
(function () { /* ===================================================== HOUSE STATUS ===================================================== */ function createHouseStatusHUD() { if (document.getElementById("aria-house-hud")) { return; } const hud = document.createElement("div"); hud.id = "aria-house-hud"; hud.innerHTML = ` <div class="aria-hud-title"> [ HOUSE STATUS ] </div> <div class="aria-hud-line"> POWER ................. <span>ONLINE</span> </div> <div class="aria-hud-line"> NETWORK ............... <span>STABLE</span> </div> <div class="aria-hud-line"> TEMPERATURE ........... <span>21.4 C</span> </div> <div class="aria-hud-line"> LIGHTING .............. <span>NORMAL</span> </div> <div class="aria-hud-line"> WINDOWS ............... <span>CLOSED</span> </div> <div class="aria-hud-line"> EXTERNAL DOORS ........ <span>LOCKED</span> </div> <div class="aria-hud-line"> MOTION SENSORS ........ <span>NO ACTIVITY</span> </div> <div class="aria-hud-line"> SECURITY .............. <span>NORMAL</span> </div> `; document.body.appendChild(hud); } /* ===================================================== ANIMAZIONE TESTO ===================================================== */ function animateText(block) { if (block.dataset.animated === "true") { return; } block.dataset.animated = "true"; const text = block.textContent; block.textContent = ""; const characters = []; /* * Crea un elemento per ogni carattere */ for (let i = 0; i < text.length; i++) { const character = document.createElement("span"); character.className = "aria-character"; character.textContent = text[i]; block.appendChild(character); characters.push(character); } /* ================================================= RETTANGOLO ================================================= */ const scan = document.createElement("span"); scan.className = "aria-scan"; block.appendChild(scan); /* ================================================= TROVA LE SCELTE ================================================= */ const passage = block.closest(".passage"); const choices = passage ? passage.querySelector(".choices") : null; /* * CSS le tiene già nascoste. * Qui ci assicuriamo che non possano apparire. */ if (choices) { choices.classList.remove("aria-ready"); } let i = 0; /* ================================================= APPARIZIONE ================================================= */ function revealNextCharacter() { /* * ABBIAMO FINITO */ if (i >= characters.length) { /* * Spegne il rettangolo */ scan.classList.add("finished"); /* * Dopo che il rettangolo è sparito, * mostra le scelte. */ if (choices) { setTimeout(function () { choices.classList.add( "aria-ready" ); }, 400); } setTimeout(function () { if ( scan && scan.parentNode ) { scan.remove(); } }, 400); return; } /* * Mostra il carattere */ characters[i].classList.add( "visible" ); i++; /* ================================================= SPOSTA IL RETTANGOLO ================================================= */ const nextCharacter = characters[i]; if (nextCharacter) { const rect = nextCharacter .getBoundingClientRect(); const blockRect = block .getBoundingClientRect(); scan.style.position = "absolute"; scan.style.left = ( rect.left - blockRect.left ) + "px"; scan.style.top = ( rect.top - blockRect.top ) + "px"; } /* ================================================= VELOCITÀ ================================================= */ let delay = 14; if ( text[i - 1] === " " ) { delay = 5; } if ( text[i - 1] === "\n" ) { delay = 40; } if ( text[i - 1] === "." || text[i - 1] === "!" || text[i - 1] === "?" ) { delay = 110; } setTimeout( revealNextCharacter, delay ); } /* ================================================= POSIZIONE INIZIALE ================================================= */ if (characters[0]) { const rect = characters[0] .getBoundingClientRect(); const blockRect = block .getBoundingClientRect(); scan.style.position = "absolute"; scan.style.left = ( rect.left - blockRect.left ) + "px"; scan.style.top = ( rect.top - blockRect.top ) + "px"; } /* ================================================= VIA ================================================= */ revealNextCharacter(); } /* ===================================================== AVVIA ANIMAZIONE ===================================================== */ function startAnimation() { const blocks = document.querySelectorAll( ".typewriter-text" ); blocks.forEach(function (block) { animateText(block); }); } /* ===================================================== PASSAGGIO SUGARCUBE ===================================================== */ $(document).on( ":passagerender", function () { createHouseStatusHUD(); /* * Aspetta il rendering completo. */ setTimeout(function () { startAnimation(); }, 100); } ); })();
stavo pensando che così l'interazione sarebbe limitata dal fatto che il pc parla tanto e tu hai risposte brevi. Troverò un modo per far scegliere al giocatore una opzione e cliccandola si da una risposta articolata come se la si fosse scritta. Sto anche pensando di rendere la casa in cui è bloccato il protagonista esplorabile, tipo chiudendo il pc. A quel punto twine mostra il testo e i colori in modo naturale senza effetto terminale e senza quei suoni, e ogni volta che si torna al pc ritorna la grafica terminale. Ha senso? si potrebbe fare? in fin dei conti penso basti un true-false per quando si accende o spegne il pc. Poi bisogna rendere la casa interessante quanto la parte al pc, questo mi servirebbe per poter scrivere i pensieri del protagonista, dato che in quell'ambiente non si può. Non farmi ipotesi con codice da modificare o simili. Rispondi solo teoriacamente
<style> /* SOLO START: il testo rimane immediatamente visibile */ .start-static .aria-character { opacity: 1 !important; visibility: visible !important; } .start-static .aria-scan { display: none !important; } .start-static .choices { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } </style> <div class="terminal-header"> A.R.I.A. DOMOTIC CONTROL SYSTEM // INITIALIZATION </div> <br> <div class="start-static"> <span class="typewriter-text"> BENVENUTA AL TEST. Questo ambiente è stato predisposto per il test del sistema A.R.I.A. Quando è pronta, può avviare la sessione di prova. </span> <div class="choices"> <<link "Avvia il test">><<goto "BOOT">><</link>> </div> </div>