Tehtävä

1. Tee Create React App -työkalulla uusi React-projekti

   • Nimi voi olla esimerkiksi “the-race-to-december-31”

Pelin säännöt

• Peli alkaa päivämäärästä 1.1. (kuluvaa vuotta)

• Pelaaja ja tietokone valitsevat vuorotellen jonkin tulevan päivämäärän

  • Valitun päivämäärän on oltava suurempi joko päivä- tai kuukausiarvoltaan. Toisen arvon on pysyttävä samana.

    • Esimerkiksi 1.1. jälkeen voi valita 17.1. tai 1.3., mutta ei 22.10.

    • Edellistä pienempää päivämääräarvoa ei voi valita

      • 29.7. jälkeen ei voi valita 22.8.

• Voittaja on se, joka onnistuu valitsemaan päivämäärän 31.12.

• Pelaaja aloittaa

Lisätietoa pelistä (YouTube)

Toteutus

1. Asenna MUI Date Picker ja sen vaatimat riippuvuudet

   npm install @mui/material @mui/x-date-pickers @emotion/react @emotion/styled moment

2. Käytä päivämäärän valintaan <StaticDatePicker />:iä

   • Esimerkistä poiketen käytä LocalizationProvider:ssa Moment-kirjaston adapteria: import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";

3. Käytä StaticDatePicker:in shouldDisableDate -propille annettavaa callback-funktiota päivämäärien rajaukseen

   • Funktio saa parametrina Moment-kirjaston päivämääräobjektin

4. Tietokone valitsee päivämäärän oheisella funktiolla:

   // src/getComputerMove.js
   
   import moment from 'moment';
   
   // function getComputerMove(a: Moment): Moment
   export default function getComputerMove(a) {
     const b = a.date();
     if (31 === b) return moment({ date: 31, month: 11 });
     const c = a.month(),
       d = c + 20;
     if (d < b) {
       const e = b - 20,
       f = moment({ date: b, month: e });
       return f.isValid() ? f : moment({ date: b, month: e + 1 });
     }
     return moment(d === b ? { date: b, month: c + 1 } : { date: d, month: c });
   }

5. Listaa valitut päivämäärät

6. Lisää “Uusi peli” -painike

7. Aseta suomalainen päivämääräformaatti