Merge pull request #23 from averycrespi/develop

Merge develop into master

package.json

@@ -11,7 +11,7 @@
     "email": "[email protected]"
   },
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.29",
     "@fortawesome/free-brands-svg-icons": "^5.13.1",

src/components/HowToPlay/Controls.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+/** Render the controls. */
+const Controls = () => (
+  <div className="row flex-center">
+    <div
+      className="col no-padding"
+      style={{ textAlign: "center", wordWrap: "break-word" }}
+    >
+      <h2>Controls</h2>
+      <p>
+        <b>Place a piece:</b> Click a piece in your hand, then click one of the
+        highlighted spaces.
+      </p>
+      <p>
+        <b>Move a piece:</b> Click a piece on the board, then click one of the
+        highlighted spaces.
+      </p>
+      <p>
+        <b>Rotate a piece:</b> Click a tank in your hand, then click one of the
+        highlighted tanks on the board.
+      </p>
+    </div>
+  </div>
+);
+
+export default Controls;

src/components/HowToPlay/PieceDetails.tsx

@@ -134,7 +134,7 @@ const PieceDetails = () => (
               <h4 className="card-title">Base</h4>
               <h5 className="card-subtitle">Description</h5>
               <p className="card-text">
-                The game ends when a either player's base is destroyed.
+                The game ends when either player's base is destroyed.
               </p>
               <h5 className="card-subtitle">Movement</h5>
               <p className="card-text">

src/components/HowToPlay/index.tsx

@@ -1,6 +1,7 @@
 import BackToHome from "../BackToHome";
 import Basics from "./Basics";
 import Cheatsheet from "./Cheatsheet";
+import Controls from "./Controls";
 import PieceDetails from "./PieceDetails";
 import React from "react";
 import Rules from "./Rules";
@@ -13,6 +14,7 @@ const HowToPlay = () => (
         <h1>How to Play</h1>
       </div>
       <Basics />
+      <Controls />
       <Cheatsheet />
       <Rules />
       <PieceDetails />

src/components/JoinMatch/index.tsx

@@ -1,12 +1,13 @@
+import { Prompt, useParams } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import { loadCredentials, saveCredentials } from "../../api/storage";
 
 import BackToHome from "../BackToHome";
 import Multiplayer from "../Multiplayer";
 import { Player } from "../../logic";
 import ShareLink from "./ShareLink";
+import ShowHelp from "../ShowHelp";
 import { joinMatch } from "../../api/match";
-import { useParams } from "react-router-dom";
 
 interface JoinMatchProps {
   serverURL: string;
@@ -38,20 +39,32 @@ const JoinMatch = ({ serverURL }: JoinMatchProps) => {
   }, [serverURL, matchID, player]);
 
   return (
-    <div className="row flex-center">
-      <div className="col no-padding">
-        {credentials && (
-          <Multiplayer
-            serverURL={serverURL}
-            matchID={matchID}
-            player={player}
-            credentials={credentials}
-          />
-        )}
-        {error && <div className="alert alert-danger margin-top">{error}</div>}
-        {credentials && <ShareLink matchID={matchID} player={player} />}
-        {(credentials || error) && <BackToHome />}
+    <div>
+      <div className="row flex-center">
+        <div className="col no-padding">
+          {credentials && (
+            <Multiplayer
+              serverURL={serverURL}
+              matchID={matchID}
+              player={player}
+              credentials={credentials}
+            />
+          )}
+          {error && (
+            <div className="alert alert-danger margin-top">{error}</div>
+          )}
+          {credentials && <ShareLink matchID={matchID} player={player} />}
+          <div className="row flex-center">
+            <div className="col no-padding">
+              <ShowHelp />
+            </div>
+            <div className="col no-padding">
+              <BackToHome />
+            </div>
+          </div>
+        </div>
       </div>
+      <Prompt message="Are you sure you want to leave?" />
     </div>
   );
 };

src/components/Sandbox/index.tsx

@@ -1,7 +1,9 @@
 import BackToHome from "../BackToHome";
 import Board from "../Board";
 import { Client } from "boardgame.io/react";
+import { Prompt } from "react-router-dom";
 import React from "react";
+import ShowHelp from "../ShowHelp";
 import { game } from "../../logic/game";
 
 const SandboxClient = Client({ game, board: Board, debug: false });
@@ -12,13 +14,17 @@ const Sandbox = () => (
     <div className="row flex-center">
       <div className="col no-padding">
         <SandboxClient />
+        <div className="row flex-center">
+          <div className="col no-padding">
+            <ShowHelp />
+          </div>
+          <div className="col no-padding">
+            <BackToHome />
+          </div>
+        </div>
       </div>
     </div>
-    <div className="row flex-center">
-      <div className="col no-padding">
-        <BackToHome />
-      </div>
-    </div>
+    <Prompt message="Are you sure you want to leave?" />
   </div>
 );
 

src/components/ShowHelp/index.tsx

@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+import React from "react";
+
+/** Opens the How to Play page in a new tab. */
+const ShowHelp = () => (
+  <div className="row flex-center">
+    <div className="col no-padding">
+      <Link
+        to="/help"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="no-underline"
+      >
+        <button>How to play</button>
+      </Link>
+    </div>
+  </div>
+);
+
+export default ShowHelp;

src/logic/danger.ts

@@ -165,10 +165,7 @@ export const canExplodeEnemy = (cells: Array<Cell>, index: number): boolean => {
 };
 
 /** Check if a piece can explode a friendly piece. */
-export const canExplodeFriendly = (
-  cells: Array<Cell>,
-  index: number
-): boolean => {
+const canExplodeFriendly = (cells: Array<Cell>, index: number): boolean => {
   const mine = cells[index];
   if (!mine || !canExplodeEnemy(cells, index)) {
     return false; // Cell is empty or piece cannot explode.