Skip to content

Commit b9b9703

Browse files
he-is-talhahe-is-talha
authored
Merge pull request #12 from he-is-talha/feat/add-solitaire-game
Feat: Add Solitaire Game
2 parents e194ce6 + 747ab90 commit b9b9703

4 files changed

Lines changed: 1183 additions & 0 deletions

File tree

‎36-Solitaire-Game/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6+
<title>Talha - Solitaire Game</title>
7+
8+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
9+
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
10+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
11+
12+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
13+
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
14+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
15+
16+
<link rel="icon" href="https://i.ibb.co/M6KTWnf/pic.jpg" />
17+
<link rel="stylesheet" href="style.css" />
18+
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet" />
19+
</head>
20+
<body>
21+
<div class="wrapper">
22+
<!-- Level selection -->
23+
<div id="levelScreen" class="level-screen">
24+
<h1>Solitaire</h1>
25+
<p>Choose difficulty</p>
26+
<div class="level-buttons">
27+
<button type="button" data-level="easy" class="level-btn">
28+
<span class="level-name">Easy</span>
29+
<span class="level-desc">Draw 1 · Unlimited undo · Hints</span>
30+
</button>
31+
<button type="button" data-level="medium" class="level-btn">
32+
<span class="level-name">Medium</span>
33+
<span class="level-desc">Draw 1 · 5 undos · Hints</span>
34+
</button>
35+
<button type="button" data-level="hard" class="level-btn">
36+
<span class="level-name">Hard</span>
37+
<span class="level-desc">Draw 3 · No undo · No hints</span>
38+
</button>
39+
</div>
40+
</div>
41+
42+
<!-- Game screen -->
43+
<div id="gameScreen" class="game-screen hidden">
44+
<header class="header">
45+
<h1>Solitaire</h1>
46+
<span class="level-badge" id="levelBadge">Easy</span>
47+
<div class="header-actions">
48+
<button type="button" id="hintBtn" class="btn btn-ghost" title="Hint">Hint</button>
49+
<button type="button" id="undoBtn" class="btn btn-ghost" title="Undo">Undo <span id="undoCount"></span></button>
50+
<button type="button" id="changeLevelBtn" class="btn btn-ghost">Level</button>
51+
<button type="button" id="newGameBtn" class="btn">New Game</button>
52+
</div>
53+
</header>
54+
55+
<main class="game-container">
56+
<div class="top-row">
57+
<div class="stock-wrap">
58+
<div id="stock" class="pile stock" aria-label="Stock"></div>
59+
<div id="waste" class="pile waste" aria-label="Waste"></div>
60+
</div>
61+
<div id="foundations" class="foundations" aria-label="Foundations"></div>
62+
</div>
63+
<div id="tableau" class="tableau" aria-label="Tableau"></div>
64+
</main>
65+
66+
<!-- Win overlay -->
67+
<div id="winOverlay" class="win-overlay hidden">
68+
<div class="win-box">
69+
<h2>You win!</h2>
70+
<p>Congratulations, you completed Solitaire.</p>
71+
<div class="win-actions">
72+
<button type="button" id="playAgainBtn" class="btn btn-large">Play Again</button>
73+
<button type="button" id="changeLevelFromWinBtn" class="btn btn-ghost">Change Level</button>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
80+
<script src="script.js"></script>
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)