Skip to content

Commit 4b86980

Browse files
ErnestKapesaErnestKapesa
committed
patch
ui updates
1 parent ccd8074 commit 4b86980

File tree

92 files changed

+3307
-249
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+3307
-249
lines changed

‎.DS_Store‎

10 KB
Binary file not shown.

‎01-Candy-Crush-Game/index.html‎

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,43 @@
11
<!DOCTYPE html>
2-
<html lang="en" dir="ltr">
2+
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Talha - Candy Crush</title>
6-
7-
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
8-
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
9-
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
10-
11-
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
12-
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
13-
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
14-
15-
<link rel="icon" href="https://i.ibb.co/M6KTWnf/pic.jpg">
16-
17-
<link rel="stylesheet" href="style.css">
18-
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
19-
<script src="script.js" charset="utf-8"></script>
20-
</head>
21-
<body>
22-
<!-- Mode Selection Screen -->
23-
<div id="modeSelection">
24-
<h2>Choose Game Mode</h2>
25-
<button id="endlessMode">Endless Mode</button>
26-
<button id="timedMode">Timed Mode</button>
27-
</div>
28-
<!-- Scoreboard with Timer and Change Mode Button -->
29-
<div class="scoreBoard">
30-
<h3>score</h3>
31-
<h1 id="score">0</h1>
32-
<div id="timer"></div>
33-
<button id="changeMode">Change Mode</button>
34-
</div>
35-
<!-- Game Grid -->
36-
<div class="grid"></div>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6+
<title>Candy Match Remix</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="icon" href="../logo.png" />
14+
<link rel="stylesheet" href="../shared/styles/app.css" />
15+
<link rel="stylesheet" href="style.css" />
16+
<link rel="stylesheet" href="../shared/styles/game-shell.css" />
17+
</head>
18+
<body data-mcgz-context="game"
19+
data-mcgz-game-id="candy-crush"
20+
data-mcgz-score-selector="#score"
21+
data-mcgz-score-mode="best">
22+
<main class="cc-wrapper">
23+
<div id="modeSelection" class="cc-mode" role="dialog" aria-modal="true">
24+
<h2>Choose Game Mode</h2>
25+
<button id="endlessMode" class="mc-btn mc-btn--primary">Endless Mode</button>
26+
<button id="timedMode" class="mc-btn mc-btn--ghost">Timed Mode</button>
27+
</div>
28+
<section class="scoreBoard" aria-live="polite">
29+
<div class="scoreBoard__item">
30+
<h3>Score</h3>
31+
<h1 id="score">0</h1>
32+
</div>
33+
<div class="scoreBoard__item">
34+
<div id="timer" aria-live="polite"></div>
35+
<button id="changeMode" class="mc-btn mc-btn--ghost">Change Mode</button>
36+
</div>
37+
</section>
38+
<div class="grid" role="grid" aria-label="Candy board"></div>
39+
</main>
40+
<script src="../shared/scripts/app.js" defer></script>
41+
<script src="script.js" charset="utf-8" defer></script>
3742
</body>
38-
</html>
43+
</html>

‎01-Candy-Crush-Game/script.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ function candyCrushGame() {
88
const scoreDisplay = document.getElementById("score");
99
const timerDisplay = document.getElementById("timer");
1010
const modeSelection = document.getElementById("modeSelection");
11+
const scoreboardPanel = document.querySelector(".scoreBoard");
1112
const endlessButton = document.getElementById("endlessMode");
1213
const timedButton = document.getElementById("timedMode");
1314
const changeModeButton = document.getElementById("changeMode");
@@ -187,8 +188,8 @@ function candyCrushGame() {
187188
function startGame(mode) {
188189
currentMode = mode;
189190
modeSelection.style.display = "none";
190-
grid.style.display = "flex";
191-
scoreDisplay.parentElement.style.display = "flex"; // Show scoreboard
191+
grid.classList.add("is-active");
192+
scoreboardPanel.classList.add("is-active");
192193
createBoard();
193194
score = 0;
194195
scoreDisplay.innerHTML = score;
@@ -234,13 +235,13 @@ function candyCrushGame() {
234235
if (currentMode === "timed") {
235236
clearInterval(timerInterval);
236237
}
237-
grid.style.display = "none";
238-
scoreDisplay.parentElement.style.display = "none";
238+
grid.classList.remove("is-active");
239+
scoreboardPanel.classList.remove("is-active");
239240
modeSelection.style.display = "flex"; // Show mode selection screen
240241
}
241242

242243
// Event Listeners
243244
endlessButton.addEventListener("click", () => startGame("endless"));
244245
timedButton.addEventListener("click", () => startGame("timed"));
245246
changeModeButton.addEventListener("click", changeMode);
246-
}
247+
}

‎01-Candy-Crush-Game/style.css‎

Lines changed: 97 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,131 @@
1-
/* General Styling */
1+
:root {
2+
--cc-panel: rgba(255, 255, 255, 0.08);
3+
--cc-panel-border: rgba(255, 255, 255, 0.22);
4+
--cc-bg: #101423;
5+
}
6+
27
body {
3-
background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png');
8+
margin: 0;
9+
font-family: 'Montserrat', sans-serif;
10+
background-color: var(--cc-bg);
11+
min-height: 100vh;
412
display: flex;
513
justify-content: center;
614
align-items: center;
7-
min-height: 100vh;
8-
font-family: 'Montserrat', sans-serif;
9-
color: #85796b;
15+
color: #f7f9ff;
1016
}
1117

12-
.grid {
13-
display: flex;
14-
flex-wrap: wrap;
15-
height: 560px;
16-
width: 560px;
17-
background-color: rgba(109, 127, 151, 0.5);
18-
padding: 5px;
19-
border-radius: 10px;
20-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
21-
margin-left: 80px;
22-
margin-top: 50px;
18+
.cc-wrapper {
19+
width: min(92vw, 620px);
20+
display: grid;
21+
gap: clamp(1rem, 4vw, 1.75rem);
22+
padding: clamp(1rem, 5vw, 2.5rem);
23+
border-radius: 28px;
24+
background: rgba(5, 7, 15, 0.75);
25+
border: 1px solid rgba(255, 255, 255, 0.12);
26+
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
27+
position: relative;
2328
}
2429

25-
.grid div {
26-
height: 70px;
27-
width: 70px;
28-
background-size: cover;
29-
background-position: center;
30-
border-radius: 5px;
31-
transition: transform 0.2s ease; /* Smooth animation for interactions */
30+
.scoreBoard {
31+
display: none;
32+
justify-content: space-between;
33+
align-items: stretch;
34+
gap: 1rem;
35+
background: rgba(15, 214, 255, 0.08);
36+
border: 1px solid var(--cc-panel-border);
37+
border-radius: 20px;
38+
padding: 1rem;
3239
}
3340

34-
/* Hover effect for interactivity */
35-
.grid div:hover {
36-
transform: scale(1.05); /* Slightly enlarge on hover */
41+
.scoreBoard.is-active {
42+
display: flex;
3743
}
3844

39-
/* Scoreboard Styling */
40-
.scoreBoard {
41-
background-color: cyan;
42-
border-radius: 20px;
43-
margin-top: 200px;
44-
margin-left: 200px;
45-
width: auto;
46-
height: 120px;
47-
padding: 20px;
48-
display: flex;
49-
flex-direction: column;
50-
justify-content: space-between;
45+
.scoreBoard__item {
46+
display: grid;
47+
gap: 0.5rem;
5148
align-items: center;
52-
text-align: center;
53-
color: #85796b;
49+
justify-items: center;
5450
}
5551

56-
h3, h1 {
57-
font-family: 'Montserrat', sans-serif;
52+
.scoreBoard h3 {
53+
margin: 0;
54+
font-size: 0.9rem;
55+
letter-spacing: 0.12em;
5856
text-transform: uppercase;
57+
color: rgba(255, 255, 255, 0.75);
58+
}
59+
60+
.scoreBoard h1 {
5961
margin: 0;
62+
font-size: clamp(2rem, 8vw, 2.8rem);
63+
color: #ffffff;
6064
}
6165

62-
h1 {
63-
margin-top: -10px;
66+
#timer {
67+
min-height: 1.25rem;
68+
font-weight: 600;
6469
}
6570

71+
#changeMode {
72+
width: 100%;
73+
}
74+
75+
.grid {
76+
display: none;
77+
grid-template-columns: repeat(8, minmax(0, 1fr));
78+
gap: 6px;
79+
background: rgba(0, 0, 0, 0.28);
80+
border-radius: 20px;
81+
padding: 8px;
82+
border: 1px solid rgba(255, 255, 255, 0.08);
83+
}
84+
85+
.grid.is-active {
86+
display: grid;
87+
}
88+
89+
.grid div {
90+
aspect-ratio: 1 / 1;
91+
border-radius: 8px;
92+
background-size: cover;
93+
background-position: center;
94+
transition: transform 0.18s ease;
95+
}
96+
97+
.grid div:focus,
6698
.grid div:hover {
67-
transform: scale(1.05); /* Slightly enlarge on hover */
99+
transform: scale(1.04);
68100
}
69101

70-
/* Mode Selection Styling */
71-
#modeSelection {
102+
.cc-mode {
103+
position: absolute;
104+
inset: 0;
72105
display: flex;
73106
flex-direction: column;
74-
align-items: center;
75107
justify-content: center;
76-
height: 100vh;
77-
background-color: #f0f0f0;
78-
font-family: 'Montserrat', sans-serif;
79-
position: absolute;
80-
top: 0;
81-
left: 0;
82-
width: 100%;
83-
z-index: 10;
84-
}
85-
86-
#modeSelection h2 {
87-
margin-bottom: 20px;
88-
color: #333;
108+
align-items: center;
109+
gap: 1rem;
110+
padding: 1.5rem;
111+
border-radius: 28px;
112+
background: rgba(5, 7, 15, 0.94);
113+
border: 1px solid rgba(255, 255, 255, 0.1);
114+
text-align: center;
89115
}
90116

91-
#modeSelection button {
92-
margin: 10px;
93-
padding: 10px 20px;
94-
font-size: 16px;
95-
cursor: pointer;
96-
background-color: #87ceeb;
97-
border: none;
98-
border-radius: 5px;
99-
color: white;
117+
.cc-mode h2 {
118+
margin: 0;
119+
font-size: clamp(1.5rem, 5vw, 2.25rem);
100120
}
101121

102-
/* Timer and Change Mode Button */
103-
#timer {
104-
font-size: 18px;
105-
margin-top: 10px;
122+
.cc-mode button {
123+
width: min(220px, 80%);
106124
}
107125

108-
#changeMode {
109-
margin-top: 10px;
110-
padding: 5px 10px;
111-
background-color: #ff6347;
112-
color: white;
113-
border: none;
114-
border-radius: 5px;
115-
cursor: pointer;
126+
@media (max-width: 560px) {
127+
.scoreBoard {
128+
flex-direction: column;
129+
text-align: center;
130+
}
116131
}
117-
118-
/* Initially Hide Game Elements */
119-
.grid, .scoreBoard {
120-
display: none;
121-
}

‎02-Archery-Game/index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@
1717

1818
<link rel="icon" href="https://i.ibb.co/M6KTWnf/pic.jpg">
1919

20-
</head>
21-
<body>
20+
<link rel="stylesheet" href="../shared/styles/app.css" />
21+
<link rel="stylesheet" href="../shared/styles/game-shell.css" />
22+
</head>
23+
<body data-mcgz-context="game" data-mcgz-game-id="archery">
2224
<svg id="game" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400" overflow="visible">
2325
<linearGradient id="ArcGradient" >
2426
<stop offset="0" stop-color="#fff" stop-opacity=".2"/>
@@ -80,6 +82,7 @@
8082
<span>Draw back an arrow and launch it!</span>
8183
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
8284
<script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
83-
<script src="script.js"></script>
85+
<script src="../shared/scripts/app.js" defer></script>
86+
<script defer src="script.js"></script>
8487
</body>
8588
</html>

‎03-Speed-Typing-Game/index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@
1717

1818
<link rel="icon" href="https://i.ibb.co/M6KTWnf/pic.jpg">
1919

20-
</head>
21-
<body>
20+
<link rel="stylesheet" href="../shared/styles/app.css" />
21+
<link rel="stylesheet" href="../shared/styles/game-shell.css" />
22+
</head>
23+
<body data-mcgz-context="game" data-mcgz-game-id="speed-typing">
2224
<main>
2325
<div class="quote-display" id="quoteDisplay"><span></span></div>
2426
<section class="typing">
@@ -36,6 +38,7 @@
3638
<textarea class="quote-input" name="quoteInput" id="quoteInput" placeholder="Start typing right here!" cdkFocusInitial></textarea>
3739
</section>
3840
</main>
39-
<script src="script.js"></script>
41+
<script src="../shared/scripts/app.js" defer></script>
42+
<script defer src="script.js"></script>
4043
</body>
4144
</html>

0 commit comments

Comments
 (0)