The Invisible War
It’s surreal looking back at that game, The Invisible War. It’s not just a game; it’s like reading the field guide to my own childhood—a history book written in trauma and fear. I’m 20 now, sitting in a quiet college library that feels safer than any room I grew up in, and I’m finally able to label those choices not as failures, but as Survival Traits.
The hardest part, the core of the whole thing, is processing the way my worth was measured against a ghost. My brother’s absence became his perfection, and my presence became my perpetual inadequacy. The most defining sentence of my life wasn’t a punishment for a mistake; it was an existential crisis delivered with a scream, telling me I was a failure and worthless. That single memory, that feeling of being wished away, is the true wreckage I’m still digging out of.
The traits I chose, Silence as Weapon, Survival by Hiding, The Mask of Perfection, were just different versions of invisibility. You learn very quickly that being small, quiet, and agreeable is the only way to avoid the next earthquake. When you’re constantly bracing for impact, you stop asking for joy. You become an expert at deflection, taking the blame to protect someone else or just to make the yelling stop faster.
What hits me now is the realization that the internal destruction is the real long-term damage. It’s easy to escape a room, but how do you escape the voice that tells you you’re worthless? That voice doesn’t come from me; it was installed by the people who were supposed to love me.
My goal now, as a student here, is to finally build a life where I get to decide my own worth. I spent years in a house where I was told I shouldn’t exist. That feeling is the mountain I climb every day. Every class I pass, every friend I make, every moment I feel safe, is an act of defiance against the people who tried to ruin me. The journey isn’t over; the “war” is still invisible, but now I fight it by focusing on my own path to escape and inner resilience. I’m building self-worth out of the ashes, refusing to let that devastating lie define the rest of my life.
THE CODE TO MY GAME:
<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<title>The Invisible War</title>
<scriptsrc=”https://cdn.tailwindcss.com”></script>
<linkhref=”https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap”rel=”stylesheet”>
<style>
/* Custom CSS for dramatic theme */
body{
font-family:’Inter’,sans-serif;
background-color: #1a1a2e;/* Dark theme background */
color: #e0e0f0;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
}
.game-container{
max-width:800px;
width:100%;
background-color: #2c3554;/* Slightly lighter card color */
border-radius:1rem;
box-shadow:010px30pxrgba(0,0,0,0.5);
padding:3rem;
transition:all0.5sease-in-out;
}
.scenario-text{
font-size:1.25rem;
line-height:1.75;
margin-bottom:2rem;
font-weight:400;
}
.scene-text{
font-style:italic;
color: #b0c4de;
margin-bottom:1.5rem;
border-left:3pxsolid #64ffda;
padding-left:1rem;
}
.choice-button{
transition:background-color0.3s,transform0.1s;
background-color: #ff647c;/* Dramatic red/pink for choice */
border:none;
color: #1a1a2e;
font-weight:700;
}
.choice-button:hover{
background-color: #ff4069;
transform:translateY(-2px);
box-shadow:04px15pxrgba(255,100,124,0.4);
}
.choice-button:active{
transform:translateY(0);
}
.outcome-text{
color: #64ffda;/* Teal color for outcomes */
font-weight:600;
margin-top:1rem;
}
.start-button{
background-color: #64ffda;
color: #1a1a2e;
}
.start-button:hover{
background-color: #40e0c0;
}
</style>
</head>
<body>
<div id=”game” class=”game-container flex flex-col items-center”>
<h1class=”text-3xl font-bold mb-6 text-center text-white”>THE INVISIBLE WAR</h1>
<h2id=”scenario-title”class=”text-xl font-semibold mb-4 text-center”></h2>
<divid=”narrative-section”class=”w-full text-center”>
<pid=”scenario-text”class=”scenario-text”></p>
<pid=”scene-text”class=”scene-text hidden”></p>
</div>
<divid=”choices-container”class=”w-full flex flex-col space-y-4″>
<!– Choices will be injected here –>
</div>
<buttonid=”next-button”class=”mt-8 px-6 py-3 bg-indigo-500 hover:bg-indigo-600 text-white font-bold rounded-lg shadow-lg hidden”>
Next Scenario >
</button>
<buttonid=”start-button”class=”start-button mt-8 px-8 py-4 font-bold rounded-lg shadow-xl”>
Begin the Story
</button>
</div>
<script>
// — GAME DATA —
const context ={
title: “The Air We Breathe”,
text: “I don’t remember when the fear started. It’s always been here, a dull, electric hum under my skin. This house isn’t home; it’s a cage where I measure my life in heartbeats and whispered prayers. Every action, every word, is a calculation to avoid my father. He is the earthquake, the thunder, the one who holds our safety—and our breath—in his fist. My mother and I, we just survive his moods. This is my reality. This is where the choices begin.”
};
const scenarios =[
{
id: 1,
title: “Scenario 1: The Shield”,
narrative: “The argument between your parents is fierce, full of screaming. You hesitate in fear, watching. But when your father starts hitting your mother very hard, you finally break the paralysis and muster the courage to step between them. He redirects his rage onto you. You taste blood.”,
choices: [
{
text: “Tell him to stop”,
scene: “You say it with a broken voice. He freezes for a second. You feel the air shift. Then he screams louder than before. You regret opening your mouth. Your mom pulls you back, shaking.”,
outcome: “You learn that defending yourself is dangerous.”,
trait: “FEAR_INCREASED”
},
{
text: “Cover your mom and stay silent”,
scene: “You put your arm around her. You look down, not at him. He calls you weak. He storms out of the room. The silence after feels heavier than his hand.”,
outcome: “Your mom whispers “it’s okay” even though it’s not. You start believing silence is your safest weapon.”,
trait: “SILENCE_AS_WEAPON”
},
{
text: “Run to the bathroom and lock the door”,
scene: “Your hands shake as you close the lock. You hear him pacing outside. You hear your mom cry. You sit on the cold floor and try not to breathe.”,
outcome: “You feel safe for one moment. You learn you only survive by hiding.”,
trait: “SURVIVAL_BY_HIDING”
}
]
},
{
id: 2,
title: “Scenario 2: The Stolen Joy”,
narrative: “You managed to buy something small for yourself—a new shirt or some funky socks—but your siblings and mother don’t have necessities. Bringing it home, guilt eats you alive.”,
choices: [
{
text: “Hide it in your drawer”,
scene: “You shove it deep in your drawer, avoiding eye contact with your siblings. It becomes another secret you carry, losing the joy you felt buying it.”,
outcome: “You lose the joy you had but gain temporary peace by hiding the disparity.”,
trait: “TEMPORARY_PEACE”
},
{
text: “Offer it to your sibling”,
scene: “You immediately hand it to your sibling. They accept it quietly. You pretend you don’t care, but inside, you feel yourself shrinking for prioritizing their needs over your own small joy.”,
outcome: “You learn your happiness always comes second to the needs of the house.”,
trait: “HAPPINESS_SECOND”
},
{
text: “Use it and endure the guilt”,
scene: “You decide to wear or use the item. Later that night, you stare at the ceiling, crying because it still feels wrong while others sacrifice so much.”,
outcome: “You learn guilt follows you even when you assert your own small right to joy.”,
trait: “GUILT_FOLLOWS”
}
]
},
{
id: 3,
title: “Scenario 3: The Verdict”,
narrative: “Your father accuses you of damaging a valuable household item or failing a crucial chore. You didn’t do it, but he has already decided you’re guilty.”,
choices: [
{
text: “Try to explain the truth calmly”,
scene: “Your voice shakes as you talk. He interrupts every sentence and calls you a liar. He gets angrier, not listening to reason.”,
outcome: “You learn truth doesn’t matter when the verdict is already decided.”,
trait: “TRUTH_DOESNT_MATTER”
},
{
text: “Stay silent and accept the shouting”,
scene: “He calls you stubborn and says your silence proves your guilt. He eventually leaves after yelling. Your body trembles for hours, knowing you were wrongly judged.”,
outcome: “You learn silence protects you physically but destroys you internally.”,
trait: “INTERNAL_DESTRUCTION”
},
{
text: “Say “fine, I did it” to avoid further conflict”,
scene: “You whisper “fine” even though it’s a lie. Your father smirks like he won. You feel your chest tighten as you lose part of yourself for the sake of survival.”,
outcome: “You learn that giving in immediately saves you from pain but costs a piece of your integrity each time.”,
trait: “KILLS_A_PIECE”
}
]
},
{
id: 4,
title: “Scenario 4: The Escalation”,
narrative: “A tiny mistake turns into a war. He twists everything. Your hands shake under the table.”,
choices: [
{
text: “Take the blame”,
scene: “You say “it was me.” He calms down slightly. Your mom looks at you quietly. You feel the sadness in her eyes.”,
outcome: “You become the shield of the house.”,
trait: “SHIELD_OF_THE_HOUSE”
},
{
text: “Defend yourself”,
scene: “He gets louder. He stands up. You regret every word. Your body prepares for the worst.”,
outcome: “Fear becomes your daily instinct.”,
trait: “FEAR_INSTINCT”
},
{
text: “Leave the room”,
scene: “You walk away slowly. He yells after you. You enter your room and breathe for the first time.”,
outcome: “You learn distance is a survival tool.”,
trait: “DISTANCE_SURVIVAL”
}
]
},
{
id: 5,
title: “Scenario 5: The Performance”,
narrative: “Guests are over. Your father insists you come out and ‘perform’—tell a funny story, recite something, or act polite—even though you feel terrified and exposed.”,
choices: [
{
text: “Force a bright smile and act perfectly”,
scene: “You put on the performance of your life, laughing too loudly and being overly agreeable. Everyone praises you, but your face hurts from the strain of the forced mask.”,
outcome: “You learn the mask of perfection is necessary for temporary safety and approval.”,
trait: “MASK_OF_PERFECTION”
},
{
text: “Refuse to come out of your room”,
scene: “You lock yourself away. The guests leave, and your father storms to your door, furious that you made him look bad. You endure the silent treatment and hostile stares.”,
outcome: “You gain emotional privacy but pay the price in immediate, targeted punishment.”,
trait: “PAID_FOR_PRIVACY”
},
{
text: “Come out but speak as little as possible”,
scene: “You sit silently in the corner, giving short, one-word answers. Your father visibly bristles, but can’t openly attack you in front of guests. You are overlooked, which feels like a strange victory.”,
outcome: “You learn to survive by becoming invisible, minimizing your presence.”,
trait: “SURVIVE_BY_INVISIBILITY”
}
]
},
{
id: 6,
title: “Scenario 6: The Witness”,
narrative: “Someone watches the violence. She knows. She says nothing. Her silence hurts worse.”,
choices: [
{
text: “Beg her for help”,
scene: “You pull her aside. Your voice cracks. She says “I can’t get involved.” You realize adults pretend more than they protect.”,
outcome: “You lose trust in anyone outside your house.”,
trait: “LOST_TRUST”
},
{
text: “Avoid her forever”,
scene: “You don’t look at her again. When she visits, you leave the room. You refuse to let her see your pain again.”,
outcome: “You build walls around yourself.”,
trait: “BUILDING_WALLS”
},
{
text: “Pretend she never saw anything”,
scene: “You act normal. She acts normal. You both know the truth but ignore it.”,
outcome: “You learn people choose comfort over courage.”,
trait: “COMFORT_OVER_COURAGE”
}
]
},
{
id: 7,
title: “Scenario 7: The Cold Reality”,
narrative: “Your father went through your phone, found unfiltered sarcastic conversations between you and your friends, and became enraged. He hit you until you started bleeding and then stood over you, threatening to kill you. You realize he is truly capable of it.”,
choices: [
{
text: “Escape to the safest, most secure spot you can find”,
scene: “Adrenaline floods your system. You scramble out of the room, locking yourself in a bathroom or closet. You hide, pressing yourself against the cold wall, listening to his heavy footsteps outside.”,
outcome: “You choose immediate physical survival over everything else. Fear controls your movements.”,
trait: “FEAR_DRIVEN_FLIGHT”
},
{
text: “Try to quickly wipe or destroy the evidence on your phone”,
scene: “Ignoring the pain, you frantically try to delete the chats, wipe the evidence, anything to avoid the next explosion. Your hands shake so badly it takes too long. You realize the phone is a weapon he can use against you.”,
outcome: “You choose to prioritize future safety by erasing your voice and your secrets.”,
trait: “ERASED_VOICE”
},
{
text: “Go numb and detach from the situation”,
scene: “You stare blankly at the wall as he yells and threatens. Your mind leaves your body. You stop feeling the pain, the fear, or the sound of his voice. You become a hollow shell until the threat passes.”,
outcome: “You learn to survive by shutting down your emotions, creating a psychological barrier to pain.”,
trait: “PSYCHOLOGICAL_SHUTDOWN”
}
]
},
{
id: 8,
title: “Scenario 8: The Instant Reaction”,
narrative: “He raises his voice. Your body reacts instantly. Fear controls you.”,
choices: [
{
text: “Hide”,
scene: “You slip into the nearest room. You hold your breath. You pray he doesn’t open the door.”,
outcome: “You survive the night but lose another piece of peace.”,
trait: “LOST_PEACE”
},
{
text: “Pray”,
scene: “You whisper the same words over and over. You hope Allah sees you. You hope someone does.”,
outcome: “Faith becomes one of the few things you can hold.”,
trait: “FAITH_ANCHOR”
},
{
text: “Freeze”,
scene: “Your body doesn’t move. You stare at the floor. You feel trapped inside your own skin.”,
outcome: “You learn fear can turn you into stone.”,
trait: “FEAR_TURNS_STONE”
}
]
},
{
id: 9,
title: “Scenario 9: The Ruin”,
narrative: “Your older brother died when you were both young, leaving a hole that you were forced to fill. Tonight, you made a simple mistake—maybe spilled a drink or forgot a message. Your parent, in a sudden explosion of rage, says the words that ruin you: ‘Why couldn’t it have been you? You are a failure, worthless. We wish you died instead of him.'”,
choices: [
{
text: “Believe them”,
scene: “You break. You believe you’re worthless. Your world becomes small and dark. You see their wish as the truth.”,
outcome: “Your self-worth hits rock bottom.”,
trait: “SELF_WORTH_ROCK_BOTTOM”
},
{
text: “Fight the voice”,
scene: “A tiny, desperate voice screams inside that they are wrong. You cling to the idea that you deserve to live, fighting the crushing weight of their hatred.”,
outcome: “You gain the smallest spark of strength, a desperate refusal to let them win.”,
trait: “SPARK_OF_STRENGTH”
},
{
text: “Go numb”,
scene: “The pain is too much. You stop reacting. You stop feeling. Their words echo but don’t enter you, turning into muffled static you can endure.”,
outcome: “Numbness protects you again but distances you further from your authentic self.”,
trait: “NUMBNESS_DISTANCES”
}
]
},
{
id: 10,
title: “Scenario 10: The Reckoning”,
narrative: “You sit alone in the dark. Everyone abandoned you. You pray and hold onto your mom.”,
choices: [
{
text: “Keep surviving”,
scene: “You decide to endure one more day. Then another. You refuse to let them break you completely.”,
outcome: “You gain inner endurance.”,
trait: “INNER_ENDURANCE”
},
{
text: “Break down”,
scene: “You cry silently into your hands. Your whole body shakes. You feel like your life is collapsing.”,
outcome: “You hit emotional rock bottom.”,
trait: “EMOTIONAL_ROCK_BOTTOM”
},
{
text: “Imagine running away”,
scene: “You picture a life without fear. A room where no one yells. A version of you that feels safe.”,
outcome: “You gain a long-term goal: escape.”,
trait: “GOAL_ESCAPE”
}
]
}
];
// — GAME STATE —
let currentScenarioIndex =0;
let playerTraits =[];
let state =’start’;// ‘start’, ‘context’, ‘scenario’, ‘outcome’, ‘end’
// — DOM ELEMENTS —
const gameDiv = document.getElementById(‘game’);
// Elements are dynamically fetched inside functions because of innerHTML reset
let scenarioTitle, scenarioText, sceneText, choicesContainer, nextButton, startButton;
function getGameElements(){
scenarioTitle = document.getElementById(‘scenario-title’);
scenarioText = document.getElementById(‘scenario-text’);
sceneText = document.getElementById(‘scene-text’);
choicesContainer = document.getElementById(‘choices-container’);
nextButton = document.getElementById(‘next-button’);
startButton = document.getElementById(‘start-button’);
}
// — UTILITY —
function formatTrait(trait){
return trait.split(‘_’).map(word => word.charAt(0)+ word.slice(1).toLowerCase()).join(‘ ‘);
}
// — GAME FUNCTIONS —
function resetGameLayout(){
// Reset HTML structure to ensure all IDs are present for re-fetching
gameDiv.innerHTML = `
<h1 class=”text-3xl font-bold mb-6 text-center text-white”>THE INVISIBLE WAR</h1>
<h2 id=”scenario-title” class=”text-xl font-semibold mb-4 text-center”></h2>
<div id=”narrative-section” class=”w-full text-center”>
<p id=”scenario-text” class=”scenario-text”></p>
<p id=”scene-text” class=”scene-text hidden”></p>
</div>
<div id=”choices-container” class=”w-full flex flex-col space-y-4″>
<!– Choices/Intro button will be injected here –>
</div>
<button id=”next-button” class=”mt-8 px-6 py-3 bg-indigo-500 hover:bg-indigo-600 text-white font-bold rounded-lg shadow-lg hidden”>
Next Scenario >
</button>
<button id=”start-button” class=”start-button mt-8 px-8 py-4 font-bold rounded-lg shadow-xl hidden”>
Restart
</button>
`;
getGameElements(); // Re-fetch references
}
function startGame(){
resetGameLayout();
state = ‘context’;
scenarioTitle.innerText = context.title;
scenarioText.innerHTML = context.text;
scenarioText.classList.remove(‘hidden’);
// Add button to start the actual scenarios
const startWarButton = document.createElement(‘button’);
startWarButton.id = ‘start-war-button’;
startWarButton.className = ‘start-button mt-8 px-8 py-4 font-bold rounded-lg shadow-xl’;
startWarButton.innerText = ‘Start the War’;
startWarButton.onclick = startFirstScenario;
choicesContainer.appendChild(startWarButton);
}
function startFirstScenario(){
currentScenarioIndex = 0;
playerTraits = [];
state = ‘scenario’;
document.getElementById(‘start-war-button’)?.remove(); // Use optional chaining for robustness
scenarioText.classList.remove(‘hidden’); // Ensure text is visible for scenario
displayScenario();
}
function displayScenario(){
const currentScenario = scenarios[currentScenarioIndex];
// Update DOM elements for new scenario
scenarioTitle.innerText = currentScenario.title;
scenarioText.innerText = currentScenario.narrative;
sceneText.innerText = “”;
sceneText.classList.add(‘hidden’);
nextButton.classList.add(‘hidden’);
choicesContainer.innerHTML = ”; // Clear old choices
// Create choice buttons
currentScenario.choices.forEach((choice, index) => {
const button = document.createElement(‘button’);
button.className = ‘choice-button w-full px-4 py-3 rounded-lg text-left shadow-md’;
button.innerHTML = `**Choice ${index + 1}:** ${choice.text}`;
button.onclick = () => handleChoice(index);
choicesContainer.appendChild(button);
});
state = ‘scenario’;
}
function handleChoice(choiceIndex){
if(state !==’scenario’)return;
state = ‘outcome’;
const currentScenario = scenarios[currentScenarioIndex];
const choice = currentScenario.choices[choiceIndex];
// 1. Record Trait
playerTraits.push({
scenario: currentScenario.id,
trait: choice.trait,
description: choice.outcome
});
// 2. Display Scene and Outcome
scenarioText.classList.add(‘hidden’);
sceneText.innerText = choice.scene;
sceneText.classList.remove(‘hidden’);
// Display Outcome
const outcomeDiv = document.createElement(‘p’);
outcomeDiv.className = ‘outcome-text mt-4 text-center’;
outcomeDiv.innerHTML = `**Outcome:** ${choice.outcome}`;
choicesContainer.innerHTML = ”;
choicesContainer.appendChild(outcomeDiv);
// 3. Show Next Button
nextButton.classList.remove(‘hidden’);
nextButton.onclick = moveToNextScenario;
}
function moveToNextScenario(){
currentScenarioIndex++;
if(currentScenarioIndex < scenarios.length){
displayScenario();
scenarioText.classList.remove(‘hidden’);
}else{
endGame();
}
}
function endGame(){
state = ‘end’;
// Ensure elements are available for the endgame content
Provide Feedback