card-game/index.html at main · NoGenryFord/card-game · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google icons link -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
    />
    <!-- End Google icons link -->
    <link rel="stylesheet" href="styles/style.min.css" />
    <title>Card Game</title>
  </head>
  <body>
    <div class="root" id="root">
      <nav class="nav_line">
        <!-- Counter Turn Display -->
        <div class="turn_display">
          <h3>Turn Mechanic</h3>
          <div class="counter_turn">
            <span class="counter_turn_text">Turn:</span>
            <span class="counter_turn_value" id="counterTurnValue">1</span>
          </div>
          <button class="btn_next_turn" id="btnNextTurn">Next Turn</button>
        </div>
        <!-- End Counter Turn Display -->

        <!-- Coins Display -->
        <div class="coins_display">
          <div class="counter_coin">
            <span class="coins_text material-symbols-outlined"
              >attach_money</span
            >
            <span class="coins_value" id="coinsValue">0</span>
          </div>
          <button class="btn_add_coins" id="btnAddCoins">Add Coins</button>
          <button class="btn_remove_coins" id="btnRemoveCoins">
            Remove Coins
          </button>
        </div>

        <!-- End Coins Display -->

        <!-- Music Status Display -->
        <div class="music_status">
          <!-- <span class="music_status_text" id="musicStatusText">musicOn: </span> -->
          <button class="set-music" id="setMusic">
            <span class="music_status_value" id="musicStatusValue"></span>
          </button>
        </div>

        <!-- End Music Status Display -->
      </nav>
      <div class="main_row">
        <main class="game_field" id="gameField">
          <div class="player_field" id="playerField">
            <button class="sell_card_btn" id="sellCardButton">Sell Card</button>
          </div>
          <div class="enemy_field" id="enemyField"></div>
        </main>
        <aside class="side_panel_right" id="sidePanelRight">
          <button class="debug_spawn_card" id="spawnButton">
            spawn_button_debug
          </button>
          <button class="debug_spawn_card_enemy" id="spawnEnemyButton">
            spawn_button_enemy_debug
          </button>
          <button class="debug_clear_player_field" id="clearPlayerButton">
            clear_player_field_debug
          </button>
          <button class="debug_clear_enemy_field" id="clearEnemyButton">
            clear_enemy_field_debug
          </button>
        </aside>
      </div>
    </div>
    <script type="module" src="static/js/index.js"></script>
  </body>
</html>