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

  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

PreviousLinkkejäNextSisältö

Last updated