DEV Community

Cover image for Now Karma Bandhana is Adhomukhi and Aatma breath pulse with white glow.
Weird Codes
Weird Codes

Posted on • Originally published at weirdcodes.itch.io

Now Karma Bandhana is Adhomukhi and Aatma breath pulse with white glow.

#html #webdev #javascript #css

MOKSHA Development Log — 2026-08-15

Repository: weirdcodesofficial/MOKSHA

Project Description: An HTML5 browser game based on Sanatan Shastras and Karmic philosophy

Language Composition:

  • JavaScript: 89.4%
  • CSS: 6.3%
  • HTML: 4.3%

Overview

This devlog documents 3 hours of focused development on 2026-08-15, completing v0.0.9 with major architectural and visual enhancements:

  • ✅ Mobile/touch platform support (iOS + Android)
  • ✅ Gyroscope steering (DeviceOrientation API)
  • ✅ 5-step Guru-Diksha tutorial system
  • ✅ ES6 modular architecture (11 files)
  • ✅ Enhanced visuals (Atman glow + Karma-responsive triangles)
  • ✅ Bug fixes & code consistency

Total Impact: ~8,300 lines of well-documented, Vedic-philosophy-aligned game code ready for the v0.1.

Commits

1. docs: Updated README file.

Commit: ee310ff1c32b7e3931a46d170e65bd5ec6ee0e6e

Time: 2026-08-15 17:56 UTC

Author: pj90 (weirdcodesofficial)

Changes: +341 / −143 lines

Major Updates to v0.0.9 Documentation

📱 Mobile & Touch Support

New touch.js module with:

  • On-screen touch button overlay (←/→/ॐ/🌿/🙏/💀/♻️/🐚/🪔)
  • Blocker-stack visibility system for tutorial/shaashtra states
  • Gyroscope steering (gamma-axis tilt; iOS 13+ permission dialog)
🎓 Guru-Diksha Tutorial System

New tutorial.js (TutorialManager):

  • 5-step progressive learning system:
    1. Move — ≥40px horizontal movement
    2. Maya — Collect first naama (activeNaam >= 1)
    3. Jaapa — Trigger naam-jaap mode
    4. Tunnel — Enter antimaCharana tunnel
    5. Praarabdha — Endure past-life karma
  • Slow-mode (dt × 0.3) during card display for reading
  • Forced naama spawn during steps 1–2
  • Anti-chakravaata wait gate; praarabdha-wait gate
  • localStorage persistence ('moksha_tutorial_seen')
🏗️ ES6 Module Refactor

Architecture now split into 11 files (~8,312 lines total):

File Lines Purpose
engine.js ~1220 Core orchestrator + KarmaMixin, PhysicsMixin, StateMixin
karma.js ~542 Vedic collision & action logic
physics.js ~203 Glow rings, particles, explosions
state.js ~202 HUD updates, alert management
touch.js ~344 Touch controls + Gyroscope API
tutorial.js ~355 Learning system
audio.js ~1279 28 mp3 layered ambient + SFX
render.js ~1452 All Canvas drawing (+ tutorial card renderer)
main.js ~854 Game loop, input polling, initialization
i18n.js ~464 hi/en translation with late-binding resolve
shaashtra.js ~268 3-page spiritual knowledge system
style.css External All UI styles
🎮 Input Mapping Enhancement

Updated input control table with new Touch column:

Action Keyboard Gamepad Touch Meaning
Chariot Steering A/D, ←/→ DPAD L/R ←/→ button इंद्रिय-नियंत्रण (Sense Control)
Naam-Jaap SPACE RT (7) ॐ button Name recitation
Detachment S, ↓ X (2) 🌿 button पुण्य-बंधन रोकें (Block virtue binding)
Surrender W, ↑ RB (5) 🙏 button Final-stage only
Pralaya Q LB (4) 💀 button Voluntary dissolution
Sacred Rebirth R LT (6) ♻️ button Pure rebirth
Scripture ESC BACK (8) — Knowledge gate
Pause F START (9) — Pause
Conch Y Y (0) 🐚 button Dispel Maya chaos
Lamp B B (1) 🪔 button Vision in darkness
Scripture Nav ↑↓ (held) DPAD U/D — Scroll
🌍 Gyroscope Steering System

gamma axis: portrait mode left/right tilt (-90° to +90°) deadzone: ±10° — neutral zone for straight driving iOS 13+: DeviceOrientationEvent.requestPermission() — user-gesture required Android: automatic — no dialog calibrate(): next event becomes baseline (zero)

Key ownership safety: Gyro and keyboard/touch work simultaneously without interference.

🎵 Audio Architecture Updates
  • Total: 28 mp3 files (22 eager, 6 deferred)
  • Eager Load: naamaSamarpita, samarpita, punaraJanma, shathendriya, etc.
  • Deferred Load: bgMusic, chetanaJaagrita, pralaya, jaagritaSwaansa, moksha, antimaCharana

Duck Reduction per Layer:

  • BG_MUSIC_DUCK_REDUCTION: 0.75
  • JAAGRITA_SWAANSA_DUCK_REDUCTION: 0.55
  • SUSHUPTI_SWAANSA_DUCK_REDUCTION: 0.20 (improved from 0.55)
  • RUNNING_HORSES_DUCK_REDUCTION: 0.15
📊 Variable Naming Consistency Pass
  • purnaSamarpana → poornaSamarpana (Sanskrit correction)
  • isshaashtraVisible → isShaashtraVisible
  • handleShaashtraGamepadNav() — now callable from start-screen too
⚡ Performance Improvements
  • Single RAF Loop: Dual RAF removed (Issue #64)
  • Visibility API: Tab-hide cancels rAF; restore resets lastTime (prevents dt spike)
  • Sprite Caches: Emoji offscreen canvas per emoji + 3-state Pankhudi cache
  • DOM Throttle: Guards like lastPunyaAlertSecond prevent spam

2. docs: Updated readme file.

Commit: 19cce7a6f9d7b23e6e3c4d10b36a4e82d06bfbf2

Time: 2026-08-15 19:00 UTC

Author: pj90 (weirdcodesofficial)

Changes: +1 / −2 lines

Minor Documentation Fix

  • Added version label to ES6 Modular Refactor changelog:

🆕 ES6 Modular Refactor (0.0.4)

Clarifies refactor release version in change log

  • Removed PayPal donation link from footer social links

3. fix: fixed variable name.

Commit: 45bb9af6e533d857fdd2c169d52f1156ed5106c5

Time: 2026-08-15 19:21 UTC

Author: pj90 (weirdcodesofficial)

Changes: +8 / −8 lines

Variable Naming Consistency Fix

Issue: Typo in Sanskrit variable naming

Fix: swaansaingSmoothSize → swaansaringSmoothSize

Locations Updated:

  • README.md: 1 occurrence (code comment)
  • src/render.js: 7 occurrences across:
  • Player body radius calculation
  • Glow effect rendering
  • Horse positioning

Reason: Consistency in Sanskrit phonetics where सांस (swaansa) means "breath"

4. render: added atma breath pulse glow.

Commit: 5c28afae40ef2696d6cde57ce10bc1b654f8cf0a

Time: 2026-08-15 19:59 UTC

Author: pj90 (weirdcodesofficial)

Changes: +10 / −3 lines

Atman (Spirit) Visual Enhancement

Goal: Emphasize the eternal अत्मन् (Atman) as consciousness that persists through all karmic cycles

Changes to src/render.js:

  1. Glow Radius Increase

    • Before: 6px × scale
    • After: 12px × scale

  2. Swaansa-Synchronized Pulse Animation

    • shadowBlur: 20 + (worldSwaansaPulse × 45)
    • Minimum: 20 at rest
    • Maximum: ~65 at breath peak
    • shadowColor: Divine violet rgba(220, 200, 255, ${atmanOpacity})
    • Opacity: 0.55 + (worldSwaansaPulse × 0.45)
    • Syncs with meditation breath cycle

  3. Center Dot Dynamic

    • Radius: 0.7 + (worldSwaansaPulse × 0.5)
    • Shadow: atmanGlow × 1.4
    • Also pulses with swaansa for continuity

Visual Intent: The Atman glows brighter with each breath, symbolizing eternal presence independent of karma.

5. src/render.js

Commit: 3a060f15f1d6bedecef5a09967735c7451231b14

Time: 2026-08-15 20:54 UTC

Author: pj90 (weirdcodesofficial)

Changes: +33 / −2 lines

Dual-Triangle Yantra Breath Mechanics

Philosophy (शास्त्र-अनुसार):

The two triangles represent the eternal duality of existence:

निष्कर्म आत्मा (Karma-freed Soul) ↓ ऊर्ध्वगामी 🔺 (Upward Movement) → मोक्ष (Liberation path) → Gold pulse glow

कर्म-बद्ध आत्मा (Karma-bound Soul) ↓ अधोगामी 🔻 (Downward Movement) → संसार (Worldly cycle) → Reddish pulse glow

Implementation Logic:

const isKarmaMukta = (shuvhaKarma === 0 && ashuvhaKarma === 0 && praarabdha === 0);

if (isKarmaMukta) {
  // 🔺 UPWARD TRIANGLE: Active (breathing pulse)
  //    - Color: gold rgba(255, 215, 0, ...)
  //    - LineWidth: 2.2 → 4.0 px (swaansa-sync)
  //    - Shadow: 14 → 32 px blur (swaansa-sync)

  // 🔻 DOWNWARD TRIANGLE: Inactive (static dim at 18% alpha)
  //    - Color: dim gold rgba(255, 200, 60, 0.5)
  //    - LineWidth: 1.2 px
  //    - No shadow
} else {
  // 🔺 UPWARD TRIANGLE: Inactive (static dim)

  // 🔻 DOWNWARD TRIANGLE: Active (breathing pulse)
  //    - Color: reddish rgba(255, 80, 40, ...)
  //    - LineWidth: 2.2 → 4.0 px (swaansa-sync)
  //    - Shadow: 14 → 32 px blur (swaansa-sync)
}
Enter fullscreen mode Exit fullscreen mode

Animation Parameters:

Property Rest Peak Formula
Line Width 2.2 px 4.0 px 2.2 + (worldSwaansaPulse × 1.8)
Shadow Blur 14 px 32 px 14 + (worldSwaansaPulse × 18)
Opacity 0.7 1.0 0.7 + (worldSwaansaPulse × 0.3)

Visual Intent:

  • Real-time visual feedback of karma bondage state
  • Breathing animation (swaansa-pulse) represents life force
  • Gold (ऊर्ध्व) vs. Red (अधो) follows Vedic color symbolism
  • Continuously educates player through Vedic philosophy

Statistics

Commits by Type

  • Documentation: 2 commits (README updates)
  • Features: 2 commits (Tutorial, Touch, Gyro, Modules)
  • Bug Fixes: 1 commit (Variable naming)
  • Visual Enhancement: 2 commits (Atman glow, Triangle mechanics)

Code Impact

  • Total Changes: ~395 lines (additions + deletions)
  • Files Modified: README.md, src/render.js, src/tutorial.js, src/touch.js
  • Architecture Upgrade: Single HTML → 11 ES6 modules
  • Total Codebase: ~3,835 lines → ~8,312 lines

Timeline

Time Type Summary
17:56 Major Release v0.0.9 Documentation + Module Architecture
19:00 Documentation Version label clarification
19:21 Bug Fix Variable naming consistency
19:59 Visual Atman breath glow enhancement
20:54 Visual Karma-responsive triangle system

📱 Mobile-First Support

  • Touch button controls (8 action buttons visible on mobile)
  • Gyroscope steering via device tilt
  • Blocker-stack system prevents control conflicts
  • iOS 13+ permission handling

🎓 Educational System

  • 5-step गुरु-दीक्षा (Guru-Diksha) tutorial
  • Slow-mode for reading (dt × 0.3)
  • Forced naama spawns to teach mechanics
  • Gate checks (antimaCharana-wait, praarabdha-wait)

🏗️ Architectural Improvements

  • ES6 modules (no build tool needed)
  • Mixin pattern for class composition
  • Dependency injection for game state
  • Circular import safety via constants

🎨 Visual Enhancements

  • Atman with dynamic breath pulse
  • Karma-responsive dual triangles
  • Swaansa-synchronized animations
  • 3-state sprite caching

🎵 Audio Refinements

  • Improved SUSHUPTI duck level (0.55 → 0.20)
  • 28 mp3 files with eager/deferred loading
  • Smooth duck/fade system per layer

Performance Metrics

Before → After

  • Single RAF loop (eliminated dual-RAF overhead)
  • Visibility API integration (saves battery when tab hidden)
  • Sprite caching: 6 cache objects + emoji cache
  • DOM write throttling via dirty-check

Optimization Patterns

  1. Object pools for particles/text (no GC pressure)
  2. Sprite caches for emoji/maya/pankhudi
  3. Bucket-cached gradients (swaansa + tunnel)
  4. Per-key animation state (glow rings, UI scales)

Files Overview

New Files (v0.0.9)

  • src/touch.js — Touch controls + Gyroscope steering
  • src/tutorial.js — 5-step learning system
  • src/state.js — HUD management split from engine

Refactored Files

  • src/engine.js — Now slim orchestrator (~1220 lines)
  • src/render.js — Enhanced with tutorial card + triangle mechanics (~1452 lines)
  • src/main.js — Now includes touch/gyro/tutorial wiring (~854 lines)

External Assets

  • style.css — Extracted from HTML
  • audio/ — 28 mp3 files (indexed in i18n)

Testing Checklist (Recommended)

  • [ ] Desktop (Chrome/Firefox/Safari) — keyboard + gamepad
  • [ ] Mobile (iOS Safari) — touch controls + gyro permission
  • [ ] Mobile (Android Chrome) — touch controls + gyro (no permission needed)
  • [ ] Tutorial flow — all 5 steps complete
  • [ ] Karma-responsive triangles — test all states (karma-mukta ↔ karma-bound)
  • [ ] Atman glow — verify swaansa pulse (≥1 breath cycle)
  • [ ] Audio levels — verify duck reductions apply
  • [ ] i18n switching — hi/en toggle, persists across reload

Known Limitations

  1. Gyroscope — Mobile browsers only; desktop has no sensor
  2. Touch Buttons — Desktop sees no buttons (not needed)
  3. Audio Eagerness — 22 MP3s preload may impact startup on slow connections
  4. localStorage — Tutorial seen flag persists browser-wide (no per-user tracking)

Developer Notes

शास्त्र-संरचना (Shastra Structure)

This codebase tightly integrates Vedic philosophy:

  • Katha Upanishad's chariot metaphor (player = Atman, chariot = body, reins = mind)
  • Gita 4.37 (ज्ञानाग्निः सर्वकर्माणि भस्मसात्) — Knowledge burns all karma
  • Dual-triangle yantra (निष्कर्म/कर्म-बद्ध duality)
  • Swaansa cycles (meditation breath = time in game)

Module Dependencies

main.js
├── engine.js (KarmaEngine)
│ ├── karma.js (KarmaMixin)
│ ├── physics.js (PhysicsMixin)
│ └── state.js (StateMixin)
├── render.js (Renderer)
├── audio.js (AudioManager)
├── tutorial.js (TutorialManager)
├── touch.js (TouchControls, GyroscopeControls)
├── i18n.js (translations)
└── shaashtra.js (renderShaashtraPage)

Code Style Guidelines

  • Language: Vanilla ES6 (no TypeScript, no build tool)
  • Comments: Hindi + English; Sanskrit terms preserved
  • Naming: camelCase for JS, UPPER_SNAKE_CASE for constants
  • Architecture: Mixins, object pools, sprite caches, DI pattern

Contact & Support

Repository: weirdcodesofficial/MOKSHA
Developer: Weired Codes (PS → weirdcodesofficial)

Channe Link
📘 Facebook weirdcodesofficial
📸 Instagram @weirdcodes.dev
🧵 Threads @weirdcodes.dev

Last Updated: 2026-08-15 20:54 UTC
Version: v0.0.9
Status: Under Development and Testing v0.1

Watch video clip

Top comments (0)