n8r/fartstack
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend WIP - just websocket support left

Browse Source
This commit is contained in:
Nathan Anderson
2025-02-09 21:23:27 -07:00
parent f73bd53214
commit e7641f6aec
19 changed files with 484 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lib/features/room/game_room.dart
+42
View File
@@ -0,0 +1,42 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:frontend/providers/auth.dart';
import 'package:go_router/go_router.dart';
import 'package:logging/logging.dart';
final logger = Logger('GameRoomHome');
class GameRoomHome extends ConsumerStatefulWidget {
const GameRoomHome({super.key, this.roomUuid});
final String? roomUuid;
@override
ConsumerState<GameRoomHome> createState() => _GameRoomHomeState();
}
class _GameRoomHomeState extends ConsumerState<GameRoomHome> {
@override
Widget build(BuildContext context) {
final jwtAsync = ref.watch(jwtNotifierProvider);
return Scaffold(
body: jwtAsync.when(
data: (jwt) {
if (jwt == null || jwt.roomUuid != widget.roomUuid) {
logger.fine('Tried to open room, but not authenticated / wrong room');
// return home
context.go('/');
}
return Column(
children: [
Text('Authenticated.'),
Text('Welcome to room ${widget.roomUuid}'),
],
);
},
loading: () => CircularProgressIndicator(),
error: (e, st) => Text('$e, $st'),
),
);
}
}
frontend/lib/features/room/join_room.dart
+167
View File
@@ -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,
);
}
}
frontend/lib/features/room/service/game_room.dart
+37
View File
@@ -0,0 +1,37 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:frontend/providers/auth.dart';
import 'package:frontend/providers/dio.dart';
import 'package:logging/logging.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:shared_models/user.dart';
part 'game_room.g.dart';
final logger = Logger('services/joinRoom');
@riverpod
Future<JoinRoomResponse?> joinRoom(Ref ref, {required String username, required String code}) async {
final dio = ref.read(dioProvider);
try {
final response = await dio.post<Map<String, dynamic>>(
'/join_room',
data: JoinRoomRequest(username: username, roomCode: code).toJson(),
);
if (response.statusCode == 200 && response.data != null) {
final joinResponse = JoinRoomResponse.fromJson(response.data!);
if (joinResponse.token != null) {
logger.fine('Setting token: ${joinResponse.token!.substring(10)}');
await ref.read(jwtNotifierProvider.notifier).setJwt(joinResponse.token!);
}
return joinResponse;
} else {
logger.warning('Could not join room');
}
} catch (e) {
logger.severe('Failed to join room', e, StackTrace.current);
return null;
}
return null;
}
frontend/lib/main.dart
+25 -75
View File
@@ -1,7 +1,17 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:frontend/features/room/join_room.dart';
import 'package:go_router/go_router.dart';
import 'package:shared_models/fart_logger.dart';
import 'features/room/game_room.dart';
void main() {
runApp(const MyApp());
// determine if flutter app is dev or prod env
FartLogger.listen(isDevelopment: kDebugMode);
runApp(ProviderScope(child: const MyApp()));
}
class MyApp extends StatelessWidget {
@@ -9,87 +19,27 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
final router = buildAppRouter();
return MaterialApp.router(
title: 'FartStack Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
routerConfig: router,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
GoRouter buildAppRouter() {
return GoRouter(routes: [
GoRoute(path: '/', builder: (ctx, state) => JoinRoomHome()),
GoRoute(
path: '/room/:roomUuid',
builder: (ctx, state) => GameRoomHome(
roomUuid: state.pathParameters['roomUuid'],
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
//
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
// action in the IDE, or press "p" in the console), to see the
// wireframe for each widget.
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
),
]);
}
frontend/lib/providers/auth.dart
+50 -2
View File
@@ -1,12 +1,60 @@
import 'package:jwt_decoder/jwt_decoder.dart';
import 'package:logging/logging.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:shared_models/jwt.dart';
import 'package:shared_preferences/shared_preferences.dart';
part 'auth.g.dart';
final logger = Logger('provider/auth');
@riverpod
class JwtNotifier extends _$JwtNotifier {
@override
JWTBody? build() {
return null;
Future<JWTBody?> build() async {
if (!await SharedPreferencesAsync().containsKey('jwt')) {
logger.fine('No JWT saved to client');
return null;
}
final jwtString = await SharedPreferencesAsync().getString('jwt');
if (jwtString == null) {
logger.fine('Saved JWT came back null, removing key');
SharedPreferencesAsync().remove('jwt');
return null;
}
final payload = JwtDecoder.tryDecode(jwtString);
if (payload == null) {
logger.fine('Failed to decode JWT, removing key.');
SharedPreferencesAsync().remove('jwt');
return null;
}
try {
final body = JWTBody.fromJson(payload);
return body;
} catch (e) {
logger.shout('Failed to parse JWT payload to JWTBody, something is wrong:', e, StackTrace.current);
return null;
}
}
Future<void> setJwt(String jwt) async {
final payload = JwtDecoder.tryDecode(jwt);
if (payload == null) {
logger.info('Tried to set JWT token that did not decode to payload');
state = AsyncValue.error('JWT set to invalid token', StackTrace.current);
return;
}
logger.fine('Saving jwt token to shared prefs');
await SharedPreferencesAsync().setString('jwt', jwt);
try {
final jwtBody = JWTBody.fromJson(payload);
state = AsyncValue.data(jwtBody);
} catch (e) {
state = AsyncError(e, StackTrace.current);
}
}
}
frontend/lib/providers/dio.dart
+47
View File
@@ -0,0 +1,47 @@
import 'package:dio/dio.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:logging/logging.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'dio.g.dart';
final logger = Logger('Dio');
@riverpod
Dio dio(Ref ref) {
final dio = Dio(BaseOptions(
baseUrl: 'http://localhost:8080',
connectTimeout: const Duration(seconds: 5),
receiveTimeout: const Duration(seconds: 3),
));
dio.interceptors.add(LogInterceptor(responseBody: true));
return dio;
}
// Create a custom LogInterceptor using the logger object
class CustomLogInterceptor extends Interceptor {
@override
void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
logger.info('REQUEST[${options.method}] => PATH: ${options.path}');
return super.onRequest(options, handler);
}
@override
// ignore: strict_raw_type
void onResponse(Response response, ResponseInterceptorHandler handler) {
logger.info(
'RESPONSE[${response.statusCode}] => PATH: ${response.requestOptions.path}',
);
return super.onResponse(response, handler);
}
@override
void onError(DioException err, ErrorInterceptorHandler handler) {
logger.severe(
'ERROR[${err.response?.statusCode}] => PATH: ${err.requestOptions.path}',
);
return super.onError(err, handler);
}
}
frontend/lib/providers/utility.dart
+10
View File
@@ -0,0 +1,10 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:shared_preferences/shared_preferences.dart';
part 'utility.g.dart';
@riverpod
Future<SharedPreferencesAsync> sharedPreferencesAsync(Ref ref) async {
return SharedPreferencesAsync();
}