From 1f96d3221f793ceb083d6f79f8d43e7fe773dce7 Mon Sep 17 00:00:00 2001
From: xuelinglow <xuelinglow09@gmail.com>
Date: Wed, 13 Nov 2024 20:36:36 +0800
Subject: [PATCH 1/3] Make changes to output window

---
 frontend/Dockerfile                           | 20 +++++++++++
 frontend/src/components/OutputWindow.js       | 32 ++++++-----------
 frontend/src/components/styles/CodeEditor.css | 13 -------
 .../src/components/styles/OutputWindow.css    | 34 +++++++++++++++++++
 4 files changed, 65 insertions(+), 34 deletions(-)
 create mode 100644 frontend/Dockerfile
 create mode 100644 frontend/src/components/styles/OutputWindow.css

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000000..f2952f8894
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,20 @@
+# Use an official Node.js runtime as a parent image
+FROM node:20-alpine
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install any dependencies
+RUN npm install
+
+# Bundle app source inside the Docker image
+COPY . .
+
+# Make port 3000 available to the world outside this container
+EXPOSE 3000
+
+# Define the command to run your app
+CMD ["npm", "start"]
\ No newline at end of file
diff --git a/frontend/src/components/OutputWindow.js b/frontend/src/components/OutputWindow.js
index 6dbc14f9e2..e64220e862 100644
--- a/frontend/src/components/OutputWindow.js
+++ b/frontend/src/components/OutputWindow.js
@@ -1,3 +1,5 @@
+import "./styles/OutputWindow.css";
+
 const OutputWindow = ({ outputDetails }) => {
   const getOutput = () => {
     let statusId = outputDetails?.status?.id;
@@ -5,13 +7,13 @@ const OutputWindow = ({ outputDetails }) => {
     if (statusId === 6) {
       // Compilation error
       return (
-        <pre style={{ padding: "8px", fontSize: "12px", color: "red" }}>
+        <pre className="output-text error-text">
           {atob(outputDetails?.compile_output)}
         </pre>
       );
     } else if (statusId === 3) {
       return (
-        <pre style={{ padding: "8px", fontSize: "12px", color: "green" }}>
+        <pre className="output-text success-text">
           {outputDetails.stdout
             ? `${atob(outputDetails.stdout)}`
             : "Compiled successfully"}
@@ -19,13 +21,11 @@ const OutputWindow = ({ outputDetails }) => {
       );
     } else if (statusId === 5) {
       return (
-        <pre style={{ padding: "8px", fontSize: "12px", color: "red" }}>
-          {`Time Limit Exceeded`}
-        </pre>
+        <pre className="output-text error-text">{`Time Limit Exceeded`}</pre>
       );
     } else {
       return (
-        <pre style={{ padding: "8px", fontSize: "12px", color: "red" }}>
+        <pre className="output-text error-text">
           {atob(outputDetails?.stderr)}
         </pre>
       );
@@ -34,21 +34,11 @@ const OutputWindow = ({ outputDetails }) => {
 
   return (
     <>
-      <h1 style={{ fontWeight: "bold", fontSize: "24px", marginBottom: "8px" }}>
-        Output
-      </h1>
-      <div
-        style={{
-          width: "100%",
-          height: "220px", 
-          backgroundColor: "#1e293b",
-          borderRadius: "8px",
-          color: "white",
-          overflowY: "auto",
-          padding: "8px", 
-        }}
-      >
-        {outputDetails ? <>{getOutput()}</> : null}
+      <div className="output-window">
+        <h1 className="output-title">Output</h1>
+        <div className="output-container">
+          {outputDetails ? getOutput() : null}
+        </div>
       </div>
     </>
   );
diff --git a/frontend/src/components/styles/CodeEditor.css b/frontend/src/components/styles/CodeEditor.css
index 22899bdd29..6f7f7c06bd 100644
--- a/frontend/src/components/styles/CodeEditor.css
+++ b/frontend/src/components/styles/CodeEditor.css
@@ -35,16 +35,3 @@
 #codeButton:active {
   background-color: #e0e0e0;
 }
-
-#outputWindow {
-  background-color: #f9f9f9; /* Light grey background for output */
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 15px;
-  margin-top: 20px;
-  font-family: monospace; /* Use a monospace font for code output */
-  white-space: pre-wrap; /* Preserve whitespace */
-  max-height: 400px; /* Limit height for scrolling */
-  overflow-y: auto; /* Add scrollbar if content overflows */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
-}
diff --git a/frontend/src/components/styles/OutputWindow.css b/frontend/src/components/styles/OutputWindow.css
new file mode 100644
index 0000000000..2172137064
--- /dev/null
+++ b/frontend/src/components/styles/OutputWindow.css
@@ -0,0 +1,34 @@
+.output-window {
+    width: 100%;
+  }
+  
+  .output-title {
+    font-weight: bold;
+    font-size: 24px;
+    margin-bottom: 8px;
+  }
+  
+  .output-container {
+    border: 2px solid var(--sds-color-border-default-default);
+    width: 100%;
+    height: 220px;
+    background-color: #1e293b;
+    border-radius: 8px;
+    color: white;
+    overflow-y: auto;
+    padding: 8px;
+  }
+  
+  .output-text {
+    padding: 8px;
+    font-size: 12px;
+  }
+  
+  .success-text {
+    color: green;
+  }
+  
+  .error-text {
+    color: red;
+  }
+  
\ No newline at end of file

From 84aa03235e06919a6586cf4401ad21503df128c5 Mon Sep 17 00:00:00 2001
From: xuelinglow <xuelinglow09@gmail.com>
Date: Wed, 13 Nov 2024 20:46:45 +0800
Subject: [PATCH 2/3] Remove console logs for testing

---
 backend/collaboration-service/handler/socketHandler.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/collaboration-service/handler/socketHandler.js b/backend/collaboration-service/handler/socketHandler.js
index 04f4d4ed02..8cc9c7f1b4 100644
--- a/backend/collaboration-service/handler/socketHandler.js
+++ b/backend/collaboration-service/handler/socketHandler.js
@@ -195,7 +195,6 @@ const handleSocketIO = (apiGatewaySocket) => {
       activeUserInRoom[roomId] - 1
     );
 
-    console.log("HELP", activeUserInRoom[roomId]);
     setTimeout(() => {
       if (!isRefreshOrClose) { //reconnected
         activeUserInRoom[roomId] += 1; 

From d4deb25316e285c2408c5d5df347e675712ebdbd Mon Sep 17 00:00:00 2001
From: xuelinglow <xuelinglow09@gmail.com>
Date: Wed, 13 Nov 2024 21:40:49 +0800
Subject: [PATCH 3/3] Make changes to outputWindow css

---
 .../src/components/styles/OutputWindow.css    | 62 +++++++++----------
 1 file changed, 28 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/styles/OutputWindow.css b/frontend/src/components/styles/OutputWindow.css
index 2172137064..4528907594 100644
--- a/frontend/src/components/styles/OutputWindow.css
+++ b/frontend/src/components/styles/OutputWindow.css
@@ -1,34 +1,28 @@
-.output-window {
-    width: 100%;
-  }
-  
-  .output-title {
-    font-weight: bold;
-    font-size: 24px;
-    margin-bottom: 8px;
-  }
-  
-  .output-container {
-    border: 2px solid var(--sds-color-border-default-default);
-    width: 100%;
-    height: 220px;
-    background-color: #1e293b;
-    border-radius: 8px;
-    color: white;
-    overflow-y: auto;
-    padding: 8px;
-  }
-  
-  .output-text {
-    padding: 8px;
-    font-size: 12px;
-  }
-  
-  .success-text {
-    color: green;
-  }
-  
-  .error-text {
-    color: red;
-  }
-  
\ No newline at end of file
+.output-title {
+  font-weight: bold;
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.output-container {
+  border: 2px solid var(--sds-color-border-default-default);
+  height: 220px;
+  background-color: #1e293b;
+  border-radius: 8px;
+  color: white;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.output-text {
+  padding: 8px;
+  font-size: 12px;
+}
+
+.success-text {
+  color: green;
+}
+
+.error-text {
+  color: red;
+}