Overhaul of styles for DataTables, re-add Cookie Notice

WebHostLib/static/layout.css

@@ -26,7 +26,7 @@ button:hover, input[type=submit]:hover{
 
 /** Content styles */
 .main-content{
-    max-width: 800px;
+    max-width: 1000px;
     border-radius: 8px;
     background-color: #bbb288;
     padding: 0.5em 1.5rem 1.5rem;=

WebHostLib/static/layout.js

@@ -0,0 +1,20 @@
+window.addEventListener('load', () => {
+    const cookieNoticeShown = localStorage.getItem('cookieNotice');
+    if (cookieNoticeShown) { return; }
+
+    const cookieNotice = document.createElement('div');
+    cookieNotice.innerText = "This website uses cookies to store information about the games you play.";
+    cookieNotice.style.position = "fixed";
+    cookieNotice.style.bottom = "0";
+    cookieNotice.style.left = "0";
+    cookieNotice.style.width = "100%";
+    cookieNotice.style.lineHeight = "40px";
+    cookieNotice.style.backgroundColor = "#c7cda5";
+    cookieNotice.style.textAlign = "center";
+    cookieNotice.style.cursor = "pointer";
+    document.body.appendChild(cookieNotice);
+    cookieNotice.addEventListener('click', () => {
+        localStorage.setItem('cookieNotice', "1");
+        document.body.removeChild(cookieNotice);
+    });
+});

WebHostLib/static/tablepage.css

@@ -0,0 +1,27 @@
+table.dataTable{
+    width: 100% !important;
+}
+
+table.dataTable, table.dataTable.no-footer{
+    border: none;
+    font-size: 1rem;
+    text-align: left;
+}
+
+.dataTables_wrapper .dataTables_filter{
+    float: none;
+    text-align: left;
+}
+
+table.dataTable thead{
+    background-color: #b0a77d;
+}
+
+table.dataTable thead tr th{
+    border: none;
+    padding: 5px;
+}
+
+table.dataTable tbody tr{
+    background-color: inherit;
+}

WebHostLib/static/tracker.css

@@ -1,35 +1,46 @@
-table.dataTable.table-sm > thead > tr > th :not(.sorting_disabled) {
-    padding: 1px;
+#tracker-wrapper{
+    display: flex;
+    flex-direction: column;
 }
 
-.dataTable > thead > tr > th[class*="sort"]:before,
-.dataTable > thead > tr > th[class*="sort"]:after {
-    content: "" !important;
+.table-wrapper{
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: auto;
+    width: 100%;
 }
 
-.dataTable > thead > tr > th :not(.sorting_disabled) {
-    padding-right: 0 !important;
+div.dataTables_wrapper.no-footer .dataTables_scrollBody{
+    border: none;
 }
 
-th {
-    padding: 1px !important;
+table.dataTable{
+    margin-top: 0.5rem;
+    margin-bottom: 2rem;
 }
 
-table {
-    width: 100% !important;
+div.dataTables_scrollBody{
+    background-color: inherit !important;
+}
+
+table.dataTable .center-column{
+    text-align: center;
 }
 
 img.alttp-sprite {
-    height: 32px;
-    min-width: 32px;
-    object-fit: contain;
+    height: auto;
+    max-height: 32px;
+    min-height: 14px;
 }
 
-/* this is specific to the tracker right now */
-@media all and (max-width: 1700px) {
+@media all and (max-width: 1600px) {
     img.alttp-sprite {
-        height: 16px;
-        min-width: 16px;
-        object-fit: contain;
+        height: auto;
+        max-height: 16px;
+        min-height: 10px;
     }
-}
+}
+
+.item-acquired{
+    background-color: green;
+}

WebHostLib/static/tracker.js

@@ -0,0 +1,42 @@
+let tables = null;
+
+window.onload = () => {
+    tables = $(".table").DataTable({
+        paging: false,
+        info: false,
+        scrollCollapse: true,
+
+        // DO NOT use the scrollX or scrollY options. They cause DataTables to split the thead from
+        // the tbody and render two separate tables.
+    });
+
+    const update = () => {
+        const target = $("<div></div>");
+        target.load("/tracker/{{ room.tracker }}", function (response, status) {
+            if (status === "success") {
+                target.find(".table").each(function (i, new_table) {
+                    const new_trs = $(new_table).find("tbody>tr");
+                    const old_table = tables.eq(i);
+                    const topscroll = $(old_table.settings()[0].nScrollBody).scrollTop();
+                    const leftscroll = $(old_table.settings()[0].nScrollBody).scrollLeft();
+                    old_table.clear();
+                    old_table.rows.add(new_trs).draw();
+                    $(old_table.settings()[0].nScrollBody).scrollTop(topscroll);
+                    $(old_table.settings()[0].nScrollBody).scrollLeft(leftscroll);
+                });
+            } else {
+                console.log("Failed to connect to Server, in order to update Table Data.");
+                console.log(response);
+            }
+        })
+    }
+
+    setInterval(update, 30000);
+
+    $(".dataTables_scrollBody").scrollsync({
+        y_sync: true,
+        x_sync: true
+    });
+
+    window.onresize = () => tables.draw();
+}

WebHostLib/static/uploads.css

@@ -14,11 +14,3 @@
 #upload-form{
     display: none;
 }
-
-#room-list{
-    font-size: 1rem;
-}
-
-#room-list ul{
-    vertical-align: top;
-}

WebHostLib/static/uploads.js

@@ -7,7 +7,7 @@ window.onload = () => {
         document.getElementById('upload-form').submit();
     });
 
-    $(".table").DataTable({
+    $("#uploads-table").DataTable({
         "paging": false,
         "ordering": true,
         "order": [[ 3, "desc" ]],