fix game output

Display what the API gives us as the board + pieces.

Co-authored-by: David Frymoyer <david.frymoyer@gmail.com>
Reviewed-on: #4
Co-authored-by: fry <david.frymoyer@gmail.com>
Co-committed-by: fry <david.frymoyer@gmail.com>

api.go

@@ -49,7 +49,7 @@ func (a *API) NewGame(res http.ResponseWriter, req *http.Request) {
 		}
 	}
 	log.Printf("creating new game %v", a.nextInt)
-	a.games[a.nextInt] = NewSession()
+	a.games[a.nextInt] = NewSession(8)
 	a.games[a.nextInt].redPlayer.Ready = true
 	respondWithJSON(res, http.StatusOK, newGameResp{a.nextInt, "red"})
 	a.nextInt = a.nextInt + 1
@@ -81,7 +81,16 @@ func (a *API) GetGame(res http.ResponseWriter, req *http.Request) {
 	}
 
 	log.Println("sending game state")
-	respondWithJSON(res, http.StatusOK, gameResp{s.getBoard(p)})
+	board := s.getBoard(p)
+	rotate := req.Header.Get("Rotate")
+	if rotate == "true" {
+		log.Println("rotating output")
+		//rotateBoard(board)
+		//rotateBoard(board)
+		//rotateBoard(board)
+
+	}
+	respondWithJSON(res, http.StatusOK, gameResp{board})
 	return
 }
 

api_test.go

@@ -0,0 +1,122 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/http/httptest"
+	"strconv"
+	"testing"
+
+	"github.com/gorilla/mux"
+)
+
+func TestNewAPI(t *testing.T) {
+	a := NewAPI()
+	if len(a.games) != 0 {
+		t.Fatalf("games list not empty")
+	}
+	if a.nextInt != 1 {
+		t.Fatalf("nextInt somehow already implemented")
+	}
+}
+
+func dummyGame(a *API) int {
+	i := a.nextInt
+	a.games[i] = NewSession(8)
+	a.games[i].redPlayer.Ready = true
+	a.games[i].bluePlayer.Ready = true
+	a.games[i].simulator.Setup()
+	initDummy(a.games[i].simulator)
+	return i
+}
+
+func TestNewGame(t *testing.T) {
+	t.Parallel()
+	a := NewAPI()
+	var tests = []struct {
+		gid int
+		pid string
+	}{
+		{1, "red"},
+		{1, "blue"},
+		{2, "red"},
+	}
+	for i, tt := range tests {
+		tname := fmt.Sprintf("/game %v", i)
+		t.Run(tname, func(t *testing.T) {
+			r, _ := http.NewRequest("POST", "/game", nil)
+			w := httptest.NewRecorder()
+			a.NewGame(w, r)
+			resp := w.Result()
+			if resp.StatusCode != http.StatusOK {
+				t.Fatal("failed to create new game")
+			}
+			_, ok := a.games[tt.gid]
+			if !ok {
+				t.Fatalf("API thinks it created a game but it didn't")
+			}
+			var respStruct newGameResp
+			err := json.NewDecoder(resp.Body).Decode(&respStruct)
+			if err != nil {
+				t.Errorf("/game returned bad response body: %v", err)
+			}
+			if respStruct.GameID != tt.gid {
+				t.Errorf("Expected game %v, got %v", tt.gid, respStruct.GameID)
+			}
+			if respStruct.PlayerID != tt.pid {
+				t.Errorf("wrong playerID returned")
+			}
+		})
+	}
+}
+
+func TestGetGame(t *testing.T) {
+	t.Parallel()
+	a := NewAPI()
+	gid := dummyGame(a)
+	var tests = []struct {
+		pid  string
+		code int
+	}{
+		{"red", http.StatusOK},
+		{"blue", http.StatusOK},
+		{"green", http.StatusBadRequest},
+	}
+	for _, tt := range tests {
+		tname := fmt.Sprintf("/game from player %v", tt.pid)
+		t.Run(tname, func(t *testing.T) {
+			r, _ := http.NewRequest("GET", "/game", nil)
+			w := httptest.NewRecorder()
+			r = mux.SetURLVars(r, map[string]string{"id": strconv.Itoa(gid)})
+			r.Header.Add("Player-id", tt.pid)
+			r.Header.Add("Rotate", "false")
+			a.GetGame(w, r)
+			resp := w.Result()
+			if resp.StatusCode != tt.code {
+				t.Fatalf("failed to get game: %v", resp.Status)
+			}
+			if resp.StatusCode == http.StatusOK {
+				var respStruct gameResp
+				err := json.NewDecoder(resp.Body).Decode(&respStruct)
+				if err != nil {
+					t.Fatalf("/game returned bad response body: %v", err)
+				}
+				if len(respStruct.GameBoard) == 0 {
+					t.Errorf("bad game board returned")
+				}
+				for j := range respStruct.GameBoard {
+					for i, vt := range respStruct.GameBoard[j] {
+						curr, err := a.games[gid].simulator.Board.GetPiece(i, j)
+						if err != nil {
+							t.Fatalf("Strange board position: %v", err)
+						}
+						if curr != nil && !vt.Hidden && curr.Owner.String() != tt.pid && curr.Hidden {
+							t.Errorf("/game returned a piece that should be hidden but isn't")
+						}
+					}
+				}
+			}
+		})
+	}
+}

api_types.go

@@ -10,7 +10,7 @@ type newGameResp struct {
 }
 
 type gameResp struct {
-	GameBoard [8][8]*ViewTile `json:"board"`
+	GameBoard [][]*ViewTile `json:"board"`
 }
 
 type gameStatusResp struct {

session.go

@@ -15,6 +15,7 @@ type Session struct {
 	bluePlayer *Player
 	moveNum    int
 	moveList   []freego.ParsedCommand
+	boardSize  int
 }
 
 //Player is a player in a match
@@ -34,7 +35,7 @@ func (p *Player) Colour() freego.Colour {
 }
 
 //NewSession creates a new game session
-func NewSession() *Session {
+func NewSession(size int) *Session {
 	sim := freego.NewGame()
 	return &Session{
 		simulator:  sim,
@@ -42,6 +43,7 @@ func NewSession() *Session {
 		bluePlayer: &Player{false, freego.Blue},
 		moveNum:    1,
 		moveList:   make([]freego.ParsedCommand, 20),
+		boardSize:  size,
 	}
 }
 
@@ -78,10 +80,13 @@ func (s *Session) getMove(p *Player, num int) (string, error) {
 	return fmt.Sprintf("%v %v", num, s.moveList[num].String()), nil
 }
 
-func (s *Session) getBoard(p *Player) [8][8]*ViewTile {
-	var res [8][8]*ViewTile
-	for i := 0; i < 8; i++ {
-		for j := 0; j < 8; j++ {
+func (s *Session) getBoard(p *Player) [][]*ViewTile {
+	res := make([][]*ViewTile, s.boardSize)
+	for i := range res {
+		res[i] = make([]*ViewTile, s.boardSize)
+	}
+	for i := 0; i < s.boardSize; i++ {
+		for j := 0; j < s.boardSize; j++ {
 			cur := NewViewTile()
 			terrain, err := s.simulator.Board.IsTerrain(i, j)
 			if err != nil {
@@ -109,7 +114,7 @@ func (s *Session) getBoard(p *Player) [8][8]*ViewTile {
 					cur.Empty = true
 				}
 			}
-			res[i][j] = cur
+			res[j][i] = cur
 		}
 	}
 	return res

ui/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true
+}

ui/Dockerfile

@@ -8,9 +8,11 @@ FROM base as dependencies
 COPY pages /pages
 COPY public /public
 COPY styles /styles
+COPY api /api
 COPY components /components
 COPY next* /
 COPY tsconfig.json /
+COPY types.ts /
 
 EXPOSE 3000
 RUN npm run build

ui/api/game.api.ts

@@ -0,0 +1,20 @@
+import wretch from "wretch";
+import { Cell } from "../types";
+
+const USER_ID_HEADER = "Player-id";
+
+export const fetchGameState = async (
+  playerId: string,
+  gameId: number
+): Promise<{ cells: Cell[]; cellWidth: number }> => {
+  const response: { board: Cell[][] } = await wretch(`/api/game/${gameId}`)
+    .headers({
+      [USER_ID_HEADER]: playerId,
+    })
+    .get()
+    .json();
+  return {
+    cells: response.board.flat(),
+    cellWidth: response.board[0].length,
+  };
+};

ui/components/board.tsx

@@ -1,7 +1,25 @@
-import React from 'react'
+import React from "react";
+import { Cell } from "../types";
+import styles from "../styles/board.module.css";
 
-const Board = () => (
-  <input/>
-)
+interface BoardProps {
+  cells: Cell[];
+  cellWidth: number;
+}
 
-export default Board;
+const Board = (props: BoardProps) => {
+  return (
+    <div
+      className={styles.gridContainer}
+      style={{
+        gridTemplateColumns: `repeat(${props.cellWidth}, 1fr)`,
+      }}
+    >
+      {props.cells.map((cell) => (
+        <div className={styles.gridCell}>{cell.piece}</div>
+      ))}
+    </div>
+  );
+};
+
+export default Board;

ui/components/game.tsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import { fetchGameState } from "../api/game.api";
+import { Cell } from "../types";
+import Board from "./board";
+
+interface GameProps {
+  gameId: number;
+}
+
+const Game = (props: GameProps) => {
+  const [isLoading, setLoading] = useState(false);
+  const [cellWidth, setCellWidth] = useState(4);
+  const [cells, setCells] = useState([] as Cell[]);
+  useEffect(() => {
+    setLoading(true);
+    fetchGameState("red", props.gameId).then(
+      ({ cells: cellList, cellWidth: width }) => {
+        setCellWidth(width);
+        setCells(cellList);
+        setLoading(false);
+      }
+    );
+  }, [props.gameId]);
+
+  return <Board cellWidth={cellWidth} cells={cells} />;
+};
+
+export default Game;

ui/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "12.1.0",
         "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "react-dom": "17.0.2",
+        "wretch": "^1.7.9"
       },
       "devDependencies": {
         "@types/node": "17.0.21",
@@ -2527,6 +2528,11 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/wretch": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/wretch/-/wretch-1.7.9.tgz",
+      "integrity": "sha512-uUSze1Z72RiQjyoqr7r1KW+05WDNeqqKOeyJDPhw6EVEaOgp9RQNrr8AQt3OF7qylQbh2iVtT9r0nXIHlbJgqQ=="
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "dev": true,
@@ -4060,6 +4066,11 @@
       "version": "1.0.2",
       "dev": true
     },
+    "wretch": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/wretch/-/wretch-1.7.9.tgz",
+      "integrity": "sha512-uUSze1Z72RiQjyoqr7r1KW+05WDNeqqKOeyJDPhw6EVEaOgp9RQNrr8AQt3OF7qylQbh2iVtT9r0nXIHlbJgqQ=="
+    },
     "yallist": {
       "version": "4.0.0",
       "dev": true

ui/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "12.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "wretch": "^1.7.9"
   },
   "devDependencies": {
     "@types/node": "17.0.21",

ui/pages/index.tsx

@@ -1,19 +1,19 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import Board from '../components/board'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import Game from "../components/game";
+import styles from "../styles/BoardPage.module.css";
 
 const Home: NextPage = () => (
-  <>
+  <div className={styles.main}>
     <Head>
       <title>Free Go Game</title>
       <link rel="icon" href="/favicon.ico" />
     </Head>
     <main>
-      <Board />
+      <Game gameId={1} />
     </main>
-  </>
-)
+  </div>
+);
 
-export default Home
+export default Home;

ui/styles/BoardPage.module.css

@@ -0,0 +1,4 @@
+.main {
+  max-width: 900px;
+  margin: auto;
+}

ui/styles/board.module.css

@@ -0,0 +1,8 @@
+.gridContainer {
+  display: grid;
+}
+
+.gridCell {
+  border: 1px solid black;
+  padding-top: 100%; /* 100% is supposed to be 1:1 aspect ratio but it doesn't look like it */ 
+}

ui/types.ts

@@ -0,0 +1,6 @@
+export interface Cell {
+  piece?: string;
+  terrain: boolean;
+  hidden: boolean;
+  empty: boolean;
+}

util.go

@@ -21,6 +21,16 @@ func respondWithJSON(res http.ResponseWriter, code int, payload interface{}) {
 	res.Write(response)
 }
 
+func rotateBoard(board [][]*ViewTile) {
+	i := 0
+	temp := board[0]
+	for ; i < len(board)-1; i++ {
+		board[i] = board[i+1]
+	}
+
+	board[i] = temp
+}
+
 //TODO remove this when you can actually setup a game
 func initDummy(g *freego.Game) {
 	//Setup terrain

view_tile.go

@@ -12,3 +12,16 @@ type ViewTile struct {
 func NewViewTile() *ViewTile {
 	return &ViewTile{}
 }
+
+func (vt *ViewTile) String() string {
+	if vt.Piece != "" {
+		return vt.Piece
+	}
+	if vt.Hidden {
+		return "?"
+	}
+	if vt.Terrain {
+		return "X"
+	}
+	return " "
+}