From a96991ee45100ca02f1a7326cb94a179a4bf8150 Mon Sep 17 00:00:00 2001
From: Grace <38454012+TemperGrace@users.noreply.github.com>
Date: Tue, 25 Jun 2024 21:16:07 +1000
Subject: [PATCH] Resolve CSS architecture issues (#3)

* Move scrollbar attempt to the correct css architecture

* Add automated horizontal scrollbar to div ID mid

* Remove random hi.css file

The current elmastats architecture is randomly loading hi.css from the main PHP directory rather than the hi.css which is specifically located in the CSS directory. This is extremely confusing and I am fixing it.

* Address random hi.css file issue

The current elmastats architecture is randomly loading hi.css from the main PHP directory rather than the hi.css which is specifically located in the CSS directory. This is extremely confusing and I am fixing it.

* Actually load CSS from the CSS directory

The current elmastats architecture is randomly loading css from the main PHP directory rather than the css which is specifically located in the CSS directory. This is extremely confusing and I am fixing it.

* Remove base directory CSS files

CSS should now be loaded from the CSS directory as intended, rather than the directory serving as a red herring for developers

* Reinstate and comment the target-time-colour handling
---
 Default.css     |  89 ------------------------
 Klassik.css     |  89 ------------------------
 Mopo.css        | 108 -----------------------------
 css/Default.css |   4 +-
 css/hi.css      |  59 +++++++++++-----
 css/klassik.css |   2 +-
 css/mopo.css    |   2 +-
 hi.css          | 177 ------------------------------------------------
 team.php        |  15 +++-
 top.php         |   4 +-
 10 files changed, 58 insertions(+), 491 deletions(-)
 delete mode 100644 Default.css
 delete mode 100644 Klassik.css
 delete mode 100644 Mopo.css
 delete mode 100644 hi.css

diff --git a/Default.css b/Default.css
deleted file mode 100644
index 1b8396e..0000000
--- a/Default.css
+++ /dev/null
@@ -1,89 +0,0 @@
-a:link {text-decoration: none; color: #4671D5;}
-a:visited {text-decoration: none; color: #4671D5;}
-a:active {text-decoration: none; color: #4671D5;}
-a:hover {text-decoration: none; color: #6C8CD5;}
-a.ntime:link {text-decoration: none; color: #EEEEEE;}
-a.ntime:visited {text-decoration: none; color: #EEEEEE;}
-a.ntime:active {text-decoration: none; color: #EEEEEE;}
-a.ntime:hover {text-decoration: none; color: #FFFFFF;}
-a.ltime:link {text-decoration: none; color: #00CC00;}
-a.ltime:visited {text-decoration: none; color: #00CC00;}
-a.ltime:active {text-decoration: none; color: #00CC00;}
-a.ltime:hover {text-decoration: none; color: #00EE00;}
-
-body {
-  background-color: #202020;
-  color: #CCCCCC;
-}
-
-#main {
-  border: 1px solid #000000;
-  background-color: #303030;
-}
-
-a.header {
-  border: 1px solid #000000;
-  background-image: url("../img/header.png");
-}
-
-#left {
-  border: 1px solid #000000;
-  
-}
-
-#mid {
-  border: 1px solid #000000;
-  
-}
-
-.menuheader {
-  border: 1px solid #000000;
-  background-color: #3F3F3F;
-}
-
-table.times {
-  border-style: solid;
-  border-color: #000000;
-  background-color: #303030;
-}
-th.times {
-  border-style: dotted;
-  border-color: #000000;
-  background-color: #3F3F3F;
-}
-td.times {
-  border-style: dotted;
-  border-color: #000000;
-}
-
-.box {
-  border: 1px solid #000000;
-  background-color: #AAAAAA;
-  color: #000000;
-}
-
-.box2 {
-  border: 1px solid #000000;
-  background-color: #444444;
-}
-
-/****tabber stuff****/
-
-ul.tabbernav {
-  border-bottom: 1px solid #000000;
-}
-
-ul.tabbernav li a {
-  border: 1px solid #000000;
-  background-color: #404040;
-}
-
-ul.tabbernav li.tabberactive a {
-  border-bottom: 1px solid #404040;
-  background-color: #404040;
-}
-
-.tabberlive .tabbertab {
-  border: 1px solid #000000;
-  background-color: #404040;
-}
\ No newline at end of file
diff --git a/Klassik.css b/Klassik.css
deleted file mode 100644
index e41c9a7..0000000
--- a/Klassik.css
+++ /dev/null
@@ -1,89 +0,0 @@
-a:link {text-decoration: none; color: #4671D5;}
-a:visited {text-decoration: none; color: #4671D5;}
-a:active {text-decoration: none; color: #4671D5;}
-a:hover {text-decoration: none; color: #6C8CD5;}
-a.ntime:link {text-decoration: none; color: #888888;}
-a.ntime:visited {text-decoration: none; color: #888888;}
-a.ntime:active {text-decoration: none; color: #888888;}
-a.ntime:hover {text-decoration: none; color: #BBBBBB;}
-a.ltime:link {text-decoration: none; color: #00CC00;}
-a.ltime:visited {text-decoration: none; color: #00CC00;}
-a.ltime:active {text-decoration: none; color: #00CC00;}
-a.ltime:hover {text-decoration: none; color: #00EE00;}
-
-body {
-  background-color: #D8D8D8;
-  color: #000000;
-}
-
-#main {
-  border: 1px solid #AAAAAA;
-  background-color: #E8E8E8;
-}
-
-a.header {
-  border: 1px solid #AAAAAA;
-  background-image: url("img/header_klassik.png");
-}
-
-#left {
-  border: 1px solid #AAAAAA;
-  background-color: #F8F8F8;
-}
-
-#mid {
-  border: 1px solid #AAAAAA;
-  background-color: #F8F8F8;
-}
-
-.menuheader {
-  border: 1px solid #AAAAAA;
-  background-color: #E8E8E8;
-}
-
-table.times {
-  border-style: solid;
-  border-color: #AAAAAA;
-  background-color: #F8F8F8;
-}
-th.times {
-  border-style: dotted;
-  border-color: #AAAAAA;
-  background-color: #EEEEEE;
-}
-td.times {
-  border-style: dotted;
-  border-color: #AAAAAA;
-}
-
-.box {
-  border: 1px solid #AAAAAA;
-  background-color: #D8D8D8;
-  color: #000000;
-}
-
-.box2 {
-  border: 1px solid #AAAAAA;
-  background-color: #D8D8D8;
-}
-
-/****tabber stuff****/
-
-ul.tabbernav {
-  border-bottom: 1px solid #AAAAAA;
-}
-
-ul.tabbernav li a {
-  border: 1px solid #AAAAAA;
-  background-color: #F8F8F8;
-}
-
-ul.tabbernav li.tabberactive a {
-  border-bottom: 1px solid #F8F8F8;
-  background-color: #F8F8F8;
-}
-
-.tabberlive .tabbertab {
-  border: 1px solid #AAAAAA;
-  background-color: #F8F8F8;
-}
\ No newline at end of file
diff --git a/Mopo.css b/Mopo.css
deleted file mode 100644
index 1562646..0000000
--- a/Mopo.css
+++ /dev/null
@@ -1,108 +0,0 @@
-a:link {text-decoration: underline; color: #000000;}
-a:visited {text-decoration: underline; color: #000000;}
-a:active {text-decoration: underline; color: #000000;}
-a:hover {text-decoration: none; color: #000000;}
-a.ntime:link {text-decoration: none; color: #222222;}
-a.ntime:visited {text-decoration: none; color: #222222;}
-a.ntime:active {text-decoration: none; color: #222222;}
-a.ntime:hover {text-decoration: none; color: #444444;}
-a.ltime:link {text-decoration: none; color: #00CC00;}
-a.ltime:visited {text-decoration: none; color: #00CC00;}
-a.ltime:active {text-decoration: none; color: #00CC00;}
-a.ltime:hover {text-decoration: none; color: #00EE00;}
-
-body {
-  background-color: #4A658A;
-  color: #000000;
-}
-
-#ahead a:link {text-decoration: none; color: #C2BA3E;}
-#ahead a:visited {text-decoration: none; color: #C2BA3E;}
-#ahead a:active {text-decoration: none; color: #C2BA3E;}
-#ahead a:hover {text-decoration: none; color: #FFFFFF;}
-div#ahead {color: #C2BA3E;}
-
-#main {
-  border: 1px solid #000000;
-  background-color: #56784E;
-}
-
-a.header {
-  border: 1px solid #000000;
-  background-image: url("img/header_mopo.png");
-}
-
-#left {
-  border: 1px solid #000000;
-  background-color: #446A3A;
-}
-
-#mid {
-  border: 1px solid #000000; 
-}
-
-.menuheader {
-  border: 1px solid #000000;
-  background-color: #3A5E32;
-}
-
-table.times {
-  border-style: solid;
-  border-color: #000000;
-  background-color: #628959;
-}
-th.times {
-  border-style: solid;
-  border-color: #3A5E32;
-  background-color: #5B7F52;
-}
-td.times {
-  border-style: solid;
-  border-color: #3A5E32;
-}
-
-.box {
-  border: 1px solid #000000;
-  background-color: #628959;
-}
-
-.box2 {
-  border: 1px solid #000000;
-  background-color: #628959;
-}
-
-input, select, option, textarea {
-  background-color: #649557;
-}                        
-input, textarea {
-  border: 1px solid #000;
-}     
-input:hover, textarea:hover {
-  border-bottom: 1px #87B27C solid;
-  border-right: 1px #87B27C solid;
-}                           
-input:focus, textarea:focus {
-  background-color: #87B27C;
-  border: 1px solid #000;
-}
-
-/****tabber stuff****/
-
-ul.tabbernav {
-  border-bottom: 1px solid #000000;
-}
-
-ul.tabbernav li a {
-  border: 1px solid #000000;
-  background-color: #628959;
-}
-
-ul.tabbernav li.tabberactive a {
-  border-bottom: 1px solid #628959;
-  background-color: #628959;
-}
-
-.tabberlive .tabbertab {
-  border: 1px solid #000000;
-  background-color: #628959;
-}
\ No newline at end of file
diff --git a/css/Default.css b/css/Default.css
index 4dbe497..b7ef56c 100644
--- a/css/Default.css
+++ b/css/Default.css
@@ -23,7 +23,7 @@ body {
 
 a.header {
   border: 1px solid #000000;
-  background-image: url("img/header.png");
+  background-image: url("../img/header.png");
 }
 
 #left {
@@ -45,8 +45,6 @@ table.times {
   border-style: solid;
   border-color: #000000;
   background-color: #303030;
-  max-width: 720px;
-  overflow-x: auto;
 }
 th.times {
   border-style: dotted;
diff --git a/css/hi.css b/css/hi.css
index 87f9713..05201bc 100644
--- a/css/hi.css
+++ b/css/hi.css
@@ -2,22 +2,41 @@ a.ttime0:link {text-decoration: none; color: #FF0000;}
 a.ttime0:visited {text-decoration: none; color: #FF0000;}
 a.ttime0:active {text-decoration: none; color: #FF0000;}
 a.ttime0:hover {text-decoration: none; color: #FF5555;}
-a.ttime1:link {text-decoration: none; color: #FF9C00;}
-a.ttime1:visited {text-decoration: none; color: #FF9C00;}
-a.ttime1:active {text-decoration: none; color: #FF9C00;}
-a.ttime1:hover {text-decoration: none; color: #FFB238;}
-a.ttime2:link {text-decoration: none; color: #FFF200;}
-a.ttime2:visited {text-decoration: none; color: #FFF200;}
-a.ttime2:active {text-decoration: none; color: #FFF200;}
-a.ttime2:hover {text-decoration: none; color: #FFF97B;}
-a.ttime3:link {text-decoration: none; color: #00FF00;}
-a.ttime3:visited {text-decoration: none; color: #00FF00;}
-a.ttime3:active {text-decoration: none; color: #00FF00;}
-a.ttime3:hover {text-decoration: none; color: #75FF75;}
-a.ttime4:link {text-decoration: none; color: #0090FF;}
-a.ttime4:visited {text-decoration: none; color: #0090FF;}
-a.ttime4:active {text-decoration: none; color: #0090FF;}
-a.ttime4:hover {text-decoration: none; color: #52B4FF;}
+
+a.ttime1:link {text-decoration: none; color: #AA43DD;}
+a.ttime1:visited {text-decoration: none; color: #AA43DD;}
+a.ttime1:active {text-decoration: none; color: #AA43DD;}
+a.ttime1:hover {text-decoration: none; color: #BB54EE;}
+
+a.ttime2:link {text-decoration: none; color: #FF66CC;}
+a.ttime2:visited {text-decoration: none; color: #FF66CC;}
+a.ttime2:active {text-decoration: none; color: #FF66CC;}
+a.ttime2:hover {text-decoration: none; color: #FF8FDA;}
+
+a.ttime3:link {text-decoration: none; color: #FF9C00;}
+a.ttime3:visited {text-decoration: none; color: #FF9C00;}
+a.ttime3:active {text-decoration: none; color: #FF9C00;}
+a.ttime3:hover {text-decoration: none; color: #FFB238;}
+
+a.ttime4:link {text-decoration: none; color: #FFF200;}
+a.ttime4:visited {text-decoration: none; color: #FFF200;}
+a.ttime4:active {text-decoration: none; color: #FFF200;}
+a.ttime4:hover {text-decoration: none; color: #FFF97B;}
+
+a.ttime5:link {text-decoration: none; color: #00FF00;}
+a.ttime5:visited {text-decoration: none; color: #00FF00;}
+a.ttime5:active {text-decoration: none; color: #00FF00;}
+a.ttime5:hover {text-decoration: none; color: #75FF75;}
+
+a.ttime6:link {text-decoration: none; color: #0090FF;}
+a.ttime6:visited {text-decoration: none; color: #0090FF;}
+a.ttime6:active {text-decoration: none; color: #0090FF;}
+a.ttime6:hover {text-decoration: none; color: #52B4FF;}
+
+a.ttime7:link {text-decoration: none; color: #F3F5CA;}
+a.ttime7:visited {text-decoration: none; color: #F3F5CA;}
+a.ttime7:active {text-decoration: none; color: #F3F5CA;}
+a.ttime7:hover {text-decoration: none; color: #F3F5CA;}
 
 body {
   font-family:monospace,courier new;
@@ -58,7 +77,10 @@ a.header {
   margin: 8px 0px 0px 180px;
   padding: 10px 10px 10px 10px;
   width: 798px;
-  overflow: hidden;
+  overflow-y: hidden;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #404040 #202020;
 }
 
 .menuheader {
@@ -106,6 +128,7 @@ td.times {
 .box2 {
   padding: 5px 5px 5px 5px;
   overflow: hidden;
+  background-color: #333333;
 }
 
 .ubwrap {
@@ -154,4 +177,4 @@ ul.tabbernav li a {
 
 .tabberlive .tabbertab h3 {
   display:none;
-}
\ No newline at end of file
+}
diff --git a/css/klassik.css b/css/klassik.css
index e41c9a7..b60d683 100644
--- a/css/klassik.css
+++ b/css/klassik.css
@@ -23,7 +23,7 @@ body {
 
 a.header {
   border: 1px solid #AAAAAA;
-  background-image: url("img/header_klassik.png");
+  background-image: url("../img/header_klassik.png");
 }
 
 #left {
diff --git a/css/mopo.css b/css/mopo.css
index 1562646..68b910f 100644
--- a/css/mopo.css
+++ b/css/mopo.css
@@ -29,7 +29,7 @@ div#ahead {color: #C2BA3E;}
 
 a.header {
   border: 1px solid #000000;
-  background-image: url("img/header_mopo.png");
+  background-image: url("../img/header_mopo.png");
 }
 
 #left {
diff --git a/hi.css b/hi.css
deleted file mode 100644
index 9a23386..0000000
--- a/hi.css
+++ /dev/null
@@ -1,177 +0,0 @@
-a.ttime0:link {text-decoration: none; color: #FF0000;}
-a.ttime0:visited {text-decoration: none; color: #FF0000;}
-a.ttime0:active {text-decoration: none; color: #FF0000;}
-a.ttime0:hover {text-decoration: none; color: #FF5555;}
-
-a.ttime1:link {text-decoration: none; color: #AA43DD;}
-a.ttime1:visited {text-decoration: none; color: #AA43DD;}
-a.ttime1:active {text-decoration: none; color: #AA43DD;}
-a.ttime1:hover {text-decoration: none; color: #BB54EE;}
-
-a.ttime2:link {text-decoration: none; color: #FF66CC;}
-a.ttime2:visited {text-decoration: none; color: #FF66CC;}
-a.ttime2:active {text-decoration: none; color: #FF66CC;}
-a.ttime2:hover {text-decoration: none; color: #FF8FDA;}
-
-a.ttime3:link {text-decoration: none; color: #FF9C00;}
-a.ttime3:visited {text-decoration: none; color: #FF9C00;}
-a.ttime3:active {text-decoration: none; color: #FF9C00;}
-a.ttime3:hover {text-decoration: none; color: #FFB238;}
-
-a.ttime4:link {text-decoration: none; color: #FFF200;}
-a.ttime4:visited {text-decoration: none; color: #FFF200;}
-a.ttime4:active {text-decoration: none; color: #FFF200;}
-a.ttime4:hover {text-decoration: none; color: #FFF97B;}
-
-a.ttime5:link {text-decoration: none; color: #00FF00;}
-a.ttime5:visited {text-decoration: none; color: #00FF00;}
-a.ttime5:active {text-decoration: none; color: #00FF00;}
-a.ttime5:hover {text-decoration: none; color: #75FF75;}
-
-a.ttime6:link {text-decoration: none; color: #0090FF;}
-a.ttime6:visited {text-decoration: none; color: #0090FF;}
-a.ttime6:active {text-decoration: none; color: #0090FF;}
-a.ttime6:hover {text-decoration: none; color: #52B4FF;}
-
-a.ttime7:link {text-decoration: none; color: #F3F5CA;}
-a.ttime7:visited {text-decoration: none; color: #F3F5CA;}
-a.ttime7:active {text-decoration: none; color: #F3F5CA;}
-a.ttime7:hover {text-decoration: none; color: #F3F5CA;}
-
-body {
-  font-family:monospace,courier new;
-  font-size: 9pt;
-}
-
-#main {
-  width: 1000px;
-  padding: 8px;
-  height: 100%;
-  text-align: left;
-  margin-left: auto;
-	margin-right: auto;
-	overflow: hidden;
-}
-
-a.header {
-  width: 1000px;
-  height: 111px;
-  display: block;
-}
-
-#ads {
-  margin: 8px 0px 0px 0px;
-  padding: 0px 10px 0px 10px;
-  width: 984px;
-  text-align: center;
-}
-
-#left {
-  margin: 8px 0px 0px 0px;
-  padding: 10px 10px 10px 10px;
-  width: 150px;
-	float: left;
-}
-
-#mid {
-  margin: 8px 0px 0px 180px;
-  padding: 10px 10px 10px 10px;
-  width: 798px;
-  overflow: hidden;
-}
-
-.menuheader {
-  padding: 2px 2px 2px 2px;
-  margin: 0px 0px 4px 0px;
-  text-align: center;
-}
-
-.small {
-  font-size: 8pt;
-}
-
-table.times {
-  border-width: 1px;
-  border-spacing: 1px;
-  border-collapse: collapse;
-}
-
-th {
-  text-align: left;
-}
-th.left {
-  text-align: left;
-}
-th.times {
-  border-width: 1px;
-  padding: 1px;
-  text-align: left;
-}
-td.times {
-  border-width: 1px;
-  padding: 1px;
-}
-
-.lefty {
-  float: left;
-  margin-right: 32px;
-}
-
-.box {
-  padding: 5px 5px 5px 5px;
-  overflow: hidden;
-}
-
-.box2 {
-  padding: 5px 5px 5px 5px;
-  overflow: hidden;
-  background-color: #333333;
-}
-
-.ubwrap {
-  margin: 0px 0px 0px 0px;
-  padding: 0px 0px 0px 0px;
-  float: right;
-}
-
-img {
-  border: 0px;
-}
-
-/****tabber stuff****/
-
-.tabberlive .tabbertabhide {
-  display: none;
-}
-.tabberlive {
-  margin-top: 1em;
-}
-
-ul.tabbernav {
-  margin: 0;
-  padding: 3px 0;
-}
-
-ul.tabbernav li {
-  list-style: none;
-  margin: 0;
-  display: inline;
-}
-
-ul.tabbernav li a {
-  padding: 3px 0.5em;
-  margin-left: 3px;
-}
-
-.tabberlive .tabbertab {
-  padding: 5px;
-  border-top: 0;
-}
-
-.tabberlive .tabbertab h2 {
-  display:none;
-}
-
-.tabberlive .tabbertab h3 {
-  display:none;
-}
\ No newline at end of file
diff --git a/team.php b/team.php
index 3e46203..f75b74e 100644
--- a/team.php
+++ b/team.php
@@ -62,15 +62,24 @@
       $teamtt += $trtajm;
       $victories[$trman] += 1;
       for ($y = 0;$y < $c;$y++) {
-        
-        $t = target($utimes[$x+1][1], $x+1);
+
+                
+        //This function call fetches the target time threshold for the current player we're printing, on the current internal. 
+        //It returns an integer from 0 to 8 which then gets passed to the coloured time formatter
+        $t = target($utimes[$y][$x+1][1], $x+1);
+
+        //We format each cell differently based on its traits. 
+        //The team-record holder ($trman) should be in bold.
+        //We co-opt the tooltip element to display difference from the displayed time to the team-record holder.
+        //Finally, we also style each time based on target-time colours.
+
         $bulle = ""; $bulle2 = "";
         if ($trman == $y) { $bulle = "<span style=\"font-weight: bold\">"; $bulle2 = "</span>"; }
         if ($trtajm > $utimes[$y][$x+1][1]) { $wry = "-"; } else { $wry = "+"; }
         $diff2 = abs($utimes[$y][$x+1][1]-$trtajm);
         $str = $wry . formatElmaTime($diff2) . " to " . $dudes[$trman] . "'s time";
         if ($y == $trman || $trman == -1) $str = "";
-        //echo("<td class=\"times\" title=\"" . $str . "\"><center>" . $bulle . formatElmaTime($utimes[$y][$x+1][1], true) . $bulle2 . "</center></td>");
+
         echo("<td class=\"times\" title=\"" . $str . "\"><center>" . $bulle . sttime($dudes[$y], $x+1, $utimes[$y][$x+1][1], true, $trman == $y ? true : false, $t) . $bulle2 . "</center></td>");
       }
       echo("</tr>");
diff --git a/top.php b/top.php
index f52b265..4a4c229 100644
--- a/top.php
+++ b/top.php
@@ -193,7 +193,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>elmastats</title>
-<link href="<?php
+<link href="css/<?php
 
   if (isset($_SESSION["nick"])) {
     echo($users[$_SESSION["nick"]]["theme"] . ".css");
@@ -204,7 +204,7 @@
   //<a href="https://www.youtube.com/watch?v=jl4d2IVBXPU">restore old theme tutorial</a>
   echo("?" . time());
 ?>" rel="stylesheet" type="text/css"/>
-<link href="hi.css?<?php echo(time()); ?>" rel="stylesheet" type="text/css"/>
+<link href="css/hi.css?<?php echo(time()); ?>" rel="stylesheet" type="text/css"/>
 <link rel="shortcut icon" href="favicon.ico"/>
 <script type="text/javascript" src="tabber.js"></script>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>