Initial feature

Website/interaction.js

@@ -163,19 +163,52 @@ function GetNewMangaItems(){
 
 //Returns a new "Publication" Item to display in the jobs section
 function CreateManga(manga, connector){
+  //Create a new publication and set an internal ID
     var mangaElement = document.createElement('publication');
     mangaElement.id = GetValidSelector(manga.internalId);
+    
+  //Append the cover image to the publication
     var mangaImage = document.createElement('img');
     mangaImage.src = GetCoverUrl(manga.internalId);
     mangaElement.appendChild(mangaImage);
+  
+//Append the publication information to the publication
+    console.log(manga);
     var info = document.createElement('publication-information');
     var connectorName = document.createElement('connector-name');
     connectorName.innerText = connector;
     connectorName.className = "pill";
     connectorName.style.backgroundColor = stringToColour(connector);
     info.appendChild(connectorName);
+
     var mangaName = document.createElement('publication-name');
     mangaName.innerText = manga.sortName;
+
+    //Create the publication status indicator
+    var releaseStatus = document.createElement('publication-status');
+    var statusTooltip = document.createElement('status-tooltip');
+    if (manga.releaseStatus == 0) {
+      releaseStatus.style.backgroundColor = 'limegreen';
+      statusTooltip.innerText = "Ongoing"
+    }else if(manga.releaseStatus == 1){
+      releaseStatus.style.backgroundColor = 'blueviolet';
+      statusTooltip.innerText = "Completed"
+    } else if (manga.releaseStatus == 2) {
+      releaseStatus.style.backgroundColor = 'darkorange';
+      statusTooltip.innerText = "On Hiatus"
+    } else if (manga.releaseStatus == 3) {
+      releaseStatus.style.backgroundColor = 'firebrick';
+      statusTooltip.innerText = "Cancelled"
+    } else if (manga.releaseStatus == 4) {
+      releaseStatus.style.backgroundColor = 'aqua';
+      statusTooltip.innerText = "Upcoming";
+    } else {
+      releaseStatus.style.backgroundColor = 'gray';
+        statusTooltip.innerText = 'Status Unavailable';
+    }
+    releaseStatus.appendChild(statusTooltip);         //Append the tooltip to the indicator circle
+    mangaName.appendChild(releaseStatus);                  //Append the release status indicator to the info block
+
     info.appendChild(mangaName);
     mangaElement.appendChild(info);
     return mangaElement;

Website/styles/style_default.css

@@ -250,6 +250,53 @@ publication-name{
     font-weight: bold;
 }
 
+publication-status {
+    display: inline-block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    position: relative;
+    vertical-align: middle;
+}
+
+publication-status:hover > status-tooltip {
+    visibility: visible;
+}
+
+status-tooltip {
+    visibility: hidden;
+    position: absolute;
+
+    /*Position*/
+    left: -50px ;
+    bottom: 150%;
+    z-index: 3;
+    
+    /*Text Properties*/
+    font-size:10pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+    padding: 5px 5px;
+
+    /*Size*/
+    width:100px;
+    background-color: black;
+    border-radius: 6px;
+}
+
+status-tooltip::after {
+    content: " ";
+    position: absolute;
+    top: 100%; /* At the bottom of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: black transparent transparent transparent;
+  }
+
 publication img {
     position: absolute;
     top: 0;

Website/styles/style_mangahover.css

@@ -251,6 +251,54 @@ publication-name{
     font-weight: bold;
 }
 
+publication-status {
+    display: inline-block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    position: relative;
+    vertical-align: middle;
+}
+
+publication-status:hover > status-tooltip {
+    visibility: visible;
+}
+
+status-tooltip {
+    visibility: hidden;
+    position: absolute;
+
+    /*Position*/
+    left: -50px ;
+    bottom: 150%;
+    z-index: 3;
+    
+    /*Text Properties*/
+    font-size:10pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+    padding: 5px 5px;
+
+    /*Size*/
+    width:100px;
+    background-color: black;
+    border-radius: 6px;
+}
+
+status-tooltip::after {
+    content: " ";
+    position: absolute;
+    top: 100%; /* At the bottom of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: black transparent transparent transparent;
+  }
+
+
 publication-details {
     display: flex;
     flex-direction: column;