Untitled

document.querySelector('#zdjecie img').addEventListener('click', function() {
  //właściwości css które składają się z wielu wyrazów tutaj zapisujemy w notacji camelCase np.borderRadius
  document.querySelector('img').style.borderRadius = '50px';
});

document.querySelector('#zdj').addEventListener('click', function() {
  document.querySelector('img').style.borderRadius = '50px';
});

document.querySelector('.zdj').addEventListener('click', function() {
  document.querySelector('img').style.borderRadius = '50px';
});

document.querySelector('.zdj').addEventListener('click', function() {
  document.querySelector('img').style.borderRadius = '50px';
});

document.querySelector('div img').addEventListener('click', function() {
  document.querySelector('img').style.borderRadius = '50px';
});





//tablica przechowująca punkt graczy
let punkty = [];
//punkty które zdobywa gracz po każdym rzucie kością
let punktyRundy;

//zmienna sterująca graczami jeśli równa 0 gra gracz1 jeśli równa 1 gra gracz2
//jako że w programowaniu numerujemy od 0, gracz1 będzie miał wartość 0 gracz2wartość 1 ułatwi to pobieranie punktów z tablicy
let aktualnyGracz;

//zmienna boolowska sterująca rozgrywką jeśli true możemy grać jeśli false rozgrywka będzie niemożliwa
let czyMoznaGrac;

//dodajemy tablicę, która przechowa adresy do grafik z kością
const obrazki = ["https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc - 1. png ? v = 1610038358032 ",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc - 2. png ? v = 1610038358080 ",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc - 3. png ? v = 1610038358032 ",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc - 4. png ? v = 1610038358142 ",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc - 5. png ? v = 1610038358032 ",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc - 6. png ? v = 1610038358193 "
];

//funkcja odpowiedzialna za przygotowanie nowej gry
nowaGra();

function nowaGra() {
  //zezwalamy na grę
  czyMoznaGrac = true;
  
  //grę zawsze rozpoczyna gracz 1
  aktualnyGracz = 0;
  
  //ukrywamy kość na początku gry
  document.querySelector('.kosc').style.display = 'none';
  
  //zerujemy wszystkie wyniki
  punkty = [0, 0];
  punktyRundy = 0;
  
  //aktualizujemy interfejs użytkownika z punktami
  document.getElementById('wynik-0').textContent = '0';
  document.getElementById('wynik-1').textContent = '0';
  
  document.getElementById('aktualne-punkty-0').textContent = '0';
  document.getElementById('aktualne-punkty-1').textContent = '0';
  
  //zmieniamy nazwy na Gracz1 i Gracz2 ponieważ podczas rozgrywki będziemy modyfikować te elementy ustawiając tekst zwycięstwo
  document.getElementById('nazwa-0').textContent = 'Gracz 1';
  document.getElementById('nazwa-1').textContent = 'Gracz 2';
  
  //usuwamy klasę zwycięstwo odpowiedzialną za podmianę tekstu Gracz1/2 na zwycięstwo
  document.querySelector('.gracz-0-panel').classList.remove('zwyciestwo');
  document.querySelector('.gracz-1-panel').classList.remove('zwyciestwo');
  
  // usuwamy klasę aktywny odpowiedzialną za wskazywanie aktualnego gracza
  document.querySelector('.gracz-0-panel').classList.remove('aktywny');
  document.querySelector('.gracz-1-panel').classList.remove('aktywny');
  
  //dodajemy klasę aktywny do Gracza1 ponieważ to on zawsze zaczyna grę
  document.querySelector('.gracz-0-panel').classList.add('aktywny');
}

//przycisk Rzuć kością

//dodajemy wykrywacz zdarzeń na naszej stronie, ten konkretny będzie wykrywaćkliknięcie na przycisk Rzuć kością
//tworzymy funkcję anonimową- taką bez nazwy, którą wykorzystamy tylko w tymdanym kontekście i nie będziemy z niej mogli skorzystać poza
document.querySelector('.btn-rzuc').addEventListener('click', function() {

  if (czyMoznaGrac) {
    //rzucamy kością, losujemy wartość 1-6
    const liczbaOczek = Math.floor(Math.random() * 6) + 1;
    //tworzymy zmienną koscObrazek przechowującą odwołanie do elementu kosci nastronie i wyświetlamy kostkę
    const koscObrazek = document.querySelector('.kosc');
    //wybieramy odpowiednią grafike
    koscObrazek.src = obrazki[liczbaOczek - 1];
    //wyświetlamy kość
    koscObrazek.style.display = 'block';

    //aktualizujemy wynik rundy jeśli na kości nie zostało wyrzucone jedno oczko
    if (liczbaOczek != 1) {
      //dodajemy wynik
      punktyRundy += liczbaOczek;
      document.querySelector('#aktualne-punkty-' + aktualnyGracz).textContent = punktyRundy;
    } else {
      //Prosimy uczestników o zapisanie wywołania funkcji a jej definicjenapiszemy na lekcji kolejnej
      //TODO
      //nastepnyGracz();
    }
  }
});