Add Resource Table

This commit is contained in:
Tobias Berger 2021-09-27 13:27:14 +02:00
parent eaa87f194d
commit 0a4a1ab30c

View file

@ -1,8 +1,157 @@
<div><pre>Resource Table goes here</pre></div>
<script lang="ts">
const TEST_RESOURCES = {
Shark: {
amount: 100,
category: "Frenzy",
change: (Math.random() - 0.5) * 30,
},
Ray: {
amount: 170,
category: "Frenzy",
change: (Math.random() - 0.5) * 30,
},
Sand: {
amount: 12,
category: "Garbage",
change: (Math.random() - 0.5) * 30,
},
Sand1: {
amount: 12,
category: "Garbage",
change: (Math.random() - 0.5) * 30,
},
Sand2: {
amount: 12,
category: "Garbage",
change: (Math.random() - 0.5) * 30,
},
Sand3: {
amount: 12,
category: "Garbage",
change: (Math.random() - 0.5) * 30,
},
Sand4: {
amount: 12,
category: "Garbage",
change: (Math.random() - 0.5) * 30,
},
Sand5: {
amount: 12,
category: "Garbage",
change: (Math.random() - 0.5) * 30,
},
Sand6: {
amount: 12,
category: "Garbage",
change: (Math.random() - 0.5) * 30,
},
Sand7: {
amount: 12,
category: "Garbage",
change: (Math.random() - 0.5) * 30,
},
};
let collapsed: string[] = [];
$: grouped = Object.entries(resourceGroups());
type Entry = [string, typeof TEST_RESOURCES["Shark"]];
function resourceGroups() {
return Object.entries(TEST_RESOURCES).reduce(
(reduced: { [key: string]: Entry[] }, [resourceName, resource]) => {
if (reduced[resource.category] === undefined) {
reduced[resource.category] = [];
}
reduced[resource.category] = [
...reduced[resource.category],
[resourceName, resource],
];
return reduced;
},
{}
);
}
function toggleCollapsed(categoryName: string) {
if (collapsed.includes(categoryName)) {
collapsed = collapsed.filter((group) => group !== categoryName);
} else {
collapsed = [...collapsed, categoryName];
}
}
</script>
<div>
<table>
<colgroup>
<col style="width: 10%;" />
<col style="width: 40%;" />
<col style="width: 40%;" />
<col style="width: 20%;" />
</colgroup>
<tbody>
{#each grouped as [categoryName, resources]}
<tr
on:click={() => toggleCollapsed(categoryName)}
class="subhead"
tabindex="0"
role="button"
>
<td>{collapsed.includes(categoryName) ? "▲" : "▼"}</td>
<td colspan="3"><h4>{categoryName}</h4> </td>
</tr>
{#if !collapsed.includes(categoryName)}
{#each resources as [resourceName, resource], index}
<tr class={index % 2 === 0 ? "even" : "odd"}>
<td colspan="2">{resourceName}</td>
<td>{resource.amount}</td>
<td>{Math.round(100 * resource.change) / 100}/s</td>
</tr>
{/each}
{/if}
{/each}
</tbody>
</table>
</div>
<style lang="scss">
div {
height: 50%;
width: 100%;
overflow-y: scroll;
background-color: var(--color-darker);
> table {
width: 100%;
border-collapse: collapse;
> tbody {
> tr {
&.even {
background-color: var(--color-med);
}
&.odd {
background-color: var(--color-light);
}
&.subhead {
cursor: pointer;
user-select: none;
background-color: var(--color-dark);
border: 1px solid var(--color-lighter);
> td > h4 {
margin: 0.3em;
}
&:hover > td > h4 {
text-shadow: 0 0 8px var(--color-lighter);
}
}
}
}
}
}
</style>