Frontend WIP - just websocket support left

2025-02-09 21:23:27 -07:00
parent f73bd53214
commit e7641f6aec
19 changed files with 484 additions and 132 deletions
@@ -0,0 +1,167 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:frontend/features/room/service/game_room.dart';
+import 'package:frontend/providers/auth.dart';
+import 'package:go_router/go_router.dart';
+import 'package:logging/logging.dart';
+
+final logger = Logger('JoinRoomHome');
+
+class JoinRoomHome extends ConsumerStatefulWidget {
+  const JoinRoomHome({super.key});
+
+  @override
+  ConsumerState<JoinRoomHome> createState() => _JoinRoomHomeState();
+}
+
+class _JoinRoomHomeState extends ConsumerState<JoinRoomHome> {
+  final _formKey = GlobalKey<FormState>();
+  final _codeController = TextEditingController();
+  final _nameController = TextEditingController();
+  bool _isLoading = false;
+
+  @override
+  void dispose() {
+    _codeController.dispose();
+    _nameController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final jwtAsync = ref.watch(jwtNotifierProvider);
+
+    jwtAsync.whenData((jwt) {
+      logger.fine('Got jwt: ${jwt == null ? 'NULL' : jwt.toString().substring(10)}');
+      if (jwt == null) return;
+      logger.fine('Navigating to game room screen');
+      WidgetsBinding.instance.addPostFrameCallback(
+        (_) => context.go('/room/${jwt.roomUuid}'),
+      );
+    });
+
+    return Scaffold(
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Form(
+          key: _formKey,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              TextFormField(
+                controller: _codeController,
+                textCapitalization: TextCapitalization.characters,
+                style: const TextStyle(
+                  letterSpacing: 1.5,
+                  fontWeight: FontWeight.bold,
+                ),
+                decoration: const InputDecoration(
+                  labelText: 'Enter Room Code',
+                  hintText: 'ABCDEF',
+                  helperText: 'Enter 6 uppercase letters',
+                  border: OutlineInputBorder(),
+                  errorStyle: TextStyle(height: 0.8),
+                  counterText: '', // Hides the built-in counter
+                ),
+                maxLength: 6,
+                textInputAction: TextInputAction.done,
+                inputFormatters: [
+                  // FilteringTextInputFormatter.allow(RegExp('[A-Z]')),
+                  UpperCaseTextFormatter(),
+                ],
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Room code is required';
+                  }
+                  if (value.length != 6) {
+                    return 'Code must be exactly 6 characters';
+                  }
+                  if (!RegExp(r'^[A-Z]{6}$').hasMatch(value)) {
+                    return 'Only uppercase letters are allowed';
+                  }
+                  return null;
+                },
+                onChanged: (value) {
+                  // Convert to uppercase while typing
+                  if (value != value.toUpperCase()) {
+                    _codeController.text = value.toUpperCase();
+                    _codeController.selection = TextSelection.fromPosition(
+                      TextPosition(offset: _codeController.text.length),
+                    );
+                  }
+                },
+              ),
+              const SizedBox(height: 16),
+              TextFormField(
+                controller: _nameController,
+                decoration: const InputDecoration(
+                  labelText: 'Name',
+                  border: OutlineInputBorder(),
+                ),
+                keyboardType: TextInputType.text,
+                maxLength: 20,
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Please enter a name ya goof';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 16),
+              ElevatedButton(
+                onPressed: _isLoading
+                    ? null
+                    : () async {
+                        if (_formKey.currentState!.validate()) {
+                          setState(() => _isLoading = true);
+                          try {
+                            ref.read(
+                              joinRoomProvider(
+                                username: _nameController.text,
+                                code: _codeController.text,
+                              ),
+                            );
+                            // )
+                            //     .whenData(
+                            //   (response) {
+                            //     if (response != null && response.uuid != null) {
+                            //       logger.fine('Navigating to room ${response.uuid}');
+                            //       // context.go('room/${response.uuid}');
+                            //     } else {
+                            //       ScaffoldMessenger.of(context).showSnackBar(
+                            //         SnackBar(
+                            //           content: Text('Unexpected error occurred.'),
+                            //           backgroundColor: Colors.red,
+                            //         ),
+                            //       );
+                            //     }
+                            //   },
+                            // );
+                          } finally {
+                            setState(() => _isLoading = false);
+                          }
+                        }
+                      },
+                child: _isLoading ? const CircularProgressIndicator() : const Text('Join Room'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class UpperCaseTextFormatter extends TextInputFormatter {
+  @override
+  TextEditingValue formatEditUpdate(
+    TextEditingValue oldValue,
+    TextEditingValue newValue,
+  ) {
+    return TextEditingValue(
+      text: newValue.text.toUpperCase(),
+      selection: newValue.selection,
+    );
+  }
+}