1000-7 My dream calculator come true

1000-7 My dream calculator come true.
I had to run debugging, and do other adjustments to resume, but now the next submission of a retelling is ready. Without further ado, let me tell you about another of my projects that I started it right away after the assigned basic calculator from The Odin Project.

Making a regular calculator is too boring, too predictable, everyone already has seen one of those before. There is no elegant, nor explosive element behind it. Besides, numbers can feel soothing, the rhythmic latency to keep going, keep in sync, until becoming one with the numbers, and have it envelop you, as a warm blanket of binary that makes all of the Javascript – and, as a result creating a calculator that is wholesome, and grounding, one of a kind, like no other.

It is perfect for high stakes, and extreme pressure too! Because this world shows no mercy at all! That is why you must keep counting until there is nothing left! And, it all starts with 1000-7...You don’t know if you will survive! You just keep counting! A front-end project that is not just Javascript, but also runs on the psychology of a broken soul, all captured from the game mechanics to the UX design as a whole. Several different layers of Javascript to make it work, and the index, and the style- all of them being in sync to make it happen!

A summary that describes how I originally envisioned this game, but with logic infused to it:

**

1. Dual-State Calculation Mechanics & Event Interception**

The core architecture supports two distinct operational modes, dynamically handled inside a single event-listener loop.
Rather than relying on basic input forms, I intercepted both UI button clicks and physical keyboard events (keydown) to maintain absolute state control:
• Operator Mode (- 7 = Progression): Allows continuous, high-speed operator execution. The engine tracks the exact target subtrahend ($1000 - 7 = 993$).
• Direct Verification Mode: Requires the user to manually calculate and type the target output (e.g., typing 993 directly).
JavaScript
// Verification & Progression Dispatcher
if (isSubtractMode) {
const subtrahend = currentInput === '' ? 7 : parseFloat(currentInput);
if (subtrahend === 7) {
processSuccessStep(expected);
} else {
// Immediate catastrophic failure trigger
triggerAllTauntsBreakdown();
}
}

##2. Dynamic Style Injection & Zero-Dependency Overlay DOM

I refused to bloat the DOM with static overlay elements or external library dependencies. Instead, the overlay structures and CSS keyframes are injected dynamically on initialization using pure JavaScript DOM generation.
JavaScript
// Dynamic CSS Injection for Animations & Jump-Scare Overlays
if (!document.getElementById('rize-breakdown-styles')) {
const styleSheet = document.createElement('style');
styleSheet.id = 'rize-breakdown-styles';
styleSheet.textContent =
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
/* Dramatic viewport distortion */
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.blackout-overlay, .reward-overlay {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background-color: #000000;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
;
document.head.appendChild(styleSheet);
}
This guarantees that the entire application remains completely modular within a single script—rendering pitch-black modal lockouts, glowing crimson drop-shadows (text-shadow: 0 0 15px rgba(255,0,50,0.95)), and viewport shake animations without a single external library.

##3. Asymmetrical Psychological Penalties (Randomization vs. Array Cascading)

To heighten the psychological impact, the penalty system branches based on the gravity of the user's mistake:
1. A Standard Typo or Manual Miscalculation: Triggers a singular, randomized taunt from an array pool of 8 distinct psychological psychological lines (taunts[Math.floor(Math.random() * taunts.length)]), followed by an immediate state reset back to 1000.
2. An Illegal Subtraction Attempt (e.g., attempting - 6): Interpreted as a deliberate breach of the grounding rules. The engine maps across the entire array (taunts.map(...)), cascading all 8 psychological taunts simultaneously across the blackout overlay.
JavaScript
// Illegal Subtraction Penalty: Simultaneous Array Cascade
function triggerAllTauntsBreakdown() {
isLocked = true;
streakCount = 0; // Wipe streak
calculator.classList.add('shake');

setTimeout(() => {
blackoutOverlay.innerHTML =
<div class="blackout-taunts-container">
${taunts.map(t =>

${t}).join('')}
</div>
<div class="blackout-timer">[ restarting descent in ${countdown}... ]</div>
;
blackoutOverlay.classList.add('active');
}, 600);
}

4. Multi-Step Tiered Reward Modulo Logic

Sustaining focus down to 0 requires incremental reinforcement. The system uses a modulo step check (streakCount % 7 === 0) combined with keyframe state mapping to present progressive psychological monologues at exact 7-step intervals ($7 \rightarrow 14 \rightarrow 21 \rightarrow 28 \rightarrow 35\dots$).
JavaScript
// Progressive Milestone State Object
const rewardTiers = {
7: "You wish your mother would have chosen you? Scream it!...",
14: "You hate being alone? You really think someone will stay?...",
21: "No one is going to live for you, so why not just live only for yourself~?",
28: "Even if it means forsaking everything in this world? Even if it meant hurting someone? My good one"
};

function triggerStreakReward() {
isLocked = true; // Lock controls to force focused reading
const tierKey = rewardTiers[streakCount] ? streakCount : (Math.floor(streakCount / 7) * 7);
const activeMonologue = rewardTiers[tierKey] || rewardTiers[7];

// Render pitch-black reward screen with non-blocking countdown interval
}

Every key press gets an answer, and depending on the number you press on the calculator, you activate a new divergence of your fate. Is it the butterfly effect, or something else? Just by the -7 that you make, it will result on how you get to come out of it!

If you want to know more check this out:

**
// Unified Event Bus & Keypress Synchronization**

Handling inputs from both touch/mouse UI buttons and physical mechanical keyboards often introduces race conditions or double-firing bugs if state isn't locked down.
To eliminate this, I established a single execution bottleneck. The keyboard listener does not perform calculation logic itself; instead, it normalizes keypresses (Enter $\rightarrow$ =, Escape $\rightarrow$ Clear, Backspace $\rightarrow$ ←) and programmatically dispatches them directly to the button logic.
JavaScript
// Keyboard Event Normalization to UI Dispatch
document.addEventListener('keydown', (e) => {
if (isLocked) return; // Immediate drop-gate during overlays

if (e.key >= '0' && e.key <= '9') {
const btn = Array.from(buttons).find(b => b.textContent.trim() === e.key);
if (btn) btn.click();
} else if (e.key === '-' || e.key === 'Subtract') {
const btn = Array.from(buttons).find(b => b.textContent.trim() === '-');
if (btn) btn.click();
} else if (e.key === 'Enter' || e.key === '=') {
const btn = Array.from(buttons).find(b => b.textContent.trim() === '=');
if (btn) btn.click();
} else if (e.key === 'Escape') {
const btn = Array.from(buttons).find(b => b.textContent.trim() === 'Clear');
if (btn) btn.click();
}
});

By forcing keyboard input through btn.click(), the application maintains a single source of truth for sound/UI state changes, preventing fast typists from desynchronizing the display buffer.

**

The Asymmetrical State Lock (isLocked)**

One of the hardest parts of creating a high-stakes penalty loop is preventing input buffering exploits—where a user furiously typing - 7 = = = accidentally clicks through or bypasses a blackout screen before the browser finishes rendering it.
The state variable isLocked acts as an asymmetrical lock:
• Instant Activation: The exact microsecond an illegal subtraction or typo is detected, isLocked = true is set synchronously before setTimeout or animation loops trigger.
• Input Dropping: While isLocked === true, all button clicks and key events are silently discarded at the very top of the call stack.
• Timed Release: Control is restored only after the full 5-second breakdown timer or 8-second monologue timer completely unmounts the active CSS class (classList.remove('active')).
JavaScript
// Strict Guard Block at the Top of Every Input Flow
buttons.forEach(button => {
button.addEventListener('click', () => {
if (isLocked) return; // Hard wall against speed-typing

// ... Process input logic

});
});

1. CSS Vibration Physics & Viewport Distortion To make a miscalculation feel genuinely unnerving, the shake animation cannot just move the calculator side-to-side linearly. It needs rapid, jagged, multi-axis rotational shifts. By injecting raw CSS keyframe rules into the document head dynamically, we apply a high-frequency shake class that moves the UI across X, Y, and rotational axes within a $0.4\text{s}$ duration: CSS @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }

.calculator.shake {
animation: shake 0.4s ease;
}

The calculator element shakes violently for $600\text{ms}$ while displaying "UNRAVEL the world". Only after this visual disruption completes does the script pull the curtain down with the pitch-black overlay (.blackout-overlay.active).

1. Pure CSS Atmospheric Rendering: Crimson Text Shadowing To achieve the haunting, glowing aesthetic without loading heavy canvas assets or external graphics, the visual styling relies heavily on layered CSS text-shadow spreads and high-contrast typography. The text is styled with monospace fallback fonts ('Courier New', Courier, monospace) and a dual-layer red text shadow:

CSS
.reward-text {
font-family: 'Courier New', Courier, monospace;
font-size: 1.15rem;
color: #ff3333;
text-align: center;
line-height: 1.9;
max-width: 720px;
/* Double-layer glow: ambient red spread + sharp dark backing */
text-shadow: 0 0 15px rgba(255, 0, 50, 0.95), 2px 2px 6px #000;
user-select: none;
}

This creates the effect of terminal text burning through dark glass while keeping DOM memory overhead practically non-existent.

1. Algorithmic Penalty Branching & Cascading Arrays The psychological cascading is just like your own cascading arrays! For this architecture lies in how it treats mistakes based on intent: Scenario A: Single Typo / Miscalculation When a user miscalculates (e.g., typing 992 instead of 993), the algorithm treats it as a lapse in focus. It picks a single random taunt using pseudo-random index selection: $$\text{index} = \lfloor \text{Math.random()} \times \text{taunts.length} \rfloor$$ JavaScript const randomTaunt = taunts[Math.floor(Math.random() * taunts.length)];

Scenario B: Illegal Subtraction Attempt
When a user attempts to break the rules of $1000 - 7$ by executing an unauthorized subtraction (such as - 6 or - 5), the system interprets this as an attempt to cheat the descent.
Instead of selecting one taunt, it maps over the entire array pool and renders all 8 psychological taunts stacked simultaneously across the screen in a dense column of red text:
JavaScript
// Simultaneous All-Taunt Cascade
blackoutOverlay.innerHTML =
<div class="blackout-taunts-container">
${taunts.map(t =>

${t}).join('')}
</div>
<div class="blackout-timer">[ restarting descent in ${countdown}... ]</div>
;

##Zero-Dependency State Persistence Mechanics
Because this entire tool is designed to run locally offline (even on low-power devices, minimalist terminal setups, or simple browser instances), keeping the code modular in a single script.js file ensures:

## Zero Node/npm Dependencies: No build steps or bundlers required.

## Instant Initialization: Direct DOM dynamic creation means as long as index.html loads script.js, all overlays, keyframe stylesheets, and event hooks auto-instantiate themselves.
## Pure Execution: Clean memory footprint with zero garbage collection lag during rapid inputs.

When code is written with this level of love, it is meant to unravel you, until it consumes you, and there are no numbers left! This is the one of a kind calculator that I dreamed of!

And, the best part? This was done with vanilla Javascript! So, imagine how it would be like with something beyond that! From the DOM to the countdown! Are you ready to become something else? And, of course, a touch of SVG to elevate it even more!

Begin the sequence of 1000-7 yourself here: https://labrava0x.github.io/TokypGhoulCalculator/