water_sorted/index.html at main · ARQUI2709/water_sorted · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Water Sort">
  <meta name="theme-color" content="#0f0c29">
  <title>Water Sort Puzzle</title>

  <!-- PWA Manifest & Icons -->
  <link rel="manifest" href="manifest.json">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="512x512" href="assets/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="180x180" href="assets/apple-touch-icon.png">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">

  <!-- External Libraries -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.9/babel.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>

  <style>
    * { margin: 0; padding: 0; }
    html, body, #root {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #0f0c29;
    }
  </style>
</head>
<body>
  <div id="root"></div>

  <!--
    Load order matters — each layer depends on the previous:
      1. Core:   constants → audio → storage → game → solver → hooks
      2. Shared: components  (Bottle, Stars, Confetti, Legend)
      3. Views:  header, controls, game-board, map, win-screen, settings, achievements
      4. App:    app  (orchestrates everything)
  -->

  <!-- Core logic -->
  <script type="text/babel" src="js/constants.js"></script>
  <script type="text/babel" src="js/audio.js"></script>
  <script type="text/babel" src="js/storage.js"></script>
  <script type="text/babel" src="js/game.js"></script>
  <script type="text/babel" src="js/solver.js"></script>
  <script type="text/babel" src="js/hooks.js"></script>

  <!-- Shared components -->
  <script type="text/babel" src="js/components.js"></script>

  <!-- Views -->
  <script type="text/babel" src="js/views/header.js"></script>
  <script type="text/babel" src="js/views/controls.js"></script>
  <script type="text/babel" src="js/views/game-board.js"></script>
  <script type="text/babel" src="js/views/map.js"></script>
  <script type="text/babel" src="js/views/win-screen.js"></script>
  <script type="text/babel" src="js/views/settings.js"></script>
  <script type="text/babel" src="js/views/achievements.js"></script>
  <script type="text/babel" src="js/views/home.js"></script>

  <!-- App shell -->
  <script type="text/babel" src="js/app.js"></script>
</body>
</html>