Skip to content

Commit 9283e39

Browse files
rjordanrjordan
committed
Added dynamic skills page
1 parent ab4f1ab commit 9283e39

File tree

4 files changed

+208
-38
lines changed

4 files changed

+208
-38
lines changed

‎site/public/data/skills.json‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
{
2+
"skills": {
3+
"athletics": {
4+
"name": "Athletics",
5+
"trainingRequired": false,
6+
"description": "Physical activities such as climbing, jumping, and swimming."
7+
},
8+
"stealth": {
9+
"name": "Stealth",
10+
"trainingRequired": false,
11+
"description": "The ability to move silently and avoid detection."
12+
},
13+
"persuasion": {
14+
"name": "Persuasion",
15+
"trainingRequired": false,
16+
"description": "The art of convincing others through speech and negotiation."
17+
},
18+
"survival": {
19+
"name": "Survival",
20+
"trainingRequired": false,
21+
"description": "Skills related to wilderness navigation, foraging, and tracking."
22+
},
23+
"melee": {
24+
"name": "Melee",
25+
"trainingRequired": false,
26+
"description": "Proficiency in hand-to-hand combat and the use of melee weapons."
27+
},
28+
"ranged": {
29+
"name": "Ranged",
30+
"trainingRequired": false,
31+
"description": "Skill in using ranged weapons such as bows and thrown weapons."
32+
},
33+
"thievery": {
34+
"name": "Thievery",
35+
"trainingRequired": false,
36+
"description": "Skills related to lockpicking, pickpocketing, and other clandestine activities."
37+
},
38+
"tracking": {
39+
"name": "Tracking",
40+
"trainingRequired": false,
41+
"description": "The ability to follow tracks and find paths through the wilderness."
42+
},
43+
"farming": {
44+
"name": "Farming",
45+
"trainingRequired": false,
46+
"description": "The skill of cultivating crops and raising animals for food."
47+
},
48+
"cooking": {
49+
"name": "Cooking",
50+
"trainingRequired": false,
51+
"description": "The ability to prepare food and create meals."
52+
},
53+
"fishing": {
54+
"name": "Fishing",
55+
"trainingRequired": false,
56+
"description": "The skill of catching fish and other aquatic creatures."
57+
},
58+
"navigation": {
59+
"name": "Navigation",
60+
"trainingRequired": false,
61+
"description": "The art of determining one's position and planning a route, especially at sea."
62+
},
63+
"animalHandling": {
64+
"name": "Animal Handling",
65+
"trainingRequired": false,
66+
"description": "The ability to train and care for animals."
67+
},
68+
"camping": {
69+
"name": "Camping",
70+
"trainingRequired": false,
71+
"description": "The skill of setting up and maintaining a campsite, including shelter building and fire making."
72+
},
73+
"alchemy": {
74+
"name": "Alchemy",
75+
"trainingRequired": true,
76+
"description": "The ability to create potions and elixirs from various ingredients."
77+
},
78+
"arcana": {
79+
"name": "Arcana",
80+
"trainingRequired": true,
81+
"description": "Knowledge of magical lore and spellcraft."
82+
},
83+
"history": {
84+
"name": "History",
85+
"trainingRequired": true,
86+
"description": "Understanding of historical events, cultures, and legends."
87+
},
88+
"herbalism": {
89+
"name": "Herbalism",
90+
"trainingRequired": true,
91+
"description": "The study of plants and their properties, often for medicinal purposes."
92+
},
93+
"jewelcraft": {
94+
"name": "Jewelcraft",
95+
"trainingRequired": true,
96+
"description": "The skill of creating and appraising jewelry and gemstones."
97+
},
98+
"smithing": {
99+
"name": "Smithing",
100+
"trainingRequired": true,
101+
"description": "The ability to forge and repair metal items, including weapons and armor."
102+
},
103+
"spellcraft": {
104+
"name": "Spellcraft",
105+
"trainingRequired": true,
106+
"description": "The knowledge and practice of casting and understanding spells."
107+
},
108+
"tailoring": {
109+
"name": "Tailoring",
110+
"trainingRequired": true,
111+
"description": "The skill of making and repairing clothing and fabric items."
112+
},
113+
"sailing": {
114+
"name": "Sailing",
115+
"trainingRequired": true,
116+
"description": "The art of operating a sailing vessel."
117+
},
118+
"carpentry": {
119+
"name": "Carpentry",
120+
"trainingRequired": true,
121+
"description": "The skill of working with wood to create structures and items."
122+
},
123+
"brewing": {
124+
"name": "Brewing",
125+
"trainingRequired": true,
126+
"description": "The art of making beers, wines, ales, and other beverages."
127+
}
128+
}
129+
}

‎site/src/data/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,16 @@
2323

2424
// Data types for better type safety
2525

26+
export interface SkillData {
27+
name: string,
28+
trainingRequired: boolean,
29+
description: string,
30+
}
31+
32+
export interface SkillListData {
33+
skills: Record<string, SkillData>
34+
}
35+
2636
export interface MagicSchoolData {
2737
name: string,
2838
description: string,
@@ -194,6 +204,10 @@ export async function fetchSiteData(): Promise<SiteData> {
194204
return loadJsonData<SiteData>('site')
195205
}
196206

207+
export async function fetchSkillsData(): Promise<SkillListData> {
208+
return loadJsonData<SkillListData>('skills')
209+
}
210+
197211
// Helper function to fetch all data at once if needed
198212
export async function fetchAllData() {
199213
const [magic, classes, equipment, organizations, creatures, site] = await Promise.all([

‎site/src/index.scss‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,9 @@ dl {
9494
margin-bottom: 0.25rem;
9595
padding-bottom: 0.15rem;
9696
border-bottom: 2px solid $primary-color;
97-
display: inline-block;
97+
display: flex;
98+
justify-content: space-between;
99+
align-items: center;
98100
}
99101

100102
dd {
@@ -708,6 +710,28 @@ p {
708710
}
709711
}
710712

713+
.training-badge {
714+
background: $secondary-color;
715+
color: $white;
716+
padding: 0.25rem 0.5rem;
717+
border-radius: 12px;
718+
font-size: 0.7rem;
719+
font-weight: 500;
720+
text-transform: uppercase;
721+
letter-spacing: 0.5px;
722+
}
723+
724+
.untrained-badge {
725+
background: $accent-color;
726+
color: $white;
727+
padding: 0.25rem 0.5rem;
728+
border-radius: 12px;
729+
font-size: 0.7rem;
730+
font-weight: 500;
731+
text-transform: uppercase;
732+
letter-spacing: 0.5px;
733+
}
734+
711735
.sw-update-notification {
712736
position: fixed;
713737
top: 20px;

‎site/src/pages/skills.tsx‎

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,23 @@
1+
import { createEffect, createMemo, createResource, For } from 'solid-js'
2+
import { fetchSkillsData, SkillData } from '@data/index'
3+
14
function Skills() {
5+
const [skillsData] = createResource(fetchSkillsData)
6+
7+
const skills = createMemo(() => {
8+
const data = skillsData()
9+
if (!data) return []
10+
11+
return Object.entries(data.skills).map(([key, skill]: [string, SkillData]) => ({
12+
key,
13+
...skill,
14+
})).sort((a, b) => a.name.localeCompare(b.name))
15+
})
16+
17+
createEffect(() => {
18+
console.log('Skills data loaded:', skills() || 'No data')
19+
});
20+
221
return (
322
<div class="skills-page">
423
<h1>Skills and Abilities</h1>
@@ -20,47 +39,31 @@ function Skills() {
2039
<p>A note about specialization: Any skill can be specialized, the character must specify a specific attribute and is then treated as one rank higher for the purposes of that skill in that context.</p>
2140
<p class="example">eg: a character with Melee: C (Spears) would be considered to have Melee: B when using a spear.</p>
2241

23-
<h3>Untrained Skills</h3>
24-
<p>Untrained skills can be attempted by any character without prior instruction. Leveling them is simply a matter of practice and experience.</p>
25-
<p>Where an untrained skill is not listed in a character or creature profile, it is assumed to match the creatures overall base rank.</p>
26-
<p class="example">eg: a goblin rank F might have a (Melee: E, Stealth: E), all other untrained skills would be considered F rank the same as the goblins base ranking.</p>
42+
<p>Skills in Aetheria fall into two categories:</p>
2743
<ul>
28-
<li><strong>Athletics:</strong> Physical activities such as climbing, jumping, and swimming.</li>
29-
<li><strong>Stealth:</strong> The ability to move silently and avoid detection.</li>
30-
<li><strong>Persuasion:</strong> The art of convincing others through speech and negotiation.</li>
31-
<li><strong>Survival:</strong> Skills related to wilderness navigation, foraging, and tracking.</li>
32-
<li><strong>Melee:</strong> Proficiency in hand-to-hand combat and the use of melee weapons.</li>
33-
<li><strong>Ranged:</strong> Skill in using ranged weapons such as bows and thrown weapons.</li>
34-
<li><strong>Thievery:</strong> Skills related to lockpicking, pickpocketing, and other clandestine activities.</li>
35-
<li><strong>Stealth:</strong> The ability to move silently and avoid detection.</li>
36-
<li><strong>Tracking:</strong> The ability to follow tracks and find paths through the wilderness.</li>
37-
<li><strong>Farming:</strong> The skill of cultivating crops and raising animals for food.</li>
38-
<li><strong>Cooking:</strong> The ability to prepare food and create meals.</li>
39-
<li><strong>Fishing:</strong> The skill of catching fish and other aquatic creatures.</li>
40-
<li><strong>Navigation:</strong> The art of determining one's position and planning a route, especially at sea.</li>
41-
<li><strong>Animal Handling:</strong> The ability to train and care for animals.</li>
42-
<li><strong>Camping:</strong> The skill of setting up and maintaining a campsite, including shelter building and fire making.</li>
44+
<li><strong>Untrained skills</strong> can be attempted by any character without prior instruction. Leveling them is simply a matter of practice and experience.</li>
45+
<li><strong>Trained skills</strong> require that a character have some form of instruction to learn and level up the skill. This could be a teacher/mentor or simply access to a library with proper materials.</li>
4346
</ul>
44-
45-
<h3>Trained Skills</h3>
46-
<p>Trained skills require that a character have some form of instruction to learn and level up the skill. This could be a teacher/mentor or simply access to a library with proper materials.</p>
47-
<p>Where an trained skill is not listed in a character or creature profile, it is assumed to be unavailable.</p>
47+
<p>Where an untrained skill is not listed in a character or creature profile, it is assumed to match the creatures overall base rank.</p>
48+
<p class="example">eg: a goblin rank F might have a (Melee: E, Stealth: E), all other untrained skills would be considered F rank the same as the goblins base ranking.</p>
49+
<p>Where a trained skill is not listed in a character or creature profile, it is assumed to be unavailable.</p>
4850
<p class="example">eg: a goblin rank F (Alchemy: E) would have access only to the Alchemy skill.</p>
49-
<ul>
50-
<li><strong>Alchemy:</strong> The ability to create potions and elixirs from various ingredients.</li>
51-
<li><strong>Arcana:</strong> Knowledge of magical lore and spellcraft.</li>
52-
<li><strong>History:</strong> Understanding of historical events, cultures, and legends.</li>
53-
<li><strong>Herbalism:</strong> The study of plants and their properties, often for medicinal purposes.</li>
54-
<li><strong>Jewelcraft:</strong> The skill of creating and appraising jewelry and gemstones.</li>
55-
<li><strong>Smithing:</strong> The ability to forge and repair metal items, including weapons and armor.</li>
56-
<li><strong>Spellcraft:</strong> The knowledge and practice of casting and understanding spells.</li>
57-
<li><strong>Tailoring:</strong> The skill of making and repairing clothing and fabric items.</li>
58-
<li><strong>Sailing:</strong> The art of operating a sailing vessel.</li>
59-
<li><strong>Carpentry:</strong> The skill of working with wood to create structures and items.</li>
60-
<li><strong>Brewing:</strong> The art of making beers, wines, ales, and other beverages.</li>
61-
</ul>
6251

63-
<p class="coming-soon"><em>Coming soon...</em></p>
52+
<dl>
53+
<For each={skills()}>{(skill) => (
54+
<>
55+
<dt>
56+
{skill.name}
57+
{skill.trainingRequired ? (
58+
<span class="training-badge">Training Required</span>
59+
) : (
60+
<span class="untrained-badge">Untrained</span>
61+
)}
62+
</dt>
63+
<dd>{skill.description}</dd>
64+
</>
65+
)}</For>
66+
</dl>
6467
</div>
6568
)
6669
}

0 commit comments

Comments
 (0)