From 4b81bc8d1dcdbd2dfc649aec1eb15550ee272067 Mon Sep 17 00:00:00 2001
From: Thomas G <62822072+Thomasluigi07@users.noreply.github.com>
Date: Mon, 20 Jun 2022 13:44:28 +1000
Subject: [PATCH] Added more stuff to home, added debug settings to index to
 test usernames.

---
 home.html  |  13 +++++--
 home.js    | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |  10 ++++-
 index.js   | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 main.css   |   2 +-
 5 files changed, 227 insertions(+), 8 deletions(-)
 create mode 100644 home.js
diff --git a/home.html b/home.html
index 5ea92b5..2a8a7d7 100644
--- a/home.html
+++ b/home.html
@@ -14,7 +14,7 @@
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
         <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
         <link rel="stylesheet" href="main.css">
-        <script src="main.js"></script>
+        <script type="text/javascript" src="home.js"></script>
     </head>
     <body>
         <div class="navbar">
@@ -43,9 +43,14 @@
             <p class="alerttext" id="alerttext">ALERT TEXT</p>
         </div>
         <div class="content">
-            <h1>Hello, OnlyTwentyCharacters!</h1>
-            <div class="leftcolumn">
-
+            <h1 id="usernameframe">Hello, !</h1>
+            <h2>Friends</h2>
+            <div class="friendslist">
+                <p>You have no friends! Why not make some?</p>
+            </div>
+            <h2>Recently Played</h2>
+            <div class="gamelist">
+                <p>You haven't played any games yet.</p>
             </div>
         </div>
         <footer>
diff --git a/home.js b/home.js
new file mode 100644
index 0000000..be94da0
--- /dev/null
+++ b/home.js
@@ -0,0 +1,105 @@
+window.addEventListener('resize', function() {
+    var logo_full = document.getElementById("logo_full")
+    var logo_small = document.getElementById("logo_small")
+    var smallbtn = document.getElementById("smallbtn1")
+    var smallbtn0 = document.getElementById("smallbtn0")
+    var smallbtn2 = document.getElementById("smallbtn2")
+    var smallbtn3 = document.getElementById("smallbtn3")
+    var smallbtn1 = document.getElementById("smallbtn4")
+    var smallbtn5 = document.getElementById("smallbtn5")
+    var viewport_width = window.innerWidth;
+    if (viewport_width < 900) {
+        logo_full.className = "invisible";
+        logo_small.className = "";
+    } else {
+        logo_small.className = "invisible";
+        logo_full.className = "";
+    }
+    if (viewport_width < 600) {
+        smallbtn.className = "invisible";
+        smallbtn2.className = "invisible";
+        smallbtn3.className = "invisible";
+    } else {
+        smallbtn.className = "navbarbutton";
+        smallbtn2.className = "navbarbutton";
+        smallbtn3.className = "navbarbutton";
+    }
+    if (viewport_width < 425) {
+        smallbtn0.className = "invisible";
+        smallbtn1.className = "invisible";
+    } else {
+        smallbtn0.className = "navbarbutton";
+        smallbtn1.className = "navbarbutton";
+    }
+    if (viewport_width < 280) {
+        smallbtn5.className = "invisible";
+    } else {
+        smallbtn5.className = "navbarbutton";
+    }
+});
+window.onload = function() {
+    var username = localStorage.getItem("username");
+    var usernamecontainer = document.getElementById("usernameframe")
+    if (username == null) {
+        usernamecontainer.innerHTML = `Not signed in.`
+    } else if (username == "") {
+        usernamecontainer.innerHTML = `Not signed in.`
+    } else {
+        usernamecontainer.innerHTML = `Hello, ${username}!`
+    }
+    var logo_full = document.getElementById("logo_full")
+    var logo_small = document.getElementById("logo_small")
+    var smallbtn = document.getElementById("smallbtn1")
+    var smallbtn0 = document.getElementById("smallbtn0")
+    var smallbtn2 = document.getElementById("smallbtn2")
+    var smallbtn3 = document.getElementById("smallbtn3")
+    var smallbtn1 = document.getElementById("smallbtn4")
+    var smallbtn5 = document.getElementById("smallbtn5")
+    var viewport_width = window.innerWidth;
+    if (viewport_width < 900) {
+        logo_full.className = "invisible";
+        logo_small.className = "";
+    } else {
+        logo_small.className = "invisible";
+        logo_full.className = "";
+    }
+    if (viewport_width < 600) {
+        smallbtn.className = "invisible";
+        smallbtn2.className = "invisible";
+        smallbtn3.className = "invisible";
+    } else {
+        smallbtn.className = "navbarbutton";
+        smallbtn2.className = "navbarbutton";
+        smallbtn3.className = "navbarbutton";
+    }
+    if (viewport_width < 425) {
+        smallbtn0.className = "invisible";
+        smallbtn1.className = "invisible";
+    } else {
+        smallbtn0.className = "navbarbutton";
+        smallbtn1.className = "navbarbutton";
+    }
+    if (viewport_width < 280) {
+        smallbtn5.className = "invisible";
+    } else {
+        smallbtn5.className = "navbarbutton";
+    }
+    var alert = document.getElementById("alert")
+    var alerttext = document.getElementById("alerttext")
+    if (window.location.hostname == "") {   
+        alerttext.innerHTML = "You are using this locally.";
+        alert.className = "";
+    } else if (window.location.hostname == "thomasluigi07.github.io") {
+        alerttext.innerHTML = "You are using this on the github pages site.";
+        alert.className = "";
+    } else if (window.location.hostname == "MORBLOX.com") {
+            alerttext.innerHTML = "You are using MORBLOX.com";
+            alert.className = "";
+    } else if (window.location.hostname == "morblox.us") {
+        alerttext.innerHTML = "You are using morblox.us";
+        alert.className = "";
+    } else {
+        alerttext.innerHTML = `You are using an unknown site (${window.location.hostname})`;
+        alert.className = "";
+    }
+};
\ No newline at end of file
diff --git a/index.html b/index.html
index 885db81..4429932 100644
--- a/index.html
+++ b/index.html
@@ -14,8 +14,7 @@
         <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
         <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
         <link rel="stylesheet" href="main.css">
-        <script src="main.js"></script>
-        <script src="index.html"></script>
+        <script type="text/javascript" src="index.js"></script>
     </head>
     <body>
         <div class="navbar">
@@ -49,6 +48,13 @@
             <p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
             <p id="morblox" class=""><a href="https://morblox.us">Click Here</a> to go to the published site.</p>
             <p id="discord"><a href="https://discord.gg/nudzQ7hkWY">Click Here</a> to join our discord!</p>
+            <h2>DEBUG Settings</h2>
+            <form>
+                <p>Set Username:</p>
+                <input id="UsernameSet" type="text" name="username" placeholder="">
+                <button id="UsernameButton">Save...</button>
+                <p id="UsernameContainer">Your username is:</p>
+            </form>
         </div>
         <footer>
             <a href="privacy.html">Privacy Policy</a>
diff --git a/index.js b/index.js
index 1b9715c..f5ed07d 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,42 @@
+window.addEventListener('resize', function() {
+    var logo_full = document.getElementById("logo_full")
+    var logo_small = document.getElementById("logo_small")
+    var smallbtn = document.getElementById("smallbtn1")
+    var smallbtn0 = document.getElementById("smallbtn0")
+    var smallbtn2 = document.getElementById("smallbtn2")
+    var smallbtn3 = document.getElementById("smallbtn3")
+    var smallbtn1 = document.getElementById("smallbtn4")
+    var smallbtn5 = document.getElementById("smallbtn5")
+    var viewport_width = window.innerWidth;
+    if (viewport_width < 900) {
+        logo_full.className = "invisible";
+        logo_small.className = "";
+    } else {
+        logo_small.className = "invisible";
+        logo_full.className = "";
+    }
+    if (viewport_width < 600) {
+        smallbtn.className = "invisible";
+        smallbtn2.className = "invisible";
+        smallbtn3.className = "invisible";
+    } else {
+        smallbtn.className = "navbarbutton";
+        smallbtn2.className = "navbarbutton";
+        smallbtn3.className = "navbarbutton";
+    }
+    if (viewport_width < 425) {
+        smallbtn0.className = "invisible";
+        smallbtn1.className = "invisible";
+    } else {
+        smallbtn0.className = "navbarbutton";
+        smallbtn1.className = "navbarbutton";
+    }
+    if (viewport_width < 280) {
+        smallbtn5.className = "invisible";
+    } else {
+        smallbtn5.className = "navbarbutton";
+    }
+});
 window.onload = function() {
     var morblox = document.getElementById("morblox")
     if (window.location.hostname == "") {   
@@ -11,4 +50,68 @@ window.onload = function() {
     } else {
         morblox.className = "";
     }
-};
\ No newline at end of file
+    var logo_full = document.getElementById("logo_full")
+    var logo_small = document.getElementById("logo_small")
+    var smallbtn = document.getElementById("smallbtn1")
+    var smallbtn0 = document.getElementById("smallbtn0")
+    var smallbtn2 = document.getElementById("smallbtn2")
+    var smallbtn3 = document.getElementById("smallbtn3")
+    var smallbtn1 = document.getElementById("smallbtn4")
+    var smallbtn5 = document.getElementById("smallbtn5")
+    var viewport_width = window.innerWidth;
+    if (viewport_width < 900) {
+        logo_full.className = "invisible";
+        logo_small.className = "";
+    } else {
+        logo_small.className = "invisible";
+        logo_full.className = "";
+    }
+    if (viewport_width < 600) {
+        smallbtn.className = "invisible";
+        smallbtn2.className = "invisible";
+        smallbtn3.className = "invisible";
+    } else {
+        smallbtn.className = "navbarbutton";
+        smallbtn2.className = "navbarbutton";
+        smallbtn3.className = "navbarbutton";
+    }
+    if (viewport_width < 425) {
+        smallbtn0.className = "invisible";
+        smallbtn1.className = "invisible";
+    } else {
+        smallbtn0.className = "navbarbutton";
+        smallbtn1.className = "navbarbutton";
+    }
+    if (viewport_width < 280) {
+        smallbtn5.className = "invisible";
+    } else {
+        smallbtn5.className = "navbarbutton";
+    }
+    var alert = document.getElementById("alert")
+    var alerttext = document.getElementById("alerttext")
+    if (window.location.hostname == "") {   
+        alerttext.innerHTML = "You are using this locally.";
+        alert.className = "";
+    } else if (window.location.hostname == "thomasluigi07.github.io") {
+        alerttext.innerHTML = "You are using this on the github pages site.";
+        alert.className = "";
+    } else if (window.location.hostname == "MORBLOX.com") {
+            alerttext.innerHTML = "You are using MORBLOX.com";
+            alert.className = "";
+    } else if (window.location.hostname == "morblox.us") {
+        alerttext.innerHTML = "You are using morblox.us";
+        alert.className = "";
+    } else {
+        alerttext.innerHTML = `You are using an unknown site (${window.location.hostname})`;
+        alert.className = "";
+    }
+    var usernamecontainer = document.getElementById("UsernameContainer");
+    var username = localStorage.getItem("username");
+    usernamecontainer.innerHTML = "Your username is: " + username
+    document.getElementById('UsernameButton').onclick = function() {
+        var usernameset = document.getElementById("UsernameSet").value;
+        var usernamecontainer = document.getElementById("UsernameContainer");
+        localStorage.setItem("username",usernameset);
+        usernamecontainer.innerHTML = "Your username is: " + usernameset
+     };
+}; 
\ No newline at end of file
diff --git a/main.css b/main.css
index f5154f9..f956a36 100644
--- a/main.css
+++ b/main.css
@@ -97,7 +97,7 @@ body {
     padding-bottom: 5px;
     padding-top: 5px;
 }
-.content p a {
+.content p a, .content a {
     color: black
 }
 footer {
