Merge branch 'main' of github.com:cis3296f23/OpenOverlay into main

cis3296f23 · Nov 17, 2023 · b50ff10 · b50ff10
2 parents 3d079cd + 3b51796
commit b50ff10
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 20 deletions.
diff --git a/OpenOverlay UML.pdf b/OpenOverlay UML.pdf
diff --git a/OpenOverlay.js b/OpenOverlay.js
@@ -10,10 +10,10 @@ root.appendChild(summonerInfo);
 
 // Summoner Rank
 getRank({}, function(rankContainer) {
-    root.appendChild(rankContainer);
+    summonerInfo.appendChild(rankContainer);
 });
 
 // Summoner Rank Flex
 getRankFlex({}, function(rankContainer) {
-    root.appendChild(rankContainer);
+    summonerInfo.appendChild(rankContainer);
 });
diff --git a/components/images/emerald.png b/components/images/emerald.png
diff --git a/components/images/unranked.png b/components/images/unranked.png
diff --git a/components/summoner/getRank.css b/components/summoner/getRank.css
@@ -1,9 +1,9 @@
 .rank-info {
     font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
+    background-color: #af5d5d;
     border: 1px solid #ccc;
-    padding: 10px;
-    margin-bottom: 20px;
+    padding: 20px;
+    display: inline-flex;
   }
 
   .rank-info h2 {

diff --git a/components/summoner/getRank.js b/components/summoner/getRank.js
@@ -26,14 +26,18 @@ function getRank({summonerName = 'Topfiish'}, callback) {
 
       // Create a paragraph element to display the rank
       var rankInfoParagraph = document.createElement("p");
-
+      var soloRankImage = document.createElement("img");
+      soloRankImage.setAttribute("align","center");
       if (soloQueueEntry) {
           // If ranked information is available, display the rank
-          rankInfoParagraph.innerHTML = `Solo/Duo Queue Rank: ${soloQueueEntry.tier} ${soloQueueEntry.rank}`;
+          soloRankImage.src = "components/images/emerald.png";
+          rankInfoParagraph.innerHTML = `Solo/Duo Rank:<br>${soloQueueEntry.tier} ${soloQueueEntry.rank}`;
       } else {
           // If no ranked information is available, display a message
-          rankInfoParagraph.innerHTML = "No Solo/Duo Queue rank information available.";
+          soloRankImage.src = "components/images/unranked.png";
+          rankInfoParagraph.innerHTML = "Solo/Duo Rank:<br>UNRANKED<br>";
       }
+      rankInfoParagraph.appendChild(soloRankImage);
 
       // Append the rank information to the div
       div.appendChild(rankInfoParagraph);

diff --git a/components/summoner/getRankFlex.css b/components/summoner/getRankFlex.css
@@ -1,9 +1,10 @@
 .rank-info {
     font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
+    background-color: #af5d5d;
     border: 1px solid #ccc;
-    padding: 10px;
-    margin-bottom: 20px;
+    padding: 20px;
+    display: inline-flex;
+    margin-left: 5%;
   }
 
   .rank-info h2 {

diff --git a/components/summoner/getRankFlex.js b/components/summoner/getRankFlex.js
@@ -27,13 +27,18 @@ function getRankFlex({summonerName = 'Topfiish'}, callback) {
         // Create a paragraph element to display the rank
         var flexRankInfoParagraph = document.createElement("p");
 
+        var flexRankImage = document.createElement("img");
+        flexRankImage.setAttribute("align","center");
         if (flexQueueEntry) {
             // If ranked information is available, display the rank
-            flexRankInfoParagraph.innerHTML = `Flex Queue Rank: ${flexQueueEntry.tier} ${flexQueueEntry.rank}`;
+            flexRankImage.src = "components/images/emerald.png";
+            flexRankInfoParagraph.innerHTML = `Flex Rank:<br>${flexQueueEntry.tier} ${flexQueueEntry.rank}<br>`;
         } else {
             // If no ranked information is available, display a message
-            flexRankInfoParagraph.innerHTML = "No Flex Queue rank information available.";
+            flexRankImage.src = "components/images/unranked.png";
+            flexRankInfoParagraph.innerHTML = "Flex Rank:<br>UNRANKED<br>";
         }
+        flexRankInfoParagraph.appendChild(flexRankImage);
 
         // Append the rank information to the div
         div.appendChild(flexRankInfoParagraph);

diff --git a/components/summoner/getSummoner.js b/components/summoner/getSummoner.js
@@ -22,6 +22,7 @@ function getSummoner({ summonerName = "Topfiish" }) {
   kayn.Summoner.by.name(summonerName).callback(function (err, summoner) {
     var info = document.createElement("p");
     info.innerHTML = summoner ? summoner.summonerLevel : "Error";
+    info.id = "level";
     div.appendChild(info);
     console.log(summoner);
     console.log(err);

diff --git a/components/summoner/summoner.css b/components/summoner/summoner.css
@@ -1,29 +1,46 @@
 .summoner {
   /* Styling for the container */
-  background-color: #1a2f8d;
-  border: 1px solid #2e1292;
+  background-color: #6699ff;
+  border: 1px solid rgb(12, 26, 54);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
+  display: flex;
+  flex-direction: row;
 }
 
 .summoner h2 {
   /* Styling for heading elements within the "summoner" class */
-  font-size: 24px;
-  color: #67a8c7;
+  font-size: 36px;
+  color: #122b36;
+  padding:20px;
+  display:flex;
+  justify-content: space-between;
+}
+
+#level {
+  display: block;
+  height: 50px;
+  width: 50px;
+  line-height: 50px;
+  border-radius: 30px;
+  background-color: rgb(0, 128, 98);
+  border: solid black 3px;
+  text-align: center;
+  font-size: 1.5em;
 }
 
 .summoner p {
   /* Styling for paragraph elements within the "summoner" class */
   font-size: 16px;
-  color: #67a8c7;
+  color: #122b36;
   margin: 5px 0;
 }
 
 .summoner a {
   /* Styling for anchor (link) elements within the "summoner" class */
   text-decoration: none;
-  color: #0078d4;
+  color: #122b36;
 }
 
 .summoner a:hover {
@@ -40,7 +57,7 @@
 
 .summoner button {
   /* Styling for button elements within the "summoner" class */
-  background-color: #0078d4;
+  background-color: #04111c;
   color: #fff;
   border: none;
   padding: 10px 20px;