Add separate wallet page and fix username display

- Create wallet.html with full wallet management UI
- Fix player.js to show actual username (real_name or username) instead of 'Player'
- Add Wallet links to player.html and broker.html headers
- Wallet page includes balance overview, deposit/withdraw modals, transaction history

web/broker.html

@@ -16,6 +16,7 @@
             <div class="user-info">
                 <span id="user-name">Welcome, Broker</span>
                 <span id="user-balance" class="balance-display">Balance: $0.00</span>
+                <a href="wallet.html" class="btn btn-primary btn-sm">Wallet</a>
                 <a href="profile.html" class="btn btn-secondary btn-sm">Profile</a>
                 <button class="logout-btn" onclick="logout()">Logout</button>
             </div>

web/player.html

@@ -17,6 +17,7 @@
             <div class="user-info">
                 <span id="user-name">Welcome, Player</span>
                 <span id="user-balance" class="balance-display">Balance: $0.00</span>
+                <a href="wallet.html" class="btn btn-primary btn-sm">Wallet</a>
                 <a href="profile.html" class="btn btn-secondary btn-sm">Profile</a>
                 <button class="logout-btn" onclick="logout()">Logout</button>
             </div>

web/player.js

@@ -520,8 +520,9 @@ async function loadPlayerData() {
         profitLossElement.style.color = profitLoss >= 0 ? 'var(--success-color)' : 'var(--error-color)';
         
         // Update user name
-        if (currentUser && currentUser.name) {
-            document.getElementById('user-name').textContent = `Welcome, ${currentUser.name}`;
+        if (currentUser) {
+            const displayName = currentUser.real_name || currentUser.username || 'Player';
+            document.getElementById('user-name').textContent = `Welcome, ${displayName}`;
         }
     } catch (error) {
         console.error('Error loading player data:', error);