Titan_Game/Titan_Game.html at main · Harshavardhan001457/Titan_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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Board</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <div id="turn-indicator" style="font-size: 1.2rem; font-weight: bold; margin: 10px;"></div>
    <div class="game-container">
        <header>
            <h1>Titan's Circuit</h1>
            <div id="game-controls" style="margin: 10px;">
                <button id="pause-btn" onclick="pauseGame()">⏸️ Pause</button>
                <button id="resume-btn" onclick="resumeGame()">▶️ Resume</button>
                <button id="reset-btn" onclick="resetGame()">🔄 Reset</button>
            </div>
        </header>

        <div class="game-info">
            <div class="player-info player-red">
                <h2>player Red</h2>
                <div class="score">score: <span id="red-score">0</span></div>
            </div>

            <div class="game-status">
                <div id="game-message">Start Placing your Pawns on the outer circuit</div>
                <div id="turn-display">Player Red starts first</div>
                <div id="timer-panel">
                    <p>⏱️ Overall Timer: <span id="overall-timer">05:00</span></p>
                    <p>🔁 Turn Timer (<span id="current-player">Red</span>): <span id="turn-timer">30</span> sec</p>
                </div>
            </div>

            <div class="player-info player-blue">
                <h2>player Blue</h2>
                <div class="score">score: <span id="blue-score">0</span></div>
            </div>
        </div>
    </div>
    <div class="hexagon-container">
        <button class="button outer 0" id="O0" style="--i: 0;"></button>
        <button class="button outer 1" id="O1" style="--i: 1;"></button>
        <button class="button outer 2" id="O2" style="--i: 2;"></button>
        <button class="button outer 3" id="O3" style="--i: 3;"></button>
        <button class="button outer 4" id="O4" style="--i: 4;"></button>
        <button class="button outer 5" id="O5" style="--i: 5;"></button>

        <button class="button middle 0" id="M0" style="--i: 0;"></button>
        <button class="button middle 1" id="M1" style="--i: 1;"></button>
        <button class="button middle 2" id="M2" style="--i: 2;"></button>
        <button class="button middle 3" id="M3" style="--i: 3;"></button>
        <button class="button middle 4" id="M4" style="--i: 4;"></button>
        <button class="button middle 5" id="M5" style="--i: 5;"></button>

        <button class="button inner 0" id="I0" style="--i: 0;"></button>
        <button class="button inner 1" id="I1" style="--i: 1;"></button>
        <button class="button inner 2" id="I2" style="--i: 2;"></button>
        <button class="button inner 3" id="I3" style="--i: 3;"></button>
        <button class="button inner 4" id="I4" style="--i: 4;"></button>
        <button class="button inner 5" id="I5" style="--i: 5;"></button>

        <!-- Edges -->
        <svg class="edges" width="100%" height="100%">
            <line id="edge1" /><text id="weight1" class="weight-text">1</text>
            <line id="edge2" /><text id="weight2" class="weight-text">1</text>
            <line id="edge3" /><text id="weight3" class="weight-text">3</text>
            <line id="edge4" /><text id="weight4" class="weight-text">2</text>
            <line id="edge5" /><text id="weight5" class="weight-text">1</text>
            <line id="edge6" /><text id="weight6" class="weight-text">2</text>
            <line id="edge7" /><text id="weight7" class="weight-text">5</text>
            <line id="edge8" /><text id="weight8" class="weight-text">6</text>
            <line id="edge9" /><text id="weight9" class="weight-text">4</text>
            <line id="edge10" /><text id="weight10" class="weight-text">5</text>
            <line id="edge11" /><text id="weight11" class="weight-text">6</text>
            <line id="edge12" /><text id="weight12" class="weight-text">4</text>
            <line id="edge13" /><text id="weight13" class="weight-text">8</text>
            <line id="edge14" /><text id="weight14" class="weight-text">8</text>
            <line id="edge15" /><text id="weight15" class="weight-text">9</text>
            <line id="edge16" /><text id="weight16" class="weight-text">8</text>
            <line id="edge17" /><text id="weight17" class="weight-text">8</text>
            <line id="edge18" /><text id="weight18" class="weight-text">9</text>
            <line id="edge19" /><text id="weight19" class="weight-text">1</text>
            <line id="edge20" /><text id="weight20" class="weight-text">1</text>
            <line id="edge21" /><text id="weight21" class="weight-text">1</text>
            <line id="edge22" /><text id="weight22" class="weight-text">1</text>
            <line id="edge23" /><text id="weight23" class="weight-text">1</text>
            <line id="edge24" /><text id="weight24" class="weight-text">1</text>

        </svg>
    </div>
    <script src="./Board_setup.js"></script>
    <script type="module" src="./Game_logic_1.js"></script>
</body>
</html>