added deploying to ECS

.circleci/config.yml

@@ -1,8 +1,8 @@
 version: 2.1
 orbs:
-  aws-cli: circleci/aws-cli@4.1.2
+    aws-cli: circleci/aws-cli@4.1.2
-  aws-ecr: circleci/aws-ecr@9.0.1
+    aws-ecr: circleci/aws-ecr@9.0.1
-
+    aws-ecs: circleci/aws-ecs@4.0.0
 jobs:
     build_and_test:
         docker:
@@ -27,23 +27,41 @@ jobs:
                   name: Test Frontend
                   command: |
                       npm test
-
+    run_task:
+        docker:
+            - image: cimg/python:3.10
+        steps:
+            - aws-cli/setup:
+                  role_arn: arn:aws:iam::797929460436:role/ecs
+                  role_session_name: example-session
+            - aws-ecs/run_task:
+                  awsvpc: false
+                  cluster: arn:aws:ecs:eu-north-1:797929460436:cluster/mern-ludo-cluster
+                  launch_type: EC2
+                  task_definition: mern-ludo-docker-task
 
 workflows:
-  test: 
+    build_and_test_and_deploy:
-    jobs:
+        jobs:
-      - build_and_test
+            - build_and_test
-  build_and_deploy:
+            - aws-ecr/build_and_push_image:
-    jobs:
+                  auth:
-      - aws-ecr/build_and_push_image:
+                      - aws-cli/setup:
-            auth:
+                            role_arn: arn:aws:iam::797929460436:role/openid
-                - aws-cli/setup:
+                            role_session_name: example-session
-                    role_arn: arn:aws:iam::797929460436:role/openid
+                  repo: mern-ludo
-                    role_session_name: example-session
+                  public_registry: true
-            repo: mern-ludo
+                  tag: latest
-            public_registry: true
+                  requires:
-            tag: latest
+                      - build_and_test
-            filters:
+                  filters:
-                branches:
+                      branches:
-                    only:
+                          only:
-                        - main
+                              - main
+            - run_task:
+                  requires:
+                      - aws-ecr/build_and_push_image
+                  filters:
+                      branches:
+                          only:
+                              - main

README.md

@@ -3,8 +3,8 @@
 Ludo Online is a multiplayer web-based implementation of the classic board game Ludo, built using the MERN stack and integrated with SocketIO for real-time communication.
 
 <p align="center">
->> Play Online here <<
+>> <a href="http://ec2-51-20-142-4.eu-north-1.compute.amazonaws.com:8080">Play online here</a> <<
-</p>
+  </p>
   
 <p align="center">
 >> <a href="https://youtu.be/mGMnH9Nvsyw">Watch YouTube Video here</a> <<
@@ -29,7 +29,7 @@ Tests:
 
 ![cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?style=for-the-badge&logo=cypress&logoColor=058a5e) ![Mocha](https://img.shields.io/badge/-mocha-%238D6748?style=for-the-badge&logo=mocha&logoColor=white) ![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)
 
-Tools:
+Other:
 
 ![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white) ![AWS](https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&logo=amazon-aws&logoColor=white) ![CircleCI](https://img.shields.io/badge/circle%20ci-%23161616.svg?style=for-the-badge&logo=circleci&logoColor=white) ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![Jira](https://img.shields.io/badge/jira-%230A0FFF.svg?style=for-the-badge&logo=jira&logoColor=white)
 
@@ -41,12 +41,11 @@ Tools:
 
 -   Maintained code reliability by implementing unit and integration tests using **Mocha**, **Chai**, and **Jest**.
 
--   Hosted in a **Docker** container on **AWS EC2**.
-
--   Established CI/CD using **CircleCI**.
-
 -   Implemented E2E tests utilizing **Cypress**, addressing challenges related to [testing collaboration](https://docs.cypress.io/guides/references/trade-offs#Multiple-browsers-open-at-the-same-time) and canvas functionality in the application.
 
+-   Established a CI/CD pipeline using **CircleCI**, with pushing **Docker** container to **AWS ECR** and deploying to **AWS ECS**
+
+
 ## Installation
 
 1.  Download this repository

src/components/LoginPage/JoinServer/JoinServer.module.css

@@ -1,7 +1,7 @@
 .serversTableContainer {
     display: flex;
-    height: 500px;
     overflow: scroll;
+    height: 500px;
     width: 100%;
 }
 .refresh {

src/components/LoginPage/JoinServer/ServersTable/ServersTable.module.css

@@ -1,6 +1,8 @@
 .roomName {
     max-width: 150px;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     text-align: left !important;
 }
 .rooms > thead > tr :nth-child(2) {
@@ -30,6 +32,7 @@
 .rooms {
     border-collapse: collapse;
     width: 100%;
+    height: fit-content;
 }
 
 .lastColumn {