Tilastotietojen tulostaminen

Seuraavana vaiheena on toteuttaa Settings-sivulle tilastotietojen tulostus. Ensin tulostetaan tilastotiedot niistä tiedoista, jotka on jo laskettu.

1. Luo src/components-kansioon uusi tiedosto, anna sen nimeksi Stat.jsx ja liitä sen sisällöksi seuraavat rivit:

   import shortenNumber from "../utils/shortenNumber";
   
   function Stat(props) {
     return (
       <div className="stat">
         <h3>{props.title}</h3>
         <p>{shortenNumber(props.value)}</p>
       </div>
     )
   }
   
   export default Stat;
   

2. Muokkaa src/pages-kansiossa olevaa Settings.jsx-tiedostoa seuraavasti:

   • Lisää tiedoston alkuun seuraava import-rivi:

     import Stat from '../components/Stat';
     

   • Korvaa return-lauseen sisältä TODO stats -teksti seuraavilla riveillä:

                 <Stat title="in bank" value={props.stats.balance} />
                 <Stat title="per click" value={props.stats.increase} />
                 <Stat title="clicks" value={props.stats.clicks} />
                 <Stat title="upgrades" value={props.stats.upgrades} />
     

Nyt Settings-sivulla näkyy neljä tilastolaatikkoa.

Viimeisessä ei ole lukua ennen kuin käyttäjä on ostanut ensimmäisen tuotteen. Tämä johtuu siitä, että upgrades-kentälle ei määritellä arvoa tilamuuttujan alustuksessa. Korjataan tämä ja lisätään samalla yhden tilastoarvon laskenta.

1. Muokkaa src-kansion App.jsx-tiedostoa seuraavasti:

   • Muuta App-funktion alussa oleva stats-tilamuuttujan esittely seuraavanlaiseksi:

       // Esitellään pelin laskennalliset alkuarvot.
       const initialstats = {
         clicks: 0,
         balance: 0,
         increase: 1,
         itemstobuy: 0,
         upgrades: 0,
         collected: 0
       }
     
       // Luodaan tilamuuttuja, johon tallennetaan pelin laskennalliset tiedot.
       const [stats, setStats] = useState(initialstats);
     

     Toteutuksessa tulee helposti eteen tilanne, että muuttujan alkuarvo kannattaa esitellä omana vakionaan, jotta alkuarvo olisi helpompi käyttää. Tässä yhteydessä erotettiin alkuarvo omaksi vakiomuuttujaksi, jota käytämme tilamuuttujan alustuksen myös myöhemmin.

   • Lisää seuraava koodirivi handleClick-funktion sisälle ennen setStats-funktion kutsua:

         // Kasvatetaan sitruunoiden keräysmäärää.
         newstats.collected = round(newstats.collected + newstats.increase,1);
     

     Tämä tekee saman kasvatuksen, mitä tehdään balance-arvolle. Tarvitsemme tilastoinnin kannalta kaksi eri arvoa, sillä toinen kertoo käytettävissä olevien sitruunoiden määrän (balance) ja toinen kertoo koko pelin aikana poimittujen sitruunoiden määrän (collected).

2. Muokkaa src/pages-kansion Settings.jsx-tiedoston return-lausetta niin, että lisäät seuraavat rivit increase- ja clicks-tulostusten väliin.

               <Stat title="collected" value={props.stats.collected} />
   

Näiden lisäysten jälkeen upgrades-arvo tulostuu alkutilanteessa ja sen lisäksi tulostetaan collected-arvo, jonka laskenta lisättiin.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää tilastoarvojen tulostuksen"

lisää tilastoarvojen tulostuksen -commit