DEV Community

Cover image for Added Punarjanma Button at Pralaya Screen.
Weird Codes
Weird Codes

Posted on • Originally published at weirdcodes.itch.io

Added Punarjanma Button at Pralaya Screen.

#webdev #javascript #gamedev #html

मोक्ष Devlog — प्रलय के बाद पुनर्जन्म: End Screen पर नया बटन

"मृत्योर्मा अमृतं गमय।"
मृत्यु से मुझे अमरत्व की ओर ले चलो।
— बृहदारण्यक उपनिषद्

Series: मोक्ष Devlog — Building a Vedic Karma Game
Version: v0.0.9+
Issue: #68 — Add punarjanma button to pralaya screen

शास्त्रीय संदर्भ (Vedic Context)

संसार-चक्र में प्रलय और मोक्ष — दो अंत हैं। मोक्ष = पूर्ण मुक्ति। प्रलय = अधूरी यात्रा।

कठोपनिषद् का नचिकेता-प्रसंग हमें बताता है: जो आत्मा माया में फँसी रह जाती है, वह पुनर्जन्म लेती है। यह चक्र तब तक जारी रहता है जब तक चेतना-जागृति न हो।

गेम में यही तीन अंत हैं:

अंत कारण पुनर्जन्म बटन?
🛑 प्रलय खिलाड़ी ने Q दबाया — स्वैच्छिक त्याग ✅ हाँ
♻️ संसार-पुनर्जन्म समय समाप्त, कर्म शेष ✅ हाँ
💥 मोक्ष पूर्ण मुक्ति ❌ नहीं — शास्त्र-विरुद्ध

मोक्ष प्राप्त आत्मा पुनर्जन्म नहीं लेती। इसलिए मोक्ष screen पर button नहीं।

समस्या (Problem)

End screen पर केवल एक text hint था:

'R' दबाएं जीवन रथ को पुनः आरंभ करने के लिए
Enter fullscreen mode Exit fullscreen mode

Mobile users और नए players के लिए यह invisible था। Keyboard shortcut जानना जरूरी था — कोई clickable option नहीं।

समाधान (Solution)

4 files में 6 छोटे changes — एक ♻️ पुनर्जन्म button जो:

  • प्रलय और पुनर्जन्म screen पर दिखता है
  • मोक्ष screen पर छिपा रहता है
  • engine.reset() call करके नया जन्म-चक्र शुरू करता है

Files Changed

File Changes Type
index.html #punarjanma-btn button element जोड़ा HTML
src/main.js UI ref + click listener + i18n text JS
src/engine.js showEndScreen() में button visibility logic JS
src/i18n.js Hindi + English key जोड़ी i18n

Implementation

1. index.html — Button Element

#screen-overlay में restart-hint-text के नीचे:

<!-- पुनर्जन्म बटन — प्रलय/पुनर्जन्म screen पर; मोक्ष पर hidden रहेगा -->
<button id="punarjanma-btn"
    style="display:none;margin-top:24px;padding:12px 36px;font-size:16px;font-weight:700;
           font-family:'Noto Sans Devanagari',sans-serif;color:#fff;
           background:rgba(248,113,113,0.12);border:1.5px solid #f87171;
           border-radius:8px;cursor:pointer;letter-spacing:1px;
           box-shadow:0 0 18px rgba(248,113,113,0.25);
           transition:transform 0.18s ease,box-shadow 0.18s ease;">
    ♻️ पुनर्जन्म
</button>
Enter fullscreen mode Exit fullscreen mode

Button display:none से शुरू होता है — showEndScreen() इसे conditionally दिखाता है।

2. src/main.js — तीन बदलाव

UI reference:

// पहले:
shastraOverlay:  document.getElementById('shastra-overlay'),

// बाद:
shastraOverlay:  document.getElementById('shastra-overlay'),
punarjanmaBtn:   document.getElementById('punarjanma-btn'),
Enter fullscreen mode Exit fullscreen mode

Click listener:

// ── पुनर्जन्म बटन (end screen) — प्रलय/पुनर्जन्म के बाद नया चक्र ──
document.getElementById('punarjanma-btn')?.addEventListener('click', () => {
    engine.reset(); lastTime = performance.now();
});
Enter fullscreen mode Exit fullscreen mode

i18n text update:

const punarjBtnEl = document.getElementById('punarjanma-btn');
if (punarjBtnEl) punarjBtnEl.textContent = t('end.punarjanmaBtn');
Enter fullscreen mode Exit fullscreen mode

3. src/engine.js — showEndScreen() में visibility logic 

if (reason === "FORCE STOPPED") {
    // प्रलय — पुनर्जन्म बटन दिखाएँ
    if (this._UI?.punarjanmaBtn)
        this._UI.punarjanmaBtn.style.display = 'inline-block';
    // ...
} else if (this.won) {
    // मोक्ष — पुनर्जन्म शास्त्र-विरुद्ध; बटन छिपाएँ
    if (this._UI?.punarjanmaBtn)
        this._UI.punarjanmaBtn.style.display = 'none';
    // ...
} else {
    // संसार-पुनर्जन्म — पुनर्जन्म बटन दिखाएँ
    if (this._UI?.punarjanmaBtn)
        this._UI.punarjanmaBtn.style.display = 'inline-block';
    // ...
}
Enter fullscreen mode Exit fullscreen mode

4. src/i18n.js — दोनों भाषाओं में key 

// Hindi
'end.punarjanmaBtn': '♻️ पुनर्जन्म',

// English
'end.punarjanmaBtn': '♻️ Punarjanma',
Enter fullscreen mode Exit fullscreen mode

शास्त्र-संगति (Shastra Accuracy)

यह बदलाव कठोपनिषद् के संसार-चक्र सिद्धांत के अनुरूप है:

  • प्रलय और पुनर्जन्म → आत्मा नया शरीर लेती है → button ✅
  • मोक्ष → आत्मा जन्म-मरण के चक्र से मुक्त → button ❌ 
शास्त्र-नियम: मोक्ष-प्राप्त आत्मा के लिए पुनर्जन्म का विकल्प नहीं।
Enter fullscreen mode Exit fullscreen mode

UX Impact

पहले बाद
Keyboard shortcut याद करनी पड़ती थी एक tap/click से नया चक्र
Mobile पर restart impossible without keyboard Mobile-friendly button
सभी 3 end states पर एक जैसा hint Contextual — मोक्ष पर button नहीं

Links

Human-designed, AI-assisted.
Developed by Weired Codes

Top comments (0)