From 380eb593975f24661ed0343faba751f4f708a7a2 Mon Sep 17 00:00:00 2001
From: James Almeida <jimmyplaysdrums@gmail.com>
Date: Thu, 3 Oct 2024 12:03:46 -0700
Subject: [PATCH] Tweaks to Arcade, Outrun game, and README.

---
 README.md                                     |  1 +
 src/App.css                                   | 25 +++++++++++++------
 src/components/Apps/Arcade/Arcade.css         | 21 ++++++++++------
 src/components/Apps/Arcade/Arcade.js          | 19 ++++++++------
 .../VerticalSliderPanel.css                   |  3 ++-
 5 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index f7ffe82..16d7f29 100644
--- a/README.md
+++ b/README.md
@@ -80,4 +80,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 - Want to thank Ameer Studio for the [3D model of the Tesla Model 3](https://sketchfab.com/3d-models/tesla-2018-model-3-5ef9b845aaf44203b6d04e2c677e444f).
 - Also thanks to Vasilj Miloevi for the [loading screen circle animations](https://codepen.io/eboye/pen/ANPxVX)
+- Thanks to [Patrick Stillhart](https://codepen.io/arcs) for sharing the [OutRun video game on Codepen](https://codepen.io/arcs/pen/aGzNKY) that inspired me to refactor it work in this project.
 
diff --git a/src/App.css b/src/App.css
index 91bfcd4..dffbf50 100644
--- a/src/App.css
+++ b/src/App.css
@@ -333,14 +333,6 @@ html, body { width:100%;  overflow: hidden; }
   font-weight: 600;
 }
 
-/* UTIL CSS */
-.no-select { 
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
 .small-screen-message {
   display: none;
   text-align: center;
@@ -471,3 +463,20 @@ html, body { width:100%;  overflow: hidden; }
 }
 
 
+
+/* -------------------- UTILITY CSS -------------------- */
+
+.no-select { 
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.ctaBtn:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+  transition: transform 0.1s ease-in-out, filter 0.1s ease-in-out;
+}
+
+/* -------------------- UTILITY CSS END -------------------- */
\ No newline at end of file
diff --git a/src/components/Apps/Arcade/Arcade.css b/src/components/Apps/Arcade/Arcade.css
index 01f3563..84ceb67 100644
--- a/src/components/Apps/Arcade/Arcade.css
+++ b/src/components/Apps/Arcade/Arcade.css
@@ -38,35 +38,42 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 31%;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+    height: 40%;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
 }
 
-.btnAndTitle {
+.activeGameBannerOverlay {
     position: absolute;
     top: 74%;
     left: 3%;
     /* transform: translate(-50%, -50%); */
     display: flex;
     flex-direction: row;
+    align-items: center;
 }
 
 .play-button {
-    padding: 15px 55px;
+    padding: 15px 55px; 
     font-size: 14px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    font-weight: 600;
+    min-width: 72px;
 }
 
-.gameTitle {
+.gameInfo {
     font-size: 30px;
     font-weight: 700;
     color: white;
-    padding-left: 11px;
-    padding-top: 4px;
+    padding: 4px 10px 0px 11px;
+}
+
+.gameDescription{
+    font-size: 12px;
+    font-weight: 400;
 }
 
 .game-carousel {
diff --git a/src/components/Apps/Arcade/Arcade.js b/src/components/Apps/Arcade/Arcade.js
index 4b68dbc..20ee060 100644
--- a/src/components/Apps/Arcade/Arcade.js
+++ b/src/components/Apps/Arcade/Arcade.js
@@ -7,10 +7,10 @@ import './Arcade.css';
 
 export const Arcade = () => {
   const games = [
-    { name: 'Outrun', image: 'outrun.jpg' },
-    { name: 'Asteroids', image: 'asteroids.jpg' },
-    { name: 'Centipede', image: 'centipede.jpg' },
-    { name: 'Missile Command', image: 'missile-command.jpg' },
+    { name: 'Outrun', image: 'outrun.jpg', description: '(Keyboard required) Race against time and other cars to complete the course before time runs out! Thanks to Patrick Stillhart for sharing this on Codepen. Link in the README.' },
+    { name: 'Asteroids', image: 'asteroids.jpg', description: 'Coming Soon! Asteroids is a space combat game where you navigate a spaceship and destroy asteroids and enemy ships.' },
+    { name: 'Centipede', image: 'centipede.jpg', description: 'Coming Soon! Centipede is a shooter game where you control a centipede and shoot at enemies and avoid their attacks.' },
+    { name: 'Missile Command', image: 'missile-command.jpg', description: 'Coming Soon! Missile Command is a classic arcade game where you control a missile defense system and shoot at incoming missiles.' },
   ];
 
   const [activeGame, setActiveGame] = useState(games[0].name);
@@ -72,11 +72,14 @@ export const Arcade = () => {
                 alt={activeGame}
               />
               <div className="gradient"></div>
-              <div className="btnAndTitle">
-                <button className="play-button" onClick={handlePlayClick}>
+              <div className="activeGameBannerOverlay">
+                <div className="play-button ctaBtn" onClick={handlePlayClick}>
                   Play Game
-                </button>
-              <div className="gameTitle">{activeGame}</div>
+                </div>
+                <div className="gameInfo">
+                  <div className="gameTitle">{activeGame}</div>
+                  <div className="gameDescription">{games.find(game => game.name === activeGame).description}</div>
+                </div>
               </div>
             </div>
             <div className="game-carousel">
diff --git a/src/components/VerticalSliderPanel/VerticalSliderPanel.css b/src/components/VerticalSliderPanel/VerticalSliderPanel.css
index 8195470..31ed134 100644
--- a/src/components/VerticalSliderPanel/VerticalSliderPanel.css
+++ b/src/components/VerticalSliderPanel/VerticalSliderPanel.css
@@ -43,7 +43,8 @@ display: none;
 
 .slider-content {
     /* padding: 0px 20px; */
-    height: calc(100% - 40px);
+    /* height: calc(100% - 40px); */
+    height: 100%;
     /* overflow-y: auto; */
     width: 100%;
 }