Hugging Face's logo

Spaces:
Erythrocyte89
/
Mathgame
Running

App Files Community
Mathgame
File size: 7,143 Bytes
49164be
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matematická Pevnost: Záchrana Jednorožce</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game-container">
        <!-- Hlavní Menu -->
        <div id="main-menu" class="screen">
            <h1>Matematická Pevnost</h1>
            <p>Postav hrad, ubraň ho před padouši a zachraň jednorožce!</p>
            <button id="btn-start" class="btn primary">Hrát</button>
            <button id="btn-stats-menu" class="btn secondary">Statistiky</button>
        </div>

        <!-- Fáze 1: Stavění -->
        <div id="build-screen" class="screen hidden">
            <h2>Fáze 1: Stavba Hradu</h2>

            <div id="build-style-selection">
                <p>Vyber si vzhled svého hradu:</p>
                <div class="style-chooser">
                    <div class="style-option selected" data-style="castle1" style="background-image: url('assets/castle1.svg');"></div>
                    <div class="style-option" data-style="castle2" style="background-image: url('assets/castle2.svg');"></div>
                    <div class="style-option" data-style="castle3" style="background-image: url('assets/castle3.svg');"></div>
                </div>
                <button id="btn-start-build" class="btn primary">Začít stavět!</button>
            </div>

            <div id="build-action-area" class="hidden" style="display: flex; flex-direction: column; align-items: center; width: 100%;">
                <div class="progress-bar-container">
                    <div id="build-progress" class="progress-bar"></div>
                </div>
                <p id="build-progress-text">Krok 0 / 7</p>

                <div class="build-visual-container">
                    <div id="build-visual-step" class="build-visual-step" style="height: 0%;"></div>
                </div>

                <div id="build-math-problem" class="math-problem"></div>
                
                <div class="input-area">
                    <input type="number" id="build-input" class="num-input" autocomplete="off" placeholder="Zadej výsledek">
                    <div id="build-compare-buttons" class="compare-buttons hidden">
                        <button class="btn compare-btn" data-val="<"><</button>
                        <button class="btn compare-btn" data-val="=">=</button>
                        <button class="btn compare-btn" data-val=">">></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fáze 2: Obrana -->
        <div id="defend-screen" class="screen hidden">
            <div class="top-hud">
                <div class="hud-item">Vlna: <span id="wave-display">1</span></div>
                <div class="hud-item">Mince: <span id="coins-display">0</span> 🪙</div>
                <div class="hud-item streak-display">Streak: <span id="streak-display">0</span> 🔥</div>
            </div>
            
            <div class="castle-area">
                <div class="castle-container">
                    <div class="castle" id="main-castle"></div>
                    <div class="princess"></div>
                </div>
                <div class="hp-bar-container">
                    <div id="castle-hp-bar" class="hp-bar"></div>
                </div>
                <p id="castle-hp-text">100 / 100</p>
            </div>

            <!-- Prostor pro nepřátele -->
            <div id="enemies-area"></div>

            <!-- QTE Jednorožec -->
            <div id="qte-container" class="hidden">
                <div class="qte-character">🦄 Pomoc!</div>
                <div class="progress-bar-container qte-timer-container">
                    <div id="qte-timer-bar" class="progress-bar qte-timer"></div>
                </div>
                <div id="qte-math-problem" class="math-problem"></div>
            </div>

            <div class="input-area">
                <input type="number" id="defend-input" class="num-input" autocomplete="off" placeholder="Zadej výsledek">
                <div id="defend-compare-buttons" class="compare-buttons hidden">
                    <button class="btn compare-btn" data-val="<"><</button>
                    <button class="btn compare-btn" data-val="=">=</button>
                    <button class="btn compare-btn" data-val=">">></button>
                </div>
            </div>
        </div>

        <!-- Obchod -->
        <div id="shop-screen" class="screen hidden">
            <h2>Obchod - Konec vlny <span id="shop-wave-num"></span></h2>
            <p>Máš: <span id="shop-coins"></span> 🪙</p>
            <div class="shop-items">
                <div class="shop-item">
                    <h3>Pevnější Hradby</h3>
                    <p>Zvýší maximální životy hradu (+20 HP)</p>
                    <button class="btn shop-buy-btn" data-upgrade="hp" id="buy-hp">Koupit (50 🪙)</button>
                </div>
                <div class="shop-item">
                    <h3>Zpomalovací Aura</h3>
                    <p>Zpomalí pohyb nepřátel</p>
                    <button class="btn shop-buy-btn" data-upgrade="slow" id="buy-slow">Koupit (100 🪙)</button>
                </div>
                <div class="shop-item">
                    <h3>Vílí Pomocník</h3>
                    <p>Občas sám zaútočí na nepřítele</p>
                    <button class="btn shop-buy-btn" data-upgrade="fairy" id="buy-fairy">Koupit (150 🪙)</button>
                </div>
            </div>
            <button id="btn-next-wave" class="btn primary mt-2">Další Vlna!</button>
        </div>

        <!-- Game Over & Statistiky -->
        <div id="game-over-screen" class="screen hidden">
            <h2>Hrad padl! 💥</h2>
            <div class="stats-container">
                <p>Dosažená vlna: <span id="stat-wave"></span></p>
                <p>Celkem skóre: <span id="stat-score"></span></p>
                <p>Nejdelší streak: <span id="stat-streak"></span> 🔥</p>
                <p>Zabito nepřátel: <span id="stat-kills"></span></p>
            </div>
            <button id="btn-restart" class="btn primary mt-2">Hrát znovu</button>
            <button id="btn-to-main" class="btn secondary mt-2">Hlavní Menu</button>
        </div>

        <!-- Trvalé statistiky (z Menu) -->
        <div id="stats-menu-screen" class="screen hidden">
            <h2>Síň Slávy</h2>
            <div class="stats-container">
                <p>Nejvyšší vlna: <span id="global-best-wave">0</span></p>
                <p>Celkem odehráno her: <span id="global-games-played">0</span></p>
                <p>Nasbíráno mincí (historicky): <span id="global-total-coins">0</span></p>
            </div>
            <button id="btn-stats-back" class="btn secondary mt-2">Zpět</button>
        </div>

        <!-- Particle container pro efekty -->
        <div id="particles"></div>
    </div>
    <script src="app.js"></script>
</body>
</html>