Warblock-Top-Down-Shooter/warblock.html at master · ashfaaqrifath/Warblock-Top-Down-Shooter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Warblock - Top Down Shooter</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" type="image/png" href="gamelogo.png?v=1">
</head>
<body>
    <div id="leaderboard">
        <h3>Leaderboard</h3>
        <div id="leaderboardList">
            <!-- leaderboard -->
        </div>
    </div>

    <div id="profileBox">
        <div class="profile-header">
            <i class="fas fa-user-circle"></i>
            <div>
                <span id="usernameDisplay">Loading...</span>
                <div id="emailDisplay" style="font-size: 12px; font-weight: normal; color: #aaa; margin-top: 4px;"></div>
            </div>
        </div>
        <div class="profile-section">
            <div class="profile-stat">
                <span class="stat-label">Highscore</span>
                <span class="stat-value" id="highscoreDisplay">0</span>
                <span class="stat-unit">Levels</span>
            </div>
        </div>
        <div class="profile-actions">
            <button id="logoutBtn" class="profile-btn profile-btn-logout">
                <i class="fas fa-sign-out-alt"></i> Logout
            </button>
        </div>
    </div>

    <div id="activeUpgradesBox">
        <div class="upgrades-header">
            <i class="fa-solid fa-circle-up"></i>
            Active Upgrades
        </div>
        <div id="upgradesList" class="upgrades-list">
            <!-- Active upgrades -->
        </div>
    </div>

    <div id="gameContainer">
        <canvas id="gameCanvas" width="800" height="600"></canvas>

        <div id="hud">
            <div style="color: #fff;">Level <span id="levelDisplay">1</span></div>
            <div style="color: #ffd966;">Credits: <span id="creditsDisplay">0</span></div>
            <div style="color: #0099ff;">Ammo: <span id="ammoDisplay">30/30</span></div>
            <div style="color: #00ff84d8;">Health: <span id="healthDisplay">100</span></div>
        </div>


        <div id="shop">
            <h2>Upgrades</h2>
            <p style="color: #ffd966;">Credits: <span id="shopCredits">0</span></p>
            <div class="shop-grid">
                <button class="upgrade-btn" data-upgrade="extendedMag">
                    <strong>Extended Mag</strong><br>
                    +10 Magazine Size<br>
                    Credits: <span class="cost">25</span>
                </button>
                <button class="upgrade-btn" data-upgrade="highCaliber">
                    <strong>High-Caliber Rounds</strong><br>
                    25% More damage<br>
                    Credits: <span class="cost">25</span>
                </button>
                <button class="upgrade-btn" data-upgrade="temporalField">
                    <strong>Temporal Field</strong><br>
                    Slows enemy (5s)<br>
                    Credits: <span class="cost">75</span>
                </button>
                <button class="upgrade-btn" data-upgrade="siphonRounds">
                    <strong>HP Siphon Rounds</strong><br>
                    +5 HP per kill<br>
                    Credits: <span class="cost">50</span>
                </button>
                <button class="upgrade-btn" data-upgrade="damageImmunity">
                    <strong>Damage Immunity</strong><br>
                    No damage taken (5s)<br>
                    Credits: <span class="cost">75</span>
                </button>
                <button class="upgrade-btn" data-upgrade="explosive">
                    <strong>Explosive</strong><br>
                    Kills enemies within blast radius<br>
                    Credits: <span class="cost">80</span>
                </button>
            </div>
            <div class="shop-actions">
                <button id="solvePuzzleBtn">Solve Puzzle</button>
                <button id="buySelectedBtn">Upgrade</button>
                <button id="nextLevelBtn">Start Next Level</button>
            </div>
        </div>

        <!-- Puzzle modal -->
        <div id="puzzleModal" class="modal" style="display:none;">
            <div class="modal-content">
                <button id="closePuzzleBtn" class="modal-close">✕</button>
                <h3>Heart Game Puzzle</h3>
                <img id="puzzleImageModal" src="" alt="Puzzle image">
                <div class="modal-inputs">
                    <input type="number" id="answerInputModal" placeholder="Your answer">
                    <button id="submitBtnModal">Submit</button>
                </div>
                <div id="puzzleResult" class="modal-result"></div>
            </div>
        </div>


    </div>


    <script type="module" src="/js/Main.js"></script>

</body>
</html>