made create/join room functional and showing touch pointer

client/lib/HomeScreen.dart

@@ -0,0 +1,481 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart'; // for going in fullscreen mode
+
+import 'package:shared_preferences/shared_preferences.dart';
+
+import 'package:web_socket_channel/web_socket_channel.dart';
+import 'package:web_socket_channel/status.dart' as status;
+
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+
+import "dart:convert";
+
+void enterFullScreen(){
+  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive,overlays: []);
+}
+void exitFullScreen(){
+  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays:SystemUiOverlay.values);
+}
+
+class HomeScreen extends StatefulWidget{
+  const HomeScreen({super.key});
+  
+
+  @override
+  State<HomeScreen> createState(){
+    return HomeScreenState();
+  }
+}
+
+class HomeScreenState extends State<HomeScreen>{
+  late WebSocketChannel channel;
+  late double width,height;
+  late SharedPreferences prefs;
+  double containerHeight = 0,containerWidth=0;
+  double touchX = 0,touchY=0;
+  bool touchIsVisible=false;
+  late List<String> roomidList,roomnameList;
+  String currRoomId="",currRoomName="";
+  String username="";
+  String profileColor="";
+  final double outsidepadding=15;
+
+  @override
+  void initState(){
+    super.initState();
+    enterFullScreen();
+    roomidList=[];
+    roomnameList=[];
+
+    // roomidList=["1","2"];
+    // roomnameList=["room 1","room 2"];
+    getPreferences();
+    // setPreferences();
+    connectWebsocket();
+  }
+
+  @override
+  void dispose(){
+    exitFullScreen();
+    channel.sink.close();
+    super.dispose();
+  }
+
+  void getPreferences() async{
+    prefs = await SharedPreferences.getInstance();
+
+    // initialize empty room list if no preferences found
+    if(!prefs.containsKey("roomid_list")){
+      prefs.setStringList("roomid_list",[]);
+      prefs.setStringList("roomname_list",[]);
+    }
+    // intialize from preferences
+    setState(() {
+      roomidList=prefs.getStringList("roomid_list")!;
+      roomnameList=prefs.getStringList("roomname_list")!;
+      username=prefs.getString("username")!;
+      profileColor=prefs.getString("profile_color")!;
+    });
+  }
+
+  
+
+  void connectWebsocket() async{
+
+    try{
+      channel=WebSocketChannel.connect(Uri.parse(
+        "ws://localhost:3000"
+      ));
+
+      await channel.ready;  // after this we are connected to the server
+    }
+    catch(e){
+      print("Can't connect to the web socket server");
+      return;
+    }
+
+    // test connection
+    Object data = {
+      "route":"test_connection"
+    };
+    channel.sink.add(json.encode(data));
+
+
+    // // set username
+    // data = {
+    //   "route": "set_username",
+    //   "username": "anuj",
+    // };
+    // channel.sink.add(json.encode(data));
+
+    
+    
+    // // get rooms
+    // data = {
+    //   "route": "get_rooms",
+    // };
+    // channel.sink.add(json.encode(data));
+    
+    channel.stream.listen((message) {
+      // message.get
+      final Map map;
+      final String type;
+      try{
+        map = jsonDecode(message);
+      }
+      catch(e){
+        print("can't decode to json:\t"+message);
+        return;
+      }
+      
+      // if any error found do nothing
+      if(map.containsKey("error")){
+        print(map);
+        return;
+      }
+      
+      type = map["message"];
+
+      if(type=="test_connection_response"){
+        // testing connection
+        print("test_connection successful");
+
+      }
+      else if(type=="join_room_response"){
+        print(map);
+      }
+      else if(type=="set_username_response"){
+        print(map);
+      }
+      else if(type=="get_rooms_response"){
+        print(map);
+      }
+      else if(type=="room_update"){
+        print(map);
+        enterRoom(map);
+      }
+
+    });
+    
+  }
+
+  void enterRoom(Map roomdata){
+    setState((){
+      currRoomId=roomdata['roomId'];
+      currRoomName=roomdata['roomId'];
+    });
+  }
+
+  void toggleContainer(){
+    if(containerHeight==0){
+      setState(() {
+        containerHeight=200;
+        containerWidth=width;
+      });
+    }
+    else{
+      setState(() {
+        containerHeight=0;
+        containerWidth=0;
+      });
+    }
+  }
+
+  void createRoom({String roomId=""}) async{
+    // it is used to create a room in server
+    Map data;
+
+    try{
+      await channel.ready;
+    }
+    catch(e){
+      print("Can't connect to the web socket server");
+      return;
+    }
+
+    // join room
+    data = {
+      "route": "join_room",
+      "username": username,
+    };
+
+    // to join existing room 
+    if(roomId.isNotEmpty){
+      data["roomId"]=roomId;
+    }
+    channel.sink.add(json.encode(data));
+
+    // we will move to the room screen with the server data
+    // from the room_update callback
+  }
+
+  void joinRoomForm(){
+    // close old dialog
+    showDialog(
+      context: context, 
+      builder:(context) {
+        // return SingleChildScrollView(
+        //   child: Text("Enter Room ID"),
+        // );
+        return AlertDialog(
+          content:SingleChildScrollView(
+            child:Column(
+              children: [
+                TextField(
+                  decoration:const InputDecoration(
+                    hintText: "Enter Room ID",
+                  ),
+                  onSubmitted: (value){
+                    Navigator.pop(context); // close the dialog
+                    createRoom(roomId:value); // join room
+                  },
+                ),
+            ])
+          ),
+        );
+      },
+    );
+  }
+  
+  Widget header(){
+    final Color buttoncolor=Color.fromARGB(255, 70, 70, 70);
+    return Padding(
+      padding:EdgeInsets.symmetric(vertical:20),
+      child:Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              // create/join room popup 
+              CircleAvatar(
+                backgroundColor: buttoncolor,
+                child: PopupMenuButton(
+                  onSelected: (value){
+                    switch(value){
+                      case 'createRoom':
+                        return createRoom();
+                      case 'joinRoom':
+                        return joinRoomForm();
+                      default:
+                        throw UnimplementedError();
+                    }
+                  },
+                  icon:const Icon(Icons.add,color:Colors.white),
+                  tooltip: "Create/Join Room",
+                  itemBuilder: (context)=>const[
+              
+                    PopupMenuItem(
+                      value:"createRoom",
+                      child: Text("Create Room"),
+                    ),
+              
+                    PopupMenuItem(
+                      value:"joinRoom",
+                      child: Text("Join Room"),
+                    ),
+                 
+                  ],
+                ),
+              ),
+            
+              GestureDetector(
+                onTap:toggleContainer,
+                child:Row(
+                  children:[
+                    Text(
+                      currRoomName.isEmpty?"Lobby":currRoomName,
+                      style:TextStyle(
+                        fontSize: 20,
+                        fontWeight: FontWeight.w500,
+                        overflow:TextOverflow.ellipsis,
+                      ),
+                    ),
+                    if(containerHeight==0)...[
+
+                    Icon(Icons.arrow_drop_down),
+                    ]
+                    else...[
+                    Icon(Icons.arrow_drop_up),
+                    ]   
+
+                ]),
+              ),
+
+                  
+            
+            
+
+              // setting button
+              CircleAvatar(
+                backgroundColor: buttoncolor,
+                child:IconButton(
+                  // iconSize:30,
+                  tooltip: "setings",
+                  onPressed: (){},
+                  icon: Icon(
+                    Icons.settings,
+                    color:Colors.white,
+                  ),
+                ),
+              ),
+      ]),
+
+
+
+
+    );
+  }
+
+  void detectTouchStart(DragStartDetails details){
+    // we have to stop see touch out of touch area
+    print(details.localPosition);
+    setState(() {
+      touchX = details.globalPosition.dx;
+      touchY = details.globalPosition.dy;
+      touchIsVisible=true; // show it
+    });
+  }
+  void detectTouchUpdate(DragUpdateDetails details){
+    // we have to stop see touch out of touch area
+    
+    print(details.localPosition);
+    setState(() {
+      touchX = details.globalPosition.dx;
+      touchY = details.globalPosition.dy;
+    });
+    // print(profileColor);
+    // print(details.globalPosition);
+  }
+
+  void detectTouchEnd(DragEndDetails details){
+    
+    setState(() {
+      touchX = 0;
+      touchY = 0;
+      touchIsVisible=false; // hide it
+    });
+    
+  }
+
+  Widget mainSection(){
+    return Expanded(
+      child: GestureDetector(
+        onPanStart:(details){
+          detectTouchStart(details);
+        },
+        onPanUpdate:(details){
+          detectTouchUpdate(details);
+        },
+        onPanEnd:(details){
+          detectTouchEnd(details);
+        },
+        child:Container(
+          decoration: BoxDecoration(
+            // color:Colors.grey.shade900,
+            color:Color.fromARGB(255, 30, 30, 30),
+            borderRadius: BorderRadius.circular(50),
+          ),
+          // width:width*0.9,
+           
+        ),
+      ),
+    );
+  }
+
+  
+
+  Widget build(BuildContext){
+    width=MediaQuery.of(context).size.width-(outsidepadding*2);
+    height=MediaQuery.of(context).size.height-(outsidepadding*2);
+
+    return Scaffold(
+      // backgroundColor: Color(0xff0e0e0e),
+      // backgroundColor: Colors.white,
+      body:Stack(
+        alignment: Alignment.center,
+        children: [
+
+          // background
+          Container(
+            color:Color.fromARGB(255, 14, 14, 14),
+          ),
+
+          //overlay
+          
+          Padding(
+            padding: EdgeInsets.all(outsidepadding),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                header(),
+                mainSection(),
+              ],
+            ),
+          ),
+
+          //floating Room section
+          Positioned(
+            top:100,
+            child: AnimatedContainer(
+              duration: Duration(milliseconds: 100),
+              height: containerHeight,
+              width: containerHeight,
+              clipBehavior: Clip.hardEdge,
+              decoration: BoxDecoration(
+                color:const Color.fromARGB(255, 67, 67, 67),
+                borderRadius: BorderRadius.circular(40),
+              ),
+              child: ListView.builder(
+                itemCount: roomidList.length,
+                itemBuilder: ((context, index){
+                  return Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    // crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      Expanded(
+                        child: Container(
+                          padding:EdgeInsets.all(8),
+                          decoration: BoxDecoration(
+                            // border:Border(
+                            //   bottom:BorderSide(
+                            //     color:Color.fromRGBO(200, 200, 200, 1),
+                            //     width: 4
+                            //   ),
+                            // ),
+                          ),
+                          child: Text(
+                            roomnameList[index],
+                            textAlign:TextAlign.center,
+                            maxLines: 1,
+                            style:TextStyle(
+                              fontSize:20,
+                              overflow: TextOverflow.clip,
+                              
+                            ),
+                            )
+                        ),
+                      ),
+                    ],
+                  );
+              })),
+              curve: Curves.easeIn,
+            ),
+          ),
+
+          // touch point
+          Visibility(
+            visible:touchIsVisible,
+            child: Positioned(
+              left:touchX,
+              top:touchY,
+              child: Container(
+                width:50,
+                height:50,
+                color:colorFromHex(profileColor),
+              ),
+            ),
+          ),
+        
+      ]),
+
+    );
+  }
+}

client/lib/LobbyScreen.dart

@@ -23,18 +23,25 @@ class LobbyScreenState extends State<LobbyScreen>{
   late String username;
   late Color profileColor;
   late WebSocketChannel channel;
+  late List<String> roomidList;
 
   @override
   void initState(){
     super.initState();
     username="";
     profileColor=Colors.black;
+    roomidList=[];
     loadPreferences();
     // deletePreferences();
     connectWebsocket();
+ 
+  }
 
-    
-    
+  @override
+  void dispose() async{
+
+    await channel.sink.close();
+    super.dispose();
   }
   void connectWebsocket() async{
 
@@ -57,17 +64,18 @@ class LobbyScreenState extends State<LobbyScreen>{
     channel.sink.add(json.encode(data));
 
 
-    // set username
+    // // set username
     // data = {
     //   "route": "set_username",
     //   "username": "anuj",
     // };
     // channel.sink.add(json.encode(data));
 
-    // join room
+    
+    
+    // // get rooms
     // data = {
-    //   "route": "join_room",
-    //   "username": "anuj",
+    //   "route": "get_rooms",
     // };
     // channel.sink.add(json.encode(data));
     
@@ -99,19 +107,72 @@ class LobbyScreenState extends State<LobbyScreen>{
       else if(type=="join_room_response"){
         print(map);
       }
-      else if(type=="set_user_response"){
+      else if(type=="set_username_response"){
         print(map);
       }
+      else if(type=="get_rooms_response"){
+        print(map);
+      }
+      else if(type=="room_update"){
+        print(map);
+        goToRoom(map);
+      }
 
     });
     
-    
   }
+
+  void goToRoom(roomdata){
+    // if(!roomidList.contains(roomdata['roomId'])){
+    //   setState((){
+    //     // update roomidList
+    //     roomidList.add(roomdata['roomId']);
+    //   });
+    // }
+    Navigator.push(
+      context,
+      MaterialPageRoute(
+        builder:(context) => RoomScreen(roomdata:roomdata),
+        )
+    );
+  }
+
+  void createRoom({String roomId=""}) async{
+    // it is used to create a room in server
+    Map data;
+
+    try{
+      await channel.ready;
+    }
+    catch(e){
+      print("Can't connect to the web socket server");
+      return;
+    }
+
+    // join room
+    data = {
+      "route": "join_room",
+      "username": username,
+    };
+
+    // to join existing room 
+    if(roomId.isNotEmpty){
+      data["roomId"]=roomId;
+    }
+    channel.sink.add(json.encode(data));
+
+    // we will move to the room screen with the server data
+    // from the room_update callback
+  }
+
   void loadPreferences() async{
     prefs = await SharedPreferences.getInstance();
     setState(() {
       username= prefs.getString("username")!;
-      profileColor= colorFromHex(prefs.getString("profile_color")!)!;
+      profileColor = colorFromHex(prefs.getString("profile_color")!)!;
+      if(prefs.containsKey("roomid_list")){
+        roomidList = prefs.getStringList("roomid_list")!;
+      }
     });
   }
   void deletePreferences() async{
@@ -119,6 +180,7 @@ class LobbyScreenState extends State<LobbyScreen>{
     prefs.remove('setup_done');
     prefs.remove('username');
     prefs.remove('profile_color');
+    prefs.remove('roomid_list');
   }
 
   Widget buildEmptyLobby(){
@@ -126,17 +188,12 @@ class LobbyScreenState extends State<LobbyScreen>{
       "No Rooms yet"
       );
   }
-  void goToRoom(){
-    Navigator.push(
-      context,
-      MaterialPageRoute(
-        builder:(context) => RoomScreen(),
-        )
-    );
-  }
-  Widget buildRoomTile(){
+  
+  Widget buildRoomTile(index){
     return GestureDetector(
-      onTap:goToRoom,
+      onTap:(){
+        createRoom(roomId:roomidList[index]);
+      },
       child:Container(
         height:170,
         margin:const EdgeInsets.only(top:40)+const EdgeInsets.symmetric(horizontal:20),
@@ -148,7 +205,7 @@ class LobbyScreenState extends State<LobbyScreen>{
         child:Row(
           children:[
             Text(
-              "Room 1",
+              roomidList[index],  // room name
               style:TextStyle(
                 color:Colors.white,
                 fontSize:20,
@@ -168,7 +225,7 @@ class LobbyScreenState extends State<LobbyScreen>{
         ),
       ),
       
-      onPressed: (){}, 
+      onPressed: createRoom, 
       child: Container(
         padding:const EdgeInsets.all(20),
         child:const Text("New Room",
@@ -194,9 +251,9 @@ class LobbyScreenState extends State<LobbyScreen>{
 
           Expanded(
             child:ListView.builder(
-              itemCount: 2,
+              itemCount: roomidList.length,
               itemBuilder: (context, index){
-                return buildRoomTile();
+                return buildRoomTile(index);
               },
             ),
           

client/lib/RoomScreen.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart'; // for going in fullscreen mode
 
+import 'package:shared_preferences/shared_preferences.dart';
+
 void enterFullScreen(){
   SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive,overlays: []);
 }
@@ -9,7 +11,8 @@ void exitFullScreen(){
 }
 
 class RoomScreen extends StatefulWidget{
-  const RoomScreen({super.key});
+  RoomScreen({super.key,required this.roomdata});
+  Map roomdata;
 
   @override
   State<RoomScreen> createState(){
@@ -18,12 +21,16 @@ class RoomScreen extends StatefulWidget{
 }
 
 class RoomScreenState extends State<RoomScreen>{
-  late double width,height;
   
+  late double width,height;
+  late SharedPreferences prefs;
+  double containerHeight = 0;
+
   @override
   void initState(){
     super.initState();
     enterFullScreen();
+    setPreferences();
   }
 
   @override
@@ -32,46 +39,113 @@ class RoomScreenState extends State<RoomScreen>{
     super.dispose();
   }
 
+  void setPreferences() async{
+    prefs = await SharedPreferences.getInstance();
+    List<String> roomIds=[];
+    
+    // read old rooms list
+    if(prefs.containsKey("roomid_list")){
+      roomIds=prefs.getStringList("roomid_list")!;
+    }
+
+    //add new room if not already exists
+    if(!roomIds.contains(widget.roomdata["roomId"])){
+      roomIds.add(widget.roomdata["roomId"]);
+    }
+
+    // update rooms_list in preferences
+    prefs.setStringList("roomid_list", roomIds);
+    
+  }
+
+  void toggleContainer(){
+    if(containerHeight==0){
+      setState(() {
+        containerHeight=height*0.7;
+      });
+    }
+    else{
+      setState(() {
+        containerHeight=0;
+      });
+    }
+  }
   Widget header(){
     final Color buttoncolor=Color.fromARGB(255, 70, 70, 70);
     return Padding(
       padding:EdgeInsets.symmetric(vertical:20),
-      child:Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      child:Stack(
+        fit: StackFit.passthrough,
+        clipBehavior: Clip.none,
+        alignment: Alignment.center,
         children: [
-          // add people button
-          CircleAvatar(
-            backgroundColor: buttoncolor,
-            child:IconButton(
-              style:IconButton.styleFrom(
+
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              // add people button
+              CircleAvatar(
+                backgroundColor: buttoncolor,
+                child:IconButton(
+                  style:IconButton.styleFrom(
+                  ),
+                  onPressed: (){},
+                  icon: Icon(Icons.add,color:Colors.white),
+                ),
+              ),
+
+
+            
+              GestureDetector(
+                onTap:toggleContainer,
+                child:Row(
+                  children:[
+                    Text(
+                      widget.roomdata['roomId'],
+                      style:TextStyle(
+                        fontSize: 20,
+                        fontWeight: FontWeight.w500,
+                        overflow:TextOverflow.ellipsis,
+                      ),
+                    ),
+                    Icon(Icons.arrow_drop_down),   
+
+                ]),
               ),
-              onPressed: (){},
-              icon: Icon(Icons.add,color:Colors.white),
-            ),
-          ),
-          
-
-          Text(
-            "Room Name",
-            style:TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.w500,
-            ),
-          ),
-
-          // setting button
-          CircleAvatar(
-            backgroundColor: buttoncolor,
-            child:IconButton(
-              // iconSize:30,
-              onPressed: (){},
-              icon: Icon(
-                Icons.settings,
-                color:Colors.white,
+
+                  
+            
+            
+
+              // setting button
+              CircleAvatar(
+                backgroundColor: buttoncolor,
+                child:IconButton(
+                  // iconSize:30,
+                  onPressed: (){},
+                  icon: Icon(
+                    Icons.settings,
+                    color:Colors.white,
+                  ),
+                ),
               ),
-            ),
-          ),
+          ]),
+
+      // room info container
+      Positioned(
+        top:20,
+        // top:20,
+        child:SizedBox(
+          height: 200,
+          width:200,
+          child:Container(color:Colors.white) ,
+        ),
+      ),
+
+
+
       ]),
+      
     );
   }
   Widget mainSection(){

client/lib/SetupScreen.dart

@@ -4,6 +4,7 @@ import 'package:hapticlink/LobbyScreen.dart';
 import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 import 'Colors/CustomColorPicker.dart';
 import "CustomButton.dart";
+import "HomeScreen.dart";
 
 class SetupScreen extends StatefulWidget{
   const SetupScreen({super.key});
@@ -145,7 +146,8 @@ class _SetupScreenState extends State<SetupScreen>{
       Navigator.pushReplacement(
         context,
         MaterialPageRoute(
-          builder: (context)=>LobbyScreen()
+          // builder: (context)=>LobbyScreen()
+          builder: (context)=>HomeScreen()
           ),
         
         );

client/lib/main.dart

@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:after_layout/after_layout.dart';
-import 'package:hapticlink/LobbyScreen.dart';
 import 'package:shared_preferences/shared_preferences.dart';
+import 'LobbyScreen.dart';
 import  'SetupScreen.dart';
+import  'HomeScreen.dart';
 import 'Loading.dart';
 
 void main() {
@@ -53,7 +54,8 @@ class SplashState extends State<Splash> with AfterLayoutMixin<Splash>{
       Navigator.pushReplacement(
         context,
         MaterialPageRoute(
-          builder: (context)=>LobbyScreen()
+          // builder: (context)=>LobbyScreen()
+          builder: (context)=>HomeScreen()
           )
         );
     }

server/src/socket/routes.ts

@@ -2,6 +2,7 @@ import { HapticLinkServer } from "./hapticLinkServer";
 import JoinRoomRoute from "./routes/join_room";
 import LeaveRoomRoute from "./routes/leave_room";
 import SendVibrationRoute from "./routes/send_vibration";
+import SetUsernameRoute from "./routes/set_username";
 import TestConnectionRoute from "./routes/test_connection";
 
 export function registerRoutes(router: HapticLinkServer) {
@@ -9,4 +10,5 @@ export function registerRoutes(router: HapticLinkServer) {
     router.addRoute(JoinRoomRoute);
     router.addRoute(LeaveRoomRoute);
     router.addRoute(SendVibrationRoute);
+    router.addRoute(SetUsernameRoute);
 }