Kolorowy zgadywacz WEB

🧱 KROK 1: Utwórz nowy projekt Angular w Visual Studio 2022

1. Otwórz Visual Studio 2022.
2. Kliknij Create a new project.
3. Wyszukaj: Angular.
4. Wybierz szablon: ✅ ASP.NET Core with Angular.
5. Kliknij Next.
6. Nazwij projekt: KolorowyZgadywaczWeb.
7. Kliknij Create.
8. Wybierz framework backendu (np. .NET 7 lub .NET 6).
9. Poczekaj, aż Visual Studio wygeneruje projekt – to może potrwać chwilę, bo uruchamia npm install.

następnie przechodzimy do folderu cd kolorowyzgadywaczweb.client

🎨 Krok 2: Zainstaluj Bootstrapa

npm install bootstrap

Otwórz plik angular.json, znajdź „styles”: [ i dodaj:

„node_modules/bootstrap/dist/css/bootstrap.min.css”

🧩 Etap 3: Przygotuj komponent

📁 Stwórz komponent
ng generate component kolorowyzgadywaczweb.client

🧩 KROK 4: Wypełnij kod komponentu

📄 kolorowyzgadywaczweb.client.component.html
Plik: src/app/kolorowyzgadywaczweb.client/kolorowyzgadywaczweb.client.component.html

<div class="container text-center mt-5">
  <h2>{{ komunikat }}</h2>

  <div class="d-flex justify-content-center my-4">
    <button *ngFor="let kolor of przyciski"
            class="btn btn-lg mx-2"
            [ngStyle]="{'background-color': kolor.kolor}"
            (click)="sprawdzOdpowiedz(kolor.index)">
    </button>
  </div>

  <button class="btn btn-primary" [disabled]="!nastepneAktywne" (click)="generujPytanie()">Następne</button>

  <p class="mt-3">Wynik: {{ poprawne }} / {{ pytania }}</p>
</div>

📄 kolorowyzgadywaczweb.client.component.ts
Plik: src/app/kolorowyzgadywaczweb.client/kolorowyzgadywaczweb.client.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-kolorowyzgadywaczweb-client',
  templateUrl: './kolorowyzgadywaczweb.client.component.html',
  styleUrls: ['./kolorowyzgadywaczweb.client.component.css']
})
export class KolorowyZgadywaczWebClientComponent implements OnInit {

  kolory: string[] = ['Czerwony', 'Zielony', 'Niebieski'];
  koloryRGB: string[] = ['red', 'green', 'blue'];

  poprawne = 0;
  pytania = 0;
  poprawnyIndeks = 0;
  komunikat = '';
  nastepneAktywne = false;

  przyciski: { kolor: string, index: number }[] = [];

  ngOnInit(): void {
    this.generujPytanie();
  }

  generujPytanie() {
    this.poprawnyIndeks = Math.floor(Math.random() * 3);
    this.komunikat = 'Kliknij: ' + this.kolory[this.poprawnyIndeks];
    this.nastepneAktywne = false;

    const indeksy = [0, 1, 2].sort(() => 0.5 - Math.random());
    this.przyciski = indeksy.map(i => ({
      kolor: this.koloryRGB[i],
      index: i
    }));
  }

  sprawdzOdpowiedz(indexKlikniety: number) {
    if (indexKlikniety === this.poprawnyIndeks) {
      alert('Brawo! To poprawna odpowiedź!');
      this.poprawne++;
    } else {
      alert('Ups! Zła odpowiedź!');
    }

    this.pytania++;
    this.nastepneAktywne = true;
  }
}

🧩 KROK 5: Zarejestruj komponent w module

📄 app.module.ts
Plik: src/app/app.module.ts

import { KolorowyZgadywaczWebClientComponent } from './kolorowyzgadywaczweb.client/kolorowyzgadywaczweb.client.component';

I dodaj go do declarations:

declarations: [
  AppComponent,
  KolorowyZgadywaczWebClientComponent
],

🎯 KROK 6: Pokaż komponent na stronie głównej

📄 app.component.html

<app-kolorowyzgadywaczweb-client></app-kolorowyzgadywaczweb-client>

🧱 **KROK 1: Utwórz nowy projekt Angular w Visual Studio 2022**

1. Otwórz Visual Studio 2022.
2. Kliknij **Create a new project**.
3. Wyszukaj: **Angular**.
4. Wybierz szablon: ✅ **ASP.NET Core with Angular**.
5. Kliknij **Next**.
6. Nazwij projekt: **KolorowyZgadywaczWeb**.
7. Kliknij **Create**.
8. Wybierz framework backendu (np. .NET 7 lub .NET 6).
9. Poczekaj, aż Visual Studio wygeneruje projekt (npm install może potrwać chwilę).

---

📁 **KROK 2: Przejdź do folderu z projektem Angular**

```bash
cd KolorowyZgadywaczWeb\ClientApp
```

---

🎨 **KROK 3: Zainstaluj Bootstrapa**

```bash
npm install bootstrap
```

Następnie otwórz plik `angular.json` i znajdź sekcję `"styles": [`.
Dodaj poniższą linię **na początku listy**:

```json
"node_modules/bootstrap/dist/css/bootstrap.min.css",
```

Efekt końcowy:
```json
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]
```

---

🧩 **KROK 4: Stwórz komponent**

```bash
ng generate component zgadywacz --skip-tests
```

Utworzy się folder: `src/app/zgadywacz/` z plikami:
- `zgadywacz.component.ts`
- `zgadywacz.component.html`
- `zgadywacz.component.css`

---

🧩 **KROK 5: Wypełnij kod komponentu**

📄 **`zgadywacz.component.html`**
```html
<div class="container text-center mt-5">
  <h2>{{ komunikat }}</h2>

  <div class="d-flex justify-content-center my-4">
    <button *ngFor="let kolor of przyciski"
            class="btn btn-lg mx-2"
            [ngStyle]="{'background-color': kolor.kolor}"
            (click)="sprawdzOdpowiedz(kolor.index)">
    </button>
  </div>

  <button class="btn btn-primary" [disabled]="!nastepneAktywne" (click)="generujPytanie()">Następne</button>

  <p class="mt-3">Wynik: {{ poprawne }} / {{ pytania }}</p>
</div>
```

📄 **`zgadywacz.component.ts`**
```ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-zgadywacz',
  templateUrl: './zgadywacz.component.html',
  styleUrls: ['./zgadywacz.component.css']
})
export class ZgadywaczComponent implements OnInit {

  kolory: string[] = ['Czerwony', 'Zielony', 'Niebieski'];
  koloryRGB: string[] = ['red', 'green', 'blue'];

  poprawne = 0;
  pytania = 0;
  poprawnyIndeks = 0;
  komunikat = '';
  nastepneAktywne = false;

  przyciski: { kolor: string, index: number }[] = [];

  ngOnInit(): void {
    this.generujPytanie();
  }

  generujPytanie() {
    this.poprawnyIndeks = Math.floor(Math.random() * 3);
    this.komunikat = 'Kliknij: ' + this.kolory[this.poprawnyIndeks];
    this.nastepneAktywne = false;

    const indeksy = [0, 1, 2].sort(() => 0.5 - Math.random());
    this.przyciski = indeksy.map(i => ({
      kolor: this.koloryRGB[i],
      index: i
    }));
  }

  sprawdzOdpowiedz(indexKlikniety: number) {
    if (indexKlikniety === this.poprawnyIndeks) {
      alert('Brawo! To poprawna odpowiedź!');
      this.poprawne++;
    } else {
      alert('Ups! Zła odpowiedź!');
    }

    this.pytania++;
    this.nastepneAktywne = true;
  }
}
```

📄 **`zgadywacz.component.css`** (opcjonalnie):
```css
button {
  width: 100px;
  height: 100px;
  border: none;
}
```

---

🧩 **KROK 6: Zarejestruj komponent w module**

📄 **`app.module.ts`**
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ZgadywaczComponent } from './zgadywacz/zgadywacz.component';

@NgModule({
  declarations: [
    AppComponent,
    ZgadywaczComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

---

🎯 **KROK 7: Wyświetl komponent w aplikacji**

📄 **`app.component.html`**
```html
<app-zgadywacz></app-zgadywacz>
```

---

✅ Gotowe! Teraz możesz uruchomić aplikację:
```bash
ng serve
```
I przejść do `http://localhost:4200` aby zagrać 🎮