New lobby

lib/main.dart

@@ -13,7 +13,7 @@ final darkTheme = ThemeData(
 
 void main() {
   runApp(GetMaterialApp(
-    initialRoute: '/testing',
+    initialRoute: '/auth',
     title: 'HUACU',
     darkTheme: darkTheme,
     themeMode: ThemeMode.dark,

lib/models/game.dart

@@ -1,8 +1,9 @@
 class Game {
   final String id;
-  final String player1;
+  final String guesser;
-  final String player2;
+  final String suggester;
+  final int tries;
   final Set<String> colors;
 
-  Game(this.id, this.player1, this.player2, this.colors);
+  Game(this.id, this.guesser, this.suggester, this.tries, this.colors);
 }

lib/ui/pages/game_page.dart

@@ -184,7 +184,8 @@ class _GamePageState extends State<GamePage> {
                     borderRadius:
                         BorderRadius.only(bottomRight: Radius.circular(25)),
                   ),
-                  child: Obx(() => Text("${10 - guessedColors.length}/10")),
+                  child: Obx(
+                      () => Text("${guessedColors.length}/${gameInfo.tries}")),
                 ),
               ),
             ],

lib/ui/pages/home_page.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:huacu_mobile/models/auth_data.dart';
+import 'package:huacu_mobile/models/available_game.dart';
 import 'package:huacu_mobile/models/game.dart';
 import 'package:huacu_mobile/ui/widgets/socket_connection_indicator.dart';
 import 'package:socket_io_client/socket_io_client.dart' as io;
@@ -16,9 +17,7 @@ class _HomePageState extends State<HomePage> {
   final io.Socket socket = Get.find();
   final AuthData authData = Get.find();
 
-  var guessersPlayers = <String>[].obs;
+  final availableGames = <AvailableGame>[].obs;
-  var suggestersPlayers = <String>[].obs;
-  var incommingRequests = <String>[].obs;
 
   @override
   void initState() {
@@ -33,11 +32,13 @@ class _HomePageState extends State<HomePage> {
       bool ok = update[0];
       if (ok) {
         var data = update[1];
-        guessersPlayers.value = (data["guessers"] as List<dynamic>? ?? [])
+        availableGames.value = (data["availableGames"] as List<dynamic>? ?? [])
-            .map((e) => e.toString())
+            .map((e) => AvailableGame(
-            .toList(growable: false);
+                  id: e["id"],
-        suggestersPlayers.value = (data["suggesters"] as List<dynamic>? ?? [])
+                  opponentName: e["player"],
-            .map((e) => e.toString())
+                  tries: e["tries"],
+                  neededRole: e["neededRole"],
+                ))
             .toList(growable: false);
       } else {
         Get.snackbar("Error", "Update failed with message: ${update[1]}");
@@ -48,26 +49,23 @@ class _HomePageState extends State<HomePage> {
       socket.emit("getUpdate");
     });
 
-    socket.on("gameRequest", (requestFrom) {
+    socket.on("removeGameResponse", (data) => null);
-      setState(() {
+    socket.on("createGameResponse", (data) => null);
-        incommingRequests.add(requestFrom);
-      });
-    });
 
-    socket.on("requestResponseResult", (data) {
+    socket.on("joinGameResponse", (data) {
       bool ok = data[0];
       if (ok) {
         socket.off("hello");
         socket.off("update");
         socket.off("updateNeeded");
-        socket.off("gameRequest");
+        socket.off("someoneJoinedGame");
-        socket.off("requestResponseResult");
         Get.put(authData);
         Get.put(socket);
         Get.put(Game(
           data[1]["id"],
-          data[1]["player1"],
+          data[1]["guesser"],
-          data[1]["player2"],
+          data[1]["suggester"],
+          data[1]["tries"],
           (data[2] as List<dynamic>).map((e) => e.toString()).toSet(),
         ));
         Get.offNamed("/game");
@@ -81,97 +79,50 @@ class _HomePageState extends State<HomePage> {
 
   @override
   Widget build(BuildContext context) {
-    final shortestSide = MediaQuery.of(context).size.shortestSide;
+    final size = MediaQuery.of(context).size;
-    final useMobileLayout = shortestSide < 600;
-    final elements = [
-      Expanded(
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: _buildPlayerList(
-            guessersPlayers,
-            "Guessers",
-            "guessers",
-          ),
-        ),
-      ),
-      Expanded(
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: _buildPlayerList(
-            suggestersPlayers,
-            "Suggesters",
-            "suggesters",
-          ),
-        ),
-      ),
-    ];
 
     return Scaffold(
       appBar: AppBar(
-        title: Row(
+        title: Obx(() => Text("Available ${availableGames.length} game(s)")),
-          mainAxisSize: MainAxisSize.min,
+      ),
-          mainAxisAlignment: MainAxisAlignment.start,
+      body: SizedBox(
-          crossAxisAlignment: CrossAxisAlignment.start,
+        width: size.width,
+        height: size.height,
+        child: Column(
           children: [
-            const Text("HUACU"),
-            SocketConnectionIndicator(socket: socket, size: 8),
-          ],
-        ),
-      ),
-      body: useMobileLayout
-          ? Column(
-              mainAxisAlignment: MainAxisAlignment.start,
-              mainAxisSize: MainAxisSize.max,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: elements,
-            )
-          : Row(
-              mainAxisAlignment: MainAxisAlignment.start,
-              mainAxisSize: MainAxisSize.max,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: elements,
-            ),
-    );
-  }
-
-  Widget _buildPlayerList(RxList<String> players, String title, String team) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(title),
-        Obx(() => Text("Count: ${players.length}")),
             Expanded(
               child: ObxValue(
                 (data) => ListView.builder(
                   itemCount: data.length,
                   itemBuilder: (context, index) {
-                final username = data[index];
+                    final game = data[index];
-                final hasRequest = incommingRequests.contains(username);
+                    final you = authData.login == game.opponentName;
-                final you = authData.login == username;
                     return Card(
                       child: ListTile(
                         title: Text(
-                      "$username ${you ? "(you)" : ""}".trim(),
+                          "Game of ${game.opponentName} ${you ? "(you)" : ""}"
+                              .trim(),
+                        ),
+                        subtitle: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text("Tries: ${game.tries}"),
+                            Text("Needed role: ${game.neededRole}"),
+                          ],
                         ),
                         trailing: Row(
                           mainAxisSize: MainAxisSize.min,
                           children: [
-                        if (hasRequest)
+                            if (!you)
                               InkResponse(
-                            onTap: () =>
+                                onTap: () => _joinGame(game.id),
-                                _handleRequestResponseAction(username, true),
+                                child:
-                            child: const Icon(Icons.check),
+                                    const Icon(Icons.connect_without_contact),
                               ),
-                        if (hasRequest)
+                            if (you)
                               InkResponse(
-                            onTap: () =>
+                                onTap: () => _deleteGame(game.id),
-                                _handleRequestResponseAction(username, false),
+                                child: const Icon(Icons.delete),
-                            child: const Icon(Icons.close),
-                          ),
-                        if (!you && !hasRequest)
-                          InkResponse(
-                            onTap: () => _handleSendRequestClick(username),
-                            child: const Icon(Icons.connect_without_contact),
                               ),
                           ],
                         ),
@@ -179,7 +130,7 @@ class _HomePageState extends State<HomePage> {
                     );
                   },
                 ),
-            players,
+                availableGames,
               ),
             ),
             Row(
@@ -188,71 +139,124 @@ class _HomePageState extends State<HomePage> {
               children: [
                 Expanded(
                   child: ObxValue(
-                (data) => players.contains(authData.login)
+                    (data) {
-                    ? ElevatedButton(
+                      return ElevatedButton(
-                        onPressed: () => _handleLeaveClick(team),
+                        onPressed: data.firstWhereOrNull(
-                        child: const Text("Leave"),
+                                    (g) => g.opponentName == authData.login) ==
-                      )
+                                null
-                    : ElevatedButton(
+                            ? _createGame
-                        onPressed: () => _handleJoinClick(team),
+                            : null,
-                        child: const Text("Join"),
+                        child: const Text("Create"),
-                      ),
+                      );
-                guessersPlayers,
+                    },
+                    availableGames,
                   ),
                 ),
               ],
             ),
           ],
+        ),
+      ),
     );
   }
 
-  void _joinResponseHandler(dynamic data) {
+  void _createGame() async {
-    bool ok = data[0];
+    var tries = 20;
-    if (!ok) {
+    var role = "guesser";
-      int status = data[1];
+    final data = await Get.dialog<Map<String, dynamic>?>(
-      Get.snackbar("Error", "Join failed with status $status");
+        StatefulBuilder(builder: (buildContext, setState) {
-    }
+      return AlertDialog(
-    socket.off("joinResponse", _joinResponseHandler);
+        title: const Text("New game configuration"),
-  }
+        content: Column(
-
+          mainAxisSize: MainAxisSize.min,
-  void _handleJoinClick(String side) {
+          crossAxisAlignment: CrossAxisAlignment.start,
-    socket.on("joinResponse", _joinResponseHandler);
+          children: [
-    socket.emit("join", side);
+            Text("Tries: $tries"),
-  }
+            Slider(
-
+              value: tries.toDouble(),
-  void _leaveResponseHandler(dynamic data) {
+              label: tries.toString(),
-    bool ok = data[0];
+              onChanged: (value) {
-    if (!ok) {
-      int status = data[1];
-      Get.snackbar("Error", "Leaving failed with status $status");
-    }
-    socket.off("leaveResponse", _leaveResponseHandler);
-  }
-
-  void _handleLeaveClick(String side) {
-    socket.on("leaveResponse", _leaveResponseHandler);
-    socket.emit("leave", side);
-  }
-
-  void _sendRequestResponseHandler(dynamic data) {
-    bool ok = data[0];
-    if (ok) {
-      Get.snackbar("Success", "Request sent");
-    } else {
-      Get.snackbar("Error", "Request failed");
-    }
-    socket.off("sendRequestResponse", _leaveResponseHandler);
-  }
-
-  void _handleSendRequestClick(String player) {
-    socket.on("sendRequestResponse", _sendRequestResponseHandler);
-    socket.emit("sendRequest", player);
-  }
-
-  void _handleRequestResponseAction(String data, bool response) {
-    socket.emit("requestResponse", [data, response]);
                 setState(() {
-      incommingRequests.remove(data);
+                  tries = value.round();
                 });
+              },
+              min: 10,
+              max: 50,
+              divisions: 40,
+            ),
+            const Text("Needed role:"),
+            Row(
+              children: [
+                Expanded(
+                  child: DropdownButton<String>(
+                    value: role,
+                    items: const [
+                      DropdownMenuItem(
+                        value: "guesser",
+                        child: Text("Guesser"),
+                      ),
+                      DropdownMenuItem(
+                        value: "suggester",
+                        child: Text("Suggester"),
+                      ),
+                    ],
+                    onChanged: (value) {
+                      setState(() {
+                        role = value ?? "guesser";
+                      });
+                    },
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+        actions: [
+          TextButton(
+            onPressed: () {
+              Get.back();
+            },
+            child: const Text("Cancel"),
+          ),
+          TextButton(
+            onPressed: () {
+              Get.back(result: <String, dynamic>{
+                "tries": tries,
+                "role": role,
+              });
+            },
+            child: const Text("Create"),
+          ),
+        ],
+      );
+    }));
+    if (data == null) return;
+
+    tries = data["tries"];
+    role = data["role"];
+
+    socket.emit("createGame", [tries, role]);
+
+    Get.snackbar("Game created", "Game created");
+  }
+
+  void _joinGame(String gameId) {
+    socket.emit("joinGame", gameId);
+  }
+
+  void _deleteGame(String gameId) {
+    Get.defaultDialog(
+      title: "Delete game",
+      content: const Text("Are you sure you want to delete this game?"),
+      textConfirm: "Delete",
+      onConfirm: () {
+        socket.emit("removeGame", gameId);
+        Get.back();
+      },
+      textCancel: "Cancel",
+      onCancel: () {
+        Get.back();
+      },
+    );
   }
 }

lib/ui/pages/testing_grounds_page.dart

@@ -14,18 +14,39 @@ class _TestingGroundsPageState extends State<TestingGroundsPage> {
   final availableGames = <AvailableGame>[].obs;
   final AuthData authData = const AuthData("nuark", "123"); //Get.find();
 
+  @override
+  void initState() {
+    super.initState();
+
+    availableGames.addAll([
+      AvailableGame(
+        id: "1234",
+        opponentName: "nuark",
+        tries: 20,
+        neededRole: "guesser",
+      ),
+      AvailableGame(
+        id: "1235",
+        opponentName: "not_nuark",
+        tries: 20,
+        neededRole: "guesser",
+      ),
+    ]);
+  }
+
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
 
     return Scaffold(
+      appBar: AppBar(
+        title: Obx(() => Text("Available ${availableGames.length} games")),
+      ),
       body: SizedBox(
         width: size.width,
         height: size.height,
         child: Column(
           children: [
-            const Text("Available games"),
-            Obx(() => Text("Count: ${availableGames.length}")),
             Expanded(
               child: ObxValue(
                 (data) => ListView.builder(
@@ -49,9 +70,16 @@ class _TestingGroundsPageState extends State<TestingGroundsPage> {
                         trailing: Row(
                           mainAxisSize: MainAxisSize.min,
                           children: [
+                            if (!you)
                               InkResponse(
-                              onTap: () {},
+                                onTap: () => _joinGame(game.id),
-                              child: const Icon(Icons.connect_without_contact),
+                                child:
+                                    const Icon(Icons.connect_without_contact),
+                              ),
+                            if (you)
+                              InkResponse(
+                                onTap: () => _deleteGame(game.id),
+                                child: const Icon(Icons.delete),
                               ),
                           ],
                         ),
@@ -90,29 +118,35 @@ class _TestingGroundsPageState extends State<TestingGroundsPage> {
   }
 
   void _createGame() async {
-    final data = await Get.dialog<Map<String, dynamic>?>(
-        Builder(builder: (buildContext) {
     var tries = 20;
     var role = "guesser";
-
+    final data = await Get.dialog<Map<String, dynamic>?>(
+        StatefulBuilder(builder: (buildContext, setState) {
       return AlertDialog(
         title: const Text("New game configuration"),
         content: Column(
           mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            const Text("Tries:"),
+            Text("Tries: $tries"),
             Slider(
-              value: 20,
+              value: tries.toDouble(),
+              label: tries.toString(),
               onChanged: (value) {
-                tries = value.toInt();
+                setState(() {
+                  tries = value.round();
+                });
               },
               min: 10,
               max: 50,
               divisions: 40,
             ),
             const Text("Needed role:"),
-            DropdownButton<String>(
+            Row(
-              value: "guesser",
+              children: [
+                Expanded(
+                  child: DropdownButton<String>(
+                    value: role,
                     items: const [
                       DropdownMenuItem(
                         value: "guesser",
@@ -124,9 +158,14 @@ class _TestingGroundsPageState extends State<TestingGroundsPage> {
                       ),
                     ],
                     onChanged: (value) {
+                      setState(() {
                         role = value ?? "guesser";
+                      });
                     },
                   ),
+                ),
+              ],
+            ),
           ],
         ),
         actions: [
@@ -150,6 +189,27 @@ class _TestingGroundsPageState extends State<TestingGroundsPage> {
     }));
     if (data == null) return;
 
+    tries = data["tries"];
+    role = data["role"];
+
     Get.snackbar("Game created", "Game created");
   }
+
+  void _joinGame(String gameId) {}
+
+  void _deleteGame(String gameId) {
+    Get.defaultDialog(
+      title: "Delete game",
+      content: const Text("Are you sure you want to delete this game?"),
+      textConfirm: "Delete",
+      onConfirm: () {
+        availableGames.removeWhere((g) => g.id == gameId);
+        Get.back();
+      },
+      textCancel: "Cancel",
+      onCancel: () {
+        Get.back();
+      },
+    );
+  }
 }

lib/ui/widgets/color_plate.dart

@@ -64,7 +64,7 @@ class _ColorPlateState extends State<ColorPlate> {
         PopupMenuItem(
           enabled: oldState != PlateState.marked,
           value: "mark",
-          child: Text("Mark"),
+          child: const Text("Mark"),
         ),
         const PopupMenuItem(
           value: "cancel",