Block-Shuffle/index.php at main · rskworld/Block-Shuffle · 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
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Block Shuffle</title>
  <meta name="description" content="Rearrange the blocks to match the target pattern.">
  <link rel="stylesheet" href="assets/css/styles.css" />
  <link rel="icon" href="assets/img/block-shuffle.svg" type="image/svg+xml" />
</head>
<body>
  <noscript>
    <div class="noscript">This game requires JavaScript to run. Please enable JavaScript.</div>
  </noscript>

  <header class="site-header">
    <div class="container">
      <div class="brand">
        <img class="logo" src="assets/img/block-shuffle.svg" alt="Block Shuffle logo" />
        <div class="titles">
          <h1>Block Shuffle</h1>
          <p class="subtitle">Rearrange the blocks to create a specific pattern or solve a puzzle.</p>
        </div>
      </div>
      <nav class="toolbar" aria-label="Game controls">
        <div class="left">
          <label for="levelSelect">Level</label>
          <select id="levelSelect" aria-label="Choose level"></select>
        </div>
        <div class="center">
          <button id="shuffleBtn" class="btn" aria-label="Shuffle blocks">Shuffle</button>
          <button id="resetBtn" class="btn" aria-label="Reset level">Reset</button>
          <button id="hintBtn" class="btn" aria-label="Get a hint">Hint</button>
          <button id="undoBtn" class="btn" aria-label="Undo last move">Undo</button>
          <button id="checkBtn" class="btn" aria-label="Check and highlight">Check</button>
          <button id="nextBtn" class="btn" aria-label="Next level">Next ▶</button>
        </div>
        <div class="right stats" aria-live="polite">
          <button id="helpBtn" class="btn" aria-label="Open help">Help</button>
          <button id="soundBtn" class="btn" aria-label="Toggle sound" aria-pressed="true">🔊</button>
          <span class="dot">•</span>
          <span id="levelInfo">Level 1</span>
          <span class="dot">•</span>
          <span id="movesInfo">0 moves</span>
          <span class="dot">•</span>
          <span id="timeInfo">00:00</span>
        </div>
      </nav>
    </div>
  </header>

  <main class="container">
    <section class="progress-bar" aria-label="Progress">
      <div id="progressInner" class="progress-inner" style="width:0%"></div>
    </section>
    <section class="boards">
      <div class="board-panel">
        <h2 class="panel-title">Target</h2>
        <div id="targetGrid" class="grid preview" role="grid" aria-label="Target pattern" aria-readonly="true"></div>
      </div>
      <div class="board-panel">
        <h2 class="panel-title">Your Board</h2>
        <div id="playGrid" class="grid play" role="grid" aria-label="Playable grid"></div>
      </div>
    </section>

    <section id="message" class="message" role="status" aria-live="polite"></section>
  </main>

  <footer class="site-footer">
    <div class="container">
      <p><strong>For support, licensing, or custom development inquiries:</strong></p>
      <p>Email: <a href="mailto:help@rskworld.in">help@rskworld.in</a> • Phone/WhatsApp: <a href="tel:+919330539277">+91 9330539277</a></p>
      <p>Website: <a href="https://rskworld.in" target="_blank" rel="noopener noreferrer">RSK World</a> • Business Inquiries: <a href="mailto:help@rskworld.in">help@rskworld.in</a></p>
      <p>🤝 <strong>Contributing</strong>: Suggestions and improvements are welcome!</p>
    </div>
  </footer>

  <!-- Win Modal -->
  <dialog id="winModal" class="modal">
    <form method="dialog" class="modal-card">
      <h3>🎉 Level Complete!</h3>
      <p id="winStats"></p>
      <div class="modal-actions">
        <button id="playAgainBtn" class="btn">Replay</button>
        <button id="goNextBtn" class="btn">Next Level ▶</button>
        <button value="close" class="btn">Close</button>
      </div>
    </form>
  </dialog>

  <!-- Help Modal -->
  <dialog id="helpModal" class="modal">
    <form method="dialog" class="modal-card">
      <h3>❓ How to Play</h3>
      <ul>
        <li>Drag or tap to swap tiles to match the target pattern.</li>
        <li>Use Hint up to 3 times, Undo last move, Check to highlight mistakes.</li>
        <li>Finish faster and with fewer moves to set a better best score.</li>
      </ul>
      <div class="modal-actions">
        <button value="close" class="btn">Close</button>
      </div>
    </form>
  </dialog>

  <script type="module" src="assets/js/game.js"></script>
</body>

</html>