1275 lines
74 KiB
HTML
1275 lines
74 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Galaxy Strike Online - Space Idle MMORPG</title>
|
||
<link rel="stylesheet" href="styles/main.css?v=2">
|
||
<link rel="stylesheet" href="styles/components.css">
|
||
<link rel="stylesheet" href="styles/tables.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- Custom Title Bar -->
|
||
<div id="titleBar" class="title-bar">
|
||
<div class="title-bar-left">
|
||
<span class="title-bar-title">Galaxy Strike Online</span>
|
||
</div>
|
||
<div class="title-bar-right">
|
||
<button class="title-bar-btn" id="minimizeBtn" title="Minimize">
|
||
<i class="fas fa-minus"></i>
|
||
</button>
|
||
<button class="title-bar-btn" id="fullscreenBtn" title="Toggle Fullscreen">
|
||
<i class="fas fa-expand"></i>
|
||
</button>
|
||
<button class="title-bar-btn close-btn" id="closeBtn" title="Close">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="app">
|
||
<!-- Main Menu -->
|
||
<div id="mainMenu" class="main-menu">
|
||
<div class="menu-container">
|
||
<div class="menu-header">
|
||
<h1 class="menu-title">GALAXY STRIKE ONLINE</h1>
|
||
<p class="menu-subtitle">Space Idle MMORPG</p>
|
||
</div>
|
||
|
||
<div class="menu-content">
|
||
<!-- Login Section -->
|
||
<div id="loginSection" class="menu-section">
|
||
<h2 class="section-title">Account Access</h2>
|
||
<div class="login-form">
|
||
<div class="form-group">
|
||
<label for="emailInput">Email</label>
|
||
<input type="email" id="emailInput" placeholder="Enter your email" class="form-input">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="passwordInput">Password</label>
|
||
<input type="password" id="passwordInput" placeholder="Enter your password" class="form-input">
|
||
</div>
|
||
<div class="login-options">
|
||
<button class="btn btn-primary btn-large" id="loginBtn">
|
||
<i class="fas fa-sign-in-alt"></i>
|
||
Login
|
||
</button>
|
||
<button class="btn btn-secondary btn-large" id="registerBtn">
|
||
<i class="fas fa-user-plus"></i>
|
||
Register
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="login-notice" id="loginNotice">
|
||
<p><i class="fas fa-info-circle"></i> Connect to the live server to play</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Server Browser Section -->
|
||
<div id="serverSection" class="menu-section hidden">
|
||
<h2 class="section-title">Server Browser</h2>
|
||
<div class="server-controls">
|
||
<button class="btn btn-primary" id="createServerBtn">
|
||
<i class="fas fa-server"></i>
|
||
Start Local Server
|
||
</button>
|
||
<button class="btn btn-secondary" id="refreshServersBtn">
|
||
<i class="fas fa-sync"></i>
|
||
Refresh
|
||
</button>
|
||
<div class="server-filters">
|
||
<select id="regionFilter" class="filter-select">
|
||
<option value="">All Regions</option>
|
||
<option value="us-east">US East</option>
|
||
<option value="us-west">US West</option>
|
||
<option value="europe">Europe</option>
|
||
<option value="asia">Asia</option>
|
||
</select>
|
||
<select id="typeFilter" class="filter-select">
|
||
<option value="">All Types</option>
|
||
<option value="public">Public</option>
|
||
<option value="private">Private</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="server-list" id="serverList">
|
||
<div class="server-loading" id="serverLoading">
|
||
<i class="fas fa-spinner fa-spin"></i>
|
||
<p>Loading servers...</p>
|
||
</div>
|
||
<div class="server-empty hidden" id="serverEmpty">
|
||
<i class="fas fa-server"></i>
|
||
<p>No servers found. Create your own server to play!</p>
|
||
</div>
|
||
<!-- Servers will be populated here -->
|
||
</div>
|
||
<div class="server-actions">
|
||
<button class="btn btn-secondary" id="backToLoginBtn">
|
||
<i class="fas fa-arrow-left"></i>
|
||
Back to Login
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Server Join Confirmation Section -->
|
||
<div id="serverConfirmSection" class="menu-section hidden">
|
||
<h2 class="section-title">Server Selected</h2>
|
||
<div class="server-confirmation">
|
||
<div class="confirm-actions-left">
|
||
<button class="btn btn-primary btn-large btn-join-server" id="joinServerBtn">
|
||
<i class="fas fa-sign-in-alt"></i>
|
||
Join Server
|
||
</button>
|
||
</div>
|
||
<div class="selected-server-info-center">
|
||
<div class="server-preview">
|
||
<h3 id="selectedServerName">Server Name</h3>
|
||
<div class="server-details" id="selectedServerDetails">
|
||
<p class="server-info">Type: <span id="selectedServerType">Public</span></p>
|
||
<p class="server-info">Region: <span id="selectedServerRegion">US East</span></p>
|
||
<p class="server-info">Players: <span id="selectedServerPlayers">0/10</span></p>
|
||
<p class="server-info">Owner: <span id="selectedServerOwner">Unknown</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="confirm-actions-right">
|
||
<button class="btn btn-info btn-large" id="serverInfoBtn">
|
||
<i class="fas fa-info"></i>
|
||
More Info
|
||
</button>
|
||
<button class="btn btn-warning btn-large" id="backToServersBtn">
|
||
<i class="fas fa-arrow-left"></i>
|
||
Back to List
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Game Options Section -->
|
||
<div id="optionsSection" class="menu-section hidden">
|
||
<h2 class="section-title">Game Options</h2>
|
||
<div class="options-grid" style="display: flex !important; justify-content: space-between !important; gap: 30px !important; margin-bottom: 30px !important;">
|
||
<div class="options-left" style="display: flex !important; flex-direction: column !important; gap: 15px !important; justify-content: flex-end !important; min-width: 200px !important;">
|
||
<button class="btn btn-primary btn-large" id="continueBtn" style="width: 200px !important;">
|
||
<i class="fas fa-gamepad"></i>
|
||
Continue
|
||
</button>
|
||
<button class="btn btn-primary btn-large" id="newGameBtn" style="width: 200px !important;">
|
||
<i class="fas fa-play"></i>
|
||
New Game
|
||
</button>
|
||
</div>
|
||
<div class="options-center" style="display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; flex: 1 !important; min-width: 300px !important;">
|
||
<div class="save-info-display" style="background: rgba(0, 212, 255, 0.1) !important; border: 2px solid rgba(0, 212, 255, 0.3) !important; border-radius: 10px !important; padding: 20px !important; text-align: center !important; width: 100% !important; max-width: 400px !important;">
|
||
<h3 style="color: #00d4ff !important; margin-bottom: 15px !important; font-size: 1.2em !important;">Save Information</h3>
|
||
<div id="saveInfoDetails" style="color: #ffffff !important; font-size: 0.9em !important; line-height: 1.4 !important;">
|
||
<p>Select a save slot to view details</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="options-right" style="display: flex !important; flex-direction: column !important; gap: 15px !important; justify-content: space-between !important; min-width: 200px !important;">
|
||
<button class="btn btn-info btn-large" id="settingsBtn" style="width: 200px !important;">
|
||
<i class="fas fa-cog"></i>
|
||
Settings
|
||
</button>
|
||
<button class="btn btn-warning btn-large" id="deleteSaveBtn" style="width: 200px !important;">
|
||
<i class="fas fa-trash"></i>
|
||
Delete Save
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="options-actions">
|
||
<button class="btn btn-secondary" id="backToSavesBtn">
|
||
<i class="fas fa-arrow-left"></i>
|
||
Back to Saves
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-footer">
|
||
<p class="version-text">Version 1.0.0</p>
|
||
<div class="footer-links">
|
||
<button class="link-btn" id="aboutBtn">About</button>
|
||
<button class="link-btn" id="helpBtn">Help</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Screen -->
|
||
<div id="loadingScreen" class="loading-screen hidden">
|
||
<div class="loading-content">
|
||
<h1 class="game-title">GALAXY STRIKE ONLINE</h1>
|
||
<div class="loading-bar">
|
||
<div class="loading-progress"></div>
|
||
</div>
|
||
<p class="loading-text">Initializing Universe...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Game Interface -->
|
||
<div id="gameInterface" class="game-interface hidden">
|
||
<!-- Header -->
|
||
<header class="game-header">
|
||
<div class="header-left">
|
||
<h1 class="logo">GSO</h1>
|
||
<div class="player-info">
|
||
<div>
|
||
<span class="player-name" id="playerName">Commander</span>
|
||
<span class="player-title" id="playerTitle">- Rookie Pilot</span>
|
||
</div>
|
||
<div>
|
||
<span class="player-username" id="playerUsername"></span>
|
||
<span class="player-level" id="playerLevel">Lv. 1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-center">
|
||
<div class="resources">
|
||
<div class="resource">
|
||
<i class="fas fa-coins"></i>
|
||
<span id="credits">1,000</span>
|
||
</div>
|
||
<div class="resource">
|
||
<i class="fas fa-gem"></i>
|
||
<span id="gems">10</span>
|
||
</div>
|
||
<div class="resource">
|
||
<i class="fas fa-bolt"></i>
|
||
<span id="energy">100/100</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<button class="btn btn-secondary" id="settingsBtn">
|
||
<i class="fas fa-cog"></i>
|
||
</button>
|
||
<button class="btn btn-secondary" id="discordBtn">
|
||
<i class="fab fa-discord"></i>
|
||
</button>
|
||
<button class="btn btn-info" id="localServerBtn" title="Local Server">
|
||
<i class="fas fa-server"></i>
|
||
</button>
|
||
<!-- <button class="btn btn-primary" id="saveBtn" title="Save Game">
|
||
<i class="fas fa-save"></i>
|
||
</button> -->
|
||
<button class="btn btn-warning" id="returnToMenuBtn">
|
||
<i class="fas fa-home"></i>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="main-nav">
|
||
<button class="nav-btn active" data-tab="dashboard" onclick="switchToTab('dashboard')">
|
||
<i class="fas fa-tachometer-alt"></i>
|
||
<span>Dashboard</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="dungeons" onclick="switchToTab('dungeons')">
|
||
<i class="fas fa-dungeon"></i>
|
||
<span>Dungeons</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="skills" onclick="switchToTab('skills')">
|
||
<i class="fas fa-graduation-cap"></i>
|
||
<span>Skills</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="base" onclick="switchToTab('base')">
|
||
<i class="fas fa-home"></i>
|
||
<span>Base</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="quests" onclick="switchToTab('quests')">
|
||
<i class="fas fa-scroll"></i>
|
||
<span>Quests</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="inventory" onclick="switchToTab('inventory')">
|
||
<i class="fas fa-backpack"></i>
|
||
<span>Inventory</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="crafting" onclick="switchToTab('crafting')">
|
||
<i class="fas fa-hammer"></i>
|
||
<span>Crafting</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="shop" onclick="switchToTab('shop')">
|
||
<i class="fas fa-store"></i>
|
||
<span>Shop</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- Main Content Area -->
|
||
<main class="main-content">
|
||
<!-- Dashboard Tab -->
|
||
<div class="tab-content active" id="dashboard-tab">
|
||
<div class="dashboard-grid">
|
||
<div class="card">
|
||
<h3>Fleet Status</h3>
|
||
<div class="fleet-info">
|
||
<div class="ship-status">
|
||
<i class="fas fa-rocket"></i>
|
||
<div>
|
||
<p>Flagship: <span id="flagshipName">Starter Cruiser</span></p>
|
||
<p>Health: <span id="shipHealth">100%</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Idle Progress</h3>
|
||
<div class="idle-stats">
|
||
<p>Offline Time: <span id="offlineTime">0h 0m</span></p>
|
||
<p>Resources Gained: <span id="offlineResources">0</span></p>
|
||
<button class="btn btn-primary" id="claimOfflineBtn">Claim Rewards</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Player Stats</h3>
|
||
<div class="player-stats-grid">
|
||
<div class="stat">
|
||
<span class="stat-label">Level</span>
|
||
<span class="stat-value" id="playerLevelDisplay">1</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Experience</span>
|
||
<span class="stat-value" id="playerXP">0 / 100</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Skill Points</span>
|
||
<span class="stat-value" id="skillPoints">0</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Total XP Earned</span>
|
||
<span class="stat-value" id="totalXP">0</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Quests Completed</span>
|
||
<span class="stat-value" id="questsCompleted">0</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Last Login</span>
|
||
<span class="stat-value" id="lastLogin">Never</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Total Kills</span>
|
||
<span class="stat-value" id="totalKills">0</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Dungeons Cleared</span>
|
||
<span class="stat-value" id="dungeonsCleared">0</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Play Time</span>
|
||
<span class="stat-value" id="playTime">0m 0s</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dungeons Tab -->
|
||
<div class="tab-content" id="dungeons-tab">
|
||
<div class="dungeons-container">
|
||
<div class="dungeon-selector">
|
||
<h2>Select Dungeon</h2>
|
||
<div class="dungeon-list" id="dungeonList">
|
||
<!-- Dungeons will be generated here -->
|
||
</div>
|
||
</div>
|
||
<div class="dungeon-view" id="dungeonView">
|
||
<div class="dungeon-placeholder">
|
||
<i class="fas fa-dungeon"></i>
|
||
<p>Select a dungeon to begin your adventure</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Skills Tab -->
|
||
<div class="tab-content" id="skills-tab">
|
||
<div class="skills-container">
|
||
<div class="skills-header">
|
||
<h2><i class="fas fa-graduation-cap"></i> Skills</h2>
|
||
<div class="skill-points-display">
|
||
<span class="skill-points">Skill Points: 0</span>
|
||
</div>
|
||
</div>
|
||
<div class="skill-categories">
|
||
<button class="skill-cat-btn active" data-category="combat" onclick="switchSkillCategory('combat')">Combat</button>
|
||
<button class="skill-cat-btn" data-category="science" onclick="switchSkillCategory('science')">Science</button>
|
||
<button class="skill-cat-btn" data-category="crafting" onclick="switchSkillCategory('crafting')">Crafting</button>
|
||
</div>
|
||
<div class="skills-grid" id="skillsGrid">
|
||
<!-- Skills will be generated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Base Tab -->
|
||
<div class="tab-content" id="base-tab">
|
||
<div class="base-navigation">
|
||
<button class="base-nav-btn active" data-view="overview" onclick="switchBaseView('overview')">Base Overview</button>
|
||
<button class="base-nav-btn" data-view="visualization" onclick="switchBaseView('visualization')">Base Visualization</button>
|
||
<button class="base-nav-btn" data-view="ships" onclick="switchBaseView('ships')">Ship Gallery</button>
|
||
<button class="base-nav-btn" data-view="starbases" onclick="switchBaseView('starbases')">Starbases</button>
|
||
</div>
|
||
|
||
<!-- Base Overview -->
|
||
<div class="base-view-content" id="base-overview">
|
||
<div class="base-container">
|
||
<div class="base-view">
|
||
<div class="base-info">
|
||
<h3>Base Information</h3>
|
||
<div class="base-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-label">Power Usage:</span>
|
||
<span class="stat-value" id="basePowerUsage">0/100</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">Storage:</span>
|
||
<span class="stat-value" id="baseStorage">1000</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">Production Rate:</span>
|
||
<span class="stat-value" id="baseProduction">0/s</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="base-rooms" id="baseRooms">
|
||
<!-- Base rooms will be generated here -->
|
||
</div>
|
||
</div>
|
||
<div class="base-upgrades">
|
||
<h3>Base Upgrades</h3>
|
||
<div class="upgrade-list" id="baseUpgrades">
|
||
<!-- Upgrades will be generated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Base Visualization -->
|
||
<div class="base-view-content hidden" id="base-visualization">
|
||
<div class="base-visualization-container">
|
||
<canvas id="baseCanvas" width="800" height="600"></canvas>
|
||
<div class="base-info-overlay">
|
||
<div class="base-stats-overlay">
|
||
<h3>Base Information</h3>
|
||
<div id="baseInfoDisplay"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ship Gallery -->
|
||
<div class="base-view-content hidden" id="base-ships">
|
||
<div class="ship-gallery-container">
|
||
<h3>Your Ships</h3>
|
||
|
||
<div class="ship-layout">
|
||
<!-- Current Ship Section -->
|
||
<div class="current-ship-section">
|
||
<h4>Current Ship</h4>
|
||
<div class="current-ship-display" id="currentShipDisplay" data-debug-id="current-ship-panel">
|
||
<div class="current-ship-info">
|
||
<div class="current-ship-image">
|
||
<img src="assets/textures/ships/starter_cruiser.png" alt="Current Ship" id="currentShipImage">
|
||
</div>
|
||
<div class="current-ship-details">
|
||
<h5 id="currentShipName">Starter Cruiser</h5>
|
||
<div class="current-ship-stats">
|
||
<div class="ship-stat">
|
||
<span class="stat-label">Class:</span>
|
||
<span class="stat-value" id="currentShipClass">Light</span>
|
||
</div>
|
||
<div class="ship-stat">
|
||
<span class="stat-label">Level:</span>
|
||
<span class="stat-value" id="currentShipLevel">1</span>
|
||
</div>
|
||
<div class="ship-stat">
|
||
<span class="stat-label">Health:</span>
|
||
<span class="stat-value" id="currentShipHealth">100/100</span>
|
||
</div>
|
||
<div class="ship-stat">
|
||
<span class="stat-label">Attack:</span>
|
||
<span class="stat-value" id="currentShipAttack">10</span>
|
||
</div>
|
||
<div class="ship-stat">
|
||
<span class="stat-label">Defense:</span>
|
||
<span class="stat-value" id="currentShipDefense">5</span>
|
||
</div>
|
||
<div class="ship-stat">
|
||
<span class="stat-label">Speed:</span>
|
||
<span class="stat-value" id="currentShipSpeed">15</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ship Grid -->
|
||
<div class="ship-grid-section">
|
||
<h4>Ships Collected</h4>
|
||
<div class="ship-grid" id="shipGrid">
|
||
<!-- Ships will be displayed here as cards -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Starbases -->
|
||
<div class="base-view-content hidden" id="base-starbases">
|
||
<div class="starbases-container">
|
||
<div class="starbase-section">
|
||
<h3>Starbase Management</h3>
|
||
<div class="starbase-list" id="starbaseList">
|
||
<!-- Starbases will be displayed here -->
|
||
</div>
|
||
</div>
|
||
<div class="starbase-section">
|
||
<h3>Available Starbases</h3>
|
||
<div class="starbase-shop" id="starbasePurchaseList">
|
||
<div class="starbase-purchase-list" id="starbasePurchaseItems">
|
||
<!-- Available starbases for purchase -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quests Tab -->
|
||
<div class="tab-content" id="quests-tab">
|
||
<div class="quests-container">
|
||
<div class="quest-tabs">
|
||
<button class="quest-tab-btn active" data-type="main" onclick="switchQuestCategory('main')">Main Story</button>
|
||
<button class="quest-tab-btn" data-type="daily" onclick="switchQuestCategory('daily')">Daily</button>
|
||
<button class="quest-tab-btn" data-type="weekly" onclick="switchQuestCategory('weekly')">Weekly</button>
|
||
<button class="quest-tab-btn" data-type="completed" onclick="switchQuestCategory('completed')">Completed</button>
|
||
<button class="quest-tab-btn" data-type="failed" onclick="switchQuestCategory('failed')">Failed Quests</button>
|
||
</div>
|
||
<div class="daily-countdown" id="dailyCountdown">Daily quests reset in: 00:00:00</div>
|
||
<div class="weekly-countdown" id="weeklyCountdown">Weekly quests reset in: 0d 00:00</div>
|
||
<div class="quest-list" id="questList">
|
||
<!-- Quests will be generated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inventory Tab -->
|
||
<div class="tab-content" id="inventory-tab">
|
||
<div class="inventory-container">
|
||
<div class="equipment-section">
|
||
<h3>Equipment</h3>
|
||
<div class="equipment-slots">
|
||
<div class="equipment-slot">
|
||
<div class="slot-label">Weapon</div>
|
||
<div class="slot-container" id="equip-weapon">
|
||
<div class="empty-equip-slot">Empty</div>
|
||
</div>
|
||
</div>
|
||
<div class="equipment-slot">
|
||
<div class="slot-label">Armor</div>
|
||
<div class="slot-container" id="equip-armor">
|
||
<div class="empty-equip-slot">Empty</div>
|
||
</div>
|
||
</div>
|
||
<div class="equipment-slot">
|
||
<div class="slot-label">Engine</div>
|
||
<div class="slot-container" id="equip-engine">
|
||
<div class="empty-equip-slot">Empty</div>
|
||
</div>
|
||
</div>
|
||
<div class="equipment-slot">
|
||
<div class="slot-label">Shield</div>
|
||
<div class="slot-container" id="equip-shield">
|
||
<div class="empty-equip-slot">Empty</div>
|
||
</div>
|
||
</div>
|
||
<div class="equipment-slot">
|
||
<div class="slot-label">Accessory</div>
|
||
<div class="slot-container" id="equip-accessory">
|
||
<div class="empty-equip-slot">Empty</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="inventory-main">
|
||
<div class="inventory-section">
|
||
<h3>Inventory</h3>
|
||
<div class="inventory-grid" id="inventoryGrid">
|
||
<!-- Inventory items will be generated here -->
|
||
</div>
|
||
</div>
|
||
<div class="item-details" id="itemDetails">
|
||
<p>Select an item to view details</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Crafting Tab -->
|
||
<div class="tab-content" id="crafting-tab">
|
||
<div class="crafting-container">
|
||
<div class="crafting-header">
|
||
<h2><i class="fas fa-hammer"></i> Crafting Station</h2>
|
||
<div class="crafting-info">
|
||
<div class="crafting-level">
|
||
<i class="fas fa-level-up-alt"></i>
|
||
<span>Crafting Level: </span>
|
||
<span id="craftingLevel">1</span>
|
||
</div>
|
||
<div class="crafting-experience">
|
||
<i class="fas fa-star"></i>
|
||
<span>Experience: </span>
|
||
<span id="craftingExp">0/100</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="crafting-categories">
|
||
<button class="crafting-cat-btn active" data-category="weapons" onclick="switchCraftingCategory('weapons')">Weapons</button>
|
||
<button class="crafting-cat-btn" data-category="armor" onclick="switchCraftingCategory('armor')">Armor</button>
|
||
<button class="crafting-cat-btn" data-category="items" onclick="switchCraftingCategory('items')">Items</button>
|
||
<button class="crafting-cat-btn" data-category="ships" onclick="switchCraftingCategory('ships')">Ships</button>
|
||
</div>
|
||
<div class="crafting-grid" id="recipeList">
|
||
<!-- Recipes will be generated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Shop Tab -->
|
||
<div class="tab-content" id="shop-tab">
|
||
<div class="shop-container">
|
||
<div class="shop-header">
|
||
<div class="shop-categories">
|
||
<button class="shop-cat-btn active" data-category="ships" onclick="switchShopCategory('ships')">Ships</button>
|
||
<button class="shop-cat-btn" data-category="weapons" onclick="switchShopCategory('weapons')">Weapons</button>
|
||
<button class="shop-cat-btn" data-category="armors" onclick="switchShopCategory('armors')">Armors</button>
|
||
<!-- <button class="shop-cat-btn" data-category="upgrades">Upgrades</button> -->
|
||
<button class="shop-cat-btn" data-category="cosmetics" onclick="switchShopCategory('cosmetics')">Cosmetics</button>
|
||
<button class="shop-cat-btn" data-category="consumables" onclick="switchShopCategory('consumables')">Consumables</button>
|
||
<button class="shop-cat-btn" data-category="materials" onclick="switchShopCategory('materials')">Materials</button>
|
||
</div>
|
||
</div>
|
||
<div class="shop-content">
|
||
<div class="shop-items-container">
|
||
<div class="shop-items" id="shopItems">
|
||
<!-- Shop items will be generated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Modals -->
|
||
<div class="modal-overlay hidden" id="modalOverlay">
|
||
<div class="modal" id="modal">
|
||
<div class="modal-header">
|
||
<h3 id="modalTitle">Modal Title</h3>
|
||
<button class="modal-close" id="modalClose">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body" id="modalBody">
|
||
<!-- Modal content will be inserted here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Progress Indicator -->
|
||
<div class="loading-indicator" id="loadingIndicator"></div>
|
||
<div class="loading-status hidden" id="loadingStatus">Initializing...</div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="../config/xp-progression.js"></script>
|
||
<script src="js/core/DebugLogger.js"></script>
|
||
<script src="js/core/Logger.js"></script>
|
||
<script src="js/core/TextureManager.js"></script>
|
||
<script src="js/core/GameEngine.js"></script>
|
||
<script src="js/core/Player.js"></script>
|
||
<script src="js/core/Inventory.js"></script>
|
||
<script src="js/core/Economy.js"></script>
|
||
<script src="js/systems/DungeonSystem.js"></script>
|
||
<script src="js/systems/SkillSystem.js"></script>
|
||
<script src="js/systems/BaseSystem.js"></script>
|
||
<script src="js/systems/QuestSystem.js"></script>
|
||
<script src="js/systems/ShipSystem.js"></script>
|
||
<script src="js/systems/IdleSystem.js"></script>
|
||
<script src="js/systems/ItemSystem.js"></script>
|
||
<script src="js/systems/CraftingSystem.js"></script>
|
||
<script src="js/data/GameData.js"></script>
|
||
<script src="js/ui/UIManager.js"></script>
|
||
<script src="js/SmartSaveManager.js"></script>
|
||
<script src="js/SaveSystemIntegration.js"></script>
|
||
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
|
||
<script src="js/GameInitializer.js"></script>
|
||
<script src="js/ui/LiveMainMenu.js"></script>
|
||
<script src="js/main.js"></script>
|
||
|
||
<!-- Global Navigation Function -->
|
||
<script>
|
||
function switchToTab(tabName) {
|
||
console.log('[GLOBAL] switchToTab called with:', tabName);
|
||
|
||
// Try to use UIManager first
|
||
if (window.game && window.game.systems && window.game.systems.ui) {
|
||
console.log('[GLOBAL] Using UIManager to switch tab');
|
||
window.game.systems.ui.switchTab(tabName);
|
||
|
||
// Force update the specific tab content
|
||
console.log('[GLOBAL] Forcing update for tab:', tabName);
|
||
switch(tabName) {
|
||
case 'shop':
|
||
if (window.game.systems.economy) {
|
||
console.log('[GLOBAL] Forcing shop UI update');
|
||
window.game.systems.economy.updateShopUI();
|
||
}
|
||
break;
|
||
case 'quests':
|
||
console.log('[GLOBAL] Quest system check:', {
|
||
hasGame: !!window.game,
|
||
hasSystems: !!(window.game?.systems),
|
||
hasQuestSystem: !!(window.game?.systems?.questSystem),
|
||
questSystemType: typeof window.game?.systems?.questSystem
|
||
});
|
||
|
||
// REMOVED: QuestSystem should be server-driven only
|
||
console.log('[GLOBAL] Quests are server-driven - displaying server quest data');
|
||
|
||
// Display server quest data
|
||
const questListElement = document.getElementById('questList');
|
||
if (questListElement) {
|
||
// Get quest data from server playerData
|
||
const serverPlayerData = window.gameInitializer?.serverPlayerData;
|
||
if (serverPlayerData && serverPlayerData.quests) {
|
||
const quests = serverPlayerData.quests;
|
||
console.log('[GLOBAL] Displaying server quest data:', quests);
|
||
|
||
// Categorize quests on client since server sends old format
|
||
const activeQuests = quests.active || [];
|
||
const mainQuests = activeQuests.filter(quest => quest.type === 'main');
|
||
const dailyQuests = activeQuests.filter(quest => quest.type === 'daily');
|
||
const weeklyQuests = activeQuests.filter(quest => quest.type === 'weekly');
|
||
const tutorialQuests = activeQuests.filter(quest => quest.type === 'tutorial');
|
||
|
||
console.log('[GLOBAL] Client-side categorization:', {
|
||
mainQuests: mainQuests.length,
|
||
dailyQuests: dailyQuests.length,
|
||
weeklyQuests: weeklyQuests.length,
|
||
tutorialQuests: tutorialQuests.length
|
||
});
|
||
|
||
// Get the currently selected quest tab type
|
||
const activeQuestTab = document.querySelector('.quest-tab-btn.active')?.dataset.type || 'main';
|
||
console.log('[GLOBAL] Active quest tab:', activeQuestTab);
|
||
console.log('[GLOBAL] All quest tab buttons:', document.querySelectorAll('.quest-tab-btn'));
|
||
console.log('[GLOBAL] Active button found:', document.querySelector('.quest-tab-btn.active'));
|
||
|
||
// Force check for debugging
|
||
document.querySelectorAll('.quest-tab-btn').forEach(btn => {
|
||
console.log('[GLOBAL] Quest tab button:', btn.dataset.type, 'active:', btn.classList.contains('active'));
|
||
});
|
||
|
||
// Create quest HTML
|
||
let questHTML = '<div class="quest-list-container">';
|
||
|
||
// Show quests based on selected tab
|
||
if (activeQuestTab === 'main' && mainQuests.length > 0) {
|
||
questHTML += '<h3>Main Story Quests</h3>';
|
||
mainQuests.forEach(quest => {
|
||
const progress = quest.progress || 0;
|
||
const requirement = quest.requirements?.battlesWon || 1;
|
||
const progressPercent = (progress / requirement) * 100;
|
||
questHTML += '<div class="quest-item">';
|
||
questHTML += '<div class="quest-header">';
|
||
questHTML += '<h4>' + quest.name + '</h4>';
|
||
questHTML += '<span class="quest-status ' + (quest.status || 'active') + '">' + (quest.status || 'active') + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-description">' + quest.description + '</div>';
|
||
questHTML += '<div class="quest-progress">';
|
||
questHTML += '<div class="progress-bar">';
|
||
questHTML += '<div class="progress-fill" style="width: ' + progressPercent + '%"></div>';
|
||
questHTML += '</div>';
|
||
questHTML += '<span>' + progress + '/' + requirement + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-rewards">';
|
||
questHTML += '<span>Rewards: ' + (quest.rewards?.experience || 0) + ' XP, ' + (quest.rewards?.credits || 0) + ' credits</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '</div>';
|
||
});
|
||
}
|
||
|
||
if (activeQuestTab === 'daily' && dailyQuests.length > 0) {
|
||
questHTML += '<h3>Daily Quests</h3>';
|
||
dailyQuests.forEach(quest => {
|
||
const progress = quest.progress || 0;
|
||
const requirement = quest.requirements?.battlesWon || 1;
|
||
const progressPercent = (progress / requirement) * 100;
|
||
questHTML += '<div class="quest-item daily">';
|
||
questHTML += '<div class="quest-header">';
|
||
questHTML += '<h4>' + quest.name + '</h4>';
|
||
questHTML += '<span class="quest-status ' + (quest.status || 'active') + '">' + (quest.status || 'active') + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-description">' + quest.description + '</div>';
|
||
questHTML += '<div class="quest-progress">';
|
||
questHTML += '<div class="progress-bar">';
|
||
questHTML += '<div class="progress-fill" style="width: ' + progressPercent + '%"></div>';
|
||
questHTML += '</div>';
|
||
questHTML += '<span>' + progress + '/' + requirement + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-rewards">';
|
||
questHTML += '<span>Rewards: ' + (quest.rewards?.experience || 0) + ' XP, ' + (quest.rewards?.credits || 0) + ' credits, ' + (quest.rewards?.gems || 0) + ' gems</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '</div>';
|
||
});
|
||
}
|
||
|
||
if (activeQuestTab === 'weekly' && weeklyQuests.length > 0) {
|
||
questHTML += '<h3>Weekly Quests</h3>';
|
||
weeklyQuests.forEach(quest => {
|
||
const progress = quest.progress || 0;
|
||
const requirement = quest.requirements?.battlesWon || 1;
|
||
const progressPercent = (progress / requirement) * 100;
|
||
questHTML += '<div class="quest-item weekly">';
|
||
questHTML += '<div class="quest-header">';
|
||
questHTML += '<h4>' + quest.name + '</h4>';
|
||
questHTML += '<span class="quest-status ' + (quest.status || 'active') + '">' + (quest.status || 'active') + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-description">' + quest.description + '</div>';
|
||
questHTML += '<div class="quest-progress">';
|
||
questHTML += '<div class="progress-bar">';
|
||
questHTML += '<div class="progress-fill" style="width: ' + progressPercent + '%"></div>';
|
||
questHTML += '</div>';
|
||
questHTML += '<span>' + progress + '/' + requirement + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-rewards">';
|
||
questHTML += '<span>Rewards: ' + (quest.rewards?.experience || 0) + ' XP, ' + (quest.rewards?.credits || 0) + ' credits, ' + (quest.rewards?.gems || 0) + ' gems</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '</div>';
|
||
});
|
||
}
|
||
|
||
if (activeQuestTab === 'completed') {
|
||
questHTML += '<h3>Completed Quests</h3>';
|
||
questHTML += '<p>No completed quests yet.</p>';
|
||
}
|
||
|
||
if (activeQuestTab === 'failed') {
|
||
questHTML += '<h3>Failed Quests</h3>';
|
||
questHTML += '<p>No failed quests yet.</p>';
|
||
}
|
||
|
||
// Show no quests message if category is empty
|
||
if ((activeQuestTab === 'main' && mainQuests.length === 0) ||
|
||
(activeQuestTab === 'daily' && dailyQuests.length === 0) ||
|
||
(activeQuestTab === 'weekly' && weeklyQuests.length === 0)) {
|
||
questHTML += '<p>No quests available in this category.</p>';
|
||
}
|
||
|
||
questHTML += '</div>';
|
||
questListElement.innerHTML = questHTML;
|
||
} else {
|
||
questListElement.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-secondary);"><h3>No Quest Data Available</h3><p>Server quest data not found.</p></div>';
|
||
}
|
||
}
|
||
break;
|
||
case 'skills':
|
||
if (window.game.systems.skillSystem) {
|
||
console.log('[GLOBAL] Forcing skills UI update');
|
||
window.game.systems.skillSystem.updateUI();
|
||
}
|
||
break;
|
||
case 'crafting':
|
||
if (window.game.systems.crafting) {
|
||
console.log('[GLOBAL] Forcing crafting UI update');
|
||
window.game.systems.crafting.updateUI();
|
||
}
|
||
break;
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Fallback: Manual tab switching
|
||
console.log('[GLOBAL] Using manual tab switching fallback');
|
||
|
||
// Hide all tabs
|
||
document.querySelectorAll('.tab-content').forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// Remove active class from all nav buttons
|
||
document.querySelectorAll('.nav-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// Show selected tab
|
||
const targetTab = document.getElementById(tabName + '-tab');
|
||
if (targetTab) {
|
||
targetTab.classList.add('active');
|
||
}
|
||
|
||
// Add active class to clicked button
|
||
const targetButton = document.querySelector(`[data-tab="${tabName}"]`);
|
||
if (targetButton) {
|
||
targetButton.classList.add('active');
|
||
}
|
||
}
|
||
|
||
function switchShopCategory(category) {
|
||
console.log('[GLOBAL] switchShopCategory called with:', category);
|
||
console.log('[GLOBAL] switchShopCategory function starting');
|
||
|
||
try {
|
||
// Try to use UIManager first
|
||
if (window.game && window.game.systems && window.game.systems.ui) {
|
||
console.log('[GLOBAL] Using UIManager path for shop');
|
||
window.game.systems.ui.switchShopCategory(category);
|
||
console.log('[GLOBAL] switchShopCategory function completed (UIManager path)');
|
||
return;
|
||
}
|
||
|
||
// Fallback: Manual category switching
|
||
console.log('[GLOBAL] Using manual shop category switching');
|
||
document.querySelectorAll('.shop-cat-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
const targetButton = document.querySelector(`[data-category="${category}"]`);
|
||
if (targetButton) {
|
||
targetButton.classList.add('active');
|
||
console.log('[GLOBAL] Set active shop button:', category);
|
||
}
|
||
|
||
// Force shop display update immediately
|
||
console.log('[GLOBAL] About to call updateShopDisplay');
|
||
updateShopDisplay();
|
||
console.log('[GLOBAL] Called updateShopDisplay');
|
||
console.log('[GLOBAL] switchShopCategory function completed (manual path)');
|
||
} catch (error) {
|
||
console.error('[GLOBAL] Error in switchShopCategory:', error);
|
||
}
|
||
}
|
||
|
||
function updateShopDisplay() {
|
||
try {
|
||
console.log('[GLOBAL] updateShopDisplay called');
|
||
console.log('[GLOBAL] window.game:', !!window.game);
|
||
console.log('[GLOBAL] game.systems.economy:', !!(window.game?.systems?.economy));
|
||
console.log('[GLOBAL] game.systems.itemSystem:', !!(window.game?.systems?.itemSystem));
|
||
|
||
if (window.game && window.game.systems && window.game.systems.economy) {
|
||
console.log('[GLOBAL] Calling economy.updateShopUI');
|
||
window.game.systems.economy.updateShopUI();
|
||
console.log('[GLOBAL] updateShopDisplay completed');
|
||
} else {
|
||
console.log('[GLOBAL] Economy system not available');
|
||
const shopItemsElement = document.getElementById('shopItems');
|
||
if (shopItemsElement) {
|
||
shopItemsElement.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-secondary);"><h3>Shop Not Available</h3><p>Economy system not found.</p></div>';
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('[GLOBAL] Error in updateShopDisplay:', error);
|
||
}
|
||
}
|
||
|
||
function switchSkillCategory(category) {
|
||
console.log('[GLOBAL] switchSkillCategory called with:', category);
|
||
|
||
// Try to use UIManager first
|
||
if (window.game && window.game.systems && window.game.systems.ui) {
|
||
window.game.systems.ui.switchSkillCategory(category);
|
||
return;
|
||
}
|
||
|
||
// Fallback: Manual category switching
|
||
document.querySelectorAll('.skill-cat-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
const targetButton = document.querySelector(`[data-category="${category}"]`);
|
||
if (targetButton) {
|
||
targetButton.classList.add('active');
|
||
}
|
||
}
|
||
|
||
function switchQuestCategory(category) {
|
||
console.log('[GLOBAL] switchQuestCategory called with:', category);
|
||
console.log('[GLOBAL] switchQuestCategory function starting');
|
||
|
||
try {
|
||
// Try to use UIManager first
|
||
if (window.game && window.game.systems && window.game.systems.ui) {
|
||
console.log('[GLOBAL] Using UIManager path');
|
||
// Try to call updateQuestTabs if it exists, otherwise use fallback
|
||
if (typeof window.game.systems.ui.updateQuestTabs === 'function') {
|
||
console.log('[GLOBAL] Calling UIManager updateQuestTabs');
|
||
window.game.systems.ui.updateQuestTabs(category);
|
||
} else {
|
||
console.log('[GLOBAL] updateQuestTabs not found, using fallback');
|
||
// Fallback: Manual category switching
|
||
document.querySelectorAll('.quest-tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
const targetButton = document.querySelector(`[data-type="${category}"]`);
|
||
if (targetButton) {
|
||
targetButton.classList.add('active');
|
||
}
|
||
|
||
// Force quest display update immediately
|
||
console.log('[GLOBAL] About to call updateQuestDisplay');
|
||
updateQuestDisplay();
|
||
console.log('[GLOBAL] Called updateQuestDisplay');
|
||
}
|
||
console.log('[GLOBAL] switchQuestCategory function completed (UIManager path)');
|
||
return;
|
||
}
|
||
|
||
// Fallback: Manual category switching
|
||
console.log('[GLOBAL] Using manual quest category switching');
|
||
document.querySelectorAll('.quest-tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
const targetButton = document.querySelector(`[data-type="${category}"]`);
|
||
if (targetButton) {
|
||
targetButton.classList.add('active');
|
||
console.log('[GLOBAL] Set active button:', category);
|
||
}
|
||
|
||
// Force quest display update immediately
|
||
console.log('[GLOBAL] About to call updateQuestDisplay');
|
||
updateQuestDisplay();
|
||
console.log('[GLOBAL] Called updateQuestDisplay');
|
||
console.log('[GLOBAL] switchQuestCategory function completed (manual path)');
|
||
} catch (error) {
|
||
console.error('[GLOBAL] Error in switchQuestCategory:', error);
|
||
}
|
||
}
|
||
|
||
function updateQuestDisplay() {
|
||
try {
|
||
console.log('[GLOBAL] updateQuestDisplay called');
|
||
console.log('[GLOBAL] window.gameInitializer:', !!window.gameInitializer);
|
||
console.log('[GLOBAL] serverPlayerData:', window.gameInitializer?.serverPlayerData);
|
||
|
||
// Get quest data from server playerData
|
||
const serverPlayerData = window.gameInitializer?.serverPlayerData;
|
||
if (serverPlayerData && serverPlayerData.quests) {
|
||
const quests = serverPlayerData.quests;
|
||
console.log('[GLOBAL] Updating quest display with data:', quests);
|
||
|
||
// Categorize quests on client since server sends old format
|
||
const activeQuests = quests.active || [];
|
||
const mainQuests = activeQuests.filter(quest => quest.type === 'main');
|
||
const dailyQuests = activeQuests.filter(quest => quest.type === 'daily');
|
||
const weeklyQuests = activeQuests.filter(quest => quest.type === 'weekly');
|
||
const tutorialQuests = activeQuests.filter(quest => quest.type === 'tutorial');
|
||
|
||
console.log('[GLOBAL] Quest categorization:', {
|
||
total: activeQuests.length,
|
||
main: mainQuests.length,
|
||
daily: dailyQuests.length,
|
||
weekly: weeklyQuests.length,
|
||
tutorial: tutorialQuests.length
|
||
});
|
||
|
||
// Get the currently selected quest tab type
|
||
const activeQuestTab = document.querySelector('.quest-tab-btn.active')?.dataset.type || 'main';
|
||
console.log('[GLOBAL] Active quest tab for update:', activeQuestTab);
|
||
|
||
const questListElement = document.getElementById('questList');
|
||
if (questListElement) {
|
||
// Create quest HTML
|
||
let questHTML = '<div class="quest-list-container">';
|
||
|
||
// Show quests based on selected tab
|
||
if (activeQuestTab === 'daily' && dailyQuests.length > 0) {
|
||
console.log('[GLOBAL] Showing daily quests:', dailyQuests.length);
|
||
questHTML += '<h3>Daily Quests</h3>';
|
||
dailyQuests.forEach(quest => {
|
||
const progress = quest.progress || 0;
|
||
const requirement = quest.requirements?.battlesWon || 1;
|
||
const progressPercent = (progress / requirement) * 100;
|
||
questHTML += '<div class="quest-item daily">';
|
||
questHTML += '<div class="quest-header">';
|
||
questHTML += '<h4>' + quest.name + '</h4>';
|
||
questHTML += '<span class="quest-status ' + (quest.status || 'active') + '">' + (quest.status || 'active') + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-description">' + quest.description + '</div>';
|
||
questHTML += '<div class="quest-progress">';
|
||
questHTML += '<div class="progress-bar">';
|
||
questHTML += '<div class="progress-fill" style="width: ' + progressPercent + '%"></div>';
|
||
questHTML += '</div>';
|
||
questHTML += '<span>' + progress + '/' + requirement + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-rewards">';
|
||
questHTML += '<span>Rewards: ' + (quest.rewards?.experience || 0) + ' XP, ' + (quest.rewards?.credits || 0) + ' credits, ' + (quest.rewards?.gems || 0) + ' gems</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '</div>';
|
||
});
|
||
}
|
||
|
||
if (activeQuestTab === 'weekly' && weeklyQuests.length > 0) {
|
||
console.log('[GLOBAL] Showing weekly quests:', weeklyQuests.length);
|
||
questHTML += '<h3>Weekly Quests</h3>';
|
||
weeklyQuests.forEach(quest => {
|
||
const progress = quest.progress || 0;
|
||
const requirement = quest.requirements?.battlesWon || 1;
|
||
const progressPercent = (progress / requirement) * 100;
|
||
questHTML += '<div class="quest-item weekly">';
|
||
questHTML += '<div class="quest-header">';
|
||
questHTML += '<h4>' + quest.name + '</h4>';
|
||
questHTML += '<span class="quest-status ' + (quest.status || 'active') + '">' + (quest.status || 'active') + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-description">' + quest.description + '</div>';
|
||
questHTML += '<div class="quest-progress">';
|
||
questHTML += '<div class="progress-bar">';
|
||
questHTML += '<div class="progress-fill" style="width: ' + progressPercent + '%"></div>';
|
||
questHTML += '</div>';
|
||
questHTML += '<span>' + progress + '/' + requirement + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-rewards">';
|
||
questHTML += '<span>Rewards: ' + (quest.rewards?.experience || 0) + ' XP, ' + (quest.rewards?.credits || 0) + ' credits, ' + (quest.rewards?.gems || 0) + ' gems</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '</div>';
|
||
});
|
||
}
|
||
|
||
if (activeQuestTab === 'main' && mainQuests.length > 0) {
|
||
console.log('[GLOBAL] Showing main quests:', mainQuests.length);
|
||
questHTML += '<h3>Main Story Quests</h3>';
|
||
mainQuests.forEach(quest => {
|
||
const progress = quest.progress || 0;
|
||
const requirement = quest.requirements?.battlesWon || 1;
|
||
const progressPercent = (progress / requirement) * 100;
|
||
questHTML += '<div class="quest-item">';
|
||
questHTML += '<div class="quest-header">';
|
||
questHTML += '<h4>' + quest.name + '</h4>';
|
||
questHTML += '<span class="quest-status ' + (quest.status || 'active') + '">' + (quest.status || 'active') + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-description">' + quest.description + '</div>';
|
||
questHTML += '<div class="quest-progress">';
|
||
questHTML += '<div class="progress-bar">';
|
||
questHTML += '<div class="progress-fill" style="width: ' + progressPercent + '%"></div>';
|
||
questHTML += '</div>';
|
||
questHTML += '<span>' + progress + '/' + requirement + '</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '<div class="quest-rewards">';
|
||
questHTML += '<span>Rewards: ' + (quest.rewards?.experience || 0) + ' XP, ' + (quest.rewards?.credits || 0) + ' credits</span>';
|
||
questHTML += '</div>';
|
||
questHTML += '</div>';
|
||
});
|
||
}
|
||
|
||
if (activeQuestTab === 'completed') {
|
||
questHTML += '<h3>Completed Quests</h3>';
|
||
questHTML += '<p>No completed quests yet.</p>';
|
||
}
|
||
|
||
if (activeQuestTab === 'failed') {
|
||
questHTML += '<h3>Failed Quests</h3>';
|
||
questHTML += '<p>No failed quests yet.</p>';
|
||
}
|
||
|
||
// Show no quests message if category is empty
|
||
if ((activeQuestTab === 'main' && mainQuests.length === 0) ||
|
||
(activeQuestTab === 'daily' && dailyQuests.length === 0) ||
|
||
(activeQuestTab === 'weekly' && weeklyQuests.length === 0)) {
|
||
questHTML += '<p>No quests available in this category.</p>';
|
||
}
|
||
|
||
questHTML += '</div>';
|
||
questListElement.innerHTML = questHTML;
|
||
console.log('[GLOBAL] Quest display updated for tab:', activeQuestTab);
|
||
}
|
||
} else {
|
||
console.log('[GLOBAL] No quest data available');
|
||
const questListElement = document.getElementById('questList');
|
||
if (questListElement) {
|
||
questListElement.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-secondary);"><h3>No Quest Data Available</h3><p>Server quest data not found.</p></div>';
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('[GLOBAL] Error in updateQuestDisplay:', error);
|
||
}
|
||
}
|
||
|
||
function switchCraftingCategory(category) {
|
||
console.log('[GLOBAL] switchCraftingCategory called with:', category);
|
||
|
||
// Try to use UIManager first
|
||
if (window.game && window.game.systems && window.game.systems.ui) {
|
||
window.game.systems.ui.switchCraftingCategory(category);
|
||
return;
|
||
}
|
||
|
||
// Fallback: Manual category switching
|
||
document.querySelectorAll('.crafting-cat-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
const targetButton = document.querySelector(`[data-category="${category}"]`);
|
||
if (targetButton) {
|
||
targetButton.classList.add('active');
|
||
}
|
||
}
|
||
|
||
function switchBaseView(view) {
|
||
console.log('[GLOBAL] switchBaseView called with:', view);
|
||
|
||
// Try to use BaseSystem first
|
||
if (window.game && window.game.systems && window.game.systems.base) {
|
||
window.game.systems.base.switchBaseView(view);
|
||
return;
|
||
}
|
||
|
||
// Fallback: Manual view switching
|
||
document.querySelectorAll('.base-nav-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
const targetButton = document.querySelector(`[data-view="${view}"]`);
|
||
if (targetButton) {
|
||
targetButton.classList.add('active');
|
||
}
|
||
|
||
// Hide all base view contents
|
||
document.querySelectorAll('.base-view-content').forEach(content => {
|
||
content.style.display = 'none';
|
||
});
|
||
|
||
// Show selected view content
|
||
const targetContent = document.getElementById(`base-${view}`);
|
||
if (targetContent) {
|
||
targetContent.style.display = 'block';
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- Hidden Console Window -->
|
||
<div id="consoleWindow" class="console-window">
|
||
<div class="console-header">
|
||
<span>Developer Console</span>
|
||
<button class="console-close" onclick="toggleConsole()">×</button>
|
||
</div>
|
||
<div class="console-content">
|
||
<div id="consoleOutput" class="console-output"></div>
|
||
<div class="console-input-container">
|
||
<input type="text" id="consoleInput" class="console-input" placeholder="Type command here..." onkeypress="handleConsoleInput(event)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|