Skip to content

Commit 1511877

Browse files
ericrallenericrallen
authored
Merge pull request #24 from DVDAGames/develop
Annotation, Status, and Modifier updates
2 parents b4db35e + d83a715 commit 1511877

12 files changed

Lines changed: 170 additions & 24 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"react": "^16.13.1",
1212
"react-dom": "^16.13.1",
1313
"react-scripts": "3.4.1",
14+
"sanitize.css": "^11.0.1",
1415
"semver": "^7.3.2",
1516
"styled-components": "^5.1.1"
1617
},

‎public/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,18 @@
2323
Learn how to configure a non-root public URL by running `npm run build`.
2424
-->
2525
<title>Hex Flower Engine (Alpha)</title>
26+
<style>
27+
.visually-hidden {
28+
clip: rect(1px, 1px, 1px, 1px);
29+
clip-path: inset(50%);
30+
height: 1px;
31+
width: 1px;
32+
margin: -1px;
33+
overflow: hidden;
34+
padding: 0;
35+
position: absolute;
36+
}
37+
</style>
2638
</head>
2739

2840
<body>

‎src/App.js‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ export const App = () => {
2222

2323
const [activeHex, setActiveHex] = useState(null);
2424

25+
const [activeHexInfo, setActiveHexInfo] = useState(null);
26+
2527
const [roll, setRoll] = useState(null);
2628

2729
const [showAnnotations, setShowAnnotations] = useState(true);
@@ -59,6 +61,8 @@ export const App = () => {
5961
useEffect(() => {
6062
if (currentEngine) {
6163
setCurrentEngine({ ...currentEngine, active: activeHex });
64+
65+
setActiveHexInfo(currentEngine.nodes.find(({ id }) => id === activeHex));
6266
}
6367
}, [activeHex]);
6468

@@ -107,11 +111,48 @@ export const App = () => {
107111
}
108112
}, [roll]);
109113

114+
const renderStatus = () => {
115+
if (activeHexInfo?.label) {
116+
return (
117+
<h2 className={styles.status}>
118+
<span class="visually-hidden">Status:</span>
119+
{activeHexInfo.label}
120+
</h2>
121+
);
122+
}
123+
124+
return <></>;
125+
};
126+
127+
const renderModifiers = () => {
128+
const renderModifier = ([stat, modifier]) => (
129+
<li key={`modifier-for-${stat}`}>
130+
<strong>{stat}</strong>: {modifier}
131+
</li>
132+
);
133+
134+
if (activeHexInfo?.modifiers) {
135+
return (
136+
<div className={styles.modifiers}>
137+
<h3 className="visually-hidden">Modifiers:</h3>
138+
<ul className={styles.modifierList}>
139+
{Object.entries(activeHexInfo.modifiers).map(renderModifier)}
140+
</ul>
141+
</div>
142+
);
143+
}
144+
145+
return <></>;
146+
};
147+
110148
return (
111149
<>
112150
{roll ? (
113151
<section className={styles.roll}>
114-
<p>{roll.total}</p>
152+
<p>
153+
<span className="visually-hidden">You rolled:</span>
154+
{roll.total}
155+
</p>
115156
</section>
116157
) : (
117158
<></>
@@ -128,6 +169,9 @@ export const App = () => {
128169
) : (
129170
<></>
130171
)}
172+
<p className="visually-hidden">Active Hex: {activeHex}</p>
173+
{renderStatus()}
174+
{renderModifiers()}
131175
</section>
132176
<footer className={styles.footer}>
133177
{currentEngine?.id ? (

‎src/App.module.scss‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,48 @@
99
}
1010

1111
.heading {
12-
position: fixed;
12+
margin: 10px auto;
13+
font-size: 1.75rem;
14+
}
15+
16+
.status {
17+
margin: 0 auto 10px;
18+
font-size: 1rem;
19+
font-weight: normal;
20+
}
21+
22+
.modifiers {
23+
display: flex;
24+
flex-direction: row;
25+
align-items: baseline;
26+
justify-content: flex-start;
27+
font-size: 0.825rem;
28+
font-weight: normal;
29+
}
30+
31+
.modifiersHeader {
32+
margin: 0 5px 10px auto;
33+
font-size: inherit;
34+
font-weight: inherit;
35+
}
36+
37+
.modifierList {
38+
list-style: none;
39+
padding: 0;
40+
margin: 0;
41+
font-size: inherit;
42+
font-weight: inherit;
43+
44+
> li {
45+
display: inline-block;
46+
margin-right: 5px;
47+
font-size: inherit;
48+
font-weight: inherit;
49+
50+
&:last-child {
51+
margin-right: 0;
52+
}
53+
}
1354
}
1455

1556
.footer {

‎src/components/Annotations/Annotations.jsx‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { useState, useEffect } from "react";
22

3+
import { ROLL_DIRECTION_ORDER } from "../../constants";
4+
35
import styles from "./Annotations.module.scss";
46

57
export const Annotations = ({ engine }) => {
@@ -25,19 +27,32 @@ export const Annotations = ({ engine }) => {
2527
}, [JSON.stringify(engine.directions)]);
2628

2729
const renderDirectionAnnotations = () =>
28-
Object.keys(collatedDirectionRolls).map((direction) => {
29-
return (
30-
<li
31-
className={styles[direction]}
32-
key={`direction-annotation-${direction}`}
33-
>
34-
{collatedDirectionRolls[direction].join(",")}
35-
</li>
36-
);
37-
});
30+
Object.keys(collatedDirectionRolls)
31+
.sort(
32+
(a, b) =>
33+
ROLL_DIRECTION_ORDER.indexOf(a) - ROLL_DIRECTION_ORDER.indexOf(b)
34+
)
35+
.map((direction) => {
36+
return (
37+
<li
38+
className={styles[direction]}
39+
key={`direction-annotation-${direction}`}
40+
>
41+
<p className="visually-hidden">
42+
Rolling a {collatedDirectionRolls[direction].join(" or ")} should
43+
move you ${direction}.
44+
</p>
45+
{collatedDirectionRolls[direction].join(",")}
46+
</li>
47+
);
48+
});
3849

3950
return (
4051
<aside className={styles.annotations}>
52+
<h3 className="visually-hidden">
53+
This list explains which direction each roll will take you, it goes
54+
clockwise starting from the 2 o'clock position.
55+
</h3>
4156
{collatedDirectionRolls ? (
4257
<ol className={styles.directionList}>{renderDirectionAnnotations()}</ol>
4358
) : (

‎src/components/Annotations/Annotations.module.scss‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,15 @@
1919

2020
> li {
2121
position: absolute;
22+
width: 30px;
23+
margin: 0;
24+
padding: 0;
25+
font-family: monospace;
2226
font-size: 10px;
2327
line-height: 1;
28+
letter-spacing: 0px;
29+
text-align: center;
30+
transform-origin: center;
2431
z-index: 6;
2532
}
2633
}
@@ -33,13 +40,13 @@
3340

3441
.upRight {
3542
bottom: 70%;
36-
left: 120%;
43+
left: 100%;
3744
transform: rotate(60deg);
3845
}
3946

4047
.downRight {
41-
top: 72%;
42-
left: 115%;
48+
top: 70%;
49+
left: 100%;
4350
transform: rotate(-60deg);
4451
}
4552

@@ -50,13 +57,13 @@
5057
}
5158

5259
.downLeft {
53-
top: 72%;
54-
right: 115%;
60+
top: 70%;
61+
right: 100%;
5562
transform: rotate(60deg);
5663
}
5764

5865
.upLeft {
5966
bottom: 70%;
60-
right: 108%;
67+
right: 100%;
6168
transform: rotate(-60deg);
6269
}

‎src/components/Grid/Grid.module.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@
55
justify-content: center;
66
flex-direction: column-reverse;
77
width: 100%;
8-
height: 100%;
98
padding: 0;
109
// TODO: figure out a better way to lay out the grid items so that
1110
// we don't have this kind of craziness
12-
margin: -900% 0 0;
11+
margin: -1500% 0 30px;
1312
list-style: none;
1413
}

‎src/components/Hex/Hex.module.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@
130130
border-top: 2px solid #999;
131131
border-bottom: 2px solid #999;
132132
background-color: transparent;
133+
color: #666;
133134
z-index: 2;
134135
transition: background-color 0.3s ease;
135136

@@ -170,6 +171,7 @@
170171

171172
.activeHex {
172173
border-color: #232323;
174+
color: #000;
173175
}
174176

175177
.highlightedHexContainer {

‎src/constants/engines/weather.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,10 @@ const nodes = [
187187
},
188188
{
189189
id: 14,
190-
label: "Severe heat; vhance of exhaustion",
190+
label: "Severe heat; chance of exhaustion",
191+
modifiers: {
192+
Exhaustion: "DC 5 CON Save",
193+
},
191194
style: {
192195
backgroundColor: "#eabcd5",
193196
icon: "hot",
@@ -203,7 +206,11 @@ const nodes = [
203206
},
204207
{
205208
id: 13,
206-
label: "Heavy constant rain; reduced visibility; +1 stealth; -1 perception",
209+
label: "Heavy constant rain; reduced visibility",
210+
modifiers: {
211+
Stealth: "+1",
212+
Perception: "-1",
213+
},
207214
style: {
208215
backgroundColor: "#77bc77",
209216
icon: "rain",
@@ -302,8 +309,11 @@ const nodes = [
302309
},
303310
{
304311
id: 19,
305-
label:
306-
"Disaster! Zero visibility; if you're outside immediately roll for environmental damage/exhaustion",
312+
label: "Disaster! Zero visibility",
313+
modifiers: {
314+
Exhaustion: "DC 10 CON Save",
315+
Vision: "Heavily Obscured",
316+
},
307317
style: {
308318
backgroundColor: "#ff7777",
309319
icon: "tornado",

‎src/constants/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,12 @@ export const RANDOM_HEX_ROLL = "1d19";
3333
export const ROLL_DELAY = 1000;
3434

3535
export const DEFAULT_STARTING_HEX = 1;
36+
37+
export const ROLL_DIRECTION_ORDER = [
38+
"upRight",
39+
"downRight",
40+
"down",
41+
"downLeft",
42+
"upLeft",
43+
"up",
44+
];

0 commit comments

Comments
 (0)