Dog-ears to show symmetrical cell

app/components/Builder.tsx

@@ -1571,6 +1571,7 @@ const GridMode = ({
                 dispatch={dispatch}
                 allowBlockEditing={true}
                 autofill={props.autofillEnabled ? props.autofilledGrid : []}
+                symmetry={state.symmetry}
               />
             }
             left={fillLists.left}

app/components/Cell.tsx

@@ -55,6 +55,7 @@ type CellProps = {
   isWrong: boolean | undefined;
   wasRevealed: boolean | undefined;
   cellColor?: number;
+  isOpposite: boolean;
 };
 
 export const Cell = memo(function Cell(props: CellProps) {
@@ -268,6 +269,20 @@ export const Cell = memo(function Cell(props: CellProps) {
         ) : (
           ''
         )}
+        {props.isOpposite ? (
+          <div className="oppositeIcon"
+            css={{
+              position: 'absolute',
+              top: '0%',
+              right: '0%',
+              borderTop: '.3em solid var(--primary)',
+              borderLeft: '.3em solid rgba(0, 0, 0, 0)',
+            }}
+          >
+          </div>
+        ) : (
+          ''
+        )}
       </div>
     </div>
   );

app/components/Grid.tsx

@@ -1,9 +1,9 @@
 import { Dispatch, ReactNode, useCallback, useEffect, useState } from 'react';
 
-import { PosAndDir, Position, BLOCK } from '../lib/types';
+import { PosAndDir, Position, BLOCK, Symmetry } from '../lib/types';
 import { Cell } from './Cell';
 import { PuzzleAction, SetActivePositionAction } from '../reducers/reducer';
-import { ViewableGrid, ViewableEntry } from '../lib/viewableGrid';
+import { ViewableGrid, ViewableEntry, flipped } from '../lib/viewableGrid';
 import {
   cellIndex,
   getEntryCells,
@@ -27,6 +27,7 @@ type GridViewProps = {
   entryRefs?: Array<Set<number>>;
   showAlternates?: Array<Array<[number, string]>> | null;
   answers?: Array<string> | null;
+  symmetry?: Symmetry | null;
 };
 
 export const GridView = ({
@@ -119,6 +120,9 @@ export const GridView = ({
     const col = idx % grid.width;
     const row = Math.floor(idx / grid.height);
 
+    const symmetricalCell = (props.symmetry != Symmetry.None && props.symmetry != null) ? flipped(grid, active, props.symmetry) : null;
+    const isOpposite = !isActive && (symmetricalCell === idx)
+
     cells.push(
       <Cell
         barRight={grid.vBars.has(idx)}
@@ -144,6 +148,7 @@ export const GridView = ({
         onClick={onClick}
         value={toDisplay}
         isBlock={cellValue === BLOCK}
+        isOpposite={isOpposite}
         isVerified={props.verifiedCells?.has(idx) || showAsVerified}
         isWrong={props.wrongCells?.has(idx)}
         wasRevealed={props.revealedCells?.has(idx)}

app/lib/viewableGrid.ts

@@ -366,7 +366,7 @@ export function gridWithNewChar<
   return fromCells({ ...grid, cells, hidden });
 }
 
-function flipped<Entry extends ViewableEntry, Grid extends ViewableGrid<Entry>>(
+export function flipped<Entry extends ViewableEntry, Grid extends ViewableGrid<Entry>>(
   grid: Grid,
   pos: Position,
   sym: Symmetry