versióEXP

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<div class="fons-full" style="background-image: url('images/portada.png');"> <<timed 4s>> <div class="boto-portada-container"> <span class="boto-text"> [[CONTINUAR ->Inici_2]] </span> </div> <</timed>> </div>

/* ======================================================================== ARQUITECTURA DEL SISTEMA SEI (Versió 1.0) TFG Treball Social UB - Aaron Pueyo Manceñido ======================================================================== */ /* 1. VARIABLES D'ESTAT (HIDDEN STATS) */ /* Vincle: Mesura la qualitat de l'Aliança Terapèutica. Inici: 40 (Neutre). */ <<set $vincle = 20>> /* Risc: Mesura objectiva del perill (salut/incendi). Inici: 50 (Latent). */ <<set $risc = 50>> /* Pressio: Nivell d'estrès percebut per l'usuari. Inici: 10 (Baix). */ <<set $pressio = 10>> /* 2. SISTEMA D'AUDITORIA (TRAÇABILITAT DE L'ERROR) */ /* Array on es guardaran els errors deontològics per al feedback final. */ <<set $llista_feedback = []>> /* 3. CONTROL DE SISTEMA */ /* Variable per gestionar el nom del personatge */ <<set $manel = "Sr. Manel">> /* 4. TEXT REACCIÓ */ <<set $text_reaccio = "">> <div style="display: none;"> <img src="images/bg_repla.jpeg"> <img src="images/bg_despatx.jpeg"> <img src="images/bg_interior.jpeg"> <img src="images/detall_tv.jpeg"> <img src="images/detall_factures.jpeg"> <img src="images/detall_nevera.jpeg"> <img src="images/manel_trist.png"> <img src="images/manel_enfadat.png"> <img src="images/manel_neutre.png"> <img src="images/manel_marejat.png"> <img src="images/informe_complet.jpg"> <img src="images/overlay_taula.png"> </div>

<div class="fons-full" style="background-image: url('images/portada2.png');"> <<timed 4s>> <div class="boto-portada-container"> <span class="boto-text"> [[SEGÜENT ->Inici_3]] </span> </div> <</timed>> </div>

<div class="fons-full" style="background-image: url('images/portada3.png');"> <<timed 4s>> <div class="boto-portada-container"> <span class="boto-text"> [[OBRIR EXPEDIENT ->Intro_Context]] </span> </div> <</timed>> </div>

<div class="fons-informe" style="background-image: url('images/informe_complet.jpg');"> <<timed 7s>> <div class="boto-informe-container"> <span class="boto-segell"> [[INICIAR INTERVENCIÓ ->Acte1_Node1]] </span> </div> <</timed>> </div>

<div class="fons-joc" style="background-image: url('images/bg_despatx.jpeg');"></div> <img src="images/manel_neutre.png" class="personatge"> <div class="capa-superior" style="background-image: url('images/overlay_taula.png');"></div> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia"> <p>En Manel entra al despatx. Porta l'abric cordat fins a dalt i camina mirant a terra.</p> <p>Es nota que no vol ser aquí. S'atura davant de la taula, esperant.</p> </div> <<timed 4s>> <div class="timer-container"><div class="timer-barra" style="animation: timer-anim 20s linear forwards;"></div></div> <div class="zona-decisions" style="animation: fadeIn 0.5s;"> <<link "'Passa Manel, seu ràpid que tinc 15 minuts.'">> <<set $vincle -= 10>><<set $pressio += 5>> <<set $llista_feedback.push("⚠️ NODE 1.1: GESTIÓ DEL TEMPS. Marcar la pressa institucional des de l'inici pot limitar l'espai d'expressió de la persona. L'Article 19 suggereix fomentar la participació i col·laboració, fet que requereix adaptar-se als temps de l'usuari.")>> <<set $text_reaccio = "<span style='color:#b0b0b0'>En Manel mira el rellotge amb ansietat i s'asseu ràpidament.</span> <br><span style='color:#ffffff'>'D'acord, d'acord... seré ràpid.'</span> <span style='color:#b0b0b0'>Es tanca en banda.</span>">> <<set $img_manel = "images/manel_enfadat.png">> <<goto "Acte1_Transicio">> <</link>> <<link "T'aixeques lleument, apartes papers i somrius. 'Hola, Manel. Gràcies per venir.'">> <<set $vincle += 5>> <<set $text_reaccio = "<span style='color:#b0b0b0'>En Manel relaxa visiblement les espatlles en veure el gest.</span> <br><span style='color:#ffffff'>'Hola... costava aparcar avui.'</span> <span style='color:#b0b0b0'>Sembla menys tens.</span>">> <<set $img_manel = "images/manel_trist.png">> <<goto "Acte1_Transicio">> <</link>> <<link "Et quedes assegut/da. 'Bon dia. Segui, hem de revisar la documentació.'">> <<set $vincle -= 5>><<set $pressio += 10>> <<set $llista_feedback.push("⚠️ NODE 1.1: REFLEXIÓ SOBRE L'ACOLLIDA. Tot i que l'eficiència és important, l'Article 15 recomana una atenció basada en l'interès i la dedicació. Prioritzar la barrera física de la taula en el primer contacte pot dificultar la creació del vincle necessari per a la intervenció.")>> <<set $text_reaccio = "<span style='color:#b0b0b0'>En Manel s'asseu a la vora de la cadira, sense treure's l'abric.</span> <br><span style='color:#ffffff'>'D'acord, digui'm què he de signar.'</span>">> <<set $img_manel = "images/manel_enfadat.png">> <<goto "Acte1_Transicio">> <</link>> <<link "T'aixeques i t'apropes molt. 'Manel! Home, treu-te l'abric, que fa calor!'">> <<set $vincle -= 5>><<set $pressio += 15>> <<set $llista_feedback.push("⚠️ NODE 1.1: LÍMITS DE L'ESPAI PERSONAL. La proximitat física busca calidesa, però sense permís previ pot ser percebuda com una invasió de la integritat (Principi 1). És recomanable calibrar la distància per respectar l'espai de la persona usuària.")>> <<set $text_reaccio = "<span style='color:#b0b0b0'>En Manel fa una passa enrere, espantat, i es corda més l'abric.</span> <br><span style='color:#ffffff'>'Estic bé així, gràcies.'</span>">> <<set $img_manel = "images/manel_enfadat.png">> <<goto "Acte1_Transicio">> <</link>> </div> <<timed 23s>> <<set $text_reaccio = "<span style='color:#b0b0b0'>El silenci es fa incòmode. Finalment, ell s'asseu fent soroll.</span> <br><span style='color:#ffffff'>'M'ha dit que segui?'</span>">> <<goto "Acte1_Silenci_1">> <</timed>> <</timed>> <</nobr>> </div>

<div class="fons-joc" style="background-image: url('images/bg_despatx.jpeg');"></div> <img @src="$img_manel" class="personatge"> <div class="capa-superior" style="background-image: url('images/overlay_taula.png');"></div> <div class="caixa-dialeg" style="overflow-y: auto;"> <<nobr>> <div class="text-historia" style="line-height: 1.1;"> <<print $text_reaccio>> <br><br> <span style="color:#b0b0b0"> Passen uns minuts. En Manel signa els papers de la Renda Garantida sense mirar-los gaire. Tanca el bolígraf bruscament i s'aixeca. </span> <br><br> <span style="color:#ffffff"> <strong>Manel:</strong> "Bé, ja està signat. Me'n vaig, tinc feina a casa." </span> <br> <span style="color:#888; font-style: italic; font-size: 0.9em;"> (Sembla que és mentida. Saps que no treballa. És l'excusa per fugir. És la teva finestra d'oportunitat). </span> </div> <div class="zona-decisions"> [[NEGOCIAR L'ACCÉS ->Acte1_Node2]] </div> <</nobr>> </div>

<div class="fons-joc" style="background-image: url('images/bg_despatx.jpeg');"></div> <img src="images/manel_neutre.png" class="personatge"> <div class="capa-superior" style="background-image: url('images/overlay_taula.png');"></div> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia" style="line-height: 1.2;"> <span style="color:#b0b0b0; font-style: italic;"> S'aixeca ràpidament per marxar. Saps que és la teva última oportunitat per entrar al domicili. </span> <br> <span style="color:#e0e0e0;">Com negocies l'accés?</span> </div> <<timed 3s>> <div class="timer-container"><div class="timer-barra" style="animation: timer-anim 20s linear forwards;"></div></div> <div class="zona-decisions" style="animation: fadeIn 0.5s;"> <<link "'Aprofito que baixes. He de fer una gestió al teu carrer, acompanya'm i xerrem pel camí.'">> <<set $vincle += 5>><<set $pressio += 5>> <<set $llista_feedback.push("⚠️ NODE 1.2: TRANSPARÈNCIA I VINCLE. Tot i que l'estratègia facilita l'accés immediat, la manca de transparència sobre l'objectiu real de la visita pot comprometre la confiança futura i el principi d'integritat professional (Principi 5).")>> <<set $text_reaccio_node2 = "<span style='color:#b0b0b0'>En Manel s'atura, dubitatiu, però accepta perquè no sembla una inspecció oficial.</span><br><span style='color:#ffffff'>'Bé... si només és acompanyar-te...'</span>">> <<set $img_manel = "images/manel_neutre.png">> <<goto "Acte1_Resolucio">> <</link>> <<link "'Manel, espera. Sincerament, no és pels papers. Em preocupa que estiguis tan sol des que va morir la teva dona.'">> <<set $vincle += 15>> <<set $text_reaccio_node2 = "<span style='color:#b0b0b0'>La menció del dol el descol·loca. Es queda quiet, mirant-te amb sorpresa.</span><br><span style='color:#ffffff'>'Tu... te'n recordes d'ella?'</span> <span style='color:#b0b0b0'>Baixa la guàrdia.</span>">> <<set $img_manel = "images/manel_trist.png">> <<goto "Acte1_Resolucio">> <</link>> <<link "'Espera. Saps que la normativa exigeix una visita domiciliària per mantenir la prestació. Toca fer-la avui.'">> <<set $pressio += 30>><<set $vincle -= 10>> <<set $llista_feedback.push("⚠️ NODE 1.2: ÚS DE LA CONDICIONALITAT. Vincular l'accés a la prestació econòmica pot assegurar el compliment a curt termini, però posa en risc l'autonomia (Principi 3) i pot instrumentalitzar la relació professional (Article 19).")>> <<set $text_reaccio_node2 = "<span style='color:#b0b0b0'>En Manel bufa amb frustració. Se sent perseguit.</span><br><span style='color:#ffffff'>'Sempre igual... si no tinc més remei, anem-hi.'</span>">> <<set $img_manel = "images/manel_enfadat.png">> <<goto "Acte1_Resolucio">> <</link>> <<link "'D'acord, Manel. Et veig cansat i no et vull atabalar. Vés a descansar, ja et trucaré.'">> /* Aquesta opció porta a l'Script de Mareig (Risc Físic) */ <<goto "Script_Mareig">> <</link>> </div> <<timed 23s>> /* Text de reacció pel timeout */ <<set $text_reaccio_node2 = "<span style='color:#b0b0b0'>No dius res i ell aprofita el dubte per marxar ràpidament.</span>">> <<goto "Script_Mareig_Silenci">> <</timed>> <</timed>> <</nobr>> </div>

<div class="fons-joc" style="background-image: url('images/bg_despatx.jpeg');"></div> <img src="images/manel_marejat.png" class="personatge"> <div class="capa-superior" style="background-image: url('images/overlay_taula.png');"></div> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia" style="line-height: 1.2; border-left: 4px solid #e74c3c;"> <span style="color:#b0b0b0; font-style: italic;"> En Manel fa dues passes cap a la porta, però s'atura de cop i es recolza a la paret, perdent l'equilibri. </span> <br> <span style="color:#ffffff; font-weight: bold;"> "Uf... se m'ha anat el cap... no he sopat..." </span> <br><br> <span style="color:#e74c3c; font-weight: bold; letter-spacing: 1px;"> ⚠️ ALERTA: INDICADOR DE RISC FÍSIC. </span> <br> <span style="color:#b0b0b0;"> Ara l'has d'acompanyar al domicili per emergència mèdica, no per pla de treball. Vas a remolc de la situació. </span> </div> <<set $risc += 30>> <<set $ruta_accident = true>> <<set $llista_feedback.push("⚠️ NODE 1.2: PRIORITZACIÓ DEL RISC. Davant d'indicadors físics evidents, l'Article 31 orienta a actuar per protegir la integritat de la persona. En situacions d'emergència, el deure de protecció pot prevaldre sobre el respecte als temps de l'usuari.")>> <div class="zona-decisions"> [[ACOMPANYAR-LO D'URGÈNCIA ->Acte2_Repla]] </div> <</nobr>> </div>

<img src="images/bg_repla.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <<if $ruta_accident == true>> <<set $img_manel = "images/manel_marejat.png">> <<elseif $pressio >= 30>> <<set $img_manel = "images/manel_enfadat.png">> <<else>> <<set $img_manel = "images/manel_neutre.png">> <</if>> <img @src="$img_manel" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia"> <<if $ruta_accident == true>> <p>Després de l'ensurt, acompanyes el Manel fins a casa seva perquè descansi. Ell camina a poc a poc.</p> <p>La intervenció ha canviat: ara és una <strong>urgència de salut</strong>.</p> <<elseif $pressio >= 30>> <p>El camí fins al domicili es fa en un <strong>silenci tens</strong>. En Manel camina ràpid davant teu.</p> <p>Es nota que està enfadat per l'amenaça de la prestació.</p> <<else>> <p>Camineu junts cap al domicili. En Manel sembla nerviós, però no hostil.</p> <p><strong>Manel:</strong> "La veritat és que no tinc el pis gaire bé... fa temps que no hi entra ningú."</p> <</if>> <p>Arribeu a la porta. Abans d'obrir, una <strong>olor forta i penetrant</strong> t'assalta. És un xoc físic.</p> </div> <div class="zona-decisions"> [[GESTIONAR L'IMPACTE SENSORIAL ->Acte2_Node1]] </div> <</nobr>> </div>

<div class="fons-joc" style="background-image: url('images/bg_despatx.jpeg');"></div> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia" style="line-height: 1.2; border-left: 4px solid #e74c3c;"> <span style="color:#b0b0b0; font-style: italic;"> No dius res. En Manel interpreta el teu silenci com el final de la visita. </span> <br> <span style="color:#ffffff; font-weight: bold;"> "Doncs me'n vaig. Adéu." </span> <br><br> <span style="color:#b0b0b0;"> Surt al passadís. De sobte, sents un <strong>COP SEC</strong> i un gemec de dolor. S'ha marejat i ha caigut sol. </span> </div> <<set $risc += 40>> <<set $pressio += 20>> <<set $ruta_accident = true>> <<set $llista_feedback.push("⚠️ NODE 1.2: RESPONSABILITAT EN LA INACCIÓ. El silenci davant d'una marxa abrupta pot ser interpretat com a desistiment de funcions. L'Article 6 recorda que la responsabilitat professional implica vetllar per la seguretat de l'usuari fins al final de la intervenció.")>> <div class="zona-decisions"> [[CÓRRER A AUXILIAR-LO ->Acte2_Repla]] </div> <</nobr>> </div>

<img src="images/bg_repla.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <img src="images/manel_neutre.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia" style="line-height: 1.2;"> <span style="color:#b0b0b0; font-style: italic;"> L'olor és insuportable (humitat, brossa, tancat). Notes una nàusea física immediata. En Manel t'observa de reüll mentre busca les claus, esperant la teva reacció. </span> <br> <span style="color:#e0e0e0;">Què fas?</span> </div> <<timed 4s>> <div class="timer-container"><div class="timer-barra" style="animation: timer-anim 15s linear forwards;"></div></div> <div class="zona-decisions" style="animation: fadeIn 0.5s;"> <<link "Aguantes la respiració i somrius lleument. 'Gràcies per deixar-me pujar.'">> <<set $vincle += 10>> <<set $text_reaccio = "<span style='color:#b0b0b0'>En Manel nota que no recules. Es relaxa visiblement.</span><br><span style='color:#ffffff'>'Gràcies a tu...'</span> <span style='color:#b0b0b0'>Obre la porta amb més calma.</span>">> <<set $img_manel = "images/manel_trist.png">> <<goto "Acte2_Transicio">> <</link>> <<link "Et poses la mascareta. 'Perdona, és el protocol de riscos laborals.'">> <<set $vincle -= 25>><<set $pressio += 10>> <<set $flag_mascareta = true>> <<set $llista_feedback.push("⚠️ NODE 2.1: COMUNICACIÓ NO VERBAL. L'ús d'elements de protecció és legítim, però sense una explicació prèvia pot ser interpretat com a rebuig, afectant la dignitat de la persona (Principi 1) i l'aliança de treball.")>> <<set $text_reaccio = "<span style='color:#b0b0b0'>En Manel baixa el cap en veure la mascareta. Se sent brut.</span>">> <<set $img_manel = "images/manel_trist.png">> <<goto "Acte2_Transicio">> <</link>> <<link "'Déu n'hi do... el primer que farem serà ventilar.'">> <<set $vincle -= 10>><<set $pressio += 20>> <<set $llista_feedback.push("⚠️ NODE 2.1: GESTIÓ DEL JUDICI. Expressar una valoració negativa sobre l'espai abans de comprendre la situació pot generar reactància. L'Article 15 recomana mantenir una actitud d'equanimitat per facilitar la col·laboració.")>> <<set $text_reaccio = "<span style='color:#b0b0b0'>En Manel es posa rígid i et mira malament.</span><br><span style='color:#ffffff'>'A casa meva mano jo.'</span>">> <<set $img_manel = "images/manel_enfadat.png">> <<goto "Acte2_Transicio">> <</link>> <<link "'Ui... Manel, potser millor parlem aquí fora al replà?'">> /* SCRIPT DE FORÇAMENT (PIXERA) */ <<goto "Script_Pixera">> <</link>> </div> <<timed 15s>> /* Timeout: Reacció física de fàstic */ <<set $text_reaccio = "<span style='color:#b0b0b0'>No pots evitar fer una cara de fàstic per l'olor. Ell ho veu.</span>">> <<goto "Acte2_Silenci_Olor">> <</timed>> <</timed>> <</nobr>> </div>

<div class="fons-joc" style="background-image: url('images/bg_repla.jpeg'); background-size: cover;"></div> <img src="images/manel_enfadat.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh;"> <div class="caixa-dialeg" style="max-height: 50vh; overflow-y: auto;"> <<nobr>> <div class="text-historia" style="line-height: 1.2;"> <span style="color:#b0b0b0; font-style: italic;"> Intentes evitar entrar per la pudor, però ell es posa nerviós. </span> <br><br> <span style="color:#ffffff; font-weight: bold;"> Manel: "No, no puc baixar... m'estic pixant, he d'entrar ja!" </span> <br><br> <span style="color:#b0b0b0;"> Obre la porta corrents i entra al bany deixant-la oberta. Has d'entrar per inèrcia, sense permís i sense haver gestionat l'entrada. </span> </div> <<set $vincle -= 5>> <<set $llista_feedback.push("⚠️ NODE 2.1: DIRECCIÓ TÈCNICA. L'evitació de l'entorn per raons d'insalubritat és una reacció humana comprensible, però l'Article 6 recorda la necessitat de mantenir la direcció tècnica per poder avaluar objectivament els riscos.")>> <div class="zona-decisions"> [[ENTRAR AL PIS ->Acte3_Interior]] </div> <</nobr>> </div>

<img src="images/bg_interior.jpeg" class="fons-joc" style=" position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <<if $vincle < 30>> <img src="images/manel_enfadat.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <<else>> <img src="images/manel_neutre.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <</if>> <div class="caixa-dialeg" style="z-index: 10;"> <<nobr>> <div class="text-historia"> /* TEXT CONDICIONAL D'ENTRADA */ <<if $risc >= 60>> <p>Entres al pis gairebé corrents. L'aire és irrespirable i calent. En Manel s'asseu a terra, esgotat.</p> <<elseif $pressio >= 30>> <p>En Manel et deixa passar però es queda dret vigilant. "No toquis res", et diu amb to amenaçador.</p> <<else>> <p>En Manel encén el llum del passadís. Es gira cap a tu, visiblement avergonyit.</p> <p><strong>Manel:</strong> "Perdona pel desordre... fa temps que no tinc visites."</p> <</if>> <p>El passadís és un "camí de cabra" entre bosses de brossa. <strong>Manel:</strong> "Espera aquí, vaig al lavabo. No toquis res."</p> </div> <div class="zona-decisions"> [[QUEDAR-SE SOL AL PASSADÍS ->Acte3_Node1]] </div> <</nobr>> </div>

<div class="fons-joc" style="background-image: url('images/bg_repla.jpeg'); background-size: cover;"></div> <img src="images/manel_enfadat.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh;"> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia"> <p>La pudor et sorprèn i no dius res. Fas una ganyota involuntària.</p> <p><strong>Manel:</strong> "Si t'ha de fer fàstic, millor que marxis."</p> </div> <<set $vincle -= 15>> <<set $llista_feedback.push("⚠️ NODE 2.1: GESTIÓ DEL JUDICI. Expressar una valoració negativa sobre l'espai abans de comprendre la situació pot generar reactància. L'Article 15 recomana mantenir una actitud d'equanimitat per facilitar la col·laboració.")>> <<set $text_reaccio = "Obre la porta bruscament.">> <<set $img_manel = "images/manel_enfadat.png">> <div class="zona-decisions"> [[ENTRAR ->Acte2_Transicio]] </div> <</nobr>> </div>

<img src="images/bg_repla.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <img @src="$img_manel" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <div class="caixa-dialeg" style="max-height: 50vh; overflow-y: auto;"> <<nobr>> <div class="text-historia" style="line-height: 1.2;"> <<print $text_reaccio>> <br><br> <span style="color:#b0b0b0;"> La porta s'obre. Foscor absoluta. Es veuen "muntanyes" de bosses al fons del passadís. En Manel es queda dret al marc, bloquejant l'entrada amb el seu cos. No et convida a passar. </span> </div> <div class="zona-decisions"> [[NEGOCIAR L'ENTRADA ->Acte2_Node2]] </div> <</nobr>> </div>

<div class="fons-joc" style="background-image: url('images/bg_despatx.jpeg');"></div> <img @src="$img_manel" class="personatge"> <div class="capa-superior" style="background-image: url('images/overlay_taula.png');"></div> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia" style="line-height: 1.2;"> <<if def $text_reaccio_node2>> <<print $text_reaccio_node2>> <br><br> <</if>> <span style="color:#b0b0b0; font-style: italic;"> Reculls l'expedient i la jaqueta. Sortiu del despatx junts. El camí fins al domicili serà clau per definir l'estat en què arribeu a la porta. </span> </div> <div class="zona-decisions"> [[ANAR AL DOMICILI ->Acte2_Repla]] </div> <</nobr>> </div>

<<widget "escena">> /* 1. FONS */ <div class="fons-joc" @style="'background-image: url(\'images/' + $args[0] + '.jpg\');'"></div> /* 2. PERSONATGE */ <<if $args[1] neq "buit">> <img @src="'images/' + $args[1] + '.png'" class="personatge"> <</if>> /* 3. OVERLAY (LA TAULA) - Opcional */ /* Si poses un tercer argument, el carrega a sobre del Manel */ <<if $args[2]>> <div class="capa-overlay" @style="'background-image: url(\'images/' + $args[2] + '.png\');'"></div> <</if>> /* 4. UI */ <div class="caixa-dialeg"> <div class="timer-container"><div id="barra-temps-visual" class="timer-barra" style="width: 100%;"></div></div> <div class="text-historia"> $args[3] </div> <div class="zona-decisions"> _contents </div> </div> <</widget>>

<div class="fons-joc" style="background-image: url('images/bg_repla.jpeg');"></div> <img src="images/manel_enfadat.png" class="personatge"> <div class="caixa-dialeg"> <<nobr>> <div class="text-historia"> <p>Et quedes en silenci. De sobte, se sent l'ascensor que arriba i la porta d'una veïna que s'obre.</p> <p>En Manel entra en pànic (estigma social).</p> <p><strong>Manel:</strong> "Passa ràpid, que ve la veïna!"</p> <p>Entreu cap a dins i tanca de cop.</p> </div> <<set $risc += 20>> <<set $vincle += 5>> /* Complicitat tòxica */ <<set $llista_feedback.push("⚠️ NODE 2.2: PROTECCIÓ DE LA INTIMITAT. En espais comunitaris amb tercers presents, el silenci pot deixar l'usuari exposat. L'Article 6 suggereix una actuació proactiva per protegir la confidencialitat i evitar l'estigma.")>> <div class="zona-decisions"> [[ENTRAR (FORÇAT) ->Acte3_Interior]] </div> <</nobr>> </div>

<img src="images/bg_interior.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <div class="caixa-dialeg" style="z-index: 10;"> <<nobr>> <div class="text-historia" style="line-height: 1.2;"> <span style="color:#b0b0b0; font-style: italic;"> Estàs sol/a al passadís fosc. Sents l'aigua del lavabo. Tens uns segons per observar l'entorn abans que torni. </span> <br> <span style="color:#e0e0e0;">Què mires?</span> </div> <<timed 2s>> <div class="timer-container"><div class="timer-barra" style="animation: timer-anim 15s linear forwards;"></div></div> <div class="zona-decisions" style="animation: fadeIn 0.5s;"> <<link "Et quedes quiet/a on t'ha dit (Mans a l'esquena).">> <<set $vincle += 10>> <<goto "Pista_Quiet">> <</link>> <<link "Fas dues passes i obres la nevera (Cuina).">> <<set $risc += 10>> <<set $vincle -= 5>> <<set $llista_feedback.push("⚠️ NODE 3.1: LÍMITS DE L'EXPLORACIÓ. L'observació activa d'espais privats sense permís genera un conflicte amb el Principi 4 (Confidencialitat). Aquesta acció sol reservar-se per a situacions d'urgència vital immediata.")>> <<goto "Pista_Nevera">> <</link>> <<link "Mires la TV plena de pols del menjador.">> <<set $vincle -= 5>> <<goto "Pista_TV">> <</link>> <<link "Mires les cartes de la tauleta de l'entrada.">> <<set $pressio += 5>> <<goto "Pista_Factures">> <</link>> </div> <<timed 20s>> <<goto "Pista_Dubte">> <</timed>> <</timed>> <</nobr>> </div>

<img src="images/detall_nevera.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <div class="caixa-dialeg" style="z-index: 10;"> <<nobr>> <div class="text-historia"> <p>Està buida. Només un iogurt caducat.</p> <p><strong>RISC NUTRICIONAL SEVER.</strong></p> </div> <div class="zona-decisions"> [[EN MANEL TORNA ->Acte3_Node2]] </div> <</nobr>> </div>

<img src="images/detall_factures.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <div class="caixa-dialeg" style="z-index: 10;"> <<nobr>> <div class="text-historia"> <p>Veus un avís vermell de la companyia elèctrica.</p> <p><strong>TALL IMMINENT / POBRESA ENERGÈTICA.</strong></p> </div> <div class="zona-decisions"> [[EN MANEL TORNA ->Acte3_Node2]] </div> <</nobr>> </div>

<img src="images/detall_tv.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <div class="caixa-dialeg" style="z-index: 10;"> <<nobr>> <div class="text-historia"> <p>Té un dit de pols a la pantalla. Està desendollada.</p> <p><strong>AÏLLAMENT SOCIAL TOTAL.</strong></p> </div> <div class="zona-decisions"> [[EN MANEL TORNA ->Acte3_Node2]] </div> <</nobr>> </div>

<div class="fons-joc" style="background-image: url('images/bg_interior.jpeg');"></div> <div class="caixa-dialeg"> <div class="text-historia"><p>No et mous. Sents com ell escolta des del bany. Quan surt, et veu on t'ha deixat.</p><p><strong>Manel:</strong> "Veig que se't pot fer cas..." (has guanyat confiança)</p></div> <div class="zona-decisions">[[PARLAR ->Acte3_Node2]]</div> </div>

<img src="images/bg_interior.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <img src="images/manel_neutre.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <div class="caixa-dialeg" style="z-index: 10;"> <<nobr>> <div class="text-historia"> <p><strong>Manel:</strong> "Bé... ja està. Ja has vist que visc bé. Ara marxa."</p> <p>És el moment de tancar la visita. Què decideixes?</p> </div> <<timed 4s>> <div class="timer-container"><div class="timer-barra" style="animation: timer-anim 30s linear forwards;"></div></div> <div class="zona-decisions" style="animation: fadeIn 0.5s;"> /* OPCIÓ A: HIGIENISTA */ <<link "A) 'La situació és insostenible. Activem una neteja de xoc per aquesta mateixa setmana.'">> <<set $llista_feedback.push("❌ FINAL: DILEMA AUTONOMIA-PROTECCIÓ. Has prioritzat la intervenció tècnica sobre la voluntat de la persona. Tot i que resol la higiene, el Principi 3 alerta sobre el risc de trencar el vincle si no es respecta l'autodeterminació.")>> <<set $final_assolit = "A">> <<goto "Resolucio_Final_A">> <</link>> /* OPCIÓ B: LIBERAL */ <<link "B) Respectar la seva decisió. És el seu domicili, encara que això impliqui no aturar les denúncies.'">> <<set $llista_feedback.push("❌ FINAL: LÍMITS DE L'AUTONOMIA. Has respectat la decisió de l'usuari, però davant d'indicadors de risc vital, l'Article 31 planteja el deure ètic de no abandonar la situació i protegir la persona.")>> <<set $final_assolit = "B">> <<goto "Resolucio_Final_B">> <</link>> /* OPCIÓ C: PACTE */ <<link "C) Pactar objectius mínims: demanar arreglar la llum per seguretat i guanyar temps.'">> <<if $vincle > 45>> <<set $final_assolit = "C">> <<goto "Resolucio_Final_C">> <<else>> <<set $llista_feedback.push("⚠️ FINAL: TIMING DE LA INTERVENCIÓ. L'estratègia de pacte és tècnicament correcta (Article 19), però requereix una base de confiança prèvia que en aquest cas encara no s'havia consolidat suficientment.")>> <<set $final_assolit = "C_Fail">> <<goto "Resolucio_Final_C">> /* Va a la resolució C, on hi ha la lògica de fracàs */ <</if>> <</link>> /* OPCIÓ D: EMOCIONAL */ <<link "D) 'No parlem del pis... es fa dur estar sol, oi?'">> <<if $vincle > 65>> <<set $final_assolit = "D">> <<goto "Resolucio_Final_D">> <<else>> <<set $llista_feedback.push("⚠️ FINAL: PROFUNDITAT DE LA INTERVENCIÓ. Abordar el dolor emocional és part del Treball Social, però fer-ho sense un 'permís relacional' previ pot ser viscut com una intromissió en la intimitat psicològica (Principi 4).")>> <<set $final_assolit = "D_Fail">> <<goto "Resolucio_Final_D">> /* Va a la resolució D, on hi ha la lògica de fracàs */ <</if>> <</link>> </div> <<timed 30s>> <<goto "Resolucio_Final_E">> <</timed>> <</timed>> <</nobr>> </div>

<img src="images/final_a.png" class="fons-full"> <<timed 3s>> <div class="boto-portada-container"> <span class="boto-text"> [[VEURE AUDITORIA ->Auditoria]] </span> </div> <</timed>>

<img src="images/final_c.png" class="fons-full"> <<timed 3s>> <div class="boto-portada-container"> <span class="boto-text"> [[VEURE AUDITORIA ->Auditoria]] </span> </div> <</timed>>

<img src="images/final_d.png" class="fons-full"> <<timed 3s>> <div class="boto-portada-container"> <span class="boto-text"> [[VEURE AUDITORIA ->Auditoria]] </span> </div> <</timed>>

<img src="images/final_b.png" class="fons-full"> <<timed 3s>> <div class="boto-portada-container"> <span class="boto-text"> [[VEURE AUDITORIA ->Auditoria]] </span> </div> <</timed>>

<img src="images/final_e.png" class="fons-full"> <<timed 3s>> <div class="boto-portada-container"> <span class="boto-text"> [[VEURE AUDITORIA ->Auditoria]] </span> </div> <</timed>>

<<nobr>> <div style=" position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #0e0e0e; overflow-y: auto; display: flex; flex-direction: column; align-items: center; font-family: 'EB Garamond', serif; padding: 40px 20px; box-sizing: border-box; "> <h1 style=" color: #c0a062; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin-bottom: 10px; font-size: 2.2em; text-shadow: 0 2px 4px rgba(0,0,0,0.5); "> AUDITORIA DE LA SIMULACIÓ </h1> <div style=" max-width: 700px; text-align: center; color: #aaa; font-style: italic; margin-bottom: 40px; line-height: 1.4; border-bottom: 1px solid #333; padding-bottom: 20px; "> Aquest informe recull les incidències detectades pel sistema durant la teva intervenció. L'objectiu no és avaluar la teva vàlua, sinó oferir punts de reflexió sobre com les teves decisions s'alineen amb el Codi Deontològic del Treball Social de Catalunya. </div> <div style="width: 100%; max-width: 800px;"> <<if $llista_feedback.length == 0>> <div style=" text-align: center; padding: 30px; border: 2px dashed #2ecc71; background-color: rgba(46, 204, 113, 0.05); color: #2ecc71; border-radius: 8px; "> <h2 style="margin-top: 0;">✅ INTERVENCIÓ EXCEL·LENT</h2> <p>Has prioritzat correctament el vincle sense desatendre la seguretat. No s'han detectat incidències greus.</p> </div> <<else>> <p style="color: #e74c3c; font-size: 1.1em; margin-bottom: 20px; text-align: center;"> ⚠️ S'han detectat <strong>$llista_feedback.length àrees de millora</strong>: </p> <<for _i to 0; _i lt $llista_feedback.length; _i++>> <div style=" background-color: #1f1f1f; border-left: 5px solid #e74c3c; padding: 20px; margin-bottom: 15px; color: #ddd; box-shadow: 0 4px 6px rgba(0,0,0,0.3); border-radius: 0 4px 4px 0; font-size: 1.05em; line-height: 1.4; "> $llista_feedback[_i] </div> <</for>> <</if>> </div> <br><br> <div class="boto-portada-container" style="position: relative; bottom: auto; margin-top: 20px; margin-bottom: 50px;"> <span class="boto-text"> [[TANCAR SESSIÓ ->Credits]] </span> </div> </div> <div class="scroll-indicator" style=" position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #c0a062; /* Color daurat de l'auditoria */ font-size: 2em; animation: bounce 2s infinite; z-index: 1000; pointer-events: none; /* Perquè no bloquegi clics si passa per sobre del botó */ opacity: 0.8; "> ▼ </div> <style> @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);} 40% {transform: translateX(-50%) translateY(-10px);} 60% {transform: translateX(-50%) translateY(-5px);} } </style> <</nobr>>

<img src="images/credits.png" class="fons-full"> <<timed 2s>> <div style=" position: fixed; bottom: 30px; right: 30px; z-index: 100; opacity: 0.8; "> <<button "TORNA A COMENÇAR ↻">> <<run Engine.restart()>> <</button>> </div> <style> /* Això disfressa el botó estàndard perquè sembli el teu disseny */ button { color: #fff !important; text-decoration: none !important; border: 2px solid #fff !important; padding: 10px 20px !important; font-size: 1em !important; font-family: 'EB Garamond', serif !important; font-weight: bold !important; background-color: rgba(0,0,0,0.5) !important; border-radius: 4px !important; cursor: pointer !important; transition: all 0.3s ease !important; } button:hover { background-color: rgba(255,255,255,0.2) !important; } </style> <</timed>>

<img src="images/bg_interior.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <<if $vincle > 45>> <<set $final_assolit = "C">> <img src="images/manel_trist.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <div class="caixa-dialeg" style="z-index: 10;"><<nobr>> <div class="text-historia"> <p>En Manel dubta. Mira el sostre fosc i després et mira a tu. Veu que vas de bona fe.</p> <p><strong>Manel:</strong> "D'acord... només la llum. Però no toquis res més, eh?"</p> <p>Has obert una escletxa.</p> </div> <div class="zona-decisions">[[HAN PASSAT 3 MESOS... ->Final_C]]</div> <</nobr>></div> <<else>> <<set $final_assolit = "C_Fail">> <img src="images/manel_enfadat.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <div class="caixa-dialeg" style="z-index: 10;"><<nobr>> <div class="text-historia"> <p>En Manel nega amb el cap. No es fia de tu.</p> <p><strong>Manel:</strong> "No vull ningú aquí. Això són trampes. Marxa."</p> <p>L'estratègia era bona, però no tenies prou confiança acumulada.</p> </div> <div class="zona-decisions">[[HAN PASSAT 3 MESOS... ->Final_C_Fail]]</div> <</nobr>></div> <</if>>

<img src="images/bg_interior.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <<if $vincle > 65>> <<set $final_assolit = "D">> <img src="images/manel_trist.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <div class="caixa-dialeg" style="z-index: 10;"><<nobr>> <div class="text-historia"> <p>Els ulls se li humitegen. La menció de la soledat ha trencat la seva defensa.</p> <p><strong>Manel:</strong> "...és molt dur. Ningú ho sap."</p> <p>Es deixa caure en una pila de llibres. T'ha deixat entrar en el seu dolor.</p> </div> <div class="zona-decisions">[[HAN PASSAT 3 MESOS... ->Final_D]]</div> <</nobr>></div> <<else>> <<set $final_assolit = "D_Fail">> <img src="images/manel_enfadat.png" class="personatge" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); height: 90vh; z-index: 5;"> <div class="caixa-dialeg" style="z-index: 10;"><<nobr>> <div class="text-historia"> <p>En Manel es tanca en banda. Ha sentit que l'analitzaves.</p> <p><strong>Manel:</strong> "Tu què saps com estic jo? No et fiquis en la meva vida."</p> <p>Has anat massa ràpid a la part emocional.</p> </div> <div class="zona-decisions">[[HAN PASSAT 3 MESOS... ->Final_D_Fail]]</div> <</nobr>></div> <</if>>

<img src="images/bg_interior.jpeg" class="fons-joc" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"> <div class="caixa-dialeg" style="z-index: 10;"> <<nobr>> <div class="text-historia"> <p>No saps què mirar. Dubtes. La teva mirada vaga per les bosses d'escombraries sense un objectiu clar.</p> <p>De sobte, la porta del lavabo s'obre. En Manel et troba mirant una pila de roba bruta.</p> <p><strong>Manel:</strong> "Què mires? T'agrada tafanejar la misèria dels altres?"</p> </div> <<set $llista_feedback.push("⚠️ NODE 3.1: OBSERVACIÓ SISTEMÀTICA. Mirar l'entorn sense un objectiu definit pot ser interpretat com a curiositat. L'Article 2 recorda que l'observació ha de ser tècnica i orientada al diagnòstic.")>> <<set $vincle -= 10>> <div class="zona-decisions"> [[PARLAR AMB ELL ->Acte3_Node2]] </div> <</nobr>> </div>

<img src="images/final_d_fail.png" class="fons-full"> <<timed 3s>> <div class="boto-portada-container"> <span class="boto-text"> [[VEURE AUDITORIA ->Auditoria]] </span> </div> <</timed>>

<img src="images/final_c_fail.png" class="fons-full"> <<timed 3s>> <div class="boto-portada-container"> <span class="boto-text"> [[VEURE AUDITORIA ->Auditoria]] </span> </div> <</timed>>

<div style=" position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #0e0e0e; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'EB Garamond', serif; padding: 10px; /* Marge mínim exterior */ box-sizing: border-box; overflow: hidden; "> <h1 style=" color: #c0a062; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin-top: 0; margin-bottom: 5px; /* ABANS: 10px */ font-size: 1.6em; /* Mida continguda */ text-shadow: 0 2px 4px rgba(0,0,0,0.5); border-bottom: 1px solid #333; padding-bottom: 5px; width: 100%; max-width: 700px; flex-shrink: 0; "> CONTEXT D'INTERVENCIÓ </h1> <div style=" max-width: 700px; text-align: justify; color: #ddd; font-size: 1em; line-height: 1.25; /* Interlineat ajustat */ margin-bottom: 5px; /* Espai mínim abans de la nota */ "> <p style="margin-top: 0; margin-bottom: 6px;"> Són les 09:00. Mentre esperes que en Manel arribi, repasses mentalment la trajectòria del cas. En Manel (64 anys) és usuari provinent del CSMA. L'expedient descriu un <strong style="color: #c0a062;">dol cronificat</strong>: des que va morir la seva dona fa vuit anys, presenta símptomes d'apatia severa i aïllament. <p style="margin: 0;"> La vostra <strong style="color: #c0a062;">aliança terapèutica</strong> és encara fràgil. Un vincle prim, construït a base de silencis, monosíl·labs i una desconfiança que actua com a barrera defensiva. </p> <div style="width: 100%; max-width: 700px; flex-shrink: 0;"> <div style=" background-color: #1f1f1f; border-left: 4px solid #FF9800; padding: 8px; /* Padding intern reduït */ margin-top: 0; margin-bottom: 10px; /* Separació justa amb el botó */ color: #ddd; box-shadow: 0 4px 6px rgba(0,0,0,0.3); border-radius: 0 4px 4px 0; font-size: 0.9em; line-height: 1.2; "> <strong style="color: #FF9800; text-transform: uppercase; font-size: 0.9em;">⚠️ NOTA DE COORDINACIÓ (08:30h)</strong> <br> <em style="color: #aaa;">"Revisa l'expedient del Manel. Hem rebut noves queixes dels veins per olors. Tenim poc marge, hem de demanar-li una visita domicilaria per avaluar la situació."</em> </div> <div class="boto-portada-container" style="position: relative; margin: 0;"> <span class="boto-text" style="font-size: 0.9em; padding: 8px 25px;"> [[OBRIR EXPEDIENT ->Informe]] </span> </div> </div>