Fixed project structure

lib/ui/widgets/color_plate.dart

@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+import 'package:huacu_mobile/game_pallete.dart';
+
+enum PlateState {
+  normal,
+  marked,
+  selected,
+}
+
+typedef PlateMarkCallback = void Function(String plateName);
+
+class ColorPlate extends StatefulWidget {
+  final String plateName;
+  final double size;
+  final PlateMarkCallback? onSelected;
+
+  const ColorPlate(
+      {super.key,
+      required this.plateName,
+      required this.size,
+      this.onSelected});
+
+  @override
+  State<ColorPlate> createState() => _ColorPlateState();
+}
+
+class _ColorPlateState extends State<ColorPlate> {
+  var _tapPosition = Offset.zero;
+  var state = PlateState.normal;
+
+  Color get borderColor {
+    switch (state) {
+      case PlateState.normal: return Colors.black;
+      case PlateState.marked: return Colors.amber;
+      case PlateState.selected: return Colors.greenAccent;
+    }
+  }
+
+  void _getTapPosition(TapDownDetails details) {
+    final RenderBox referenceBox = context.findRenderObject() as RenderBox;
+    _tapPosition = referenceBox.globalToLocal(details.globalPosition);
+    _tapPosition = details.globalPosition;
+  }
+
+  void _showContextMenu(BuildContext context) async {
+    final oldState = state;
+    setState(() {
+      state = PlateState.marked;
+    });
+
+    final overlay = Overlay.of(context).context.findRenderObject();
+    final result = await showMenu(
+      context: context,
+      position: RelativeRect.fromRect(
+        Rect.fromLTWH(_tapPosition.dx, _tapPosition.dy, 30, 30),
+        Rect.fromLTWH(0, 0, overlay!.paintBounds.size.width,
+            overlay.paintBounds.size.height),
+      ),
+      items: [
+        PopupMenuItem(
+          enabled: false,
+          child: Text("Plate ${widget.plateName}"),
+        ),
+        PopupMenuItem(
+          enabled: oldState != PlateState.marked,
+          value: "mark",
+          child: Text("Mark"),
+        ),
+        const PopupMenuItem(
+          value: "cancel",
+          child: Text("Cancel"),
+        )
+      ],
+    );
+
+    setState(() {
+      if (result == "mark" || oldState == PlateState.selected) {
+        state = PlateState.selected;
+        if (oldState != PlateState.selected) {
+          widget.onSelected?.call(widget.plateName);
+        }
+      } else {
+        state = PlateState.normal;
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTapDown: (details) => _getTapPosition(details),
+      onTap: () => _showContextMenu(context),
+      child: Container(
+        width: widget.size,
+        height: widget.size,
+        decoration: BoxDecoration(
+          color: pallete[widget.plateName],
+          border: Border.all(
+            color: borderColor,
+            width: 4,
+          ),
+          borderRadius: BorderRadius.circular(10),
+        ),
+      ),
+    );
+  }
+}

lib/ui/widgets/socket_connection_indicator.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:socket_io_client/socket_io_client.dart';
+
+class SocketConnectionIndicator extends StatefulWidget {
+  final Socket socket;
+  final double size;
+
+  const SocketConnectionIndicator(
+      {super.key, required this.socket, this.size = 12});
+
+  @override
+  State<SocketConnectionIndicator> createState() =>
+      _SocketConnectionIndicatorState();
+}
+
+class _SocketConnectionIndicatorState extends State<SocketConnectionIndicator> {
+  var connectionStateColor = Colors.amber.obs;
+
+  @override
+  void initState() {
+    super.initState();
+
+    connectionStateColor =
+        widget.socket.connected ? Colors.green.obs : Colors.red.obs;
+
+    widget.socket.onConnect((data) {
+      connectionStateColor.value = Colors.green;
+    });
+    widget.socket.onConnecting((data) {
+      connectionStateColor.value = Colors.amber;
+    });
+    widget.socket.onReconnectAttempt((data) {
+      connectionStateColor.value = Colors.blue;
+    });
+    widget.socket.onDisconnect((data) {
+      connectionStateColor.value = Colors.red;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return InkResponse(
+      onTap: () {
+        widget.socket.disconnect().connect();
+      },
+      child: Obx(
+        () => Container(
+          width: widget.size,
+          height: widget.size,
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: connectionStateColor.value,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/ui/widgets/static_color_plate.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:huacu_mobile/game_pallete.dart';
+
+class StaticColorPlate extends StatelessWidget {
+  final String plateName;
+  final double size;
+  final bool marked;
+
+  const StaticColorPlate({
+    super.key,
+    required this.plateName,
+    required this.size,
+    required this.marked,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        color: pallete[plateName],
+        border: Border.all(
+          color: marked ? Colors.greenAccent : Colors.black,
+          width: 4,
+        ),
+        borderRadius: BorderRadius.circular(10),
+      ),
+    );
+  }
+}