DEV Community

Cover image for Tutorial UI/UX Update
Weird Codes
Weird Codes

Posted on

Tutorial UI/UX Update

#javascript #gamedev #webdev #tutorial

Tutorial Card (2/5) Text Update.

Tutorial Card (5/5) UX Update.

Tutorial Card (5/5) UX Update.

MOKSHA Development Log with Code Changes

Changes After Commit 3b187b1b35ccfc62a2735a02ac7e2a77e6fc4000

Date Range: August 11-12, 2026

Total Commits: 13

Primary Focus: Tutorial text refinements and UI/UX timing optimizations

📝 Tutorial Text Updates

Commit 4319fe5591da3fd91793f7073889a238d6ef51de - Tutorial: Updated tutorial text

Changes to src/i18n.js:

Maya tutorial card (2/5) Hindi text update:

- 'tutorial.maya.task': 'ऊपर से गिरती वस्तु को स्पर्श करो।\nसुनहरी "ॐ" — नाम है, इसे ग्रहण करो।',
+ 'tutorial.maya.task': 'ऊपर से गिरती माया को समर्पित/संचित करो।\nसुनहरी "ॐ" — नाम है, इसे ग्रहण करो।',
Enter fullscreen mode Exit fullscreen mode

Rationale: Changed instruction from "touch" (स्पर्श करो) to "dedicate/accumulate" (समर्पित/संचित करो) to align with the game's philosophical mechanics.

Commit 8ff852b3f09add3c67192be85060a841920d25ab - Text: Fixed text in card(2/5)
Tutorial card (2/5) additional text refinements applied.

Commit 13cbe93b890e969a1dc5f8c903c75c3a51987fab - Text: Updated english text of tutorial card (2/5)
English translation updates for consistency with Hindi text semantics.

⏱️ UX Timing Optimizations

Commit 2d92f8a37ec963a39a2db5c112cac51ed2eaa449 - UX: Fix prarabdha card appearance timing
Key Changes to style.css:

Canvas and HUD scaling improvements for responsive mobile display:

/* Mobile layout — canvas top पर, touch controls नीचे */
@media (hover: none) and (pointer: coarse) {
    body {
        align-items: center;       /* canvas centered रहे */
        height: 100dvh;            /* dynamic viewport — URL-bar को exclude करे */
        overflow: hidden;
    }

    #gameContainer {
        transform-origin: center center; /* default restore */
    }
}
Enter fullscreen mode Exit fullscreen mode

Touch Controls Positioning:

#touch-controls {
    position: relative;          /* normal flow में — canvas के नीचे रहेगा */
    display: none;               /* JS से touch device detect होने पर flex बनेगा */
    will-change: opacity;
    width: 100%;
    padding: 12px 10px;
    padding-bottom: 12px;
    margin-bottom: 34px;         /* fixed footer की height — overlap नहीं होगा */
    background: transparent;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    z-index: 10;
    pointer-events: none;
    user-select: none;
}
Enter fullscreen mode Exit fullscreen mode

Commit 4513ea255b8170bf883623835598467b8e237415 - UX: Fixed Bhakti Marga Card timing
Timing adjustments for Bhakti path card animations.

🎮 Game Loop & Tutorial Integration

Key Code from src/main.js (Commit 4319fe5591da3fd91793f7073889a238d6ef51de):
Tutorial Initialization:

// ====================== TUTORIAL INIT ======================
const tutorial = new TutorialManager(
    (...args) => engine._forceSpawnMaya?.(...args),
    WIDTH,
    HEIGHT
);

// Tutorial start on game begin
startBtn?.addEventListener('click', () => {
    if (isGameStarted) return;
    AM?.ensureAudio();
    touch.unblock('start');   // start-screen हटा — controls दिखाएँ
    isGameStarted = true;
    document.getElementById('start-screen')?.remove();
    _initDefaultGyroSteering(); // iOS — user-gesture पर tilt default चालू
    // ── प्रथम जन्म alert — Issue #73 ──
    engine._alertKey('prathamaJanma', '🌅', 'achievement');
    engine.notifyTimer = 120;
    engine.notifyText  = t('notify.prathamaJanma');
    // गुरु-दीक्षा — पहली बार खेलने पर tutorial शुरू
    tutorial.start(engine.player.x);
    lastTime = performance.now();
    // Ghost click guard — 600ms बाद canvas click enable
    setTimeout (() => {_tutorialClickReady = true;}, 600);
    _rafId = requestAnimationFrame(gameLoop);
});
Enter fullscreen mode Exit fullscreen mode

Tutorial Completion Check:

// tutorial completion हर frame check करें
tutorial.checkCompletion({
    player:         engine.player,
    activeNaam:     engine.activeNaam,
    isNaamaJaapa:   engine.isNaamaJaapa,
    playerInTunnel: engine.playerInTunnel,
});
// tutorial card visible होने पर touch controls hide
touch.syncWithTutorial(tutorial.hasActiveCard());
Enter fullscreen mode Exit fullscreen mode

🌐 Internationalization (i18n) Core

src/i18n.js Structure (Excerpt):

export const LANG_STORAGE_KEY = 'moksha_lang';
export const SUPPORTED_LANGS = ['hi', 'en'];
export const DEFAULT_LANG = 'hi';

const STRINGS = {
    hi: {
        'start.title': 'मोक्ष',
        'start.description': 'जीवन और मृत्यु के चक्र से मुक्त हों.\nक्या आप तैयार हैं?',
        'start.button': 'खेल प्रारंभ करें',
        // 134 keys total...
        'tutorial.maya.credit': '— योगवासिष्ठ',
        'tutorial.maya.task': 'ऊपर से गिरती माया को समर्पित/संचित करो।\nसुनहरी "ॐ" — नाम है, इसे ग्रहण करो।',
        'tutorial.maya.hint': 'माया पहचानना — पहला कदम है।',
    },
    en: {
        'start.title': 'MOKSHA',
        'start.description': 'Break free from the cycle of life and death.\nAre you ready?',
        'start.button': 'START GAME',
        'tutorial.maya.credit': '— Yogavashishtha',
        'tutorial.maya.meaning': 'This universe is a prison of Maya; it deludes the entire world.',
        'tutorial.maya.task': 'Touch the object falling from above.\nThe golden "ॐ" is the Naama — receive it.',
        'tutorial.maya.hint': 'Recognising Maya — that is the first step.',
    },
};

// Language persistence & switching
export function setLang(lang) {
    const next = _normalizeLang(lang);
    if (next === _currentLang) return _currentLang;
    _currentLang = next;
    _writeStoredLang(next);
    _listeners.forEach((fn) => {
        try { fn(next); } catch (_) { /* ignore */ }
    });
    return _currentLang;
}

// Translation resolver with parameter interpolation
export function t(key, params = null) {
    let str = STRINGS[_currentLang]?.[key] ?? STRINGS[DEFAULT_LANG]?.[key] ?? key;
    if (params) {
        str = str.replace(/\{(\w+)\}/g, (match, token) => 
            (params[token]) !== undefined ? String(params[token]) : match);
    }
    return str;
}
Enter fullscreen mode Exit fullscreen mode

🎨 UI/UX Styling Improvements

Canvas Container with Sci-Fi Border (from style.css):

#gameContainer {
    position: relative;
    width: 600px;
    height: 680px;
    border: 2px solid rgb(255, 136, 0); /* sci-fi holo-tech look — हल्की orange glow */
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.98) 65%);
    border-radius: 0; /* यंत्र-भूपुर वर्गाकार-कोण */
    box-shadow:
        inset 0 0 28px rgba(255, 255, 255, 0.05),
        inset 0 0 120px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    transform-origin: center center;
    flex-shrink: 0;
    overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

HUD Stat Lines with Dynamic Colors:

.stat-line {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 11px 5px 13px;
    line-height: 1;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 2px 0 0 0 currentColor;
}

/* Per-element semantic coloring */
#naama        { color: #ffffff; }          /* ॐ नाम     — शुद्ध श्वेत */
#punya        { color: #32ff80; }          /* 🌿 पुण्य   — दिव्य हरा  */
#paap         { color: #ff2244; }          /* 🥀 पाप    — रक्त-वर्ण   */
#samarpita    { color: #fb923c; }          /* 🙏 समर्पित — नारंगी     */
Enter fullscreen mode Exit fullscreen mode

📊 Summary of Changes

Commit Type Focus Files Modified
4319fe5 Text Tutorial Maya card Hindi text src/i18n.js
8ff852b Text Card (2/5) text fixes src/tutorial.js
13cbe93 Text English tutorial translations src/i18n.js
4bfb12f Text Updated tutorial card text Multiple
101f323 Text Hindi tutorial card text src/i18n.js
9e6eedc Merge PR #106 tutorial merge —
65e2d13 Text Naama Jaapa error text src/i18n.js
567792a Merge PR #104 merge —
4513ea2 UX Bhakti Marga timing src/main.js
0e6e2be Merge PR #103 merge —
2d92f8a UX Prarabdha card timing style.css
056cd09 Merge PR #102 merge —
f7620e8 Merge PR #101 merge —

🔑 Key Technical Improvements

  1. Responsive Touch Controls — Position-relative flow prevents overlap with canvas
  2. Dynamic Viewport Handling — Using 100dvh for mobile URL-bar awareness
  3. i18n System — 134 keys × 2 languages with localStorage persistence
  4. Tutorial Integration — Frame-by-frame completion checks with gesture guards
  5. Timing Optimization — Card appearance animations synced with game state.

Total Lines Changed: ~150 across core files (i18n.js, main.js, style.css, tutorial content)

Top comments (0)