Skip to content

Commit c02d876

Browse files
simlmxsimlmx
committed
Update CSS for rules
1 parent df73b82 commit c02d876

File tree

3 files changed

+97
-60
lines changed

3 files changed

+97
-60
lines changed

‎ui/src/Rules.tsx‎

Lines changed: 45 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -109,67 +109,57 @@ const Rules = () => {
109109
);
110110

111111
const moveUpTable = (
112-
<div className="container-fluid">
113-
<div className="row movesWrap no-gutters">
114-
<div className="col-sm-6">
115-
<div className="movesBox">
116-
<div className="movesLeft">
117-
<p>
118-
Add a new <strong>black egg</strong> at the bottom of a column.
119-
</p>
120-
</div>
121-
<div className="movesRight">
122-
{dice[0]}
123-
{dice[3]} &nbsp;→&nbsp;
124-
{placeAtBottom}
125-
</div>
126-
</div>
112+
<div className="movesWrap ">
113+
<div className="movesBox">
114+
<div className="movesLeft">
115+
<p>
116+
Add a new <strong>black egg</strong> at the bottom of a column.
117+
</p>
127118
</div>
128-
<div className="col-sm-6">
129-
<div className="movesBox">
130-
<div className="movesLeft">
131-
<p>
132-
Continue right above one of your <strong>colored eggs</strong>.
133-
</p>
134-
</div>
135-
<div className="movesRight">
136-
{dice[1]}
137-
{dice[2]} &nbsp;→&nbsp; {placeAfter}
138-
</div>
139-
</div>
119+
<div className="movesRight">
120+
{dice[0]}
121+
{dice[3]} &nbsp;→&nbsp;
122+
{placeAtBottom}
140123
</div>
141-
<div className="col-sm-6">
142-
<div className="movesBox">
143-
<div className="movesLeft">
144-
<p>
145-
Move an already placed <strong>black egg</strong> up one step.
146-
</p>
147-
</div>
148-
<div className="movesRight">
149-
{dice[2]}
150-
{dice[3]} &nbsp;→&nbsp;
151-
{moveUp}
152-
</div>
153-
</div>
124+
</div>
125+
<div className="movesBox">
126+
<div className="movesLeft">
127+
<p>
128+
Continue right above one of your <strong>colored eggs</strong>.
129+
</p>
130+
</div>
131+
<div className="movesRight">
132+
{dice[1]}
133+
{dice[2]} &nbsp;→&nbsp; {placeAfter}
134+
</div>
135+
</div>
136+
<div className="movesBox">
137+
<div className="movesLeft">
138+
<p>
139+
Move an already placed <strong>black egg</strong> up one step.
140+
</p>
141+
</div>
142+
<div className="movesRight">
143+
{dice[2]}
144+
{dice[3]} &nbsp;→&nbsp;
145+
{moveUp}
146+
</div>
147+
</div>
148+
<div className="movesBox">
149+
<div className="movesLeft">
150+
<p>If you can use both pairs, you must do it.</p>
154151
</div>
155-
<div className="col-sm-6">
156-
<div className="movesBox">
157-
<div className="movesLeft">
158-
<p>If you can use both pairs, you must do it.</p>
152+
<div className="movesRight">
153+
<div className="doubleDiceWrap">
154+
<div className="doubleDiceRow">
155+
{dice[1]} {dice[2]}
159156
</div>
160-
<div className="movesRight">
161-
<div className="doubleDiceWrap">
162-
<div className="doubleDiceRow">
163-
{dice[1]} {dice[2]}
164-
</div>
165-
<hr />
166-
<div className="doubleDiceRow">
167-
{dice[0]} {dice[3]}
168-
</div>
169-
</div>
170-
&nbsp;→&nbsp; {both}
157+
<hr />
158+
<div className="doubleDiceRow">
159+
{dice[0]} {dice[3]}
171160
</div>
172161
</div>
162+
&nbsp;→&nbsp; {both}
173163
</div>
174164
</div>
175165
</div>

‎ui/src/index.scss‎

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1145,21 +1145,22 @@ $mountainRatio: 0.67;
11451145
}
11461146

11471147
display: flex;
1148+
flex-direction: column;
11481149
justify-content: center;
11491150
align-items: center;
11501151

11511152
margin-bottom: 1rem;
11521153
}
11531154

11541155
.movesBox {
1156+
box-sizing: border-box;
11551157
border: 2px solid black;
11561158
border-radius: 1rem;
11571159
background-color: rgba(white, 0.6);
1158-
padding: 0.5rem;
1159-
margin: 0.2rem;
1160+
margin-top: 0.5rem;
11601161

11611162
display: flex;
1162-
justify-content: space-between;
1163+
justify-content: center;
11631164
align-items: center;
11641165

11651166
p {
@@ -1425,7 +1426,7 @@ $mountainRatio: 0.67;
14251426
}
14261427

14271428
/* Make sure the rules look somewhat uniform with the other game's rules */
1428-
#rules {
1429+
.rules {
14291430
h1,
14301431
h2,
14311432
h3,
@@ -1437,8 +1438,48 @@ $mountainRatio: 0.67;
14371438
}
14381439

14391440
h1 {
1440-
text-align: center;
1441+
/* text-align: center; */
14411442
}
14421443

14431444
padding: 0.5rem;
14441445
}
1446+
1447+
.rules {
1448+
--base-font-size: 16px;
1449+
1450+
font-size: var(--base-font-size);
1451+
padding: 0.5rem;
1452+
margin: 0;
1453+
1454+
h1 {
1455+
font-size: calc(var(--base-font-size) * 1.5);
1456+
font-weight: bold;
1457+
padding-top: 0.75rem;
1458+
}
1459+
1460+
h2 {
1461+
font-size: calc(var(--base-font-size) * 1.2);
1462+
font-weight: medium;
1463+
padding-top: 1rem;
1464+
}
1465+
1466+
h3 {
1467+
font-size: calc(var(--base-font-size) * 1.1);
1468+
font-weight: medium;
1469+
padding-top: 0.75rem;
1470+
}
1471+
1472+
h1,
1473+
h2,
1474+
h3 {
1475+
color: #105191;
1476+
}
1477+
1478+
p,
1479+
.paragraph {
1480+
color: #444;
1481+
padding-left: 0.5rem;
1482+
padding-top: 0.375rem;
1483+
font-size: var(--base-font-size);
1484+
}
1485+
}

‎ui/src/main.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ render({
99
await import("../dist/index.css");
1010
return <Board />;
1111
},
12+
rules: async () => {
13+
const { default: Rules } = await import("./Rules");
14+
// @ts-expect-error the import is there even if TS does not see it!
15+
await import("../dist/index.css");
16+
return <Rules />;
17+
},
1218
game,
1319
messages: {},
1420
gameId: "chickenroll",

0 commit comments

Comments
 (0)