added icons to both sides

Author: StewartWBrown1

angular.json

@@ -98,6 +98,7 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/magenta-violet.css",
+              "node_modules/font-awesome/css/font-awesome.css",
               "src/styles.scss"
             ],
             "scripts": []

package-lock.json

@@ -24,6 +24,7 @@
     "@angular/router": "^19.1.0",
     "@angular/ssr": "^19.1.7",
     "express": "^4.18.2",
+    "font-awesome": "^4.7.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -43,4 +44,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.7.2"
   }
-}
+}

package.json

@@ -1,10 +1,28 @@
 <div class="container">
     <div class="left">
+      <div class="icon-list-left">
+        <img src="assets/friendly_tank.png" alt="Tank 1" />
+        <img src="assets/friendly_dps.png" alt="dps 1" />
+        <img src="assets/friendly_dps.png" alt="dps 2" />
+        <img src="assets/friendly_support.png" alt="sup 1" />
+        <img src="assets/friendly_support.png" alt="sup 2" />
+      </div>
       <h1>Left Half</h1>
       <p>This is the left side of the screen.</p>
+      
     </div>
+    <div class="icon-list-right">
+        <img src="assets/enemy_tank.png" alt="Tank 1" />
+        <img src="assets/enemy_dps.png" alt="DPS 1" />
+        <img src="assets/enemy_dps.png" alt="DPS 2" />
+        <img src="assets/enemy_support.png" alt="Sup 1" />
+        <img src="assets/enemy_support.png" alt="Sup 2" />
+      </div>
     <div class="right">
       <h1>Right Half</h1>
       <p>This is the right side of the screen.</p>
+    
     </div>
+    
+
   </div>

public/assets/enemy_dps.png

@@ -3,6 +3,10 @@ $left-bg: #3BA7DA;
 $right-bg: #BB4D09;
 $text-align: center;
 
+$icon-width: 30px;  // Set the size of your icons
+$icon-height: 80px;
+$icon-color: #333; // Set the icon color (not used for images but for potential future use)
+
 .container {
   display: flex;
   height: 100vh; // Full viewport height
@@ -14,6 +18,38 @@ $text-align: center;
   text-align: $text-align; // Align text using the variable
 }
 
+.icon-list-left {
+  position: absolute;
+  top: 50%;
+  left: 20px; // Adjust this to change the horizontal position of icons
+  transform: translateY(-50%); // Center vertically
+  display: flex;
+  flex-direction: column;
+  gap: 15px; // Space between icons
+}
+
+.icon-list-left img {
+  width: $icon-width; // Set width (and height for square images)
+  height: $icon-height;
+  cursor: pointer; // Make the images clickable
+}
+
+.icon-list-right {
+  position: absolute;
+  top: 50%;
+  right: 20px; // Adjust this to change the horizontal position of icons
+  transform: translateY(-50%); // Center vertically
+  display: flex;
+  flex-direction: column;
+  gap: 15px; // Space between icons
+}
+
+.icon-list-right img {
+  width: $icon-width; // Set width (and height for square images)
+  height: $icon-height;
+  cursor: pointer; // Make the images clickable
+}
+
 .left {
   background-color: $left-bg;
 }