battlemath/index.html at main · JesseRWeigel/battlemath · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/battlemath/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#FFD93D" />
    <meta
      name="description"
      content="A fun math game for kids! Defeat enemies by solving math problems."
    />
    <link rel="manifest" href="/battlemath/manifest.json" />
    <title>Battle Math</title>
    <style>
      @keyframes floatUp {
        0% { opacity: 1; transform: translateY(0) scale(1); }
        100% { opacity: 0; transform: translateY(-60px) scale(1.3); }
      }
      @keyframes shake {
        10%, 90% { transform: translateX(-2px); }
        20%, 80% { transform: translateX(4px); }
        30%, 50%, 70% { transform: translateX(-6px); }
        40%, 60% { transform: translateX(6px); }
      }
      @keyframes enemyDefeat {
        0% { opacity: 1; transform: scale(1) rotate(0deg); }
        50% { opacity: 0.5; transform: scale(0.5) rotate(20deg); }
        100% { opacity: 0; transform: scale(0) rotate(40deg); }
      }
      @keyframes victoryBounce {
        0% { transform: scale(0); opacity: 0; }
        50% { transform: scale(1.2); opacity: 1; }
        70% { transform: scale(0.9); }
        100% { transform: scale(1); opacity: 1; }
      }
      @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.06); }
      }
      @keyframes fireGlow {
        0%, 100% { box-shadow: 0 0 10px rgba(255, 100, 0, 0.3); }
        50% { box-shadow: 0 0 20px rgba(255, 100, 0, 0.6); }
      }
      @keyframes heroIdle {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
      }
      @keyframes heroAttack {
        0% { transform: translateX(0); }
        30% { transform: translateX(30px); }
        100% { transform: translateX(0); }
      }
      @keyframes heroHurt {
        10%, 90% { transform: translateX(-3px); }
        20%, 80% { transform: translateX(3px); }
        30%, 50%, 70% { transform: translateX(-5px); }
        40%, 60% { transform: translateX(5px); }
      }
      @keyframes enemySway {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(4px); }
      }
      @keyframes starEarned {
        0% { transform: scale(0); opacity: 0; }
        60% { transform: scale(1.3); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
      }
      @keyframes heartBreak {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.3); opacity: 0.5; }
        100% { transform: scale(0.8); opacity: 0.4; }
      }
      @keyframes enemyEntrance {
        0% { transform: scale(0) translateY(-30px); opacity: 0; }
        60% { transform: scale(1.1) translateY(5px); opacity: 1; }
        100% { transform: scale(1) translateY(0); opacity: 1; }
      }
      @keyframes bossEntrance {
        0% { transform: scale(0) rotate(-10deg); opacity: 0; }
        60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
        80% { transform: scale(0.95) rotate(-2deg); }
        100% { transform: scale(1) rotate(0deg); opacity: 1; }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
        }
      }
    </style>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@400;600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>