Add some doc strings

src/Game.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { GraphQLClient } from 'graphql-request';
 
 import { GameBoard } from './GameBoard';
-import { fetchBoard, updateBoardField } from './board';
+import { fetchBoard, updateBoard } from './board';
 import { loadKeyPair, loadLastMove, storeLastMove } from './storage';
 import { publicKeyToAnimal } from './animals';
 
@@ -45,7 +45,7 @@ export const Game: React.FC<Props> = ({ config }) => {
   // updates from the node
   const [ready, setReady] = useState(true);
 
-  const updateBoard = useCallback(async () => {
+  const update = useCallback(async () => {
     const board = await fetchBoard(
       client,
       config.schemaId,
@@ -100,7 +100,7 @@ export const Game: React.FC<Props> = ({ config }) => {
       // The method gives us back the "latest" view id, that is, we assume that
       // our last write is now the latest edge of the operation graph. But who
       // knows, maybe some concurrent write by someone decided something else!
-      const latestViewId = await updateBoardField(
+      const latestViewId = await updateBoard(
         client,
         keyPair,
         config.schemaId,
@@ -118,15 +118,15 @@ export const Game: React.FC<Props> = ({ config }) => {
 
   useEffect(() => {
     const interval = window.setInterval(() => {
-      updateBoard();
+      update();
     }, config.updateIntervalMs);
 
-    updateBoard();
+    update();
 
     return () => {
       window.clearInterval(interval);
     };
-  }, [client, updateBoard, config.updateIntervalMs]);
+  }, [client, update, config.updateIntervalMs]);
 
   return (
     <>

src/GameBoard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
+// All dimensions in pixels
 const FIELD_SIZE = 60;
 const GAP_SIZE = 17;
 const ICON_SIZE = 28;

src/board.ts

@@ -8,7 +8,10 @@ import {
 
 import { nextArgs, publish } from './request';
 
-export async function updateBoardField(
+/**
+ * We're making a move. Send that update to the board.
+ */
+export async function updateBoard(
   client: GraphQLClient,
   keyPair: KeyPair,
   schemaId: string,
@@ -41,6 +44,9 @@ export async function updateBoardField(
   return generateHash(entry);
 }
 
+/**
+ * Get the latest board game state from the node.
+ */
 export async function fetchBoard(
   client: GraphQLClient,
   schemaId: string,

src/types.d.ts

@@ -1,7 +1,19 @@
+/**
+ * Zoo Adventures game configuration.
+ */
 export type Configuration = {
+  /** Dimensions of the board, set to 4 when it is a 4x4 board */
   boardSize: number;
+
+  /** All players play on the same board, this is the document id of it */
   documentId: string;
+
+  /** URL of the p2panda node */
   endpoint: string;
+
+  /** ID of the game board schema, make sure the board size matches the fields */
   schemaId: string;
+
+  /** Interval to fetch latest board game state from node in milliseconds */
   updateIntervalMs: number;
 };