Merge branch 'master' of https://github.com/Miodec/monkey-type

Author: Miodec

README.md

@@ -35,6 +35,6 @@ If you wish to support further development and feeling extra awesome, you can do
 1. Head to [the firebase console](https://console.firebase.google.com/u/0/) and make a new project (the project name doesnt really matter, but just name it `monkey-type`). You dont need to enable analytics for it.
 2. Install the [Firebase Command Line Interface](https://firebase.google.com/docs/cli), and use `firebase login` to log in to the same google account as you just used to make the project
 3. Make sure the project name inside `.firebaserc` is the same as what you made it in step 1
-4. Git clone the project and then run `firebase serve --only functions` to start a local server on post 5000. Use ctrl+c to stop it.
+4. Git clone the project and then run `firebase serve --only hosting` to start a local server on post 5000. Use ctrl+c to stop it.
 
 That should be it. If you run into any problems, let me know.

public/css/style.scss

@@ -351,6 +351,21 @@ a:hover {
     transition: 0.25s;
     padding: 0.5rem;
     border-radius: var(--roundness);
+    &.discord{
+      position: relative;
+      &::after{ 
+        transition: .25s;
+        width: .5rem;
+        height: .5rem;
+        content: "";
+        position: absolute;
+        background: #da3333;
+        border-radius: 1rem;
+        top: .25rem;
+        right: .25rem;
+        border: 2px solid var(--bg-color);
+      }
+    }
     &:focus{
       background: var(--sub-color);
       color: var(--main-color);
@@ -360,6 +375,9 @@ a:hover {
   }
 }
 
+#top.focus #menu .button.discord::after{
+  background: transparent;
+}
 
 #menu .button .icon {
   display: grid;

public/index.html

@@ -82,6 +82,11 @@
             <i class="fas fa-fw fa-info"></i>
           </div>
         </div>
+          <a class="button discord" tabindex="2" href="https://discord.gg/xMYrWg6" onclick="this.blur();" target="_blank" style="text-decoration: none;">
+            <div class="icon">
+              <i class="fab fa-discord"></i>
+            </div>
+          </a>
         <div class="button" tabindex="2" href="/settings" onclick="this.blur();">
           <div class="icon">
             <i class="fas fa-fw fa-cog"></i>
@@ -200,7 +205,7 @@ <h1>stats</h1>
         </div>
         <div class="section">
           <h1>bug report or feature request</h1>
-          <p>If you encounter a bug, or have a feature request - send me a message on Reddit, create an issue on <a href="https://github.com/Miodec/monkey-type">GitHub</a> or send me a message using the command line <key>esc</key>.</p>
+          <p>If you encounter a bug, or have a feature request - join the <a href="https://discord.gg/xMYrWg6">Discord server</a>, send me a message on Reddit, create an issue on <a href="https://github.com/Miodec/monkey-type">GitHub</a> or send me a message using the command line <key>esc</key>.</p>
         </div>
         <div class="section">
           <h1>credits</h1>

public/js/account.js

@@ -122,7 +122,7 @@ firebase.auth().onAuthStateChanged(function(user) {
     var providerData = user.providerData;
     showNotification('Signed in', 2000);
     $(".pageLogin .preloader").addClass('hidden');
-    updateAccountLoginButton() 
+    updateAccountLoginButton();
   }
 });
 

public/js/commandline.js

@@ -96,6 +96,13 @@ let commands = {
                 showCommandLine();
             }
         },
+        {
+            id: "joinDiscord",
+            display: "Join the Discord server",
+            exec: () => {
+                window.open("https://discord.gg/xMYrWg6")
+            }
+        },
         {
             id: "sendDevMessage",
             display: "Send a message ( bug report / feature request / feedback )...",

public/js/script.js

@@ -791,7 +791,7 @@ function updateAccountLoginButton() {
     // $("#menu .button.account").removeClass('hidden');
     // $("#menu .button.login").addClass('hidden');
   } else {
-    swapElements($("#menu .button.login"), $("#menu .button.account"), 250);
+    swapElements($("#menu .button.account"), $("#menu .button.login"), 250);
     // $("#menu .button.login").removeClass('hidden');
     // $("#menu .button.account").addClass('hidden');
   }

public/themes/dots.css

@@ -21,36 +21,44 @@
     color: #121520;
 }
 
-#menu .button:nth-child(1){
-    background: #9261ff;
-}
-
-#menu:before{
+/* #menu:before{
     content: "";
     background: #f94348;
     width: 1.25rem;
     height: 1.25rem;
     padding: .5rem;
     border-radius: 10rem;
-}
+} */
 
-#menu:after{
-    content: "";
-    background: #ff9349;
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: .5rem;
-    border-radius: 10rem;
+#menu .button:nth-child(1){
+    background: #f94348;
 }
 
 #menu .button:nth-child(2){
-    background: #3cc5f8;
+    background: #9261ff;
 }
 
 #menu .button:nth-child(3){
+    background: #3cc5f8;
+}
+
+#menu .button:nth-child(4){
     background: #4acb8a;
 }
 
-#menu .button:nth-child(4), #menu .button:nth-child(5){
+#menu .button:nth-child(5), #menu .button:nth-child(6){
     background: #ffd543;
-}
+}
+
+#menu:after{
+    content: "";
+    background: #ff9349;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: .5rem;
+    border-radius: 10rem;
+}
+
+#top.focus #menu .button.discord::after{
+    border-color: transparent;
+  }

public/themes/dracula.css

@@ -18,21 +18,25 @@
 }
 
 #menu .button:nth-child(1){
-  color: #8be9fd;
+  color: #ec75c4;
 }
 
 #menu .button:nth-child(2){
-  color: #50fa7b;
+  color: #8be9fd;
 }
 
 #menu .button:nth-child(3){
-  color: #f1fa8c;
+  color: #50fa7b;
 }
 
 #menu .button:nth-child(4){
-  color: #ffb86c;
+  color: #f1fa8c;
 }
 
 #menu .button:nth-child(5){
   color: #ffb86c;
+}
+
+#menu .button:nth-child(6){
+  color: #ffb86c;
 }

public/themes/oblivion.css

@@ -6,18 +6,22 @@
 }
 
 #menu .button:nth-child(1){
-    color: #8db14b;
+    color: #9a90b4;
 }
 
 #menu .button:nth-child(2){
-    color: #fca321;
+    color: #8db14b;
 }
 
 #menu .button:nth-child(3){
+    color: #fca321;
+}
+
+#menu .button:nth-child(4){
     color: #2984a5;
 }
 
-#menu .button:nth-child(4),
-#menu .button:nth-child(5){
+#menu .button:nth-child(5),
+#menu .button:nth-child(6){
     color: #dd452e;
 }

public/themes/serika.css

@@ -1,6 +1,6 @@
 :root {
-    --bg-color: #e2b714;
-    --main-color: #323437;
-    --caret-color: #323437;
-    --sub-color: #d1d0c5;
+    --main-color: #e2b714;
+    --caret-color: #e2b714;
+    --sub-color: #323437;
+    --bg-color: #e1e1e3;
 }