cleanup of super game rendering

lib/classic.dart

@@ -0,0 +1,129 @@
+import 'package:flutter/material.dart';
+import 'state.dart';
+import 'game.dart';
+import "util.dart";
+
+class ClassicGame extends StatefulWidget {
+  const ClassicGame({super.key});
+
+  @override
+  State<ClassicGame> createState() => _ClassicGameState();
+}
+
+class _ClassicGameState extends State<ClassicGame> {
+  TTCState turn = TTCState.x;
+  List<TTCState> data = [
+    TTCState.empty,
+    TTCState.empty,
+    TTCState.empty,
+    TTCState.empty,
+    TTCState.empty,
+    TTCState.empty,
+    TTCState.empty,
+    TTCState.empty,
+    TTCState.empty,
+  ];
+  TTCState get winner => Util.checkWin(data);
+  bool get ended => winner != TTCState.empty;
+
+  String get turnText => switch (turn) {
+        TTCState.empty => "",
+        TTCState.x => "X",
+        TTCState.o => "O",
+      };
+
+  void _nextTurn() => turn = Util.nextTurn(turn);
+
+  Widget _invalidChoiceAlert(TTCState existingValue) {
+    return Dialog(
+      child: Padding(
+        padding: const EdgeInsets.all(10),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            const Text(
+              "INVALID CHOICE",
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ),
+            Text("${Util.stateText(existingValue)} already claimed that"),
+            ElevatedButton(
+                onPressed: () => Navigator.pop(context),
+                child: const Text("Ok")),
+          ],
+        ),
+      ),
+    );
+  }
+
+  bool _checkValidChoice(int index) {
+    if (data[index] == TTCState.empty) return true;
+
+    showDialog(
+      context: context,
+      builder: (context) => _invalidChoiceAlert(data[index]),
+    );
+
+    return false;
+  }
+
+  void _cellOnTap(int index) {
+    if (!_checkValidChoice(index)) {
+      return;
+    }
+
+    setState(() {
+      data[index] = turn;
+      _nextTurn();
+    });
+  }
+
+  void _endedCellOnTap(int index) {
+    showDialog(
+        context: context,
+        builder: (context) {
+          return Dialog(
+            child: Padding(
+              padding: const EdgeInsets.all(10),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  const Text(
+                    "GAME OVER",
+                    style: TextStyle(fontWeight: FontWeight.bold),
+                  ),
+                  Text("${Util.stateText(winner)} has already won"),
+                  ElevatedButton(
+                      onPressed: () => Navigator.pop(context),
+                      child: const Text("Ok")),
+                ],
+              ),
+            ),
+          );
+        });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        const Spacer(flex: 5),
+        Center(
+            child: Text(
+          !ended ? "$turnText's turn" : "${Util.stateText(winner)} wins",
+          style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
+        )),
+        const Spacer(flex: 1),
+        TTCGame(
+          turn: turn,
+          cellOnTapCallback: !ended ? _cellOnTap : _endedCellOnTap,
+          data: data,
+          cellTextStyle: const TextStyle(fontSize: 40),
+        ),
+        const Spacer(flex: 5),
+      ],
+    );
+  }
+}

lib/game.dart

@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+import 'state.dart';
+
+/// Board of a single game of tic tac toe
+class TTCGame extends StatelessWidget {
+  const TTCGame({
+    super.key,
+    required this.turn,
+    required this.data,
+    this.cellOnTapCallback,
+    this.cellTextStyle,
+  });
+
+  final TTCState turn;
+  final List<TTCState> data;
+
+  /// styling for text in cell
+  final TextStyle? cellTextStyle;
+
+  /// hook into end of turn cycle;
+  final void Function(int)? cellOnTapCallback;
+
+  @override
+  Widget build(BuildContext context) {
+    List<Widget> cells = data
+        .map((state) => Text(
+              state != TTCState.empty ? state.name.toUpperCase() : "",
+              style: cellTextStyle,
+            ))
+        .toList();
+    return GameHash(
+      cellOnTapCallback: cellOnTapCallback,
+      children: cells,
+    );
+  }
+}
+
+class GameHash extends StatelessWidget {
+  const GameHash({super.key, required this.children, this.cellOnTapCallback});
+  final List<Widget> children;
+
+  final void Function(int)? cellOnTapCallback;
+
+  Border _genCellBorder(
+    int index, {
+    BorderSide borderSide = const BorderSide(),
+  }) {
+    return Border(
+      top: index < 3 ? BorderSide.none : borderSide,
+      bottom: index > 5 ? BorderSide.none : borderSide,
+      left: [0, 3, 6].contains(index) ? BorderSide.none : borderSide,
+      right: [2, 5, 8].contains(index) ? BorderSide.none : borderSide,
+    );
+  }
+
+  MapEntry<int, Widget> _genCell(int index, Widget content) {
+    return MapEntry(
+      index,
+      Container(
+        decoration: BoxDecoration(border: _genCellBorder(index)),
+        child: HashCell(
+          stateSetCallback: () {
+            if (cellOnTapCallback != null) {
+              cellOnTapCallback!(index);
+            }
+          },
+          child: content,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.count(
+      crossAxisCount: 3,
+      shrinkWrap: true,
+      children: children.asMap().map(_genCell).values.toList(),
+    );
+  }
+}
+
+class HashCell extends StatelessWidget {
+  const HashCell({
+    super.key,
+    required this.child,
+    this.stateSetCallback,
+  });
+
+  final Widget child;
+  final VoidCallback? stateSetCallback;
+
+  @override
+  Widget build(BuildContext context) => InkWell(
+        onTap: stateSetCallback,
+        child: IgnorePointer(
+          child: Center(child: child),
+        ),
+      );
+}

lib/main.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:super_tic_tac_toe/super.dart';
+import 'classic.dart';
 
 void main() {
   runApp(const MyApp());
@@ -29,239 +31,52 @@ class MyHomePage extends StatefulWidget {
   State<MyHomePage> createState() => _MyHomePageState();
 }
 
+enum GameType { classicTTC, superTTC }
+
 class _MyHomePageState extends State<MyHomePage> {
-  TTCState turn = TTCState.x;
+  GameType type = GameType.classicTTC;
-  late TTCGame game;
+  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
-
-  String get turnText => switch (turn) {
-        TTCState.empty => "",
-        TTCState.x => "X",
-        TTCState.o => "O",
-      };
-
-  void onTurnEnd() {
-    setState(() {
-      turn = switch (turn) {
-        TTCState.x => TTCState.o,
-        TTCState.o => TTCState.x,
-        _ => TTCState.x
-      };
-    });
-  }
-
-  @override
-  void initState() {
-    super.initState();
-    game = TTCGame(
-      turn: turn,
-      onClick: onTurnEnd,
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+        drawer: Drawer(
+            key: _scaffoldKey,
+            child: ListView(
+              children: [
+                const DrawerHeader(
+                  child: Text(
+                    "Game Types",
+                    style: TextStyle(fontSize: 25),
+                  ),
+                ),
+                ListTile(
+                  title: const Text("Classic"),
+                  onTap: () {
+                    setState(() {
+                      type = GameType.classicTTC;
+                    });
+                    Navigator.pop(context);
+                  },
+                ),
+                ListTile(
+                    title: const Text("Super"),
+                    onTap: () {
+                      setState(() {
+                        type = GameType.superTTC;
+                      });
+                      Navigator.pop(context);
+                    }),
+              ],
+            )),
         appBar: AppBar(
           title: Text(widget.title),
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
         ),
         body: Padding(
           padding: const EdgeInsets.all(10),
-          child: Column(
+          child: type == GameType.classicTTC
-            mainAxisSize: MainAxisSize.min,
+              ? const ClassicGame()
-            children: [
+              : const SuperGame(),
-              const Spacer(flex: 5),
-              Center(
-                  child: Text(
-                "$turnText's turn",
-                style:
-                    const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
-              )),
-              const Spacer(flex: 1),
-              TTCGame(
-                turn: turn,
-                onClick: onTurnEnd,
-              ),
-              const Spacer(flex: 5),
-            ],
-          )),
-    );
-  }
-}
-
-enum TTCState { empty, x, o }
-
-/// Board of a single game of tic tac toe
-class TTCGame extends StatefulWidget {
-  const TTCGame({
-    super.key,
-    required this.turn,
-    this.data,
-    this.onClick,
-  });
-
-  final TTCState turn;
-  final List<TTCState>? data;
-
-  /// hook into acction of tapping on square
-  final Function? onClick;
-
-  @override
-  State<StatefulWidget> createState() => _TTCGameState();
-}
-
-class _TTCGameState extends State<TTCGame> {
-  late TTCState turn;
-  late List<TTCState> data;
-
-  void setCellState(int index) {
-    switch (data[index]) {
-      case TTCState.empty:
-        setState(() {
-          data[index] = turn;
-
-          turn = switch (turn) {
-            TTCState.x => TTCState.o,
-            TTCState.o => TTCState.x,
-            TTCState.empty => TTCState.empty,
-          };
-        });
-        widget.onClick?.call();
-        notifyWin();
-        break;
-      default:
-        ScaffoldMessenger.of(context)
-          ..clearSnackBars()
-          ..showSnackBar(const SnackBar(
-              content: Text("Invalid Choice: cell already has value")));
-    }
-  }
-
-  Iterable<TTCState> getRow(int index) => data.getRange(index, index + 3);
-  Iterable<TTCState> getCol(int index) => [
-        data[index],
-        data[index + 3],
-        data[index + 3 * 2],
-      ];
-  Iterable<TTCState> getCross(int index) {
-    if (index == 0) {
-      return [data[0], data[4], data[8]];
-    }
-    return [data[3], data[4], data[6]];
-  }
-
-  TTCState _checkRow(Iterable<TTCState> row) => row.reduce((value, element) =>
-      (element == TTCState.empty || value == TTCState.empty || element != value)
-          ? TTCState.empty
-          : value);
-
-  TTCState _checkBoard(Iterable<TTCState> rowValues) =>
-      rowValues.reduce((value, element) {
-        if (value != TTCState.empty) {
-          return value;
-        }
-        if (element != TTCState.empty) {
-          return element;
-        }
-
-        return TTCState.empty;
-      });
-
-  TTCState _checkWin() {
-    Iterable<TTCState> rows = Iterable.generate(3, (i) => _checkRow(getRow(i)));
-    Iterable<TTCState> cols = Iterable.generate(3, (i) => _checkRow(getCol(i)));
-    Iterable<TTCState> crosses =
-        Iterable.generate(2, (i) => _checkRow(getCross(i)));
-
-    return _checkBoard([...rows, ...cols, ...crosses]);
-  }
-
-  void notifyWin() {
-    TTCState state = _checkWin();
-
-    if (state != TTCState.empty) {
-      ScaffoldMessenger.of(context)
-        ..clearSnackBars()
-        ..showSnackBar(
-            SnackBar(content: Text("${state.name.toUpperCase()} wins")));
-    }
-  }
-
-  Border _genCellBorder(
-    int index, {
-    BorderSide borderSide = const BorderSide(),
-  }) {
-    return Border(
-      top: index < 3 ? BorderSide.none : borderSide,
-      bottom: index > 5 ? BorderSide.none : borderSide,
-      left: [0, 3, 6].contains(index) ? BorderSide.none : borderSide,
-      right: [2, 5, 8].contains(index) ? BorderSide.none : borderSide,
-    );
-  }
-
-  Widget _genCell(int index, TTCState state) => Container(
-      decoration: BoxDecoration(border: _genCellBorder(index)),
-      child: TTCCell(
-        state: state,
-        stateSetCallback: () {
-          setCellState(index);
-        },
-      ));
-
-  @override
-  void initState() {
-    super.initState();
-    turn = widget.turn;
-    data = widget.data ??
-        <TTCState>[
-          TTCState.empty,
-          TTCState.empty,
-          TTCState.empty,
-          TTCState.empty,
-          TTCState.empty,
-          TTCState.empty,
-          TTCState.empty,
-          TTCState.empty,
-          TTCState.empty,
-        ];
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    List<Widget> cells = [];
-    for (final (index, state) in data.indexed) {
-      cells.add(_genCell(index, state));
-    }
-    return GridView.count(
-      crossAxisCount: 3,
-      shrinkWrap: true,
-      children: cells,
-    );
-  }
-}
-
-class TTCCell extends StatelessWidget {
-  const TTCCell({
-    super.key,
-    required this.state,
-    this.stateSetCallback,
-    this.textStyle,
-  });
-
-  final TTCState state;
-  final VoidCallback? stateSetCallback;
-  final TextStyle? textStyle;
-
-  String get text => switch (state) {
-        TTCState.empty => "",
-        TTCState.x => "X",
-        TTCState.o => "O",
-      };
-
-  @override
-  Widget build(BuildContext context) => InkWell(
-      onTap: stateSetCallback,
-      child: Center(
-        child: Text(text, style: textStyle),
         ));
   }
+}

lib/state.dart

@@ -0,0 +1 @@
+enum TTCState { empty, x, o }

lib/super.dart

@@ -0,0 +1,191 @@
+import 'package:flutter/material.dart';
+import 'package:super_tic_tac_toe/game.dart';
+import 'package:super_tic_tac_toe/state.dart';
+import 'package:super_tic_tac_toe/util.dart';
+
+class SuperGame extends StatefulWidget {
+  const SuperGame({super.key});
+
+  @override
+  State<SuperGame> createState() => _SuperGameState();
+}
+
+class _SuperGameState extends State<SuperGame> {
+  TTCState turn = TTCState.x;
+  List<List<TTCState>> data = Util.emptyBoardSuper;
+
+  TTCState subGameWinner(int index) => Util.checkWin(data[index]);
+  List<TTCState> get subGameWinners => data.map(Util.checkWin).toList();
+  bool subGameEnded(int i) => subGameWinner(i) != TTCState.empty;
+  TTCState get winner => Util.checkWin(subGameWinners);
+  bool gameEnded() => winner != TTCState.empty;
+
+  int nextPlay = -1;
+
+  void _swapTurn() => turn = Util.nextTurn(turn);
+
+  bool _checkValidChoice(List<TTCState> game, int index) =>
+      game[index] == TTCState.empty;
+
+  void Function(int) subGameCellOnTapCallback(int subGame) {
+    return (int i) {
+      if (!_checkValidChoice(data[subGame], i)) {
+        showDialog(
+            context: context,
+            builder: (context) => AlertDialog(
+                  content: Text("${data[subGame][i].name.toUpperCase()}"
+                      " already claimed "
+                      "[${i % 3}, ${(i / 3).floor()}]"),
+                  actions: [
+                    ElevatedButton(
+                        onPressed: () => Navigator.pop(context),
+                        child: const Text("Close"))
+                  ],
+                ));
+        return;
+      }
+
+      setState(() {
+        data[subGame][i] = turn;
+        nextPlay = subGameEnded(i) ? -1 : i;
+        if (!gameEnded()) {
+          _swapTurn();
+        }
+      });
+      Navigator.pop(context);
+    };
+  }
+
+  Widget _subGameDialog(int subGame) {
+    return Dialog(
+      child: Padding(
+        padding: const EdgeInsets.all(10),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(bottom: 5),
+              child: Text(
+                "${Util.stateText(turn)} select cell",
+                style: const TextStyle(fontWeight: FontWeight.bold),
+              ),
+            ),
+            TTCGame(
+              turn: turn,
+              cellOnTapCallback: subGameCellOnTapCallback(subGame),
+              data: data[subGame],
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 5),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  ElevatedButton(
+                      onPressed: () {
+                        Navigator.pop(context);
+                      },
+                      child: const Text("Close"))
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  void endedSubGameNotification(int index) {
+    ScaffoldMessenger.of(context)
+      ..clearSnackBars()
+      ..showSnackBar(
+        SnackBar(
+          content: Text("${Util.stateText(subGameWinner(index))}"
+              " already won the game at "
+              "[${Util.cellAddress(index)}]"),
+        ),
+      );
+  }
+
+  void _showSubGameDialog(int i) {
+    if (nextPlay == i || nextPlay == -1) {
+      showDialog(
+        context: context,
+        builder: (context) => _subGameDialog(i),
+      );
+    } else {
+      ScaffoldMessenger.of(context)
+        ..clearSnackBars()
+        ..showSnackBar(
+          SnackBar(
+            content: Text(
+              "You can only play at [${(nextPlay % 3) + 1},"
+              "${(nextPlay / 3).floor() + 1}]",
+            ),
+          ),
+        );
+    }
+  }
+
+  void _gameEndedReminder() {
+    ScaffoldMessenger.of(context)
+      ..clearSnackBars()
+      ..showSnackBar(
+        SnackBar(
+          content: Text("${Util.stateText(winner)} already won the game"),
+        ),
+      );
+  }
+
+  void _cellOnTapCallback(int index) {
+    if (subGameEnded(index)) {
+      endedSubGameNotification(index);
+      return;
+    } else if (gameEnded()) {
+      _gameEndedReminder();
+      return;
+    }
+    _showSubGameDialog(index);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        const Spacer(flex: 5),
+        Center(
+          child: Text(
+            gameEnded()
+                ? "${Util.stateText(winner)} Wins"
+                : "${Util.stateText(turn)}'s Turn",
+            style: const TextStyle(fontSize: 25),
+          ),
+        ),
+        const Spacer(flex: 1),
+        GameHash(
+            cellOnTapCallback: _cellOnTapCallback,
+            children: Iterable.generate(data.length)
+                .map(
+                  (i) => DecoratedBox(
+                    decoration: BoxDecoration(
+                      color: nextPlay == i ? Colors.lightGreenAccent : null,
+                    ),
+                    child: Padding(
+                      padding: const EdgeInsets.all(15),
+                      child: !subGameEnded(i)
+                          ? TTCGame(
+                              turn: turn,
+                              data: data[i],
+                            )
+                          : Text(
+                              subGameWinner(i).name.toUpperCase(),
+                              style: const TextStyle(fontSize: 40),
+                            ),
+                    ),
+                  ),
+                )
+                .toList()),
+        const Spacer(flex: 5),
+      ],
+    );
+  }
+}

lib/util.dart

@@ -0,0 +1,87 @@
+import 'state.dart';
+
+class Util {
+  static List<TTCState> get emptyBoardClassic => [
+        TTCState.empty,
+        TTCState.empty,
+        TTCState.empty,
+        TTCState.empty,
+        TTCState.empty,
+        TTCState.empty,
+        TTCState.empty,
+        TTCState.empty,
+        TTCState.empty,
+      ];
+
+  static List<List<TTCState>> get emptyBoardSuper => [
+        emptyBoardClassic,
+        emptyBoardClassic,
+        emptyBoardClassic,
+        emptyBoardClassic,
+        emptyBoardClassic,
+        emptyBoardClassic,
+        emptyBoardClassic,
+        emptyBoardClassic,
+        emptyBoardClassic,
+      ];
+
+  static TTCState nextTurn(TTCState currentPlayer,
+      {TTCState defaultState = TTCState.x}) {
+    switch (currentPlayer) {
+      case TTCState.x:
+        return TTCState.o;
+      case TTCState.o:
+        return TTCState.x;
+      default:
+        return defaultState;
+    }
+  }
+
+  static String stateText(TTCState state) => state.name.toUpperCase();
+  static String cellAddress(int index) =>
+      "${index % 3}, ${(index / 3).floor()}";
+
+  static Iterable<TTCState> getRow(int index, List<TTCState> data) =>
+      data.getRange(index * 3, index * 3 + 3);
+  static Iterable<TTCState> getCol(int index, List<TTCState> data) => [
+        data[index],
+        data[index + 3],
+        data[index + 3 * 2],
+      ];
+  static Iterable<TTCState> getCross(int index, List<TTCState> data) {
+    if (index == 0) {
+      return [data[0], data[4], data[8]];
+    }
+    return [data[2], data[4], data[6]];
+  }
+
+  static TTCState checkRow(Iterable<TTCState> row) =>
+      row.reduce((value, element) => (element == TTCState.empty ||
+              value == TTCState.empty ||
+              element != value)
+          ? TTCState.empty
+          : value);
+
+  static TTCState checkBoard(Iterable<TTCState> rowValues) =>
+      rowValues.reduce((value, element) {
+        if (value != TTCState.empty) {
+          return value;
+        }
+        if (element != TTCState.empty) {
+          return element;
+        }
+
+        return TTCState.empty;
+      });
+
+  static TTCState checkWin(List<TTCState> data) {
+    Iterable<TTCState> rows =
+        Iterable.generate(3, (i) => checkRow(getRow(i, data)));
+    Iterable<TTCState> cols =
+        Iterable.generate(3, (i) => checkRow(getCol(i, data)));
+    Iterable<TTCState> crosses =
+        Iterable.generate(2, (i) => checkRow(getCross(i, data)));
+
+    return checkBoard([...rows, ...cols, ...crosses]);
+  }
+}

todo

@@ -1,4 +1 @@
-- seperate game logic from widgets to display
-- ui with options for super and regular game
-- ui for super game
 - firebase for multiplayer game