697 lines
38 KiB
HTML
697 lines
38 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>
|
||
<script src="js/SimpleLocalServer.js"></script>
|
||
<script src="js/LocalServerManager.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">
|
||
<span class="player-name" id="playerName">Commander</span>
|
||
<span class="player-level" id="playerLevel">Lv. 1</span>
|
||
</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">
|
||
<i class="fas fa-tachometer-alt"></i>
|
||
<span>Dashboard</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="dungeons">
|
||
<i class="fas fa-dungeon"></i>
|
||
<span>Dungeons</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="skills">
|
||
<i class="fas fa-graduation-cap"></i>
|
||
<span>Skills</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="base">
|
||
<i class="fas fa-home"></i>
|
||
<span>Base</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="quests">
|
||
<i class="fas fa-scroll"></i>
|
||
<span>Quests</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="inventory">
|
||
<i class="fas fa-backpack"></i>
|
||
<span>Inventory</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="crafting">
|
||
<i class="fas fa-hammer"></i>
|
||
<span>Crafting</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="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 class="stats-grid">
|
||
<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">0h 0m</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">Combat</button>
|
||
<button class="skill-cat-btn" data-category="science">Science</button>
|
||
<button class="skill-cat-btn" data-category="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">Base Overview</button>
|
||
<button class="base-nav-btn" data-view="visualization">Base Visualization</button>
|
||
<button class="base-nav-btn" data-view="ships">Ship Gallery</button>
|
||
<button class="base-nav-btn" data-view="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">Main Story</button>
|
||
<button class="quest-tab-btn" data-type="daily">Daily</button>
|
||
<button class="quest-tab-btn" data-type="weekly">Weekly</button>
|
||
<button class="quest-tab-btn" data-type="completed">Completed</button>
|
||
<button class="quest-tab-btn" data-type="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">Weapons</button>
|
||
<button class="crafting-cat-btn" data-category="armor">Armor</button>
|
||
<button class="crafting-cat-btn" data-category="items">Items</button>
|
||
<button class="crafting-cat-btn" data-category="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">Ships</button>
|
||
<button class="shop-cat-btn" data-category="weapons">Weapons</button>
|
||
<button class="shop-cat-btn" data-category="armors">Armors</button>
|
||
<!-- <button class="shop-cat-btn" data-category="upgrades">Upgrades</button> -->
|
||
<button class="shop-cat-btn" data-category="cosmetics">Cosmetics</button>
|
||
<button class="shop-cat-btn" data-category="consumables">Consumables</button>
|
||
<button class="shop-cat-btn" data-category="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/CraftingSystem.js"></script>
|
||
<script src="js/data/GameData.js"></script>
|
||
<script src="js/ui/UIManager.js"></script>
|
||
<script src="js/GameInitializer.js"></script>
|
||
<script src="js/ui/LiveMainMenu.js"></script>
|
||
<script src="js/main.js"></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>
|