Adding the colour options to the maps

Author: TechnicJelle

assets/fonts/PixelCode-Regular.otf

@@ -4,6 +4,7 @@ import "dart:math" as math;
 import "package:file_picker/file_picker.dart";
 import "package:flutter/material.dart";
 import "package:flutter/services.dart";
+import "package:flutter_colorpicker/flutter_colorpicker.dart";
 
 import "../../../main_menu/settings/setting_heading.dart";
 import "../../../utils.dart";
@@ -107,11 +108,13 @@ class _Option extends StatelessWidget {
   final String title;
   final List<SettingsBodyBase> descriptionList;
   final Widget? subtitle;
+  final Widget? button;
 
   const _Option({
     required this.title,
     required this.descriptionList,
     this.subtitle,
+    this.button,
   });
 
   @override
@@ -124,6 +127,7 @@ class _Option extends StatelessWidget {
         descriptionList,
       ),
       subtitle: subtitle,
+      trailing: button,
     );
   }
 }
@@ -298,3 +302,106 @@ class ToggleOption extends StatelessWidget {
     );
   }
 }
+
+class ColourOption extends StatelessWidget {
+  final String title;
+  final List<SettingsBodyBase> descriptionList;
+  final Color colour;
+  final String label;
+  final void Function(Color colour, String hex) onPicked;
+
+  ColourOption({
+    required this.title,
+    required String description,
+    required this.colour,
+    required this.label,
+    required this.onPicked,
+    super.key,
+  }) : descriptionList = [SettingsBodyText(description)];
+
+  const ColourOption.customDescription({
+    required this.title,
+    required this.descriptionList,
+    required this.colour,
+    required this.label,
+    required this.onPicked,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final textColour = getTextColourForBackground(colour);
+    return _Option(
+      title: title,
+      descriptionList: descriptionList,
+      button: ElevatedButton.icon(
+        style: ElevatedButton.styleFrom(backgroundColor: colour),
+        icon: Icon(Icons.color_lens, color: textColour),
+        label: Text(
+          label,
+          style: pixelCode.copyWith(color: textColour, fontWeight: .w400),
+        ),
+        onPressed: () async {
+          final pickedColour = await showDialog<Color>(
+            context: context,
+            builder: (BuildContext context) {
+              Color pickingColour = colour;
+              final controller = TextEditingController(
+                text: label.replaceFirst("#", ""),
+              );
+              return AlertDialog(
+                title: const Text("Pick a colour"),
+                scrollable: true,
+                content: Column(
+                  children: [
+                    ColorPicker(
+                      pickerColor: colour,
+                      onColorChanged: (Color value) => pickingColour = value,
+                      displayThumbColor: true,
+                      paletteType: PaletteType.hsv,
+                      labelTypes: const [],
+                      hexInputController: controller,
+                      enableAlpha: false,
+                      portraitOnly: true,
+                    ),
+                    TextFormField(
+                      controller: controller,
+                      decoration: const InputDecoration(
+                        labelText: "Colour (in hex)",
+                        prefixText: "#",
+                      ),
+                      autofocus: true,
+                      maxLength: 6,
+                      inputFormatters: [
+                        UpperCaseTextFormatter(),
+                        FilteringTextInputFormatter.allow(RegExp(kValidHexPattern)),
+                      ],
+                      onEditingComplete: () => Navigator.of(context).pop(pickingColour),
+                    ),
+                  ],
+                ),
+                actions: [
+                  TextButton(
+                    child: const Text("Cancel"),
+                    onPressed: () => Navigator.of(context).pop(),
+                  ),
+                  TextButton(
+                    child: const Text("Confirm"),
+                    onPressed: () => Navigator.of(context).pop(pickingColour),
+                  ),
+                ],
+              );
+            },
+          );
+          if (pickedColour == null) return; //Dialog was dismissed
+          final String hex = colorToHex(
+            pickedColour,
+            includeHashSign: true,
+            enableAlpha: false,
+          );
+          onPicked(pickedColour, hex);
+        },
+      ),
+    );
+  }
+}

lib/project_view/configs/views/base.dart

@@ -138,6 +138,32 @@ class _MapConfigViewState extends ConsumerState<MapConfigView> {
           onChanged: null,
           onEditingComplete: () => setState(validateAndSaveOptionsThatCannotBeBlank),
         ),
+        ColourOption(
+          title: "Sky Colour",
+          description: "The colour of the sky.",
+          colour: colorFromHexColour(model.skyColor),
+          label: model.skyColor,
+          onPicked: (Color colour, String hex) => setState(() {
+            model = model.copyWith(skyColor: hex);
+            configFile!.changeValueInFile(
+              MapConfigKeys.skyColor,
+              jsonEncode(model.skyColor),
+            );
+          }),
+        ),
+        ColourOption(
+          title: "Void Colour",
+          description: "The colour of the void.",
+          colour: colorFromHexColour(model.voidColor),
+          label: model.voidColor,
+          onPicked: (Color colour, String hex) => setState(() {
+            model = model.copyWith(voidColor: hex);
+            configFile!.changeValueInFile(
+              MapConfigKeys.voidColor,
+              jsonEncode(model.voidColor),
+            );
+          }),
+        ),
         _DangerZone(configFile!),
       ],
     );

lib/project_view/configs/views/map.dart

@@ -35,8 +35,28 @@ const TextStyle pixelCode = TextStyle(
   fontFamily: "PixelCode",
   fontSize: 14,
   height: 1.2,
+  fontWeight: .w200,
 );
 
+Color getTextColourForBackground(Color backgroundColour) {
+  return ThemeData.estimateBrightnessForColor(backgroundColour) == Brightness.dark
+      ? Colors.white
+      : Colors.black;
+}
+
+Color colorFromHexColour(String hexString) {
+  final int ox = int.parse(hexString.replaceFirst("#", "0x")); //heehee
+
+  if (hexString.length == 1 + 6) {
+    final int b = ox & 255;
+    final int g = (ox >> 8) & 255;
+    final int r = (ox >> 16) & 255;
+    return Color.fromARGB(255, r, g, b);
+  }
+
+  throw Exception("Failed to parse colour code: $hexString");
+}
+
 /// Checks if the given file has the same SHA256 hash as the given hash.
 /// Returns true if the hashes match, false otherwise.
 Future<bool> checkHash(File file, String validHash) async {

lib/utils.dart

@@ -318,6 +318,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_colorpicker:
+    dependency: "direct main"
+    description:
+      name: flutter_colorpicker
+      sha256: "969de5f6f9e2a570ac660fb7b501551451ea2a1ab9e2097e89475f60e07816ea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   flutter_lints:
     dependency: "direct dev"
     description:

pubspec.lock

@@ -35,6 +35,7 @@ dependencies:
   file_picker: ^10.3.10
   flutter:
     sdk: flutter
+  flutter_colorpicker: ^1.1.0
   flutter_riverpod: ^3.1.0
   freezed_annotation: ^3.1.0
   json_annotation: ^4.9.0
@@ -96,6 +97,9 @@ flutter:
     - family: PixelCode
       fonts:
         - asset: assets/fonts/PixelCode-ExtraLight.otf
+          weight: 200
+        - asset: assets/fonts/PixelCode-Regular.otf
+          weight: 400
 
   #
   # For details regarding fonts from package dependencies,