Skip to content

Commit 592ef11

Browse files
rjordanrjordan
committed
Fix other tables
1 parent 780777f commit 592ef11

File tree

8 files changed

+148
-130
lines changed

8 files changed

+148
-130
lines changed

‎docs/assets/index-G-M6IzU2.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/assets/index-tbm4bpwl.js‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/virtual_pwa-register-BkMPE1nT.js‎ renamed to ‎docs/assets/virtual_pwa-register-Cpf6Qwz7.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="theme-color" content="#000000" />
77
<title>Aetheria World</title>
8-
<script type="module" crossorigin src="/assets/index-G-M6IzU2.js"></script>
8+
<script type="module" crossorigin src="/assets/index-tbm4bpwl.js"></script>
99
<link rel="stylesheet" crossorigin href="/assets/index-Bc5CXMfb.css">
1010
<link rel="manifest" href="/manifest.webmanifest"></head>
1111
<body>

‎docs/sw.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/pages/classes.tsx‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { For, createResource, Suspense } from 'solid-js'
1+
import { createResource, Suspense } from 'solid-js'
22
import { fetchClassesData } from '@data/index'
3+
import ResponsiveTable, { TableColumn } from '../components/ResponsiveTable'
34

45
function Classes() {
56
const [classesData] = createResource(fetchClassesData)
@@ -20,6 +21,36 @@ function Classes() {
2021
.sort((a, b) => a.name.localeCompare(b.name))
2122
}
2223

24+
// Define column configurations
25+
const coreClassColumns: TableColumn[] = [
26+
{ key: 'name', label: 'Class', priority: 'high' },
27+
{ key: 'description', label: 'Description', priority: 'high' },
28+
{
29+
key: 'alternativeNames',
30+
label: 'Alternate Names',
31+
priority: 'low',
32+
render: (value) => Array.isArray(value) ? value.join(', ') : value
33+
}
34+
]
35+
36+
const specializationColumns: TableColumn[] = [
37+
{ key: 'name', label: 'Class', priority: 'high' },
38+
{ key: 'baseClass', label: 'Base Class', priority: 'high' },
39+
{
40+
key: 'requiredSpecializations',
41+
label: 'Required Specializations',
42+
priority: 'medium',
43+
render: (value) => value ? (Array.isArray(value) ? value.join(', ') : value) : 'None'
44+
},
45+
{ key: 'description', label: 'Description', priority: 'high' },
46+
{
47+
key: 'alternativeNames',
48+
label: 'Alternate Names',
49+
priority: 'low',
50+
render: (value) => Array.isArray(value) ? value.join(', ') : value
51+
}
52+
]
53+
2354
return (
2455
<div class="classes-page">
2556
<h1>Character Classes</h1>
@@ -29,56 +60,18 @@ function Classes() {
2960

3061
<Suspense fallback={<div>Loading classes data...</div>}>
3162
<h2>Core Classes</h2>
32-
<div class="classes-table-container">
33-
<table class="classes-table">
34-
<thead>
35-
<tr>
36-
<th>Class</th>
37-
<th>Description</th>
38-
<th>Alternate Names</th>
39-
</tr>
40-
</thead>
41-
<tbody>
42-
<For each={coreClasses()}>
43-
{(pclass) => (
44-
<tr>
45-
<td>{pclass.name}</td>
46-
<td>{pclass.description}</td>
47-
<td>{pclass.alternativeNames.join(', ')}</td>
48-
</tr>
49-
)}
50-
</For>
51-
</tbody>
52-
</table>
53-
</div>
63+
<ResponsiveTable
64+
columns={coreClassColumns}
65+
data={coreClasses()}
66+
className="core-classes-table"
67+
/>
5468

5569
<h2>Common Specializations</h2>
56-
<div class="classes-table-container">
57-
<table class="classes-table">
58-
<thead>
59-
<tr>
60-
<th>Class</th>
61-
<th>Base Class</th>
62-
<th>Required Specializations</th>
63-
<th>Description</th>
64-
<th>Alternate Names</th>
65-
</tr>
66-
</thead>
67-
<tbody>
68-
<For each={specializationClasses()}>
69-
{(pclass) => (
70-
<tr>
71-
<td>{pclass.name}</td>
72-
<td>{pclass.baseClass}</td>
73-
<td>{pclass.requiredSpecializations ? pclass.requiredSpecializations.join(', ') : 'None'}</td>
74-
<td>{pclass.description}</td>
75-
<td>{pclass.alternativeNames.join(', ')}</td>
76-
</tr>
77-
)}
78-
</For>
79-
</tbody>
80-
</table>
81-
</div>
70+
<ResponsiveTable
71+
columns={specializationColumns}
72+
data={specializationClasses()}
73+
className="specialization-classes-table"
74+
/>
8275
</Suspense>
8376
</div>
8477
)

‎site/src/pages/magic.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { For, createResource, Suspense, Show } from 'solid-js'
1+
import { createResource, Suspense, Show } from 'solid-js'
22
import { A } from '@solidjs/router'
33
import { fetchMagicData, OfflineError } from '@data/index'
4+
import ResponsiveTable, { TableColumn } from '../components/ResponsiveTable'
45

56
function MagicSchools() {
67
const [magicData] = createResource(fetchMagicData)
@@ -14,9 +15,35 @@ function MagicSchools() {
1415
return Object.entries(data.magic.schools).map(([key, school]: [string, any]) => ({
1516
key,
1617
...school,
17-
}))
18+
})).sort((a: any, b: any) => a.name.localeCompare(b.name))
1819
}
1920

21+
// Define column configurations for magic schools table
22+
const schoolColumns: TableColumn[] = [
23+
{
24+
key: 'name',
25+
label: 'School',
26+
priority: 'high',
27+
render: (value, row) => (
28+
<A href={`/magic/${row.key}`} class="school-link">
29+
{value}
30+
</A>
31+
)
32+
},
33+
{ key: 'description', label: 'Description', priority: 'high' },
34+
{
35+
key: 'focus',
36+
label: 'Focus Areas',
37+
priority: 'medium',
38+
render: (value) => {
39+
if (Array.isArray(value)) return value.join(', ')
40+
return value || 'N/A'
41+
}
42+
},
43+
{ key: 'regulation', label: 'Regulation', priority: 'medium' },
44+
{ key: 'opposing_element', label: 'Opposing Element', priority: 'low' }
45+
]
46+
2047
return (
2148
<div class="magic-schools-page">
2249
<h1>Magic in Aetheria</h1>
@@ -78,38 +105,11 @@ function MagicSchools() {
78105
<p>You can still browse the static content above, but the interactive magic schools table requires an internet connection.</p>
79106
</div>
80107
}>
81-
<div class="table-container table-responsive table-auto-cards">
82-
<table class="schools-table">
83-
<thead>
84-
<tr>
85-
<th>School</th>
86-
<th>Description</th>
87-
<th class="low-priority">Focus Areas</th>
88-
<th>Regulation</th>
89-
<th class="low-priority">Opposing Element</th>
90-
</tr>
91-
</thead>
92-
<tbody>
93-
<For each={schools().sort((a: any, b: any) => a.name.localeCompare(b.name))}>
94-
{(school) => (
95-
<tr>
96-
<td data-label="School" class="school-name-cell">
97-
<A href={`/magic/${school.key}`} class="school-link">
98-
{school.name}
99-
</A>
100-
</td>
101-
<td data-label="Description">{school.description}</td>
102-
<td data-label="Focus Areas" class="low-priority">
103-
{Array.isArray(school.focus) ? school.focus.join(', ') : school.focus || 'N/A'}
104-
</td>
105-
<td data-label="Regulation">{school.regulation || 'Unknown'}</td>
106-
<td data-label="Opposing Element" class="low-priority">{school.opposing_element || 'None'}</td>
107-
</tr>
108-
)}
109-
</For>
110-
</tbody>
111-
</table>
112-
</div>
108+
<ResponsiveTable
109+
columns={schoolColumns}
110+
data={schools()}
111+
className="schools-table"
112+
/>
113113
</Show>
114114
</Suspense>
115115
</div>

0 commit comments

Comments
 (0)