Evolved UI

sethupavan12 · Aug 2, 2024 · 48e1379 · 48e1379
1 parent 6af62ca
commit 48e1379
Show file tree

Hide file tree

Showing 4 changed files with 386 additions and 125 deletions.
diff --git a/turing-arena-frontend/package-lock.json b/turing-arena-frontend/package-lock.json
diff --git a/turing-arena-frontend/package.json b/turing-arena-frontend/package.json
@@ -13,14 +13,14 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
     "framer-motion": "^11.3.17",
+    "gh-pages": "^3.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "react-tsparticles": "^2.12.2",
     "simplex-noise": "^4.0.2",
     "web-vitals": "^2.1.4",
-    "webgl-fluid": "^0.3.8",
-    "gh-pages": "^3.2.3"
+    "webgl-fluid": "^0.3.8"
   },
   "scripts": {
     "predeploy": "npm run build",
@@ -47,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/turing-arena-frontend/src/App.css b/turing-arena-frontend/src/App.css
@@ -1,9 +1,8 @@
-/* src/App.css */
 body {
   background-color: black;
   color: #ffffff;
   font-family: 'Roboto', sans-serif;
-  overflow: hidden;
+  overflow-x: hidden;
   position: relative;
 }
 
@@ -15,6 +14,7 @@ body {
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), rgba(255, 0, 0, 0.1), rgba(0, 255, 0, 0.1), rgba(0, 0, 255, 0.1), transparent);
   animation: wave 10s infinite linear;
+  z-index: -1;
 }
 
 @keyframes wave {
@@ -31,13 +31,17 @@ body {
   padding: 10px;
 }
 
-.paper {
+.main-container {
+  min-height: 100vh;
+  padding-bottom: 50px; /* Extra space for the leaderboard */
+}
+
+.paper, .chat-window {
   background-color: rgba(255, 255, 255, 0.9) !important;
   color: #000000 !important;
   border-radius: 15px;
   position: relative;
   overflow: hidden;
-  animation: borderAnimation 5s infinite;
 }
 
 @keyframes borderAnimation {
@@ -108,11 +112,50 @@ body {
   background-color: #5a6268;
 }
 
-.canvas-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
+.chat-window {
+  height: 400px;
+  overflow-y: auto;
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  color: #000000 !important;
+  border-radius: 15px;
+}
+
+.chat-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.chat-content::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.chat-content::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 10px;
+}
+
+.chat-content::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+
+.chat-content::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.glowing-border {
+  box-shadow: 0 0 15px #ff0080, 0 0 15px #ff0080 inset;
+  animation: glowingBorder 2s infinite;
+}
+
+@keyframes glowingBorder {
+  0% {
+      box-shadow: 0 0 15px #ff0080, 0 0 15px #ff0080 inset;
+  }
+  50% {
+      box-shadow: 0 0 15px #00ff80, 0 0 15px #00ff80 inset;
+  }
+  100% {
+      box-shadow: 0 0 15px #ff0080, 0 0 15px #ff0080 inset;
+  }
 }