Pipe-Connect/index.php at main · rskworld/Pipe-Connect · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<?php
$game = [
  'id' => 'pipe-connect',
  'title' => 'Pipe Connect',
  'description' => 'Connect the pipes to create a path for water to flow through.',
  'image' => './pipe-connect/pipe-connect.png',
  'link' => './pipe-connect/index.php',
  'technologies' => ['JavaScript', 'HTML5', 'CSS3'],
  'difficulty' => 'Beginner',
  'rating' => 4,
  'category' => 'puzzle',
  'tags' => ['Logic', 'Pathfinding'],
  'features' => [
    'Random Puzzle Generator',
    'Interactive Gameplay',
    'Time-Based Challenges'
  ]
];
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><?php echo htmlspecialchars($game['title']); ?> — RSK World</title>
    <meta name="description" content="<?php echo htmlspecialchars($game['description']); ?>" />
    <meta name="theme-color" content="#0ea5e9" />
    <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=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css" />


  </head>
  <body>
    <header class="site-header">
      <div class="container">
        <h1 class="title"><?php echo htmlspecialchars($game['title']); ?></h1>
        <p class="tagline"><?php echo htmlspecialchars($game['description']); ?></p>
      </div>

    </header>

    <main class="container">
      <section class="toolbar" aria-label="Game controls">
        <div class="toolbar__left">
          <label for="difficulty">Difficulty</label>
          <select id="difficulty" aria-label="Select difficulty">
            <option value="beginner" selected>Beginner</option>
            <option value="intermediate">Intermediate</option>
            <option value="expert">Expert</option>
            <option value="custom">Custom</option>
          </select>
          <button id="newGameBtn" class="btn">New Game</button>
          <button id="pauseBtn" class="btn" aria-pressed="false" aria-label="Pause game">Pause</button>
          <button id="hintBtn" class="btn" aria-label="Use a hint">Hint</button>
          <button id="soundBtn" class="btn" aria-pressed="true" aria-label="Toggle sound">Sound: On</button>
          <button id="themeBtn" class="btn" aria-label="Toggle theme">Theme</button>
          <button id="undoBtn" class="btn" aria-label="Undo last move">Undo</button>
          <button id="redoBtn" class="btn" aria-label="Redo last move">Redo</button>
          <div id="customControls" class="custom-controls" aria-label="Custom settings">
            <input id="rowsInput" class="input input--num" type="number" min="5" max="20" value="10" aria-label="Rows" />
            <input id="colsInput" class="input input--num" type="number" min="5" max="20" value="10" aria-label="Columns" />
            <input id="timeInput" class="input input--num" type="number" min="30" max="600" value="180" aria-label="Time limit (seconds)" />
          </div>
        </div>
        <div class="toolbar__right">
          <div class="stat"><span id="timer">03:00</span> <small>Time</small></div>
          <div class="stat"><span id="moves">0</span> <small>Moves</small></div>
          <div class="stat"><span id="bestTime">--:--</span> <small>Best</small></div>
          <div class="stat"><span id="bestMoves">--</span> <small>Best Moves</small></div>
        </div>
      </section>

      <section class="game-container" aria-label="Pipe Connect grid">
        <div id="grid" class="grid" role="grid" aria-live="polite"></div>
      </section>

      <section class="panels">
        <div id="winPanel" class="panel hidden" role="dialog" aria-modal="true" aria-labelledby="winTitle">
          <h2 id="winTitle">You connected the pipes! 💧</h2>
          <p>Water flows from source to target. Great job!</p>
          <button class="btn" data-action="restart">Play Again</button>
        </div>
        <div id="losePanel" class="panel hidden" role="dialog" aria-modal="true" aria-labelledby="loseTitle">
          <h2 id="loseTitle">Time's up ⏰</h2>
          <p>Try a different strategy or lower the difficulty.</p>
          <button class="btn" data-action="restart">Try Again</button>
        </div>
        <div id="pausePanel" class="panel hidden" role="dialog" aria-modal="true" aria-labelledby="pauseTitle">
          <h2 id="pauseTitle">Game Paused</h2>
          <p>Take a break. Your timer is paused.</p>
          <button class="btn" data-action="resume">Resume</button>
        </div>
      </section>


    </main>

    <footer class="site-footer">
      <div class="container">
        <div class="footer-columns">
          <div>
            <h3>About</h3>
            <ul>
              <li><strong>Category:</strong> <?php echo htmlspecialchars($game['category']); ?></li>
              <li><strong>Difficulty:</strong> <?php echo htmlspecialchars($game['difficulty']); ?></li>
              <li><strong>Technologies:</strong> <?php echo htmlspecialchars(implode(', ', $game['technologies'])); ?></li>
              <li><strong>Features:</strong> <?php echo htmlspecialchars(implode(', ', $game['features'])); ?></li>
              <li><strong>Tags:</strong> <?php echo htmlspecialchars(implode(', ', $game['tags'])); ?></li>
              <li><strong>Link:</strong> <a href="<?php echo htmlspecialchars($game['link']); ?>"><?php echo htmlspecialchars($game['link']); ?></a></li>
            </ul>
          </div>
          <div>
            <h3>Support & Licensing</h3>
            <p>For support, licensing, or custom development inquiries:</p>
            <p>
              Email: <a href="mailto:help@rskworld.in">help@rskworld.in</a><br />
              Phone/WhatsApp: <a href="https://wa.me/919330539277" target="_blank" rel="noopener">+91 9330539277</a>
            </p>
            <p>
              Website: <strong>RSK World</strong><br />
              Business Inquiries: <a href="mailto:help@rskworld.in">help@rskworld.in</a>
            </p>
            <p>🤝 <strong>Contributing</strong>: Pull requests and improvements are welcome.</p>
          </div>
        </div>
        <p class="copyright">&copy; <?php echo date('Y'); ?> RSK World. All rights reserved.</p>
      </div>
    </footer>

    <script src="./game.js" defer></script>
  </body>
  </html>