Tiedostojen tuominen ja kytkeminen

Projektin aikana tulee monesti eteen tilanteita, jossa joudutaan tuomaan tarvittavia tiedostoja muualta.

CSS-tyylitiedosto

Tämän projektin ensisijaisena tavoitteena on React-kirjaston toiminnan ymmärtäminen. Tästä johtuen emme käsittele tämän projektin aikana syvällisesti muita asioita, kuten esimerkiksi miten sovelluksen ulkoasu on toteutettu CSS-tyylien avulla. Siksi kopioimme projektin aluksi valmiit CSS-tyylimäärittelyt, jota käytämme projektin aikana.

Kopioi osoitteessa https://raw.githubusercontent.com/pekkatapio/lemon-clicker/main/src/App.css löytyvät kaikki CSS-tyylimääritteet ja liitä ne src-kansiossa olevaan App.css-tiedostoon.

Projektin CSS-tyylimääritteet

Tämä CSS-tyylitiedosto sisältää kaikki projektin aikana käytettävät CSS-tyylimääritteet. Voit vilkaista tiedoston sisällön lävitse, siellä on joukossa paljon selittäviä kommentteja. Tiedoston alussa on ensin värimäärittelyt ja yleiset sivustoa koskevat määritykset, niiden jälkeen tulee komponenttikohtaiset määritykset.

Toteuttamamme sovellus on todellisuudessa sen verran pieni, että voimme määritellä tyylimääritteet keskitetysti yhteen tiedostoon. Isommissa projekteissa tyylimääritteet kannattaa pilkkoa komponenttien yhteyteen, tämän tulet näkemään seuraavassa projektissa.

Kuvat

Projektissa tulemme käyttämään myös paljon erilaisia kuvia. Suurin osa projektissa käytettävistä kuvista ovat SVG-muotoisia. Seuraavaksi tuomme projektikansioon kuva, jota pelissä napautetaan eli yksinkertainen versio halkaistusta sitruunasta.

Kuva sijoitetaan assets-kansioon, joka on tarkoitettu kaikille projektiin tuotaville staattisille tiedostoille, kuten esimerkiksi kuville. Periaatteessa kansion nimellä ei ole merkitystä, mutta kannattaa käyttää aina niitä nimiä, jotka ovat vakiintuneet.

  1. Mene osoitteeseen https://www.svgrepo.com/svg/474522/lemon ja lataa sivulla oleva kuva SVG-muodossa.

    Lemon SVG Vector -sivu

  2. Luo src-kansioon uusi kansio ja anna sen nimeksi assets.

  3. Siirrä lataamasi SVG-kuva juuri luomaasi kansioon.

  4. Uudelleennimeä kuva nimellä lemon-big.svg.

    Kuva assets-kansiossa

Versiohallinnan alustaminen

Nyt meillä on tuotuna sekä CSS-tyylimääritteet että yksittäinen kuva. Viedään tämä alkutilanne versiohallintaan. Projektilla ei ole vielä alustettu versiohallintaa, joten teemme sen ensin. Suorita seuraavat komennot projektikansiossa.

git init
git add .
git commit -m "lisää projektirungon"

Jatkossa löydät täältä alaotsakkeesta linkin materiaalissa tehtyyn commit-taltiointiin. Linkin kautta pääset näkemään koosteen siitä, mitä muutoksia viimeisessä taltioinnissa on tehty.

Tämän sivun lisää projektirunko -taltiointi.