theme and icons

icons_launcher.yaml

@@ -0,0 +1,15 @@
+icons_launcher:
+  image_path: "assets/logo.png"
+  platforms:
+    android:
+      enable: true
+    ios:
+      enable: true
+    web:
+      enable: true
+    macos:
+      enable: true
+    windows:
+      enable: true
+    linux:
+      enable: true

ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,122 +1,122 @@
 {
-  "images" : [
+  "images": [
     {
-      "size" : "20x20",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-20x20@2x.png",
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "20x20"
     },
     {
-      "size" : "20x20",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "3x"
+      "filename": "Icon-App-20x20@3x.png",
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "20x20"
     },
     {
-      "size" : "29x29",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "1x"
+      "filename": "Icon-App-29x29@1x.png",
+      "idiom": "iphone",
+      "scale": "1x",
+      "size": "29x29"
     },
     {
-      "size" : "29x29",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-29x29@2x.png",
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "29x29"
     },
     {
-      "size" : "29x29",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "3x"
+      "filename": "Icon-App-29x29@3x.png",
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "29x29"
     },
     {
-      "size" : "40x40",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-40x40@2x.png",
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "40x40"
     },
     {
-      "size" : "40x40",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "3x"
+      "filename": "Icon-App-40x40@3x.png",
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "40x40"
     },
     {
-      "size" : "60x60",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-60x60@2x.png",
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "60x60"
     },
     {
-      "size" : "60x60",
-      "idiom" : "iphone",
-      "filename" : "[email protected]",
-      "scale" : "3x"
+      "filename": "Icon-App-60x60@3x.png",
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "60x60"
     },
     {
-      "size" : "20x20",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "1x"
+      "filename": "Icon-App-20x20@1x.png",
+      "idiom": "ipad",
+      "scale": "1x",
+      "size": "20x20"
     },
     {
-      "size" : "20x20",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-20x20@2x.png",
+      "idiom": "ipad",
+      "scale": "2x",
+      "size": "20x20"
     },
     {
-      "size" : "29x29",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "1x"
+      "filename": "Icon-App-29x29@1x.png",
+      "idiom": "ipad",
+      "scale": "1x",
+      "size": "29x29"
     },
     {
-      "size" : "29x29",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-29x29@2x.png",
+      "idiom": "ipad",
+      "scale": "2x",
+      "size": "29x29"
     },
     {
-      "size" : "40x40",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "1x"
+      "filename": "Icon-App-40x40@1x.png",
+      "idiom": "ipad",
+      "scale": "1x",
+      "size": "40x40"
     },
     {
-      "size" : "40x40",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-40x40@2x.png",
+      "idiom": "ipad",
+      "scale": "2x",
+      "size": "40x40"
     },
     {
-      "size" : "76x76",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "1x"
+      "filename": "Icon-App-76x76@1x.png",
+      "idiom": "ipad",
+      "scale": "1x",
+      "size": "76x76"
     },
     {
-      "size" : "76x76",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-76x76@2x.png",
+      "idiom": "ipad",
+      "scale": "2x",
+      "size": "76x76"
     },
     {
-      "size" : "83.5x83.5",
-      "idiom" : "ipad",
-      "filename" : "[email protected]",
-      "scale" : "2x"
+      "filename": "Icon-App-83.5x83.5@2x.png",
+      "idiom": "ipad",
+      "scale": "2x",
+      "size": "83.5x83.5"
     },
     {
-      "size" : "1024x1024",
-      "idiom" : "ios-marketing",
-      "filename" : "[email protected]",
-      "scale" : "1x"
+      "filename": "Icon-App-1024x1024@1x.png",
+      "idiom": "ios-marketing",
+      "scale": "1x",
+      "size": "1024x1024"
     }
   ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+  "info": {
+    "author": "icons_launcher",
+    "version": 1
   }
-}
+}

lib/app.dart

@@ -8,8 +8,11 @@ class App extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       home: const GameScreen(),
-      title: "Algorithm Visualizer",
-      theme: ThemeData.light(),
+      title: "Visual Graphs",
+      theme: ThemeData(
+        useMaterial3: true,
+        brightness: Brightness.light,
+      ),
     );
   }
 }

lib/game_screen.dart

@@ -1,6 +1,9 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/widgets.dart';
 import 'package:visual_graphs/components/graph_game.dart';
 import 'package:flame/game.dart';
 import 'package:flutter/material.dart';
+import 'package:visual_graphs/widgets/game_info_box.dart';
 
 class GameScreen extends StatefulWidget {
   const GameScreen({super.key});
@@ -22,6 +25,8 @@ class _GameScreenState extends State<GameScreen> {
   @override
   Widget build(BuildContext context) {
     game.context = context;
+    bool smallScreen = MediaQuery.of(context).size.width < 600;
+
     return Scaffold(
       body: Stack(
         children: [
@@ -36,26 +41,30 @@ class _GameScreenState extends State<GameScreen> {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 SegmentedButton<GameMode>(
-                  segments: const [
+                  segments: [
                     ButtonSegment(
                       value: GameMode.defaultMode,
-                      label: Text("Default"),
-                      icon: Icon(Icons.mouse),
+                      label: !smallScreen ? const Text("Default") : null,
+                      icon: const Icon(Icons.mouse),
+                      tooltip: smallScreen ? "Default Mode" : null,
                     ),
                     ButtonSegment(
                       value: GameMode.addVertex,
-                      label: Text("Add Vertex"),
-                      icon: Icon(Icons.add),
+                      label: !smallScreen ? const Text("Add Vertex") : null,
+                      icon: const Icon(Icons.add),
+                      tooltip: smallScreen ? "Add Vertex" : null,
                     ),
                     ButtonSegment(
                       value: GameMode.addEdge,
-                      label: Text("Add Edge"),
-                      icon: Icon(Icons.linear_scale),
+                      label: !smallScreen ? const Text("Add Edge") : null,
+                      icon: const Icon(Icons.linear_scale),
+                      tooltip: smallScreen ? "Add Edge" : null,
                     ),
                     ButtonSegment(
                       value: GameMode.deleteComponent,
-                      label: Text("Delete Component"),
-                      icon: Icon(Icons.delete),
+                      label: !smallScreen ? const Text("Delete") : null,
+                      icon: const Icon(Icons.delete),
+                      tooltip: smallScreen ? "Delete" : null,
                     ),
                   ],
                   style: SegmentedButton.styleFrom(
@@ -73,24 +82,37 @@ class _GameScreenState extends State<GameScreen> {
                   }),
                 ),
                 const SizedBox(height: 20),
-                ElevatedButton.icon(
-                  onPressed: () => game.centerCamera(),
-                  icon: const Icon(Icons.center_focus_strong),
-                  label: const Text("Center Camera"),
-                ),
-                const SizedBox(height: 20),
                 ElevatedButton.icon(
                   onPressed: () => setState(() {
                     game.clearGraph();
                   }),
                   label: const Text("Clear Graph"),
                   icon: const Icon(Icons.clear),
                 ),
+                Expanded(child: Container()),
+                IconButton(
+                  onPressed: () => game.centerCamera(),
+                  icon: const Icon(
+                    Icons.center_focus_strong,
+                    color: Colors.white,
+                  ),
+                  tooltip: "Center Camera",
+                ),
               ],
             ),
           ),
         ],
       ),
+      floatingActionButton: FloatingActionButton.small(
+        tooltip: "Help",
+        onPressed: () {
+          showDialog(
+            context: context,
+            builder: (context) => const GameInfoBox(),
+          );
+        },
+        child: const Icon(Icons.help),
+      ),
     );
   }
 }