# Sprint 2

## Tavoitteet sprint 2
Tavoitteeksi laivojen raahamisen koodaminen jollain tasolla (niin että onnistuu -tietoa backendiin ei vielä tarvita).
-> tähän voi esittää toisenkin ratkaisun

-> tulevaisuuden ongelma: miten saada taulu ottamaan laivojen asemat? - joku ehdotti dynaamista map toimintoa, jolla saa id:t. En ole varma miten tämä tehdään ja moni muu asia on myös nimetty dynamic mapping, joten tiedon etsintä hankalaa.

## Valmiiksi saadut asiat
1) laiva komponentti - komponentit ovat vielä eri kokoisia verrattaessa pöydän soluihin.
2) laiva komponentin draggable ominaisuus
3) pöydän soluilla on yksilöivät IDt - ei vielä pushattu gittiin - haluan Leevin mielipiteen

### Draggable react komponentit
-> opettaja ehdotti näiden tekemistä
-> leevi valmisteli komponentin ships.js
-> laivan renderöintiin piti vain lisätä draggable asennuksen jälkeen

## Ongelmat
Ajatuksia ennen työn tekoa:
-> miten saada yhdistettyä draggable komponentti pelilautaan?
--> mahdollinen vastaus? -> onclick kerran, että alkaa raahaamaan laivaa ja onclick taas kun haluaa yhdistää laivan ja pelilaudan?

Muut:
-> Olen huolestunut projektin edistymisestä. Joku sanoi suunnittelevansa arkkitehtuuria, mutta ei ole jakanut ryhmän kanssa
--> yleinen projektin edistyminen on ollut vain frontin osalta. Backend (Mikael ja Teemu) ei ole tehnyt koodia vielä ja Leevi front end on tehnyt vain 1 laivat komponentin.

-> Leevi kieltäytyy tekemään git pushia valmiille komponentille vaikka pyysin laittamaan tehdyt koodit eteenpäin. En voi jatkaa omaa osaani, jos toinen ei laita koodia Azureen.
--> teenkö itse uudet laivat ja teen niille draggable ominaisuuden?
--> kysyn git pushia maanantaina uudestaan.
---> teki branchin josta latasin koodin
---> branch sotki azuren gitin ja en saa versioita selvitettyä.

### error draggable paketin kanssa
TypeError: Cannot read property 'className' of undefined
at Draggable.render

TypeError: children.props is undefined

-> JSX kommentti aiheutti errorin - kommentin poisto selvitti asian

## Muistiinpanot paketista https://www.npmjs.com/package/react-draggable

https://www.freakyjolly.com/draggable-react-components-using-react-draggable-example-application/#.X7EaTlDkuUk
Draggable React Components using react-draggable Example Application
-> opettaa drag and drop functionality on components in ReactJs application and create a simple working example with the help or **react-draggable package module**
--> event handlers available to track the movement

## paketin asennus
npm install react-draggable

## draggable komponentit

### Käyttöön otto
1) import Draggable:
import Draggable from 'react-draggable';
2) wrap the elements with Draggable to make them draggable on the page
-> Draggable elementti /Draggable

-> komponenttien css koodi pitää käyttää tässä projektissa css.module avulla, koska next vaatii sitä

### Event callbacks on draggable
-> event handlers can be added on the draggable component and defined inside the render() method
--> (näiden avulla onStop event handleriin liitto pelipöytään?)

### Axis
-> force dragging in a specific direction

### Define a handle to drag
-> instead of dragging the element by picking from anywhere we can set a selector in the draggable component which can be picker to drag

### Track position of draggable
-> mahdollista seurata x ja y arvojen avulla missä komponentti on menossa
--> aseta x ja y arvot pelilaudan sisään?

- bounds property can be used to define and limit the draggable area for the element
--> toimisi laudan kanssa?

Define bounds
-> bounds arvo in px from the current position

Parent as bound
-> the element can be dragged inside the parent by defining bounds="parent"
--> mahdollistaa vain laittamisen parent elementin sisään?

page as bound
-> bounds = "body"

## Muistiinpanot 2 - positronx
https://www.positronx.io/create-react-draggable-component-with-react-draggable-package/
-> ei sisältänyt juuri mitään uutta aiempaan muuta kuin selitykset eventeille.

### events:
1) onStart: This is called when dragging event invokes.
2) onDrag: Invoked when the drag event is in process.
3) onStop: This event evokes when dragging ends.
4) onMouseUp: This is event is evoked when the mouse is moved before stoping the drag.
5) onMouseDown: Called when the mouse is clicked to begin drag.
6) onTouchEnd: This is called in touch state before the drag ends.
7) onTouchStart: Invoked in touch condition before drag begins.

## Ajankäyttö
+ 15 min solujen idille