Skip to content

Commit 19008fb

Browse files
cathoderaycathoderay
committed
css improvements
1 parent c9a20be commit 19008fb

File tree

4 files changed

+103
-83
lines changed

4 files changed

+103
-83
lines changed

‎client/src/App.css‎

Lines changed: 70 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,25 @@
22
max-width: 700px;
33
text-align: center;
44
margin: 0 auto;
5-
5+
padding: 0 1em 1em 1em;
66
}
77

88
#logo {
9+
font-size: 1.2em;
10+
padding-top: 4vh;
911
letter-spacing: -0.1em;
10-
font-size: 2vh;
1112
color: light-dark(#333, #ddd);
1213
}
1314

15+
#logo img {
16+
width: 10%;
17+
}
18+
1419
button {
1520
font-weight: bold;
1621
color: light-dark(#000, #fff);
1722
background-color: light-dark(#ddd, #666);
18-
margin: 10px;
23+
margin: 0.5em;
1924
}
2025

2126
.word {
@@ -27,35 +32,50 @@ button {
2732
}
2833

2934
#word-container {
30-
height: 12vh;
35+
height: 6.5em;
36+
margin-top: 0.5em;
37+
margin-bottom: 1.5em;
38+
padding: 0;
39+
display:grid;
40+
flex-direction: row;
41+
align-items: center;
3142
}
3243

3344
h1 {
3445
margin: 0;
46+
font-size: 3em;
47+
}
48+
49+
p {
50+
margin: 0;
3551
}
3652

3753
#word-container .square {
38-
font-size: 35px;
54+
font-size: 2em;
3955
font-weight: bolder;
40-
max-width: 70px;
41-
max-height: 90px;
42-
width: 13vw;
43-
height: 16vw;
56+
width: 2em;
57+
height: 2.5em;
4458
padding: 0;
59+
background-color: light-dark(#d6f8ff, #3b494d);
60+
box-shadow: 0.2em 0.2em light-dark(lightblue, #20292b);
4561
}
4662

4763
.square {
48-
font-size: 20px;
49-
font-weight: bolder;
50-
max-width: 60px;
51-
max-height: 70px;
52-
width: 8vw;
53-
height: 11vw;
54-
margin: 2px;
64+
font-size: 1.2em;
65+
font-weight: 900;
66+
width: 1.8em;
67+
height: 3em;
68+
margin: 0.3em;
69+
padding: 0;
70+
}
71+
72+
#keyboard-container {
73+
padding-left: 1em;
74+
padding-right: 1em;
5575
}
5676

5777
#status {
58-
margin-top: 0;
78+
margin-top: 1em;
5979
padding-top: 0;
6080
color: #666;
6181
font-family: verdana;
@@ -64,41 +84,41 @@ h1 {
6484

6585
#credits {
6686
position:absolute;
87+
font-size: 0.1em;
6788
border-bottom: 1px solid light-dark(#ccc, #333);
6889
left: 0;
6990
right: 0;
7091
top:0;
71-
background-color: light-dark(#eee, #333);
72-
font-size: 10px;
92+
color: light-dark(#555, #444);
93+
background-color: light-dark(#eee, #222);
7394
}
7495

7596
#definition {
76-
height: 20vh;
97+
height: 7em;
7798
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
7899
font-weight: 600;
79-
font-size: 24px;
80-
padding-left: 5%;
81-
padding-right: 5%;
82-
border-radius: 20px;
100+
font-size: 1.4em;
101+
padding-left: 2em;
102+
padding-right: 2em;
103+
border-radius: 0.5em;
83104
display:grid;
84105
margin-top: 0;
85106
flex-direction: row;
86107
align-items: center;
87-
margin-left: 10px;
88-
margin-right: 10px;
89-
margin-top: 3vh;
90-
margin-bottom: 3vh;
91-
background-color: light-dark(#eee, #333);
92-
93-
--animate-duration: 500ms;
94-
--animate-delay: 0.5s;
108+
margin-left: 1em;
109+
margin-right: 1em;
110+
margin-top: 2.5em;
111+
background-color: light-dark(#d6f8ff, #3b494d);
112+
border-color: light-dark(lightblue, #5e6e73);
113+
border-style: dotted;
114+
border-width: 0.3em;
95115
}
96116

97117

98118
#score {
99-
height: 25px;
119+
padding: 0;
100120
color: #888;
101-
font-size: 20px;
121+
font-size: 1.2em;
102122
}
103123

104124

@@ -115,7 +135,7 @@ h1 {
115135
display:grid;
116136
flex-direction: row;
117137
align-items: center;
118-
font-size: 16px;
138+
font-size: 0.8em;
119139
padding-left: 2em;
120140
padding-right: 2em;
121141
}
@@ -127,51 +147,49 @@ h1 {
127147
}
128148

129149
#word-container .square {
130-
font-size: 28px;
131-
width: 13vw;
150+
font-size: 1.6em;
151+
width: 1.6em;
152+
height: 2.5em;
132153
padding: 0;
133-
margin-left: 5px;
134154
}
135155

136156
.square {
137-
font-size: 14px;
138-
width: 8vw;
139-
height: 11vw;
140-
margin: 2px;
141-
padding: 1vw;
157+
font-size: 1em;
158+
font-weight: 900;
159+
width: 1.5em;
160+
height: 2em;
161+
margin: 0.2em;
142162
}
143163

144164
#score {
145-
height: 25px;
146165
color: #888;
147166
font-size: 15px;
148167
height: 5vh;
149168
}
150169

151-
#keyboard-container {
152-
padding-left: 1em;
153-
padding-right: 1em;
154-
}
155-
156170
button {
157-
font-size: 12px;
171+
font-size: 0.7em;
158172
}
159173
}
160174

161175
.square-unattempted {
162176
background-color: light-dark(#ddd, #666);
177+
box-shadow: 0.2em 0.2em light-dark(#bbb, #444) !important;
163178
}
164179

165180
.square-attempted-revealed {
166-
background-color: light-dark(#F88379, #E35335) !important;
181+
background-color: light-dark(#ffae40, #E35335) !important;
182+
box-shadow: 0.2em 0.2em light-dark(#e99727, #94220a) !important;
167183
}
168184

169185
.square-attempted-not-present {
170186
background-color: light-dark(#777, #333);
187+
box-shadow: 0.2em 0.2em light-dark(#555, #111) !important;
171188
}
172189

173190
.square-attempted-present {
174-
background-color: light-dark(#9ACD32, #088F8F) !important;
191+
background-color: light-dark(#a1d43b, #088F8F) !important;
192+
box-shadow: 0.2em 0.2em light-dark(#7cab1d, #026f6f) !important;
175193
}
176194

177195
.word {

‎client/src/App.tsx‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,20 @@ function Word( { attempt, success, revealed } ) {
2727
}
2828

2929
return <>
30+
<div>
3031
{
3132
letters.map((name, index) =>
3233
<button key={index} className={`square word ${color} ${success_animation}`}>{attempt.length > index ? attempt[index]: ''}</button>
3334
)
3435
}
36+
</div>
3537
</>
3638
}
3739

3840
function Logo() {
3941
return <>
40-
<div id="logo" className="animate__animated animate__swing">
41-
<h1><img src="./owl.png" width="10%" height="10%"></img> erudite</h1>
42+
<div id="logo">
43+
<h1><img src="./owl.png" className="animate__animated animate__swing"></img> erudite</h1>
4244
</div>
4345
</>
4446
}
@@ -71,11 +73,16 @@ function WordContainer({ attempt, success, status, revealed }) {
7173
return <>
7274
<div id="word-container">
7375
<Word attempt={ attempt } success={ success } revealed={ revealed } />
74-
<div id="status">{ status }</div>
7576
</ div>
7677
</>
7778
}
7879

80+
function Status( { status } ) {
81+
return <>
82+
<div id="status">{ status }</div>
83+
</>
84+
}
85+
7986
const useEventListener = (eventName, handler, element = window) => {
8087
const savedHandler = useRef();
8188
useEffect(() => {
@@ -110,30 +117,30 @@ function App() {
110117
}
111118

112119
function removeLetter() {
113-
if (attempt.length == 0 || success)
114-
return
120+
if (attempt.length == 0 || success || revealed)
121+
return;
115122
setSuccess(false);
116123
setAttempt(attempt.substring(0, attempt.length-1))
117124
}
118125

119126
function checkAttempt() {
120127
if (revealed) {
121-
setStatusWithTimeout("Word was revealed");
128+
setStatusWithTimeout("word was revealed");
122129
return;
123130
}
124131

125132
if (attempt.length < term.word.length) {
126-
setStatusWithTimeout("Too short");
133+
setStatusWithTimeout("too short");
127134
return;
128135
}
129136

130137
if (!is_valid(attempt.toLowerCase()) ) {
131-
setStatusWithTimeout("Not in word list");
138+
setStatusWithTimeout("not in word list");
132139
return;
133140
}
134141

135142
if (attempt.toLowerCase() != term.word) {
136-
setStatusWithTimeout("Incorrect");
143+
setStatusWithTimeout("incorrect");
137144
setScore(score - 10);
138145

139146
setAttempts([
@@ -156,13 +163,12 @@ function App() {
156163
if (attempt.toLowerCase() == term.word) {
157164
if (!success) setScore(score + 100);
158165
setSuccess(true);
159-
setStatusWithTimeout("Correct!");
166+
setStatusWithTimeout("correct!");
160167
}
161-
162168
}
163169

164170
function reveal() {
165-
if (revealed)
171+
if (revealed || success)
166172
return;
167173
setAttempt(term.word.toUpperCase());
168174
setScore(score - 20);
@@ -194,12 +200,12 @@ function App() {
194200

195201
const handler = ({ key }) => {
196202
console.log("Key Pressed: " + String(key));
203+
197204
if (attempt.length < term.word.length && (letters.includes(key) || letters.includes(key.toUpperCase()))) {
198-
setAttempt(attempt + key.toUpperCase())
205+
addLetter(key.toUpperCase());
199206
}
200-
else if (key == "Backspace" && !success) {
201-
if (attempt.length > 0)
202-
setAttempt(attempt.substring(0, attempt.length - 1))
207+
else if (key == "Backspace") {
208+
removeLetter();
203209
}
204210
else if (key == "Enter") {
205211
checkAttempt();
@@ -220,6 +226,7 @@ function App() {
220226
<Credits />
221227
<Logo />
222228
<Definition term={ term } />
229+
<Status status={ status } />
223230
<WordContainer attempt={ attempt } success={ success } status={ status } revealed={ revealed } />
224231
<Score score={ score } />
225232

@@ -232,10 +239,12 @@ function App() {
232239
}
233240
</div>
234241

235-
<button key="check" onClick={ checkAttempt }>check</button>
236-
<button key="pick" onClick={ next }>new word</button>
237-
{/* <button key="reveal" onClick={ reveal }>reveal</button> */}
238-
<button key="delete" onClick={ removeLetter }>delete</button>
242+
<div id="actions">
243+
<button key="check" onClick={ checkAttempt }>check</button>
244+
<button key="pick" onClick={ next }>next</button>
245+
<button key="reveal" onClick={ reveal }>reveal</button>
246+
<button key="delete" onClick={ removeLetter }>delete</button>
247+
</div>
239248
</div>
240249
</div>
241250
</>

0 commit comments

Comments
 (0)