DEV Community

Cover image for Moksha | Devlog #9 | Added Tutorial Button
Weird Codes
Weird Codes

Posted on

Moksha | Devlog #9 | Added Tutorial Button

#gamedev #html #javascript #webdev

मोक्ष Devlog #9 | Fixed Issue #51 — गुरु-दीक्षा अब Start Screen पर है 🕉️

"आचार्यं उपसंपद्य..." — गुरु के पास जाकर ही दीक्षा मिलती है।

अब गेम की start screen भी यही कहती है।

क्या बदला? (TL;DR)

इस commit (f0ae956) में एक छोटा लेकिन ज़रूरी UX fix किया —

"🕉️ गुरु-दीक्षा देखें" बटन को start screen पर officially add किया गया,

ताकि कोई भी खिलाड़ी tutorial दोबारा देख सके — बिना localStorage manually clear किए।

पृष्ठभूमि — समस्या क्या थी?

मोक्ष में गुरु-दीक्षा (tutorial system) पहले से ही था — 8-step scripture-style walkthrough, Sanskrit shlokas के साथ।

TutorialManager localStorage key moksha_tutorial_seen check करता है:

  • पहली बार: tutorial automatically trigger होता है।
  • वापस आने पर: skip हो जाता है — सही behavior।

लेकिन problem यह थी कि अगर कोई नया खिलाड़ी tutorial miss कर दे, या intentionally दोबारा देखना चाहे — तो कोई UI रास्ता नहीं था।

Tutorial सिर्फ R key (rebirth) से trigger होता था, जो game के अंदर है।

Start screen पर कोई entry point नहीं था।

यह UX gap था। छोटा, पर असली।

Fix — क्या किया गया?

1. index.html — नया बटन जोड़ा 

<!-- गुरु-दीक्षा — पहले खिलाड़ियों के लिए tutorial reset button -->
<button id="tutorial-btn" disabled
    style="margin-top:14px; ...">
    🕉️ गुरु-दीक्षा देखें
</button>
Enter fullscreen mode Exit fullscreen mode

disabled attribute जानबूझकर रखा — बटन तभी enable होगा जब audio और fonts fully load हो जाएँ।

यही behavior start-btn का है — consistency के लिए दोनों readiness-gated हैं।

2. src/audio.js — readiness gate में tutorial-btn शामिल 

// tutorial-btn भी साथ ही enable — दोनों readiness-gated हैं
const tutorialBtn = document.getElementById('tutorial-btn');
if (tutorialBtn) tutorialBtn.disabled = false;
Enter fullscreen mode Exit fullscreen mode

finalizeReadiness() में यह line जोड़ी — जब game "high/low mode" decide करता है,

उसी moment दोनों buttons unlock होते हैं।

3. src/main.js — tutorial button का logic 

tutorialBtn?.addEventListener('click', () => {
    if (isGameStarted) return;
    AM?.ensureAudio();
    // localStorage key हटाएँ — TutorialManager.start() इसे check करता है
    try { localStorage.removeItem('moksha_tutorial_seen'); } catch (_) {}
    isGameStarted = true;
    document.getElementById('start-screen')?.remove();
    tutorial.start(engine.player.x);
    lastTime = performance.now();
    setTimeout(() => { _tutorialClickReady = true; }, 600);
    requestAnimationFrame(gameLoop);
});
Enter fullscreen mode Exit fullscreen mode

Flow:

  1. localStorage से moksha_tutorial_seen key remove करो
  2. Start screen हटाओ
  3. tutorial.start() call करो — अब यह guaranteed fresh tutorial देगा
  4. 600ms ghost-click guard — same pattern जो startBtn में है

4. style.css — secondary outlined visual style 

#tutorial-btn {
    color: #FFA600;
    border: 1.5px solid rgba(255, 140, 0, 0.70);
    border-radius: 6px;
    transition: transform 0.18s ease, border-color 0.18s ease, ...;
}

#tutorial-btn:not(:disabled):hover {
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.35);
    transform: scale(1.04);
}

#tutorial-btn:disabled {
    opacity: 0.30;
    cursor: not-allowed;
    filter: grayscale(0.6);
}
Enter fullscreen mode Exit fullscreen mode

start-btn एक filled/primary button है (orange background)।

tutorial-btn एक outlined/secondary button — same color family, कम visual weight।

Hierarchy clear: "खेल प्रारंभ करें" पहले, "गुरु-दीक्षा देखें" बाद में।

5. भाषा-toggle support

setStartScreenLanguage() में tutorial button text भी update होता है:

if (tutorialBtn) tutorialBtn.textContent = copy.tutorialButton ?? '🕉️ गुरु-दीक्षा देखें';
Enter fullscreen mode Exit fullscreen mode

हिंदी/English language toggle के साथ यह बटन भी switch होगा — बाकी UI के साथ।

6. Bonus fixes इसी commit में

Bug Fix
last.Time → lastTime typo (rebirth पर timer reset fail) lastTime = performance.now()
_tutorialClickRead → _tutorialClickReady typo (canvas click dismiss fail) variable नाम सही किया
Weired Codes → Weird Codes meta[author], credits div, HUD tooltip में normalize किया

Design Decision — Tutorial क्यों Optional रखा?

गुरु-दीक्षा tutorial skip नहीं होती पहली बार — यह intentional design है।

लेकिन start screen से directly enter करने का option देना means:

  • नए player को पहले context मिलती है, फिर action
  • Returning player को दोबारा सीखने का अधिकार है
  • कोई force नहीं — startBtn अभी भी directly game में ले जाता है

यह Vedic principle के अनुसार भी है:

"गुरु के पास जाना choice है — पर जो जाता है, उसे ज्ञान मिलता है।"

Files Changed

File +Lines -Lines क्या बदला
index.html +18 -7 tutorial-btn HTML, element IDs, credits fix
src/audio.js +3 0 readiness gate में tutorial-btn enable
src/main.js +19 -2 tutorialBtn listener, 2 typo fixes
style.css +29 0 tutorial-btn CSS (outlined secondary style)

अगला कदम

  • [ ] Language toggle (i18n) — startScreenCopy.tutorialButton Hindi/English strings
  • [ ] Mobile touch controls fix — #touch-controls outside scaled container
  • [ ] Firefox roundRect polyfill guard

मोक्ष — itch.io पर खेलें | GitHub

Human-designed, AI-assisted — Weired Codes

Top comments (0)