HTML GUI

[bimlas]

Különálló projekt, vagy ezen belül legyen?

Mivel csak az API-t használja, ezért nem érzek akkora kapcsolatot a két dolog közt. Másfelől egyszerűbb, ha egy helyen van minden.

[WagZol]

Egy belső ösztön azt súgja hogy legyen külön álló, mivel bármikor bármilyen nyleven lehetne rá GUI-t írni. Max nyiss neki egy saját repót, dobd ide annak a linkjét és ezt az issue-t akkor lezárhatjuk

[bimlas]

https://github.com/bimlas/fun-u3e-battleship-web-gui

Nyisd meg az index.html-t, töltsd le (Raw gomb a lap tetején), mentsd le (Jobb gomb -> Mentés másként), nyisd meg.

Egyelőre csak kirajzolja a két táblát és egy cellát beszínez, mutatván, hogy így valahogy lehet használni az API-val (lásd a forráskódja Javascript részét).

[WagZol]

Észrevételek: -Kicsit fura hogy csak 3 oldal sárga. mármint folyamat azt néztem -Lehet az oldalak miatt olyan mintha nem lenne egyforma oldalúak a négyzetek -középen egy Hud félét képzelnék el ahol alul kiírja a játékosnak szóló üzenteket, felül pedig a hajókat amik még élnek(ebben még bizonytalan vagyok)

Ami a sajátomban nem tetszik viszont hogy a mezőknek szerintem gomboknak kellene lenniük. A konkrét kódot nem nyálaztam mégát ha szeretnéd belenézek szívesen

[WagZol]

Illetve mé egy apróbb észrevétel, nem tudom hogyan lehet HTML-nél megoldani de nyilvén ez nem is a végleges kód, hogyha minimalizálod is az ablakot akkor se lehessen kisebb mint a tábla szélei

Ne vedd kérlek kötöszködésnek ez mind észrevétel, Ha van rájuk 1-1 jó indokod hogy miért úgy képzelted el ahogy vagy miért hülyesg amit én mondok akkor természetesen meggyőzhető vagyok

[bimlas]

:D Nem veszem kötözködésnek az építő kritikát.

Kicsit fura hogy csak 3 oldal sárga [...] Lehet az oldalak miatt olyan mintha nem lenne egyforma oldalúak a négyzetek

Nekem is, de valamiért a cellák közti vertikális távolság nagyobb, mint kéne. Javítani fogom a problémát, mert magamnak is odaírtam kommentben, hogy ez még nem kóser.

középen egy Hud félét képzelnék el ahol alul kiírja a játékosnak szóló üzenteket, felül pedig a hajókat amik még élnek(ebben még bizonytalan vagyok)

Egyetértek, plusz kell egy input is, ahova a szerver címét és esetleg a neved is beírhatod. A fentmaradt hajóknak lenne értelme, mert ugyan a saját hajóidat ránézésre meglátod, hogy mennyi él még, de az ellenfél hajóit legalább jó volna listázni.

ha minimalizálod is az ablakot akkor se lehessen kisebb mint a tábla szélei

Erre gondoltam én is, hogy akár telefonról is lehessen használni.

Este megpróbálok foglalkozni vele.

[WagZol]

Aztán ha végzel, és mindketten elégedettek vagyunk akkor elkezdhetjük átbeszélni hogy pontosan milyen formában örténjen az üzengetés a REST API és a kliens között(milyen üzentek menjenek át milyen választ vár a kliens hozzá)

[bimlas]

Újabb verzió, de még mindig nem reagál az átméretezésre.

[WagZol]

Nah ez már egészen tetszik!:D Van egy kellemes retró hangulata. Nem pont ilyennek képzeltem el annó, de tetszik!

Egy apróbb észrevétel, ami kicsit dobhat a hangulaton: -Mi lenne ha a 2 Hud-ból 1 lenne, de mondjuk nem a 2 tánla közé kerülne hanem a 2 tábla alá, középre igazítva -Mi lenne ha a meglévő hajók sziluettje egy darabszámmal ábrázolná hogy az adott hajóból mennyi van, és ez a 2 szélén helyezkedne el. Pl a hajók meg a darabszám mehetne sárgával...?

[bimlas]

-Mi lenne ha a 2 Hud-ból 1 lenne, de mondjuk nem a 2 tánla közé kerülne hanem a 2 tábla alá, középre igazítva

Próbálom úgy csinálni, hogy rugalmas maradjon, hogy használható lehessen olyan játékokhoz is, amelyeknek csak egyetlen board kell (teszem azt Tetris), és olyanhoz is, ahol több kell (pl. 4 player Battleship). Ezért néznek ki egységesen a board-ok: egy board-hoz (opcionálisan) tartozik egy HUD, így pl. a saját board-od alatti HUD-ban jelezhetjük, hogy mely hajóid maradtak meg neked és az enemy-nél is ugyan így működne.

-Mi lenne ha a meglévő hajók sziluettje egy darabszámmal ábrázolná hogy az adott hajóból mennyi van, és ez a 2 szélén helyezkedne el. Pl a hajók meg a darabszám mehetne sárgával...?

Ez mehetne a HUD-on belülre, mivel oda túl sok üzenet amúgy se kerülne. De tény, hogy dizájnosabb lenne a két oldalt, ezért még agyalok rajta.

elkezdhetjük átbeszélni hogy pontosan milyen formában örténjen az üzengetés a REST API és a kliens között(milyen üzentek menjenek át milyen választ vár a kliens hozzá)

Tegnap este elkezdtem kitalálni úgy, hogy Gugliztam egy minimális Javascript (Node) server-t, ahova lehet POST adatokat küldeni és ezt alapul véve kiderítem, hogy mire van szüksége a GUI-nak, hogy meg tudja jeleníteni a játékot. Egyelőre ott tart a dolog, hogy a játék elején a szervertől lekérdezi, hogy mekkora táblákat kell létrehozni.

Azért Javascript szerverrel kísérletezek, mert ilyet már láttam, tehát az idő nem megy el azzal, hogy Java-ban hogy valósítsam meg. Vagy szerinted Java-ban kellene elejétől fogva tesztelni is?

[WagZol]

A server lényegében mindegy hogy milyen, lényeg hogy REST API legyen, mivel, REST API-nál a lényeg hogy a megfelelő URL oldalt a megfelelő paraméterrel és a megfellő Request-el lásd el.

Pl.:www.u3e_torpedo/Board és ezt GET-essel meghívva visszaadja a komplttBoard-ot. (emiatt nem is értem pontosan miért kell a tábla mérete hiszen kikérheted a még üres táblát is szerintem, meg tudjuk oldani, úgy gondolom., és ebből ki tudod olvasni a tábla méretét is)

Pl.:www.u3e_torpedo/Board/settleShip és ezt POST-osan meghívva JSON-ben átadod a hajó koordinátát nekem, én erre válaszul mondjuk visszaadom a táblát

Persze nekem is fel kell frissítenem a REST API tudást de szerintem nem lesz gond csak beszéljük meg hogy mit milyen ütemben, akarsz kérni, és milyen formában

Illetve itt van az ARC amit említettem: https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo

[bimlas]

Szerintem ma-holnap megleszek a demo-val, akkor már látni fogom, hogy milyen adat kell, ezért Csütörtökön beszélhetnénk.

nem is értem pontosan miért kell a tábla mérete hiszen kikérheted a még üres táblát is szerintem

Jogos, ez mondjuk nem jutott eszembe. Bár ott akkor board.cells.length és boards.cells[0].length jellegű csúnyaságok kellenének, hogy megtudjam a tábla X és Y méreteit, de végső soron így is megoldható.

Előre láthatólag valami ilyet képzelek el egyelőre:

{ width: 10,
  height: 10,
  boards: [
    { name: 'Player1',
      cells: [ [első sor cellái], [második sor cellái], ... ]
    },
    { name: 'Player2',
      cells: [ [első sor cellái], [második sor cellái], ... ]
    }
  ]
}

A width és height a tábla méretei, csak hogy ne kelljen response.boards[0].cells.length módon lekérdezni. Mondjuk ez így meg "információ duplikáció"... Az egyik olvashatóbb (ha átküldöd a szélességet és magasságot külön-külön), a másiknak több köze van a valós adatokhoz (ha lekérdezem saját magam a méreteket). Nem vagyok biztos benne, hogy melyik a jobb.

A cellákat {x: 12, y: 34, type: 'Cirkáló'} jelleggel képzelem el, azaz meg vannak adva a koordinátái és a típusa, ami alapján a GUI egy színt rendel az adott kockához.

A width, height és boards tulajdonságokon kívül újabbakat is fel tudunk venni a későbbiekben, ha szükség lenne rá (pl. chat üzeneteket).

[bimlas]

Agyaltam és hogy minél kevesebb legyen az adat, amit átküldünk JSON-ben, talán ez a szerkezet jobb lenne:

[
  { width: 10,
    height: 10,
    name: 'Player1',
    cells: [ type of cell X0Y0, type of cell X1Y0, ... ]
  },
  { width: 10,
    height: 10,
    name: 'Player2',
    cells: [ type of cell X0Y0, type of cell X1Y0, ... ]
  },
]

Tehát minden táblánál átadná az aktuális tábla méreteit, a cellákat pedig csak egy tömbként adná át, ahogy te is korábban elképzelted, hogy miként tárolnád őket. A cellából igazából egyetlen információ kell csak, hogy milyen a típusa (hajó, lövés, stb.).

Azért kérném külön-külön a tábla méreteit, hogy a GUI rugalmas maradjon: teszem azt a hajólerakás ideéig a jobb oldali tábla lehetne egy 5x5-ös "kijelző", ahol csak az aktuálisan lerakandó hajó formája jelenne meg, vagy ott lehetne válogatni, hogy most épp melyik hajót akarjuk lerakni.

[WagZol]

Majdnem jó de azért sem látnám indokoltnak a méretet átküldeni, mert a táblát akkor s át fogjuk küldeni aa playerekkel ha épp csak ki akarjuk rajzoltatni pirossal a nem kiférő hajót. A méretre pedig csak az elején lenne szükség, utána a kirajzolt tábla mérete nem változthat. 

A táblák nem fix szerepe oké, de a logikát a GUI-tól el szeretném választani, tehát ne a logika mondja meg hogy hova és mit rajzoljon ki a GUI. Maximum kkári a hajóka egyesével a GUI de ezen kívl hogy egy 5*5ös táblába pakolja is le őket amik egyfajta HUD-ként szolgálnak...Én inkább csak adotot adnék át.

Azt viszont mindenképp szeretném átbeszélni hogy hogyan oldjuk meg a sorrendiséget. Ki és hogyan vezérli a logikát, honnan tudja a logika hogy ki jön.

[WagZol]

Tervezel a GUI-hoz teszteket írni? Tudom hogy nem Node de a HTML-hez is sikerült nekem múltkor Mocha tesztet csinálnom, ha szeretnéd elküldöm, hogy azt vedd alapul(egyfelül mert tudom szereted a TDD-t másfelől csak biztonságosabb úgy kódolni ha tesztek fedeznek)

[bimlas]

Valamilyen tesztelés kellene és megpróbálok is írni rá, csak még nem tudom pontosan, hogy is fog megvalósulni: kell hozzá egy "teszt szerver" + ... hát... nem tudom pontosan, mert ilyet még nem csináltam. :D (mármint közvetlen a HTML tesztelését) Lehet, hogy tényleg hasznos lesz, ha átküldöd a jegyzeteid. :)