Skip to content

Commit 79e2e3b

Browse files
krumpybotkrumpybot
committed
docs: visual overhaul, table fixes, changelog updates
- Fix deployment caps and prize pool table dead space (inline HTML tables) - Centre-align numeric columns across all tables - Reduce chest table cell margins for wider descriptions - Match heading font sizes (Armies by Realm Level, Guard Slots) - Change tier card headings to Exo 2 font - Unbold numeric figures in Troop Tier Stats tables - Restructure Troop Movement stats as flat list - Convert damage refund rules to code blocks, add full stop - Change hyperstructure ring formula to (P/6)^(1/2) notation - Link Eternum/Blitz in introduction Game Modes section - Centre-align Amount/Quantity columns in starting materials tables - Standardize changelog heading levels (8 Dec, 31 Jan) - Add 18 February 2026 changelog entry - Add mobile overflow protection and global table enhancements - Add context-aware column width utilities in styles
1 parent 379697d commit 79e2e3b

18 files changed

Lines changed: 387 additions & 139 deletions

‎client/apps/game-docs/docs/components/TroopTiers.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export const TroopTiers = () => {
110110
margin: 0,
111111
fontSize: "1rem",
112112
textAlign: "center" as const,
113+
fontFamily: "'Exo 2', sans-serif",
113114
},
114115
troopImageContainerStyle: {
115116
width: "100%",
@@ -197,16 +198,14 @@ export const TroopTierDamageStats = () => {
197198
<div style={section.subtitle}>Troop Tier Stats</div>
198199

199200
<div style={section.commonCard}>
200-
<div style={section.accentedTitle}>
201-
<span style={{ fontSize: "0.85em", fontWeight: 400 }}>Damage Comparison by Tier</span>
202-
</div>
201+
<div style={section.accentedTitle}>Damage Comparison by Tier</div>
203202

204203
<table style={table.compareTable}>
205204
<thead style={table.tableHead}>
206205
<tr>
207206
<th style={{ ...table.tableHeaderCell, ...table.tableFirstColumn }}>Tier</th>
208-
<th style={table.tableHeaderCell}>Cumulative Damage Increase Over T1</th>
209-
<th style={table.tableHeaderCell}>Difference Between Tiers</th>
207+
<th style={{ ...table.tableHeaderCell, textAlign: "center" }}>Cumulative Damage Increase Over T1</th>
208+
<th style={{ ...table.tableHeaderCell, textAlign: "center" }}>Difference Between Tiers</th>
210209
</tr>
211210
</thead>
212211
<tbody>
@@ -217,26 +216,26 @@ export const TroopTierDamageStats = () => {
217216
Base
218217
</div>
219218
</td>
220-
<td style={table.tableCell}> N/A </td>
221-
<td style={table.tableCell}> N/A </td>
219+
<td style={{ ...table.tableCell, textAlign: "center" }}> N/A </td>
220+
<td style={{ ...table.tableCell, textAlign: "center" }}> N/A </td>
222221
</tr>
223222
<tr style={table.tableRow}>
224223
<td style={{ ...table.tableCell, ...table.tableFirstColumn }}>
225224
<div style={table.tableTierCell}>
226225
<span style={table.tierBadge}>T2</span>3 × T1
227226
</div>
228227
</td>
229-
<td style={{ ...table.tableCell, fontWeight: "bold" }}>300%</td>
230-
<td style={{ ...table.tableCell, fontWeight: "bold" }}>300%</td>
228+
<td style={{ ...table.tableCell, textAlign: "center" }}>300%</td>
229+
<td style={{ ...table.tableCell, textAlign: "center" }}>300%</td>
231230
</tr>
232231
<tr style={table.tableRow}>
233232
<td style={{ ...table.tableCell, ...table.tableFirstColumn }}>
234233
<div style={table.tableTierCell}>
235234
<span style={table.tierBadge}>T3</span>3 × T2 (9 × T1)
236235
</div>
237236
</td>
238-
<td style={{ ...table.tableCell, fontWeight: "bold" }}>900%</td>
239-
<td style={{ ...table.tableCell, fontWeight: "bold" }}>300%</td>
237+
<td style={{ ...table.tableCell, textAlign: "center" }}>900%</td>
238+
<td style={{ ...table.tableCell, textAlign: "center" }}>300%</td>
240239
</tr>
241240
</tbody>
242241
</table>

‎client/apps/game-docs/docs/components/blitz-components/BlitzRewardsChestTable.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,11 +138,13 @@ const componentStyles = {
138138
...table.cell,
139139
color: colors.text.light,
140140
fontWeight: 500,
141+
padding: "0.4rem 0.5rem",
141142
},
142143
itemImageCell: {
143144
...table.cell,
144-
width: "110px",
145+
width: "90px",
145146
textAlign: "center" as const,
147+
padding: "0.4rem 0.3rem",
146148
},
147149
itemImage: {
148150
width: "72px",
@@ -154,13 +156,15 @@ const componentStyles = {
154156
...table.cell,
155157
color: colors.secondary,
156158
fontWeight: 500,
159+
padding: "0.4rem 0.5rem",
157160
},
158161
descriptionCell: {
159162
...table.cell,
160-
maxWidth: "300px",
163+
maxWidth: "none",
161164
fontSize: "0.8rem",
162165
lineHeight: "1.4",
163166
color: colors.text.light,
167+
padding: "0.4rem 0.5rem",
164168
},
165169
drawChanceCell: {
166170
...table.cell,

‎client/apps/game-docs/docs/components/blitz-components/DefendingArmies.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ export const BlitzRealmDefenseSlotsTable = () => {
1212

1313
return (
1414
<div style={section.wrapper}>
15-
<div style={section.accentedTitle}>
16-
<span style={{ fontSize: "0.85em", fontWeight: 400 }}>Armies by Realm Level</span>
17-
</div>
15+
<div style={section.accentedTitle}>Armies by Realm Level</div>
1816
<div style={table.container}>
1917
<table style={table.table}>
2018
<thead style={table.tableHead}>
@@ -51,22 +49,20 @@ export const BlitzWorldStructureDefenseSlotsTable = () => {
5149

5250
return (
5351
<div style={section.wrapper}>
54-
<div style={section.accentedTitle}>
55-
<span style={{ fontSize: "0.85em", fontWeight: 400 }}>Guard Slots by Structure Type</span>
56-
</div>
52+
<div style={section.accentedTitle}>Guard Slots by Structure Type</div>
5753
<div style={table.container}>
5854
<table style={table.table}>
5955
<thead style={table.tableHead}>
6056
<tr>
6157
<th style={table.headerCell}>World Structure</th>
62-
<th style={table.headerCell}>Guard Slots</th>
58+
<th style={{ ...table.headerCell, textAlign: "center" }}>Guard Slots</th>
6359
</tr>
6460
</thead>
6561
<tbody>
6662
{worldStructures.map((item) => (
6763
<tr key={item.structure}>
6864
<td style={table.cell}>{item.structure}</td>
69-
<td style={{ ...table.cell, color: colors.primary, fontWeight: "bold" }}>{item.guardSlots}</td>
65+
<td style={{ ...table.cell, color: colors.primary, fontWeight: "bold", textAlign: "center" }}>{item.guardSlots}</td>
7066
</tr>
7167
))}
7268
</tbody>

‎client/apps/game-docs/docs/components/blitz-components/HyperstructureRings.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,11 @@ export const HyperstructureRings = () => {
3939
<div style={equationBoxStyle}>
4040
<span style={equationTextStyle}>
4141
<span style={varStyle}>r</span>
42-
{" = ⌈ √("}
42+
{" = ⌈ ("}
4343
<span style={varStyle}>P</span>
44-
{" / 6) ⌉"}
44+
{" / 6)"}
45+
<sup style={{ fontSize: "0.65em", verticalAlign: "super" }}>{"1/2"}</sup>
46+
{" ⌉"}
4547
</span>
4648
</div>
4749

‎client/apps/game-docs/docs/components/blitz-components/TroopMovementTable.tsx‎

Lines changed: 44 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,14 @@ export const BlitzMaxStaminaTable = () => {
2222

2323
return (
2424
<div style={section.commonCard}>
25-
<div style={section.accentedTitle}>
26-
<span style={{ fontSize: "0.85em", fontWeight: 400 }}>Max Stamina Comparison</span>
27-
</div>
25+
<div style={section.accentedTitle}>Max Stamina Comparison</div>
2826

2927
<table style={table.compareTable}>
3028
<thead style={table.tableHead}>
3129
<tr>
3230
<th style={{ ...table.tableHeaderCell, ...table.tableFirstColumn }}>Tier</th>
3331
{troopTypes.map((troopId) => (
34-
<th key={troopId} style={table.tableHeaderCell}>
32+
<th key={troopId} style={{ ...table.tableHeaderCell, textAlign: "center" }}>
3533
{getTroopName(troopId)}
3634
</th>
3735
))}
@@ -50,7 +48,7 @@ export const BlitzMaxStaminaTable = () => {
5048
</div>
5149
</td>
5250
{troopTypes.map((troopId) => (
53-
<td key={troopId} style={{ ...table.tableCell, textAlign: "left", fontWeight: "bold" }}>
51+
<td key={troopId} style={{ ...table.tableCell, textAlign: "center" }}>
5452
{tierStamina}
5553
</td>
5654
))}
@@ -71,6 +69,25 @@ const StatItem = ({ label, value }: { label: string; value: React.ReactNode }) =
7169
</div>
7270
);
7371

72+
const listItemStyle = {
73+
display: "flex",
74+
justifyContent: "space-between",
75+
alignItems: "center",
76+
padding: "0.5rem 0",
77+
borderBottom: `1px solid rgba(107, 98, 80, 0.3)`,
78+
fontSize: "0.95rem",
79+
};
80+
81+
const listLabelStyle = {
82+
color: colors.text.light,
83+
fontSize: "0.95rem",
84+
};
85+
86+
const listValueStyle = {
87+
color: colors.secondary,
88+
fontSize: "0.95rem",
89+
};
90+
7491
export function BlitzTroopMovementTable() {
7592
const config = ETERNUM_CONFIG();
7693

@@ -82,42 +99,30 @@ export function BlitzTroopMovementTable() {
8299
<div style={section.commonCard}>
83100
<div style={section.accentedTitle}>Troop Movement</div>
84101

85-
<div style={section.sectionContent}>
86-
<div>
87-
<div style={section.sectionHeader}>
88-
<span>💪</span> Capacity
89-
</div>
90-
<div style={section.sectionGrid}>
91-
<StatItem
92-
label="Carry Capacity"
93-
value={`${Number(config.carryCapacityGram[CapacityConfig.Army]) / 1000}kg per troop`}
94-
/>
95-
</div>
102+
<div style={{ display: "flex", flexDirection: "column" }}>
103+
<div style={listItemStyle}>
104+
<span style={listLabelStyle}>Carry Capacity</span>
105+
<span style={listValueStyle}>{Number(config.carryCapacityGram[CapacityConfig.Army]) / 1000}kg per troop</span>
96106
</div>
97-
98-
<div>
99-
<div style={section.sectionHeader}>
100-
<span>⚡</span> Stamina
101-
</div>
102-
<div style={section.sectionGrid}>
103-
<StatItem label="Stamina on Deployment" value={config.troop.stamina.staminaInitial} />
104-
<StatItem label="Gain Per Phase" value={20} />
105-
</div>
107+
<div style={listItemStyle}>
108+
<span style={listLabelStyle}>Stamina on Deployment</span>
109+
<span style={listValueStyle}>{config.troop.stamina.staminaInitial}</span>
106110
</div>
107-
</div>
108-
109-
<div style={section.divider}></div>
110-
111-
<div style={section.sectionContent}>
112-
<div>
113-
<div style={section.sectionHeader}>
114-
<span>🚶</span> Movement Costs
115-
</div>
116-
<div style={section.sectionGrid}>
117-
<StatItem label="Travel Stamina Cost" value={`${config.troop.stamina.staminaTravelStaminaCost}/hex`} />
118-
<StatItem label="Explore Stamina Cost" value={`${config.troop.stamina.staminaExploreStaminaCost}/hex`} />
119-
<StatItem label="Biome Bonus/Penalty" value={`±${config.troop.stamina.staminaBonusValue}`} />
120-
</div>
111+
<div style={listItemStyle}>
112+
<span style={listLabelStyle}>Stamina Gain Per Phase</span>
113+
<span style={listValueStyle}>20</span>
114+
</div>
115+
<div style={listItemStyle}>
116+
<span style={listLabelStyle}>Travel Stamina Cost</span>
117+
<span style={listValueStyle}>{config.troop.stamina.staminaTravelStaminaCost}/hex</span>
118+
</div>
119+
<div style={listItemStyle}>
120+
<span style={listLabelStyle}>Explore Stamina Cost</span>
121+
<span style={listValueStyle}>{config.troop.stamina.staminaExploreStaminaCost}/hex</span>
122+
</div>
123+
<div style={{ ...listItemStyle, borderBottom: "none" }}>
124+
<span style={listLabelStyle}>Biome Bonus/Penalty</span>
125+
<span style={listValueStyle}>±{config.troop.stamina.staminaBonusValue}</span>
121126
</div>
122127
</div>
123128
</div>

‎client/apps/game-docs/docs/components/eternum-components/EternumRewardsChestTable.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,11 +130,13 @@ const componentStyles = {
130130
...table.cell,
131131
color: colors.text.light,
132132
fontWeight: 500,
133+
padding: "0.4rem 0.5rem",
133134
},
134135
itemImageCell: {
135136
...table.cell,
136-
width: "110px",
137+
width: "90px",
137138
textAlign: "center" as const,
139+
padding: "0.4rem 0.3rem",
138140
},
139141
itemImage: {
140142
width: "72px",
@@ -149,10 +151,11 @@ const componentStyles = {
149151
},
150152
descriptionCell: {
151153
...table.cell,
152-
maxWidth: "300px",
154+
maxWidth: "none",
153155
fontSize: "0.8rem",
154156
lineHeight: "1.4",
155157
color: colors.text.light,
158+
padding: "0.4rem 0.5rem",
156159
},
157160
drawChanceCell: {
158161
...table.cell,

‎client/apps/game-docs/docs/components/styles.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,17 @@ export const table = {
119119
width: "30%",
120120
paddingLeft: "0.75rem",
121121
},
122+
/* Context-aware first column options - use as needed without changing existing tables */
123+
tableFirstColumnNarrow: {
124+
width: "20%",
125+
paddingLeft: "0.75rem",
126+
minWidth: "100px",
127+
},
128+
tableFirstColumnMedium: {
129+
width: "25%",
130+
paddingLeft: "0.75rem",
131+
minWidth: "140px",
132+
},
122133
tableCell: {
123134
padding: "0.75rem 0.5rem",
124135
color: colors.text.light,

‎client/apps/game-docs/docs/pages/blitz/military/armies.mdx‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { BlitzWorldStructureDefenseSlotsTable } from "@/components/blitz-components/DefendingArmies";
2+
import "@/styles.css";
23

34
# ⚔️ Armies
45

@@ -27,15 +28,43 @@ Where Tier Strength values are:
2728
Each Realm level has a maximum deployment cap that limits the total army strength that can be deployed, as well as a set
2829
number of field and guard army slots.
2930

30-
<div className="table-fixed-layout table-deployment-caps">
31-
32-
| Realm Level | Deployment Cap | Field Army Slots | Guard Army Slots |
33-
| ----------- | -------------- | ---------------- | ---------------- |
34-
| Settlement | 3,000 | 1 | 1 |
35-
| City | 15,000 | 3 | 2 |
36-
| Kingdom | 45,000 | 5 | 3 |
37-
| Empire | 90,000 | 8 | 4 |
38-
31+
<div style={{ width: "100%", maxWidth: "100%" }}>
32+
<table style={{ width: "100%", tableLayout: "fixed", borderCollapse: "collapse", backgroundColor: "#332f28", border: "1px solid #564e3e", borderRadius: "10px", overflow: "hidden", fontSize: "0.85rem" }}>
33+
<thead style={{ backgroundColor: "#383a4a" }}>
34+
<tr>
35+
<th style={{ width: "25%", padding: "0.6rem 1rem", textAlign: "left", fontWeight: 700, color: "#c9b06a", borderBottom: "1px solid #6b6250", fontSize: "0.85rem" }}>Realm Level</th>
36+
<th style={{ width: "25%", padding: "0.6rem 1rem", textAlign: "center", fontWeight: 700, color: "#c9b06a", borderBottom: "1px solid #6b6250", fontSize: "0.85rem" }}>Deployment Cap</th>
37+
<th style={{ width: "25%", padding: "0.6rem 1rem", textAlign: "center", fontWeight: 700, color: "#c9b06a", borderBottom: "1px solid #6b6250", fontSize: "0.85rem" }}>Field Army Slots</th>
38+
<th style={{ width: "25%", padding: "0.6rem 1rem", textAlign: "center", fontWeight: 700, color: "#c9b06a", borderBottom: "1px solid #6b6250", fontSize: "0.85rem" }}>Guard Army Slots</th>
39+
</tr>
40+
</thead>
41+
<tbody>
42+
<tr>
43+
<td style={{ padding: "0.6rem 1rem", textAlign: "left", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>Settlement</td>
44+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>3,000</td>
45+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>1</td>
46+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>1</td>
47+
</tr>
48+
<tr>
49+
<td style={{ padding: "0.6rem 1rem", textAlign: "left", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>City</td>
50+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>15,000</td>
51+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>3</td>
52+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>2</td>
53+
</tr>
54+
<tr>
55+
<td style={{ padding: "0.6rem 1rem", textAlign: "left", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>Kingdom</td>
56+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>45,000</td>
57+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>5</td>
58+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", borderBottom: "1px solid #564e3e", fontSize: "0.85rem" }}>3</td>
59+
</tr>
60+
<tr>
61+
<td style={{ padding: "0.6rem 1rem", textAlign: "left", color: "#e8e4dc", fontSize: "0.85rem" }}>Empire</td>
62+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", fontSize: "0.85rem" }}>90,000</td>
63+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", fontSize: "0.85rem" }}>8</td>
64+
<td style={{ padding: "0.6rem 1rem", textAlign: "center", color: "#e8e4dc", fontSize: "0.85rem" }}>4</td>
65+
</tr>
66+
</tbody>
67+
</table>
3968
</div>
4069

4170
### Maximum Army Size

‎client/apps/game-docs/docs/pages/blitz/military/damage.mdx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,17 @@ The system calculates a **Refund Factor** based on the damage ratio between armi
5050
- **Damage Ratio (R<sub>x</sub>)**: **x**'s damage ÷ **y**'s damage
5151
- **Refund Factor f(R<sub>x</sub>)**: determines the amount of stamina refunded and battle timer reduction
5252

53-
- **If R<sub>x</sub> ≥ 10**: f(R<sub>x</sub>) = 1 (maximum refund)
54-
- **If R<sub>x</sub> ≤ 2.5**: f(R<sub>x</sub>) = 0 (no refund)
55-
- **If 2.5 < R<sub>x</sub> < 10**: f(R<sub>x</sub>) = (R<sub>x</sub> - 2.5) ÷ (10 - 2.5)
53+
```
54+
If Rx ≥ 10: f(Rx) = 1 (maximum refund)
55+
If Rx ≤ 2.5: f(Rx) = 0 (no refund)
56+
If 2.5 < Rx < 10: f(Rx) = (Rx - 2.5) / (10 - 2.5)
57+
```
5658

5759
For army **x**:
5860

59-
- **Refunded Stamina**: (combat cost) × f(R<sub>x</sub>), rounded up
60-
- **Battle Timer Length**: (base timer) × [1 - f(R<sub>x</sub>)]
61+
```
62+
Refunded Stamina = (combat cost) × f(Rx), rounded up
63+
Battle Timer Length = (base timer) × [1 - f(Rx)]
64+
```
6165

62-
The same calculations are applied for army **y**
66+
The same calculations are applied for army **y**.

0 commit comments

Comments
 (0)