Jak to się zaczęło

Zaczęło się od grafiku dla moich altów.

Początek 2026. Chciałem tylko wiedzieć, którą postacią huntować danego dnia, żeby nagrywać to na mój kanał na YouTube. Poniżej są prawdziwe stare wersje, ze starym kodem i starymi bugami. Niektóre możesz otworzyć i poklikać.

Nic, co zrobisz w starych wersjach, się nie zapisuje.

  1. 01

    Grafik dla moich altów

    To była zwykła strona HTML, żeby widzieć grafik moich huntów, lol. Zrobiłem ją, żeby nadać kształt mojemu kanałowi na YouTube: ustalić, w które dni którą postacią huntuję, i móc te hunty nagrywać.

    diario.html
    Zrzut ekranu: diario.html
    Otwórz w nowej karcie open_in_new
  2. 02

    Pierwszy prawdziwy prototyp

    Zrozumiałem, że nie mogę dłużej rozdzielać śledzenia między Notion, inną stronę i Hunt Analyser. Więc zrobiłem ten pierwszy prototyp, z masą problemów: itemy się nie ładowały, podziały się nie zgadzały, wyglądało to brzydko.

    schedule.html
    Zrzut ekranu: schedule.html
    Otwórz w nowej karcie open_in_new

    Pomysł na dzielenie lootu wziął się z narzędzia, które zrobił Mario (Van Loki).

  3. 03

    Przenosiny na Vue

    Największy skok. To Mario (Van Loki) powiedział mi, żebym przeszedł z czystego JavaScriptu na Vue, więc przeniosłem wszystko, żeby utrzymać porządek. To było prawdziwe wyzwanie, bo zmieniła się cała struktura, i było warto. Wtedy zacząłem widzieć, że ten projekt może być większy, niż myślałem.

    jososlab-vue/
    Zrzut ekranu: jososlab-vue/
    Otwórz w nowej karcie open_in_new
  4. 04

    Więcej przestrzeni

    Nie podobało mi się, że wszystko jest zamknięte w ramkach. Chciałem więcej swobody, żeby śledzić więcej niż jeden hunt bez poświęcania tego, co widać na ekranie, więc narysowałem wireframe i przeniosłem go do HTML, żeby sprawdzić, czy to działa. Interfejs się otworzył, ale styl liquid glass mnie nie przekonał. Wyglądał dobrze, ale to nie byłem ja.

    wireframe.html
    Zrzut ekranu: wireframe.html
    Otwórz w nowej karcie open_in_new

    To tylko wireframe. Liczby w zakładce Global Analytics są przykładowe.

  5. 05

    Dziś

    Szerszy układ został, a glass nie. Tak to wygląda teraz.

    jososlab.app/dashboard
    Zrzut ekranu: jososlab.app/dashboard
Josos
JososGracz Tibii, twórca JososLab@tibiajosos na YouTube