Simplify onboarding around VIZ account login

Author: web3blind

app/js/i18n/en.js

@@ -27,6 +27,8 @@ var LangEN = {
     login_button: 'Enter the Realm',
     login_connecting: 'Connecting to the Realm...',
     login_back: '← Back to main page',
+    login_register_hint: 'If you do not have a VIZ account yet, register at start.viz.world',
+    onboarding_existing_account_notice: 'VIZ account found: {account}. No character is awakened yet — choose your path of magic.',
     error_empty_account: 'Enter your mage name.',
     error_no_mage_name: 'Enter your mage name.',
     error_empty_key: 'Enter your Magic Word.',

app/js/i18n/ru.js

@@ -27,6 +27,8 @@ var LangRU = {
     login_button: 'Войти в Мир',
     login_connecting: 'Связь с Миром устанавливается...',
     login_back: '← Вернуться на главную',
+    login_register_hint: 'Если аккаунта VIZ ещё нет, зарегистрируйтесь на start.viz.world',
+    onboarding_existing_account_notice: 'Аккаунт VIZ найден: {account}. Персонаж ещё не пробуждён — выберите путь магии.',
     error_empty_account: 'Введи имя мага.',
     error_no_mage_name: 'Введи имя мага.',
     error_empty_key: 'Введи Магическое Слово.',

app/js/ui/screens/landing.js

@@ -29,9 +29,6 @@ var LandingScreen = (function() {
                     '<button class="btn btn-primary btn-glow btn-large" id="btn-begin">' +
                         t('landing_cta') +
                     '</button>' +
-                    '<p class="landing-login-link">' +
-                        '<a href="#" id="btn-login-link">' + t('landing_login') + ' \u2192</a>' +
-                    '</p>' +
                 '</header>' +
                 '<section class="landing-cards" aria-label="Features">' +
                     '<div class="feature-card">' +
@@ -60,11 +57,6 @@ var LandingScreen = (function() {
         Helpers.$('btn-begin').addEventListener('click', function() {
             SoundManager.init();  // must be first — creates AudioContext inside user gesture
             SoundManager.play('tap');
-            Helpers.EventBus.emit('navigate', 'onboarding');
-        });
-        Helpers.$('btn-login-link').addEventListener('click', function(e) {
-            e.preventDefault();
-            console.log('Login link clicked, navigating to login screen');
             Helpers.EventBus.emit('navigate', 'login');
         });
         var btnRu = Helpers.$('landing-lang-ru');

app/js/ui/screens/login.js

@@ -35,6 +35,7 @@ var LoginScreen = (function() {
                         t('login_button') +
                     '</button>' +
                 '</form>' +
+                '<p class="login-subtitle">' + t('login_register_hint') + ': <a href="https://start.viz.world" target="_blank" rel="noopener noreferrer">start.viz.world</a></p>' +
                 '<p class="login-back">' +
                     '<a href="#" id="btn-login-back">' + t('login_back') + '</a>' +
                 '</p>' +
@@ -97,41 +98,35 @@ var LoginScreen = (function() {
             // Check if character exists (has Grimoire)
             var grimoire = VizAccount.parseGrimoire(accountData);
             if (grimoire && grimoire.class) {
-                // Restore character in StateEngine from grimoire (checkpoint has priority)
-                var state = StateEngine.getState();
-                if (!state.characters[account]) {
-                    var character = CharacterSystem.createCharacter(account, grimoire.name || account, grimoire.class);
-                    if (character) {
-                        // Restore level/xp from Grimoire cache
-                        if (grimoire.level && grimoire.level > 1) {
-                            character.level = grimoire.level;
-                            character.xp = grimoire.xp || 0;
-                            character.hp = GameFormulas.calculateMaxHp(character.className, character.level, CharacterSystem.getTotalStat(character, 'res'));
-                            character.maxHp = character.hp;
-                        }
-
-                        // Sync Magic Core from on-chain SHARES with heavy compression.
-                        // This keeps SHARES meaningful but prevents whales from becoming unbeatable.
-                        var effectiveShares = VizAccount.getEffectiveShares(accountData);
-                        var cappedShares = Math.min(effectiveShares, 1000000000000); // cap at 1,000,000 SHARES (6 decimals)
-                        CharacterSystem.updateCoreBonus(character, cappedShares);
-
-                        state.characters[account] = character;
-                        state.inventories[account] = state.inventories[account] || [];
-                        state.quests[account] = state.quests[account] || (typeof QuestSystem !== 'undefined' ? QuestSystem.createPlayerQuestState() : {});
-                        console.log('Character restored from grimoire (login):', grimoire.name, grimoire.class, 'Lv' + character.level, 'XP:' + character.xp, 'Core:' + character.coreBonus);
-                    }
-                } else {
-                    console.log('Character already in state from checkpoint, keeping checkpoint data');
-                }
-                // Existing character — go to home
+                _restoreCharacterFromGrimoire(account, accountData, grimoire);
                 Helpers.EventBus.emit('navigate', 'home');
             } else {
-                // No character yet — go to onboarding (class selection)
+                OnboardingScreen.startForAccount(account);
                 Helpers.EventBus.emit('navigate', 'onboarding');
             }
         });
     }
 
+    function _restoreCharacterFromGrimoire(account, accountData, grimoire) {
+        var state = StateEngine.getState();
+        if (!state.characters[account]) {
+            var character = CharacterSystem.createCharacter(account, grimoire.name || account, grimoire.class);
+            if (character) {
+                if (grimoire.level && grimoire.level > 1) {
+                    character.level = grimoire.level;
+                    character.xp = grimoire.xp || 0;
+                    character.hp = GameFormulas.calculateMaxHp(character.className, character.level, CharacterSystem.getTotalStat(character, 'res'));
+                    character.maxHp = character.hp;
+                }
+                var effectiveShares = VizAccount.getEffectiveShares(accountData);
+                var cappedShares = Math.min(effectiveShares, 1000000000000);
+                CharacterSystem.updateCoreBonus(character, cappedShares);
+                state.characters[account] = character;
+            }
+        }
+        state.inventories[account] = state.inventories[account] || [];
+        state.quests[account] = state.quests[account] || (typeof QuestSystem !== 'undefined' ? QuestSystem.createPlayerQuestState() : {});
+    }
+
     return { render: render };
 })();

app/js/ui/screens/onboarding.js

@@ -1,81 +1,23 @@
 /**
  * Viz Magic — Onboarding / Character Creation Flow
+ * New flow: after successful VIZ login without grimoire,
+ * the user only chooses a class for the existing VIZ account.
  */
 var OnboardingScreen = (function() {
     'use strict';
 
-    var step = 0;
     var selectedClass = '';
     var mageName = '';
 
     function render() {
         var el = Helpers.$('screen-onboarding');
         if (!el) return;
-        step = 0;
-        _renderStep(el);
+        _renderClassStep(el, Helpers.t);
     }
 
-    function _renderStep(el) {
-        var t = Helpers.t;
-        switch (step) {
-            case 0: _renderNameStep(el, t); break;
-            case 1: _renderClassStep(el, t); break;
-            case 2: _renderLoginStep(el, t); break;
-        }
-    }
-
-    function _renderNameStep(el, t) {
-        el.innerHTML =
-            '<div class="onboarding-step">' +
-                '<h1>' + t('onboarding_awaken_title') + '</h1>' +
-                '<p class="onboarding-text">' + t('onboarding_awaken_text').replace(/\n/g, '<br>') + '</p>' +
-                '<label for="mage-name-input" class="input-label">' + t('onboarding_name_prompt') + '</label>' +
-                '<input type="text" id="mage-name-input" class="input-field" ' +
-                    'aria-label="' + t('onboarding_name_prompt') + '" ' +
-                    'autocomplete="off" maxlength="50" value="' + Helpers.escapeHtml(mageName) + '">' +
-                '<div id="name-feedback" class="input-feedback" aria-live="polite"></div>' +
-                '<button class="btn btn-primary btn-large" id="btn-name-next" disabled>' +
-                    t('onboarding_next') +
-                '</button>' +
-            '</div>';
-
-        var input = Helpers.$('mage-name-input');
-        var feedback = Helpers.$('name-feedback');
-        var btn = Helpers.$('btn-name-next');
-
-        input.addEventListener('input', Helpers.debounce(function() {
-            mageName = input.value.trim();
-            if (!mageName) {
-                feedback.textContent = '';
-                btn.disabled = true;
-                return;
-            }
-            if (mageName.length < 2) {
-                feedback.textContent = t('onboarding_name_invalid');
-                feedback.className = 'input-feedback error';
-                btn.disabled = true;
-                return;
-            }
-            feedback.textContent = '\u2728 ' + t('onboarding_name_available');
-            feedback.className = 'input-feedback success';
-            btn.disabled = false;
-        }, 300));
-
-        btn.addEventListener('click', function() {
-            if (!mageName) return;
-            SoundManager.play('transition');
-            step = 1;
-            _renderStep(el);
-        });
-
-        // BUG 3 FIX: Re-validate on render when returning via Back button
-        if (mageName && mageName.length >= 2) {
-            feedback.textContent = '\u2728 ' + t('onboarding_name_available');
-            feedback.className = 'input-feedback success';
-            btn.disabled = false;
-        }
-
-        input.focus();
+    function startForAccount(account) {
+        selectedClass = '';
+        mageName = (account || '').trim();
     }
 
     function _renderClassStep(el, t) {
@@ -89,6 +31,7 @@ var OnboardingScreen = (function() {
         var html = '<div class="onboarding-step">' +
             '<h1>' + t('onboarding_class_title') + '</h1>' +
             '<p class="onboarding-text">' + t('onboarding_class_text').replace(/\n/g, '<br>') + '</p>' +
+            '<p class="onboarding-text">' + t('onboarding_existing_account_notice', { account: mageName || '' }) + '</p>' +
             '<div class="class-grid" role="radiogroup" aria-label="' + t('onboarding_class_title') + '">';
 
         for (var i = 0; i < classes.length; i++) {
@@ -107,9 +50,7 @@ var OnboardingScreen = (function() {
         html += '</div>' +
             '<div class="onboarding-buttons">' +
                 '<button class="btn btn-secondary" id="btn-class-back">' + t('onboarding_back') + '</button>' +
-                '<button class="btn btn-primary" id="btn-class-next" ' + (selectedClass ? '' : 'disabled') + '>' +
-                    t('onboarding_next') +
-                '</button>' +
+                '<button class="btn btn-primary" id="btn-class-next" ' + (selectedClass ? '' : 'disabled') + '>' + t('onboarding_next') + '</button>' +
             '</div></div>';
 
         el.innerHTML = html;
@@ -130,110 +71,48 @@ var OnboardingScreen = (function() {
         }
 
         Helpers.$('btn-class-back').addEventListener('click', function() {
-            step = 0;
-            _renderStep(el);
+            Helpers.EventBus.emit('navigate', 'login');
         });
 
         Helpers.$('btn-class-next').addEventListener('click', function() {
             if (!selectedClass) return;
             SoundManager.play('transition');
-            step = 2;
-            _renderStep(el);
+            _createCharacterAndFinish();
         });
     }
 
-    /**
-     * Create character locally and on chain, then navigate home.
-     * BUG 1 FIX: Also creates the character in StateEngine immediately
-     * so Hunt and other screens can find it without waiting for chain.
-     * BUG 2 FIX: Called directly when user is already logged in.
-     */
     function _createCharacterAndFinish() {
         var user = VizAccount.getCurrentUser();
+        if (!user) {
+            Helpers.EventBus.emit('navigate', 'login');
+            return;
+        }
 
-        // Create character locally in StateEngine so all screens see it immediately
+        var displayName = mageName || user;
         var state = StateEngine.getState();
-        var character = CharacterSystem.createCharacter(user, mageName, selectedClass);
+        var character = CharacterSystem.createCharacter(user, displayName, selectedClass);
         if (character) {
             state.characters[user] = character;
             state.inventories[user] = state.inventories[user] || [];
+            state.quests[user] = state.quests[user] || (typeof QuestSystem !== 'undefined' ? QuestSystem.createPlayerQuestState() : {});
         }
 
-        // Broadcast to chain
-        var actionData = VMProtocol.createCharAttuneAction(selectedClass, mageName);
+        var actionData = VMProtocol.createCharAttuneAction(selectedClass, displayName);
         VizBroadcast.gameAction(actionData, function(err2) {
             if (err2) {
                 console.log('Char attune broadcast error (may already exist):', err2);
             }
         });
 
-        // Save grimoire to blockchain so character persists across page reloads
-        VizAccount.updateGrimoire({ class: selectedClass, name: mageName }, function(err3) {
+        VizAccount.updateGrimoire({ class: selectedClass, name: displayName }, function(err3) {
             if (err3) {
                 console.log('Grimoire save error:', err3);
-            } else {
-                console.log('Grimoire saved to chain for', user);
             }
         });
 
         SoundManager.play('success');
         Helpers.EventBus.emit('navigate', 'home');
     }
 
-    function _renderLoginStep(el, t) {
-        // BUG 2 FIX: If user is already logged in, skip the login form
-        var currentUser = VizAccount.getCurrentUser();
-        if (currentUser) {
-            _createCharacterAndFinish();
-            return;
-        }
-
-        el.innerHTML =
-            '<div class="onboarding-step">' +
-                '<h1>' + t('login_title') + '</h1>' +
-                '<p class="onboarding-text">' +
-                    'Class: ' + Helpers.classIcon(selectedClass) + ' ' + t('class_' + selectedClass) +
-                    '<br>Name: ' + Helpers.escapeHtml(mageName) +
-                '</p>' +
-                '<label for="login-account" class="input-label">' + t('login_account') + '</label>' +
-                '<input type="text" id="login-account" class="input-field" autocomplete="username">' +
-                '<label for="login-key" class="input-label">' + t('login_key') + '</label>' +
-                '<input type="password" id="login-key" class="input-field" autocomplete="current-password">' +
-                '<div id="login-error" class="input-feedback error" aria-live="polite"></div>' +
-                '<button class="btn btn-primary btn-large" id="btn-login-submit">' +
-                    t('login_submit') +
-                '</button>' +
-                '<button class="btn btn-secondary" id="btn-login-back">' + t('onboarding_back') + '</button>' +
-            '</div>';
-
-        Helpers.$('btn-login-back').addEventListener('click', function() {
-            step = 1;
-            _renderStep(el);
-        });
-
-        Helpers.$('btn-login-submit').addEventListener('click', function() {
-            var account = Helpers.$('login-account').value.trim();
-            var key = Helpers.$('login-key').value.trim();
-            var errorEl = Helpers.$('login-error');
-
-            if (!account || !key) {
-                errorEl.textContent = t('login_error_empty');
-                return;
-            }
-
-            errorEl.textContent = Helpers.t('loading');
-            VizAccount.login(account, key, function(err) {
-                if (err) {
-                    if (err.message === 'account_not_found') errorEl.textContent = t('login_error_not_found');
-                    else if (err.message === 'invalid_regular_key') errorEl.textContent = t('login_error_wrong_key');
-                    else errorEl.textContent = err.message;
-                    return;
-                }
-
-                _createCharacterAndFinish();
-            });
-        });
-    }
-
-    return { render: render };
+    return { render: render, startForAccount: startForAccount };
 })();