You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.5 KiB
136 lines
3.5 KiB
<script lang="ts">
|
|
import { getScopeContext } from "$lib/components/contexts/ScopeContext.svelte";
|
|
import { getScopeListContext } from "../contexts/ScopeListContext.svelte";
|
|
import type { StatValueInput } from "$lib/models/stat";
|
|
import Checkbox from "../layout/Checkbox.svelte";
|
|
import type Scope from "$lib/models/scope";
|
|
|
|
export let value: StatValueInput[] = [];
|
|
export let showAcquired = false;
|
|
export let showRequired = false;
|
|
export let hideUnseen = false;
|
|
export let zeroDeletes = false;
|
|
export let noToggle = false;
|
|
export let initOnList: number[] = [];
|
|
export let overrideScopeId: number = null;
|
|
|
|
const {scope} = getScopeContext();
|
|
const {scopes} = getScopeListContext();
|
|
|
|
let acquiredMap: Record<number, number>;
|
|
let requiredMap: Record<number, number>;
|
|
let enabledMap: Record<number, boolean>;
|
|
let actualScope: Scope;
|
|
|
|
function initialize(actualScope: Scope) {
|
|
acquiredMap = {};
|
|
requiredMap = {};
|
|
enabledMap = {};
|
|
|
|
if (hideUnseen) {
|
|
for (const v of value) {
|
|
enabledMap[v.statId] = initOnList.includes(v.statId) || (zeroDeletes ? v.required > 0 : v.required >= 0);
|
|
requiredMap[v.statId] = v.required;
|
|
acquiredMap[v.statId] = v.acquired;
|
|
}
|
|
} else {
|
|
for (const stat of actualScope.stats) {
|
|
const found = value.find(v => v.statId == stat.id);
|
|
|
|
enabledMap[stat.id] = found != null && (!!found?.required || !!found?.acquired);
|
|
requiredMap[stat.id] = found?.required || 0;
|
|
acquiredMap[stat.id] = found?.acquired || 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
$: actualScope = overrideScopeId !== null && $scopes.length > 0 ? $scopes.find(s => s.id === overrideScopeId) : $scope;
|
|
|
|
$: {
|
|
if (acquiredMap == null) {
|
|
initialize(actualScope);
|
|
}
|
|
}
|
|
|
|
$: value = actualScope.stats.filter(s => enabledMap[s.id]).map(s => ({
|
|
statId: s.id,
|
|
required: requiredMap[s.id],
|
|
acquired: acquiredMap[s.id],
|
|
}));
|
|
|
|
$: console.log(value);
|
|
</script>
|
|
|
|
<div class="stat-input">
|
|
{#each actualScope.stats as stat (stat.id)}
|
|
{#if enabledMap[stat.id] != null}
|
|
<div class="stat">
|
|
{#if !noToggle}
|
|
<Checkbox noLabel bind:checked={enabledMap[stat.id]} />
|
|
{/if}
|
|
<div class="name" class:disabled={!enabledMap[stat.id]}>{stat.name}</div>
|
|
{#if enabledMap[stat.id]}
|
|
{#if showAcquired}
|
|
<input type="number" class="acquired" bind:value={acquiredMap[stat.id]} />
|
|
{/if}
|
|
{#if showAcquired && showRequired}
|
|
<div class="slash">/</div>
|
|
{/if}
|
|
{#if showRequired}
|
|
<input type="number" class="required" bind:value={requiredMap[stat.id]} />
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import "../../css/colors";
|
|
|
|
div.stat {
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-top: 1px solid $color-entry1;
|
|
|
|
&:first-of-type {
|
|
border-top: none;
|
|
}
|
|
|
|
input:first-of-type {
|
|
margin-left: auto;
|
|
}
|
|
|
|
input {
|
|
font-size: 1em;
|
|
width: fit-content;
|
|
max-width: 7ch;
|
|
padding: 0.3em 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
div {
|
|
padding: 0.3em 0.5ch;
|
|
|
|
&.disabled {
|
|
color: $color-entry2;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.stat-input {
|
|
width: calc(100% - 2ch);
|
|
margin-bottom: 1em;
|
|
margin-top: 0.20em;
|
|
min-height: 2em;
|
|
|
|
background: $color-entryhalf;
|
|
color: $color-entry8;
|
|
border: none;
|
|
outline: none;
|
|
resize: vertical;
|
|
padding: 0.5em 1ch;
|
|
}
|
|
</style>
|