Add a completion mode to grid master board

Author: adamgraham

src/components/GridMasterBoard.tsx

@@ -6,6 +6,9 @@ import WikiLink from './WikiLink';
 import { useGridMasterContext } from '../context/GridMasterContext';
 import type { GridMasterTile } from '../types/grid-master';
 
+const cols = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
+const rows = ['1', '2', '3', '4', '5', '6', '7'];
+
 export default function GridMasterBoard() {
   const { tiles } = useGridMasterContext();
   return (
@@ -26,15 +29,19 @@ export default function GridMasterBoard() {
 }
 
 function GridMasterTaskTile({ tile }: { tile: GridMasterTile }) {
-  const { flipped, hideUnconfirmed } = useGridMasterContext();
+  const { checked, checkable, flipped, hideUnconfirmed, toggleChecked } =
+    useGridMasterContext();
   const cell = `${tile.col}${tile.row}`;
   const unknown =
     (flipped ? !Boolean(tile.reward) : !Boolean(tile.task)) ||
     Boolean(tile.unconfirmed && hideUnconfirmed);
   return (
     <TooltipWrapper
       id={cell}
-      className="grid-master__cell"
+      className={classNames('grid-master__cell', {
+        unchecked: checkable && !Boolean(checked[cell]),
+        checked: checkable && Boolean(checked[cell]),
+      })}
       tooltip={
         flipped && !unknown && tile.rewardDescription ? (
           <div style={{ maxWidth: '360px' }}>
@@ -70,6 +77,17 @@ function GridMasterTaskTile({ tile }: { tile: GridMasterTile }) {
           [`grid-master__tile--${tile.type}`]: tile.type,
           'grid-master__tile--unknown': unknown,
         })}
+        draggable={false}
+        onClick={
+          checkable
+            ? e => {
+                if (!e.ctrlKey) {
+                  e.preventDefault();
+                  toggleChecked(cell);
+                }
+              }
+            : undefined
+        }
         wikiId={
           (!unknown && (flipped ? tile.rewardLink : tile.taskLink)) ||
           'Grid_Master'
@@ -87,14 +105,21 @@ function GridMasterTaskTile({ tile }: { tile: GridMasterTile }) {
 }
 
 function GridMasterRewardTile({ tile }: { tile: GridMasterTile }) {
-  const { hideUnconfirmed } = useGridMasterContext();
+  const { checked, checkable, hideUnconfirmed } = useGridMasterContext();
   const cell = `${tile.col}${tile.row}`;
   const unknown =
     !Boolean(tile.reward) || Boolean(tile.unconfirmed && hideUnconfirmed);
+  const completed =
+    tile.col === 'R'
+      ? cols.every(col => Boolean(checked[`${col}${tile.row}`]))
+      : rows.every(row => Boolean(checked[`${tile.col}${row}`]));
   return (
     <TooltipWrapper
       id={cell}
-      className="grid-master__cell"
+      className={classNames('grid-master__cell', {
+        unchecked: checkable && !completed,
+        checked: checkable && completed,
+      })}
       tooltip={
         !unknown && tile.rewardDescription ? (
           <div style={{ maxWidth: '360px' }}>

src/components/GridMasterHeader.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack, Text, TooltipWrapper } from '@zigurous/forge-react';
+import { Button, Stack, Text, Toggle, TooltipWrapper } from '@zigurous/forge-react'; // prettier-ignore
 import React from 'react';
 import { useGridMasterContext } from '../context/GridMasterContext';
 
@@ -13,7 +13,14 @@ export default function GridMasterHeader() {
       <Text className="ml-2xxl" type="title">
         {context.flipped ? 'Rewards' : 'Tasks'}
       </Text>
-      <Stack align="center">
+      <Stack align="center" spacing="md">
+        <Toggle
+          label="Completion Mode"
+          labelAlignment="leading"
+          size="sm"
+          toggled={context.checkable}
+          onToggle={toggled => context.setCheckable(toggled)}
+        />
         {/* <TooltipWrapper
           tooltip={
             context.hideUnconfirmed ? 'Show Unconfirmed' : 'Hide Unconfirmed'

src/components/GridMasterTileImage.tsx

@@ -42,6 +42,7 @@ export default function GridMasterTileImage({
         className={classNames(rest.className, {
           smooth: icon.includes('_detail'),
         })}
+        draggable={false}
         icon={icon}
         size={48}
       />
@@ -53,13 +54,15 @@ export default function GridMasterTileImage({
         'inline-flex justify-center align-center shrink-0',
         rest.className,
       )}
-      style={{ ...rest.style, width: 56, height: 56 }}
+      draggable={false}
+      style={{ ...rest.style, width: 48, height: 48 }}
       {...rest}
     >
       <img
         alt=""
         aria-hidden
         className="object-contain w-full h-full"
+        draggable={false}
         src={
           unknown
             ? type === 'reward'

src/context/GridMasterContext.tsx

@@ -1,21 +1,29 @@
 import { graphql, useStaticQuery } from 'gatsby';
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 import type { GridMasterTile } from '../types/grid-master';
 
 interface GridMasterContextData {
   tiles: GridMasterTile[];
   flipped: boolean;
+  checkable: boolean;
+  checked: Partial<Record<string, boolean>>;
   hideUnconfirmed: boolean;
   setFlipped: React.Dispatch<React.SetStateAction<boolean>>;
+  setCheckable: React.Dispatch<React.SetStateAction<boolean>>;
   setHideUnconfirmed: React.Dispatch<React.SetStateAction<boolean>>;
+  toggleChecked: (cell: string) => void;
 }
 
 const defaultData: GridMasterContextData = {
   tiles: [],
   flipped: false,
+  checkable: false,
+  checked: { D4: true },
   hideUnconfirmed: true,
   setFlipped: () => defaultData.flipped,
+  setCheckable: () => defaultData.checkable,
   setHideUnconfirmed: () => defaultData.hideUnconfirmed,
+  toggleChecked: () => undefined,
 };
 
 const GridMasterContext = createContext<GridMasterContextData>(defaultData);
@@ -30,17 +38,30 @@ export function GridMasterContextProvider({
 }: React.PropsWithChildren) {
   const data = useStaticQuery<GridMasterQueryData>(dataQuery);
   const [flipped, setFlipped] = useState(defaultData.flipped);
+  const [checked, setChecked] = useState(defaultData.checked);
+  const [checkable, setCheckable] = useState(defaultData.flipped);
   const [hideUnconfirmed, setHideUnconfirmed] = useState(
     defaultData.hideUnconfirmed,
   );
+
+  const toggleChecked = useCallback(
+    (cell: string) =>
+      setChecked(state => ({ ...state, [cell]: !(state[cell] || false) })),
+    [],
+  );
+
   return (
     <GridMasterContext.Provider
       value={{
         tiles: data.tiles.nodes,
         flipped,
+        checked,
+        checkable,
         hideUnconfirmed,
         setFlipped,
+        setCheckable,
         setHideUnconfirmed,
+        toggleChecked,
       }}
     >
       {children}

src/styles/grid-master.css

@@ -19,6 +19,14 @@
   cursor: pointer;
 }
 
+.grid-master__cell.unchecked {
+  opacity: var(--opacity-disabled);
+}
+
+.grid-master__cell.checked {
+  opacity: 1;
+}
+
 .grid-master__tile {
   display: inline-flex;
   justify-content: center;