talpidae/src/routes/djii/CharCreation.svelte

<script>
  import { Name } from '$lib/components';
  import { addComponent, removeEntity } from '$lib/ecs';
  import { onMount } from 'svelte';
  import Select from '../Select.svelte';
  import { newGame } from './game';
  import { applyProfession, enumProfessions } from './profession';
  import { enumSkills, purgeSkills } from './skill';
  import Stats from './Stats.svelte';
  import Skills from './Skills.svelte';
  import { getInventory, purgeInventory } from '$lib/inventory';
  import Equipment from './Equipment.svelte';
  import Inventory from './Inventory.svelte';
  import { fromTemplate } from '$lib/builder';
  import { getEquipped, purgeEquipment } from './equipment';
  import { playerTemplate } from './player';
  import { notNullish } from '$lib/util';

  let { game } = $props();

  const game0 = newGame();

  let charNameWidget;
  let tick = $state(false);
  
  let error = $state('');

  let playerName = $state('I.I.');

  const professions = enumProfessions();
  const skills = enumSkills();

  let professionIx = $state(0);
  let selectedProfession = $state(professions[0]);

  let tmpChar = $state();

  // skip char-creation (for debug purposes)
  const autostart = false;

  onMount(() => {
    charNameWidget.focus();
    tmpChar = fromTemplate(game0.world, playerTemplate);
    if (autostart) {
      start();
    }
  });

  let inventory = $state([]);
  let equipment = $state([]);

  $effect(() => {
    if (notNullish(tmpChar)) {
      purgeInventory(game0.world, tmpChar);
      purgeEquipment(game0.world, tmpChar);
      purgeSkills(game0.world, tmpChar);
      applyProfession(game0.world, tmpChar, professions[professionIx]);
      inventory = getInventory(game0.world, tmpChar);
      equipment = getEquipped(game0.world, tmpChar);
      selectedProfession = professions[professionIx];
    }
  });

  $effect(() => {
    tick;
    error = '';
  });

  const start = () => {
    purgeEquipment(game0.world, tmpChar);
    purgeInventory(game0.world, tmpChar);
    removeEntity(game0.world, tmpChar);
    tmpChar = undefined;
    addComponent(game0.world, Name, game0.pc, {
      name: playerName,
    });
    applyProfession(game0.world, game0.pc, professions[professionIx]);
    // NOTE: line below doesn't work because of Svelte reactivity conflict with bitECS
    /* applyProfession(game0.world, game0.pc, selectedProfession); */
    game = game0;
  };

  const finishCharacter = () => {
    /*
    if (freeStatPoints > 0) {
      error = 'Free stat points left!';
      return;
    }
    */
    start();
  };
</script>

<section class="cc-grid">
  <div class="cc-leftside">
    <h2>New character</h2>
    <input bind:this={charNameWidget} bind:value={playerName} /> the {selectedProfession.name}
    <div>
      <h3>Profession</h3>
      <Select options={professions} bind:index={professionIx} />
    </div>
    <div>
      <h3>Hobby</h3>
    </div>
    <Stats game={game0} bind:tick />
    <Skills world={game0.world} char={tmpChar} tick={selectedProfession} />
    <div>{error}</div>
    <button onclick={finishCharacter}>Ok</button>
  </div>
  <div class="cc-rightside">
    Starting equipment
    <Inventory world={game0.world} {inventory} />
    <Equipment world={game0.world} {equipment} />
  </div>
</section>

<style>
  .cc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "leftside rightside";
  }
  .cc-leftside {
    grid-area: leftside;
  }
  .cc-rightside {
    grid-area: rightside;
  }
</style>