talpidae/src/routes/djii/CharStatus.svelte

<script>
  import { decode } from '$lib/util';
  import Select from '../Select.svelte';
  import BodyPartIcon from './BodyPartIcon.svelte';
  import { enumAvaliableMeleeStyles, getStamina, setSelectedMeleeStyle } from './attack';
  import { renderBlocks } from './blocks';
  import { getBloodLevel } from './blood';
  import { Cash } from './cash';
  import { Profession } from './profession';

  let { world, char, tick } = $props();

  const health = {
    head: 0.75,
    body: 0.95,
    larm: 0.90,
    rarm: 1.00,
    lleg: 0.54,
    rleg: 0.31,
  };
  const styles = {
    hunger: '#aa0',
    thirst: '#aa0',
  };
  const descriptions = {
    head: 'You selected head',
    body: 'Body',
    larm: 'Your left arm is fine',
    rarm: 'Your right arm is in perfect shape',
    lleg: 'Your left leg bleeds!',
    rleg: 'Your right leg is heavily damaged!',
  };
  let selected = $state(null);
  let description = $derived(descriptions[selected] ?? '');
  let dynamicStyle = $derived(Object.entries(styles).map(([k, v]) => `--${k}: ${v}`).join(';'));
  let profession = $derived(decode(Profession.profession[char]));

  let staminaLine = $derived((tick, renderBlocks(getStamina(world, char))));
  let bloodLine = $derived((tick, renderBlocks(getBloodLevel(world, char))));
  let meleeStyles = $derived((tick, enumAvaliableMeleeStyles(world, char).map(([name, style]) => { return {name, style} })));
  let meleeStyleIndex = $state(0);
  $effect(() => {
    setSelectedMeleeStyle(world, char, meleeStyles[meleeStyleIndex].name);
  });

  const select = (part) => () => {
    if (selected === part) {
      selected = null;
    } else {
      selected = part;
    }
  };
</script>

<!--
  │┤╡╢╖╕╣║╗╝╜╛┐
  └┴┬├─┼╞╟╚╔╩╦╠═╬╧
  ╨╤╥╙╘╒╓╫╪┘┌
  ≡±≥≤

  ('-')
  ──╥──
  ║║║
  ╜ ╙

  {'-'}
  ≥─╥─≤
  ┌╨┐
  ╜ ╙
-->
<!-- ░▒▓█ -->

<section class="stat" style="{dynamicStyle}">
  ${Cash.amount[char]} L1+23%
  {profession}
  <pre><span class="test">
 {'{'}'-x}
 ≥─╥─≤
  ┌╨┐
  ╜ ╙
  </span></pre>

  <!-- <BodyPartIcon {health} {selected} {select} part="head">(^_^)</BodyPartIcon>
    <BodyPartIcon {health} {selected} {select} part="larm">╓</BodyPartIcon><BodyPartIcon {health} {selected} {select} part="body">─╥─</BodyPartIcon><BodyPartIcon {health} {selected} {select} part="rarm">╖</BodyPartIcon>
    <BodyPartIcon {health} {selected} {select} part="body">║║║</BodyPartIcon>
    <BodyPartIcon {health} {selected} {select} part="lleg">╜</BodyPartIcon> <BodyPartIcon {health} {selected} {select} part="rleg">╙</BodyPartIcon> -->
  <!-- </pre> -->
  <div>{description}</div>
  <div>[<span class="stamina">{staminaLine}</span>]</div>
  <div>[<span class="blood">{bloodLine}</span>]</div>
  <div>
    <h3>Style</h3>
    <Select options={meleeStyles} bind:index={meleeStyleIndex} />
  </div>
  <button>More</button>
</section>

<style>

  .test {
    animation: wounded linear 1000ms infinite;
    animation-direction: alternate;
    /* text-shadow: 1px 1px 0 #d1d; */
  }

  @keyframes wounded {
    0% {
      text-shadow: 1px 1px 6px #d11;
    }
    100% {
      text-shadow: 1px 1px 1px #d11;
    }
  }

  .stamina {
    font-family: 'Square';
    color: #384;
  }

  .blood {
    font-family: 'Square';
    color: #834;
  }

</style>