Skip to content

Commit 6729b2d

Browse files
Merge pull request #113 from inloop20/fix/wordle-ux-and-instructions
fix(wordle): improve UX layout, add instructions popup
2 parents 1beb4f7 + f417bc9 commit 6729b2d

File tree

2 files changed

+123
-15
lines changed

2 files changed

+123
-15
lines changed

src/pages/games/Wordle.js

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,28 @@ const Keyboard = () => {
200200
);
201201
}
202202

203+
const HowToPlayPopup = ({ onClose }) => {
204+
return (
205+
<div className="WordlePopupOverlay">
206+
<div className="WordlePopup">
207+
<h2>How to Play</h2>
208+
<p>Guess the <b>5-letter word</b> in 6 tries.</p>
209+
<ul className="WordleRules">
210+
<li>Each guess must be a valid 5-letter word.</li>
211+
<li>After each guess, the color of the tiles will change to show how close your guess was to the word.</li>
212+
<li><span className="rule-box correct"></span> = Correct letter in the correct position.</li>
213+
<li><span className="rule-box almost"></span> = Letter is in the word but in the wrong spot.</li>
214+
<li><span className="rule-box error"></span> = Letter not in the word.</li>
215+
</ul>
216+
<button className="WordleStartBtn" onClick={onClose}>
217+
Start Game
218+
</button>
219+
</div>
220+
</div>
221+
);
222+
};
223+
224+
203225
export const Wordle=()=> {
204226

205227
const boardDefault = [
@@ -221,6 +243,7 @@ export const Wordle=()=> {
221243
gameOver: false,
222244
guessedWord: false,
223245
});
246+
const [showInstructions, setShowInstructions] = useState(true);
224247

225248
useEffect(() => {
226249
generateWordSet().then((words) => {
@@ -281,7 +304,12 @@ export const Wordle=()=> {
281304
<nav className="Wordlenav">
282305
<h1 className="WordleTitle">Wordle</h1>
283306
</nav>
284-
<AppContext.Provider
307+
308+
{showInstructions && (
309+
<HowToPlayPopup onClose={() => setShowInstructions(false)} />
310+
)}
311+
312+
{!showInstructions && ( <AppContext.Provider
285313
value={{
286314
board,
287315
setBoard,
@@ -314,7 +342,8 @@ export const Wordle=()=> {
314342
)}
315343
</div> : <Keyboard />}
316344
</div>
317-
</AppContext.Provider>
345+
</AppContext.Provider>
346+
)}
318347
</div>
319348
);
320349
}

src/styles/pages/games/Wordle.css

Lines changed: 92 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.Wordle {
22
text-align: center;
3-
background-color: white;
4-
/* width: 100vw;
5-
height: 100vh; */
3+
background-color: black;
4+
/* width: 100vw;
5+
height: 100vh; */
66
/* display: flex; */
7-
color: black;
7+
height:1000px
88
}
99

1010
.Wordlenav {
@@ -19,9 +19,89 @@
1919
.WordleTitle{
2020
margin: 0;
2121
font-family: Helvetica, Arial, sans-serif;
22-
color: black;
22+
color: rgb(223, 223, 223);
2323
font-size: 45px;
2424
}
25+
26+
.WordlePopupOverlay {
27+
position: fixed;
28+
inset: 0;
29+
background: rgba(0, 0, 0, 0.8);
30+
display: flex;
31+
align-items: center;
32+
justify-content: center;
33+
z-index: 999;
34+
}
35+
36+
.WordlePopup {
37+
background: #ffffff;
38+
color: #000;
39+
width: 90%;
40+
max-width: 450px;
41+
border-radius: 12px;
42+
padding: 25px 30px;
43+
text-align: center;
44+
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
45+
}
46+
47+
.WordlePopup h2 {
48+
margin-bottom: 10px;
49+
font-size: 26px;
50+
}
51+
52+
.WordlePopup p {
53+
font-size: 16px;
54+
margin-bottom: 15px;
55+
}
56+
57+
.WordleRules {
58+
text-align: left;
59+
margin: 10px 0 0 0;
60+
padding-left: 20px;
61+
}
62+
63+
.WordleRules li {
64+
margin: 6px 0;
65+
font-size: 15px;
66+
}
67+
68+
.rule-box {
69+
display: inline-block;
70+
width: 20px;
71+
height: 20px;
72+
margin-right: 6px;
73+
border-radius: 4px;
74+
vertical-align: middle;
75+
}
76+
77+
.rule-box.correct {
78+
background-color: #528d4e;
79+
}
80+
81+
.rule-box.almost {
82+
background-color: #b49f39;
83+
}
84+
85+
.rule-box.error {
86+
background-color: #3a393c;
87+
}
88+
89+
.WordleStartBtn {
90+
background-color: #528d4e;
91+
color: white;
92+
border: none;
93+
padding: 10px 25px;
94+
border-radius: 6px;
95+
font-size: 16px;
96+
cursor: pointer;
97+
transition: background 0.2s;
98+
}
99+
100+
.WordleStartBtn:hover {
101+
background-color: #437741;
102+
}
103+
104+
25105
.game {
26106
width: 100vw;
27107
height: calc(100vh - 170px);
@@ -34,10 +114,9 @@
34114
.Wordleboard {
35115
width: 450px;
36116
height: 550px;
37-
border: 1px solid black;
38117
display: flex;
118+
align-items: center;
39119
flex-direction: column;
40-
padding-bottom: 10px;
41120
}
42121

43122
.row {
@@ -48,16 +127,15 @@
48127
}
49128

50129
.letter {
51-
flex: 33%;
52-
height: 100%;
53-
border: 1px solid grey;
130+
width: 60px;
131+
height: 60px;
132+
border: 1px solid rgb(85, 78, 78);
54133
margin: 5px;
55134
display: grid;
56-
min-height: 48px;
57135
place-items: center;
58136
font-size: 30px;
59137
font-weight: bolder;
60-
color: black;
138+
color: rgb(245, 245, 245);
61139
font-family: Arial, Helvetica, sans-serif;
62140
}
63141

@@ -76,7 +154,7 @@
76154
.keyboard {
77155
width: 700px;
78156
height: 300px;
79-
/* margin-top: px; */
157+
margin-top: 10px;
80158
}
81159

82160
.Wordleline1 {
@@ -114,6 +192,7 @@
114192
color: white;
115193
font-family: Arial, Helvetica, sans-serif;
116194
cursor: pointer;
195+
font-weight: bold;
117196
}
118197

119198
#big {

0 commit comments

Comments
 (0)