Verkkosovelluksen kehitys Lit components -kirjaston avulla

Abstract

Verkkopohjainen hahmonhallintasovellus kehitettiin suomalaista Dungeons & Dragons -muunnosta “legendoja ja lohikäärmeitä” varten, käyttäen Lit-web components kirjastoa. Sovellus on suunniteltu korvaamaan perinteiset paperi- tai PDF-hahmolomakkeet tarjoamalla interaktiivisen, asiakaspuoleisen sovelluksen. Lit mahdollistaa modulaaristen, uudelleen käytettävien verkkokomponenttien luomisen, jotka kapseloivat oman tilansa, tukevat reaktiivisia päivityksiä ja hyödyntävät Shadow DOMia eristettyyn tyylittelyyn. Komponentit renderöityvät dynaamisesti käyttäjän syötteen perusteella ilman, että koko sivu tarvitsee ladata uudelleen, mikä tekee Litistä sopivan yksisivuisille käyttöliittymäinteraktioille.

Hahmotiedot tallennetaan paikallisesti selaimen tallennustilaan, mikä takaa tiedon säilymisen istuntojen välillä, ja tiedot voidaan viedä JSON-muodossa, jotta ne voidaan siirtää laitteelta toiselle. Pelisisältö, mukaan lukien loitsut ja aseet, on peräisin avoimen lisenssin 5th Edition System Reference Document -materiaalista ja järjestetty CSV-tiedostoihin, jotka parsitaan asiakkaan puolella PapaParse-kirjaston avulla tehokasta käsittelyä varten.

Käyttöliittymä korostaa käytettävyyttä näyttämällä keskeiset hahmotilastot selkeästi, samalla kun toissijaiset tiedot on järjestetty erillisiin komponentteihin, mikä mahdollistaa selkeän ja intuitiivisen navigoinnin. Loitsut ja aseet esitetään haettavissa taulukoissa tai korteissa. Käyttäjän on myös mahdollista luoda ja hallita omia mukautettuja pelin sisäisiä esineitä.

Navigointi osioiden, kuten hahmolomakkeen, loitsujen ja aseiden välillä, toteutetaan Vaadin Routerilla, mikä tarjoaa saumattoman yksisivuisen sovelluskokemuksen URL-pohjaisella reitityksellä. Sovelluksen rakennustyökaluna käytettiin Viteä, joka mahdollistaa nykyaikaiset ES-moduulit, kuuman moduulin vaihdon kehityksen aikana ja helpon julkaisun GitHub Pages -palveluun.

Lopputulos oli hyvä, käyttökelpoinen sovellus, jonka usea omissa pöydissämme pelaava pelaaja on jo ottanut käyttöön. Palautteen perusteella sovellus on vastannut pelaajien tarvetta sovellukselle, vaikka kehitysvaraa on rutkasti, jotta sovelluksesta saadaan huoliteltu ja helppokäyttöisempi versio. Sovelluksen kehitys opetti valtavasti verkkokehityksestä ja oli varsin hyödyllinen oppimisprosessi.

A web-based character management application was developed for the Finnish conversion of the tabletop role-playing game Dungeons & Dragons, called Legendoja ja Lohikäärmeitä, using the Lit web components library. The application is designed to replace traditional paper or PDF character sheets, offering an interactive, client-side experience. Lit enables the creation of modular, reusable web components that encapsulate their own state, support reactive updates, and utilize Shadow DOM for isolated styling. Components dynamically render in response to user input without requiring full page reloads, making Lit suitable for single-page interactions. Lit’s architecture focuses on component structure and lifecycle, including the definition of properties, rendering logic, styling, and lifecycle hooks such as connectedCallback, firstUpdated, and updated, which together allow for efficient and maintainable user interface development. Character information is stored locally through browser storage, ensuring persistence across sessions, and can be exported as JSON to facilitate data transfer between devices. Game content, including spells and weapons, is sourced from the open-access 5th Edition System Reference Document and organized in CSV files, which are parsed client-side using PapaParse for efficient handling. The program interface emphasizes usability, displaying key character statistics prominently while organizing secondary information into separate components, allowing for clear and intuitive navigation. Spells and weapons are presented in searchable tables or cards, and users can create and manage custom items. Navigation between sections such as character sheets, spells, and weapons is implemented with Vaadin Router, providing a seamless single-page application experience with URL-based routing. Vite is used as the build tool, enabling modern ES module support, hot module replacement during development, and easy deployment on GitHub Pages.