/**
 * Canvas rajzolás a peripherals.html oldalhoz
 *
 * A HTML5 <canvas> elem lehetővé teszi, hogy JavaScripttel rajzoljunk grafikát
 * közvetlenül a böngészőben. Ez a script 5 perifériát rajzol meg egyszerű
 * alakzatokból: billentyűzet, egér, monitor, headset és gamepad.
 *
 * CANVAS ALAPOK:
 * - A canvas egy "vászon", amire pixeleket rajzolhatunk
 * - 2D kontextussal dolgozunk (getContext('2d'))
 * - Koordináta rendszer: bal felső sarok = (0, 0), x jobbra, y lefelé nő
 *
 * FONTOS: Ez a script HTML5/CSS3 oktatáshoz nem szükséges, csak demonstrálja
 * a canvas elem használatát. A HTML <canvas> tag önmagában is megérthető.
 */

// ========== CANVAS ELEM ÉS RAJZOLÁSI KONTEXTUS ==========
// getElementById: HTML elem lekérése az id attribútuma alapján
const canvas = document.getElementById('peripherals-canvas');

// getContext('2d'): rajzolási kontextus (API) lekérése
// Ez tartalmazza az összes rajzolási függvényt (fillRect, arc, stb.)
const ctx = canvas.getContext('2d');

// ========== RESPONSIVE CANVAS MÉRETEZÉS ==========
// Ez a függvény biztosítja, hogy a canvas responsive legyen (mobil nézetben kisebb)
function resizeCanvas() {
  const container = canvas.parentElement;       // Szülő elem (div)
  const containerWidth = container.offsetWidth; // Szülő szélessége pixelben

  // Ha keskenyebb mint 800px (mobil), akkor teljes szélességet használjon
  if (containerWidth < 800) {
    canvas.style.width = '100%';
  }
}

// Canvas méretezés indításkor és ablak átméretezésekor
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

// ========== HÁTTÉR RAJZOLÁSA GRADIENSSEL ==========
// createLinearGradient: lineáris színátmenet létrehozása (x1, y1, x2, y2)
// (0, 0) kezdőpont, (0, 200) végpont = függőleges gradient
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, '#f0f8ff');   // Tetején világoskék
gradient.addColorStop(1, '#e6f2ff');   // Alul kicsit sötétebb kék

// fillStyle: kitöltés színének/mintájának beállítása
ctx.fillStyle = gradient;

// fillRect: téglalapot rajzol (x, y, szélesség, magasság)
ctx.fillRect(0, 0, 800, 200);  // Teljes canvas kitöltése gradienssel

// ========== 1. BILLENTYŰZET RAJZOLÁSA ==========
// Sötétszürke alaptest (billentyűzet teste)
ctx.fillStyle = '#333';  // Hexadecimális szín (sötétszürke)
ctx.fillRect(50, 80, 120, 60);  // x=50, y=80 pozíciótól 120x60 pixel téglalap

// Billentyűk rajzolása dupla ciklussal (4 sor × 8 gomb)
ctx.fillStyle = '#555';  // Világosabb szürke a gombokhoz
for (let i = 0; i < 4; i++) {      // 4 sor
  for (let j = 0; j < 8; j++) {    // 8 oszlop (gomb soronként)
    // Minden gomb 14 pixel távolságra van egymástól
    ctx.fillRect(55 + j * 14, 85 + i * 14, 12, 12);
  }
}

// Címke szöveg rajzolása
ctx.fillStyle = '#000';           // Fekete szöveg
ctx.font = 'bold 14px Arial';     // Betűtípus és méret
ctx.textAlign = 'center';         // Középre igazított szöveg
ctx.fillText('Billentyűzet', 110, 160);  // Szöveg rajzolása (text, x, y)

// ========== 2. EGÉR RAJZOLÁSA ==========
// Egér teste ellipszis (ovális) alakzattal
ctx.fillStyle = '#444';  // Sötétszürke
ctx.beginPath();         // Új rajzolási útvonal kezdése
// ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
ctx.ellipse(250, 110, 25, 35, 0, 0, 2 * Math.PI);  // Teljes ellipszis
ctx.fill();  // Kitöltés az aktuális fillStyle-lal

// Egér felső gomb területe (bal-jobb gombok)
ctx.fillStyle = '#666';  // Világosabb szürke
ctx.fillRect(245, 85, 10, 30);  // Téglalap a gombok számára

// Középső vonal (görgő elválasztó)
ctx.strokeStyle = '#333';  // Vonal színe (sötétszürke)
ctx.lineWidth = 2;         // Vonal vastagsága pixelben
ctx.beginPath();           // Új útvonal kezdése
ctx.moveTo(250, 85);       // Kezdőpont (x, y)
ctx.lineTo(250, 105);      // Végpont (x, y) - függőleges vonal
ctx.stroke();              // Vonal kirajzolása

// Címke
ctx.fillStyle = '#000';
ctx.fillText('Egér', 250, 160);

// ========== 3. MONITOR RAJZOLÁSA ==========
// Monitor külső keret (fekete keret)
ctx.fillStyle = '#222';  // Nagyon sötétszürke (majdnem fekete)
ctx.fillRect(350, 70, 100, 70);  // Monitor keret

// Monitor képernyő (kék, aktív kijelző)
ctx.fillStyle = '#4a90e2';  // Világoskék (bekapcsolt képernyő)
ctx.fillRect(355, 75, 90, 50);  // Belső képernyő terület

// Monitor állvány
ctx.fillStyle = '#333';  // Sötétszürke
ctx.fillRect(395, 140, 10, 15);  // Függőleges rész (nyak)
ctx.fillRect(380, 155, 40, 5);   // Vízszintes rész (talp)

// Címke
ctx.fillStyle = '#000';
ctx.fillText('Monitor', 400, 175);

// ========== 4. HEADSET RAJZOLÁSA ==========
// Fejpánt (ívelt vonal a fej tetején)
ctx.strokeStyle = '#333';  // Sötétszürke vonal
ctx.lineWidth = 4;         // Vastag vonal (4 pixel)
ctx.beginPath();
// arc(x, y, radius, startAngle, endAngle, anticlockwise)
// Math.PI = 180°, félkör rajzolása (180° → 0°, óramutató járásával szemben)
ctx.arc(550, 110, 30, Math.PI, 0, true);
ctx.stroke();  // Vonal kirajzolása (nem kitöltés!)

// Fülhallgató kagylók (bal és jobb)
ctx.fillStyle = '#444';  // Sötétszürke
ctx.fillRect(520, 105, 15, 25);  // Bal kagyló
ctx.fillRect(565, 105, 15, 25);  // Jobb kagyló

// Piros díszítő körök a kagylókon (pl. márkajel vagy hangszóró)
ctx.fillStyle = '#e74c3c';  // Piros szín
ctx.beginPath();
ctx.arc(527, 117, 8, 0, 2 * Math.PI);  // Bal oldali kör (teljes kör = 2π)
ctx.fill();  // Kitöltés
ctx.beginPath();
ctx.arc(573, 117, 8, 0, 2 * Math.PI);  // Jobb oldali kör
ctx.fill();

// Címke
ctx.fillStyle = '#000';
ctx.fillText('Headset', 550, 160);

// ========== 5. GAMEPAD (KONTROLLER) RAJZOLÁSA ==========
// Kontroller alaptest (középső téglalap)
ctx.fillStyle = '#5a5a5a';  // Közepes szürke
ctx.fillRect(650, 100, 80, 40);  // Alaptest

// Bal és jobb fogantyú (kerek kiemelkedések)
ctx.beginPath();
ctx.arc(660, 120, 15, 0, 2 * Math.PI);  // Bal fogantyú (kör)
ctx.fillStyle = '#777';  // Világosabb szürke
ctx.fill();
ctx.beginPath();
ctx.arc(720, 120, 15, 0, 2 * Math.PI);  // Jobb fogantyú (kör)
ctx.fill();

// D-pad (irányítógombok bal oldalon, kereszt alakú)
ctx.fillStyle = '#333';  // Sötét
ctx.fillRect(665, 115, 10, 3);  // Vízszintes vonal
ctx.fillRect(668, 112, 3, 10);  // Függőleges vonal (kereszt középső része)

// Akciógombok jobb oldalon (4 színes gomb, mint Xbox/PlayStation)
// Piros gomb (felül-bal)
ctx.fillStyle = '#e74c3c';  // Piros
ctx.beginPath();
ctx.arc(715, 115, 4, 0, 2 * Math.PI);
ctx.fill();

// Kék gomb (felül-jobb)
ctx.fillStyle = '#3498db';  // Kék
ctx.beginPath();
ctx.arc(725, 115, 4, 0, 2 * Math.PI);
ctx.fill();

// Narancs gomb (alul-bal)
ctx.fillStyle = '#f39c12';  // Narancs/sárga
ctx.beginPath();
ctx.arc(715, 125, 4, 0, 2 * Math.PI);
ctx.fill();

// Zöld gomb (alul-jobb)
ctx.fillStyle = '#2ecc71';  // Zöld
ctx.beginPath();
ctx.arc(725, 125, 4, 0, 2 * Math.PI);
ctx.fill();

// Címke
ctx.fillStyle = '#000';
ctx.fillText('Gamepad', 690, 160);

// ========== FŐ CÍM A CANVAS TETEJÉN ==========
ctx.fillStyle = '#0066cc';  // Kék színű cím
ctx.font = 'bold 20px Arial';  // Nagy, félkövér betű
ctx.textAlign = 'center';  // Középre igazítás
ctx.fillText('Számítógép Perifériák', 400, 30);  // Canvas közepén (x=400)
