Trudny / egzaminacyjny · lekcja 32

Projekt Blazor: kalkulator BMI i kolorowa gra zgadywanka

Czas połączyć wszystko z lekcji 9-12 (komponenty, parametry, zdarzenia, binding, formularze, routing) w dwa kompletne, samodzielne projekty — kalkulator BMI i grę „Kolorowy zgadywacz”. To dokładnie te same projekty, które w oryginalnej wersji tego działu były...

Zacznij tutaj

Po co się tego uczymy?

Czas połączyć wszystko z lekcji 9-12 (komponenty, parametry, zdarzenia, binding, formularze, routing) w dwa kompletne, samodzielne projekty — kalkulator BMI i grę „Kolorowy zgadywacz”. To dokładnie te same projekty, które w oryginalnej wersji tego działu były budowane w Angularze — tutaj budujesz identyczną funkcjonalność w 100% w C#, bez jednej linijki TypeScriptu, pokazując, że Blazor daje pełną moc interaktywnych aplikacji webowych w znanym Ci już języku.

Wprowadzenie

Teoria

Projekt 1 — Kalkulator BMI. Formularz z dwoma polami (wzrost w cm, waga w kg), przycisk "Oblicz", i wynik z kategorią (niedowaga/norma/nadwaga/otyłość) wyliczaną na podstawie wzoru BMI = waga / (wzrost_w_metrach)². To praktyczne zastosowanie WSZYSTKICH mechanizmów z tego bloku lekcji: @bind do pól formularza, walidacja (dodatnie wartości), i natychmiastowa aktualizacja wyniku po kliknięciu — bez przeładowania strony.

Projekt 2 — Kolorowy zgadywacz. Gra pokazująca kilka kolorowych przycisków, gdzie tylko JEDEN odpowiada aktualnie wyświetlonemu (opisanemu słownie) kolorowi — kliknięcie poprawnego przycisku zwiększa licznik trafień, błędny — po prostu przechodzi dalej. To świetne ćwiczenie na: generowanie losowych danych (Random), dynamiczne stylowanie elementów (przekazanie koloru jako parametru do stylu style="background-color: @kolor"), oraz zarządzanie stanem gry (aktualne pytanie, wynik, licznik pytań) w bloku @code.

Wzorzec "stan gry w jednym miejscu". W obu projektach cały stan (wpisane dane, wynik, licznik) żyje jako pola w bloku @code GŁÓWNEGO komponentu strony — to ten sam wzorzec "jedno źródło prawdy" (single source of truth), który w Angularze realizowałaby usługa (service) albo stan komponentu, a w MAUI — pola klasy PageModel/ContentPage. Niezależnie od frameworka, zasada jest identyczna: stan aplikacji trzymany w jednym, jasno określonym miejscu, a widok TYLKO go odzwierciedla.

Losowanie w C# — klasa Random. Random.Shared.Next(minimalna, maksymalnaWyłącznie) to nowoczesny, gotowy do użycia generator liczb losowych (współdzielony, bezpieczny wątkowo) — używany do wylosowania, KTÓRY z kolorowych przycisków będzie tym razem poprawną odpowiedzią.

Zobacz zależności

Schemat

PROJEKT 1: Kalkulator BMI
<input @bind="wzrostCm"> <input @bind="wagaKg"> <button @onclick="Oblicz">
        │
        ▼
Oblicz() { bmi = wagaKg / Math.Pow(wzrostCm/100.0, 2); kategoria = ...; }
        │
        ▼
@bmi.ToString("F1")  +  @kategoria   ← natychmiastowa aktualizacja widoku

PROJEKT 2: Kolorowy zgadywacz
        ┌─────────────────────────────────┐
        │  "Kliknij kolor: CZERWONY"       │
        │  [czerwony] [niebieski] [zielony]│  ← przyciski z @onclick="SprawdzOdpowiedz(kolor)"
        └─────────────────────────────────┘
                    │
        poprawny ───┴─── błędny
        │                    │
        ▼                    ▼
   wynik++            (bez zmiany wyniku)
        │                    │
        └──────────┬─────────┘
                    ▼
        LosujNastepnePytanie() → Random.Shared.Next(...)
                    │
                    ▼
        @wynik / @liczbaPytan  ← na bieżąco widoczny wynik

Połącz z praktyką

Przykład z życia

Kalkulator BMI to klasyczne narzędzie zdrowotne dostępne na niezliczonych stronach internetowych, a gra typu "zgadnij kolor" to prosty, ale kompletny przykład mechaniki quizowej (losowe pytanie, sprawdzenie odpowiedzi, zliczanie wyniku) — dokładnie ten sam wzorzec mechaniki quizu, na którym opiera się np. system testów egzaminacyjnych na samej stronie bitedu.pl.