Commit 98738203 authored by Hauk Aleksander Olaussen's avatar Hauk Aleksander Olaussen 🛀🏿
Browse files

Merge branch 'documentation' into 'master'

Documentation

See merge request !16
parents 5918fd13 acc56261
......@@ -14,17 +14,34 @@ Vi har en mappestruktur som skiller ulike deler av kodebasen:
Oppsettet gir et oversiktlig oppsett av prosjektet som er enkel å navigere. Vi har valgt å legge alle typene i en fil slik at disse er samlet. Ettersom vi bruker *.d.ts* suffixen, så blir disse mulig å aksessere i alle andre deler av prosjektet uten å måtte importeres.
Håndteringen av LocalStorage og SessionStorage blir håndtert av hver sin klasse som ligger i **utils**. Det er inkludert Tsdoc kommentarer for alle funksjoner og metoder i prosjektet slik at å lese koden skal være lettere. Disse klassene blir instansiert som konstanter øverst i *App.tsx*, og brukt flittig når endringer forekommer.
Håndteringen av LocalStorage og SessionStorage blir håndtert av hver sin klasse som ligger i *utils*. Det er inkludert Tsdoc kommentarer for alle funksjoner og metoder i prosjektet slik at å lese koden skal være lettere. Disse klassene blir instansiert som konstanter øverst i *App.tsx*, og brukt flittig når endringer forekommer.
*PoetryAPI.ts* inneholder funksjonen som henter dikt fra [poetryDB](https://poetrydb.org/index.html). De ulike endepunktene som brukes ligger i en array lokaliser i funksjonen. Nettsiden henter de samme diktene hver gang. Vi valgte spesifikt relativt korte dikt, da noen av diktene var unødvendig lange.
## Mulige brukerinteraksjoner
## Mulige brukerinteraksjoner
En av parameterne som er tilgjengelig er å la brukeren kunne forandre på nettsidens tema som bytter fargene på nettsiden til en lysere eller mørkere fargepalett. Ved bytting av tema vil de synlige komponentene dynamisk få light theme klasser og når du bytter til mørkt så blir klassene fjernet fra disse komponentene slik at de får dark-theme igjen. Det siste themet brukeren brukte blir lagret i localStorage, mens andre templater som brukeren har brukt på en session blir lagret i sessionStorage.
Brukeren kan interagere med:
* Dropdown for å bytte til tidligere bruke templates. Disse innkluderer farger på canvas, fonter og themes.
* Navigere mellom ulike dikt og animasjoner
* Bytte theme og font
* Legge til og fjerne animasjoner som favoritt
* Velge vektet` farge på animasjonen
`: vektet farge vil si at det er en større sansynlighet for å få en variant av fargen som bruker har valgt. Mer om dette under **misc**
## Styling og utforming
For å utforme en responsive nettside som ser bra ut på laptop, tablet og mobil så har vi brukt media queries. På laptop og skjermer større en 800px, synes vi det ser bra ut at teksten er på venstresiden av maleriet, men går den under 800px så passet det bedre at teksten gikk under maleriet.
Du vil også legge merke til at både i mobil og tablet størrelse, så vil de øverste knappene utvide seg til 100% av lengden og legge seg under hverandre som gjør at det estetisk ser mer organisert ut for mindre skjermer. Denne oppførselen oppnådde vi med flexbox. Knappene for å skifte farge på maleriet og knappen for å legge til i favoritt, har vi rett over maleriet på samme linje for å sørge for at de er lett tilgjengelig når brukeren ser på maleriet og finner en favoritt kombinasjon.
På skjermer under 550px synes vi det blir litt for lite bredde at her tenker vi det passer best å skalere maleriet for å passe mobil skjermer. Viewport er satt i index.html, og gjennom media queries så bruker vi viewport enheter for å sette bredde og lengde.
## Testing
Testene er lokalisert i <em>__ tests __ <em> mappen. Der ligger en snapshottest for *App.tsx* og en testcase som tester at funksjonen som henter dikt fra [poetryDB](https://poetrydb.org/index.html) henter fem dikt. I og med at arrayen med URLer inneholder fem forskjellige, så vil å teste at funksjonen returnerer en array med fem dikt vise at alle diktene ble hentet.
Testene er lokalisert i <em>__ tests __ </em> mappen. Det ligger en snapshottest for *App.tsx* og en testcase som tester at funksjonen som henter dikt fra [poetryDB](https://poetrydb.org/index.html) henter fem dikt. I og med at arrayen med URLer inneholder fem forskjellige, så vil å teste at funksjonen returnerer en array med fem dikt vise at alle diktene ble hentet.
Nettsiden er testet på flere enheter. Disse inkluderer laptoper, desktoper og mobile enheter. Det er ikke testet på Mac, ettersom ingen av oss besitter en. Nettsiden er derimot testet med Safari nettleseren på en iPhone 10. Ved alle tester fungerte nettsiden som forventet.
......@@ -36,4 +53,8 @@ Testene inkluderer alle interaksjonsmetoder brukeren kan bruke for å interagere
Mer om hvordan dette oppnås ligger under *Styling og utforming*
## Misc
\ No newline at end of file
## Misc
Ved de ulike fargevalgene for animasjonene har vi bevisst valgt å ikke bruke de samme fargene hver gang. Fargene er tilfeldige, men blir vektet mot den fargen som er valgt. Dette vil si at det ikke er sikkert at fargen som vises på animasjonen er den valgte fargen, men at det er allers størst sannsynlighet for an man får en shade av den fargen. Dette gjør at vi får en tilfeldig farge som er vektet mot fargen valgt av bruker. På animasjonene som inneholder flere individuelle elementer vil den "totale" fargen med all sannsynlighet være den valgte fargen, men animasjoner med kun ett element, eller med elementer som har samme farge, så er ikke dette alltid tilfellet. Det er allikevel et bevisst valg for å skape variasjon på animasjonene :)
Ballen på animasjon 4 vil gå raskere og raskere for hver gang den endrer farge. Dette er igjen for å skape variasjon :)
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment