Updating things

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ['https://deinserverhost.de/store/aff.php?aff=4224']

README.md

@@ -1,7 +1,18 @@
-# CPS-Clicktest
-Just a CPS Clicktest.
-
-# You wanna know how many CPS do you get?
-Then [click here](https://example.com/)!
-
-
+<!--# Badges -->
+![GitHub package.json version](https://img.shields.io/github/package-json/v/InvalidLenni/CPS-clicktest?style=for-the-badge)
+![GitHub issues](https://img.shields.io/github/issues/InvalidLenni/CPS-clicktest?style=for-the-badge)
+
+
+
+# Just a CPS Clickertest
+
+This is the source code of [CPS Clicktest](https://cps-clicktest.vercel.app/).
+
+## You found Issues?
+
+Report them [there](https://github.com/InvalidLenni/CPS-Clicktest/issues/new).
+
+## Thanks to
+
+- Vercel *-* for hosting.
+- Shields *-* for the badges.

footer.php

@@ -0,0 +1,13 @@
+<footer class="mastfoot mb-auto">
+  <div class="container-fluid mb-auto">
+      <div class="">
+          <div class="">    
+            <p style="position:static; text-align: center; padding-bottom: 10%; font-size: 19px; margin: 0px; padding: 0px;"><a href="https://cps-clicktest.vercel.app/"
+                      style="text-decoration: none; color: white;">Made with 💖 by</a></br>InvalidLenni ©
+                  2021 - <script>document.write((new Date()).getFullYear()) </script>. All<br>
+                  rights reserved. Source code available at <a href="https://github.com/InvalidLenni/invalidlenni.github.io/">Github</a> and the website will be hosted by <a href="https://vercel.app/">Vercel</a>.</br></p>
+      </div>
+    </div>
+  </div>
+</div>
+</footer>

index.html

@@ -5,93 +5,28 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Import CSS and Assets -->
-    <link rel="icon" href="assets/favicon.png">
+    <link rel="icon" href="../assets/favicon.png">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/main.css">
     <!-- Import Icons -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/fontawesome.min.css" integrity="sha512-8Vtie9oRR62i7vkmVUISvuwOeipGv8Jd+Sur/ORKDD5JiLgTGeBSkI3ISOhc730VGvA5VVQPwKIKlmi+zMZ71w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/solid.min.css" integrity="sha512-6/gTF62BJ06BajySRzTm7i8N2ZZ6StspU9uVWDdoBiuuNu5rs1a8VwiJ7skCz2BcvhpipLKfFerXkuzs+npeKA==" crossorigin="anonymous" referrerpolicy="no-referrer" />  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/brands.min.css" integrity="sha512-bSncow0ApIhONbz+pNI52n0trz5fMWbgteHsonaPk42JbunIeM9ee+zTYAUP1eLPky5wP0XZ7MSLAPxKkwnlzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />  <!-- Import manifest.json -->
-    <link rel="manifest" href="manifest.json">
     <!-- Make twitter:... embed -->
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@invalidlenni" />
     <meta name="twitter:title" content="InvalidLenni" />
-    <meta name="twitter:description" content="On the website can you find my projects, about me and more." />
-    <meta name="twitter:image" content="https://invalidlenni.de/assets/favicon.png" />
+    <meta name="twitter:description" content="Just a CPS Clicktest." />
+    <meta name="twitter:image" content="https://cps-clicktest.vercel.app/assets/favicon.png" />
     <!-- Make og:... embed -->
-    <meta content="CPS Clicker" property="og:title" />
-    <meta content="How many CPS do you get?" property="og:description" />
-    <meta content="https://cps.invalidlenni.de/" property="og:url" />
+    <meta content="CPS Clicktest" property="og:title" />
+    <meta content="Just a Clicktest" property="og:description" />
+    <meta content="https://cps-clicktest.vercel.app/" property="og:url" />
     <meta content="assets/favicon.png" property="og:image" />
     <meta content="#43B581" data-react-helmet="true" name="theme-color" />  
-    <meta name="robots" content="noindex" />
-    <title>CPS Clicker</title> 
+    <title>CPS Clicktest</title> 
   </head>
-<style type="text/css">
-  #content {
-    width: 200px;
-    border: 1px dashed #dc0000;
-    font-size: 20px;
-    text-align: center;
-    margin: 0 auto;
-    margin-top: 50px;
-    padding: 20px;
-    user-select: none;
-  }
-
-  #clickarea {
-    width: 500px;
-    height : 300px;
-    border: 2px solid #00ff55;
-    font-size: 20px;
-    text-align: center;
-    margin: 0 auto;
-    margin-top: 50px;
-    padding: 20px;
-    position: relative;
-  }
-
-  #logo {
-    width: 200px;
-    height: 200px;
-    margin: 0 auto;
-    margin-top: 50px;
-    display: block;
-    user-select: none;
-  }
-
-  #start {
-    position: absolute;
-    top: 50%; left: 50%;
-    transform: translate(-50%,-50%);
-    border: 0;
-    line-height: 2.5;
-    padding: 0 20px;
-    font-size: 1rem;
-    text-align: center;
-    color: #fff;
-    text-shadow: 1px 1px 1px #000;
-    border-radius: 10px;
-    background-color: rgba(220, 0, 0, 1);
-    background-image: linear-gradient(to top left,
-                  rgba(0, 0, 0, .2),
-                  rgba(0, 0, 0, .2) 30%,
-                  rgba(0, 0, 0, 0));
-    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
-                inset -2px -2px 3px rgba(0, 0, 0, .6);
-  }
-
-  #start:hover {
-    background-color: rgba(255, 0, 0, 1);
-  }
-
-  #start:active {
-    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
-                inset 2px 2px 3px rgba(0, 0, 0, .6);
-  }
-</style>
 </head>
 <body>
   <center><h1 style="color: white;"></h1></center>
@@ -100,91 +35,100 @@
     Score: <span id="score"></span><br/>
     Clicks/s: <span id="clicks"></span>
   </div>
+  <br>
   <div id="clickarea">
+    <center><input id="durationInP" type="number" required placeholder="Enter the duration." min="10"></center>
     <button id="start">I'm ready!</button>
   </div>
-  <script type="text/javascript">
-    var score; // to store the current score
-    var duration = 10; // 10 seconds
-    var startTime; // start time
-    var ended = true; // boolean indicating if game is ended
-    // we get DOM References for some HTML elements
-    var timerTxt = document.getElementById("timer");
-    var scoreTxt = document.getElementById("score");
-    var clicksTxt = document.getElementById("clicks");
-    var startBtn = document.getElementById("start");
-    var clickArea = document.getElementById("clickarea");
-    // we define two functions for showing or hiding a HTML element
-    var show = function(elem) {
-      elem.style.display = 'inline';
-    };
-    var hide = function(elem) {
-      elem.style.display = 'none';
-    };
-    // Method called when the game starts
-    function startGame() {
-      hide(startBtn);
-      score = -1;
-      ended = false;
-      // we get start time
-      startTime = new Date().getTime();
-      // we create a timer with the setInterval method
-      var timerId = setInterval(function() {
-        var total = (new Date().getTime() - startTime) / 1000;
-        // while total lower than duration, we update timer and the clicks by seconds
-        if (total < duration) {
-          timerTxt.textContent = total.toFixed(3);
-          clicksTxt.textContent = (score / total).toFixed(2);
-        } else {
-          // otherwise, game is ended, we clear interval and we set game as ended
-          ended = true;
-          clearInterval(timerId);
-          // we call the end game method
-          endGame();
-        }
-      }, 1);
-  }
-  // end game method
-  function endGame() {
-    // we write final stats
-    var clicsBySeconds = (score / duration).toFixed(2);
-    timerTxt.textContent = duration.toFixed(3);
-    clicksTxt.textContent = clicsBySeconds;
-    // we show start button to play an other game
-    show(startBtn);
-    // we display result to the user in delayed mode 
-    //to update DOM elements just before the alert
-    setTimeout(function() {
-      alert('You made ' + score + ' clicks in ' + duration + 
-      ' seconds. It is ' + clicsBySeconds + 
-      ' clicks by seconds. Try again!');
-    }, 10);
-  }
-  // we set a click event listener on the start button
-  startBtn.addEventListener("click", function(e) {
-    startGame();
-  });
-  // we add a click event listener on the click area div to update the score when the user will click
-  clickArea.addEventListener("click", function(e) {
-    if (!ended) {
-      score++;
-      scoreTxt.textContent = score;
+</body>
+<br>
+<br>
+<hr>
+<script>
+
+  var score; 
+var startTime; 
+var ended = true; 
+var durationInP = document.getElementById("durationInP");
+var duration = durationInP;
+var timerTxt = document.getElementById("timer");
+var scoreTxt = document.getElementById("score");
+var clicksTxt = document.getElementById("clicks");
+var startBtn = document.getElementById("start");
+var clickArea = document.getElementById("clickarea");
+var show = function(elem) {
+  elem.style.display = 'inline';
+};
+var hide = function(elem) {
+  elem.style.display = 'none';
+};
+function startGame() {
+  hide(startBtn); 
+  hide(durationInP)
+  score = -1;
+  ended = false;
+  startTime = new Date().getTime();
+  var timerId = setInterval(function() {
+    var total = (new Date().getTime() - startTime) / 1000;
+    console.log(total)
+    if (total < duration) {
+      timerTxt.textContent = total.toFixed(3);
+      clicksTxt.textContent = (score / total).toFixed(2);
+    } else {
+      ended = true;
+      clearInterval(timerId);
+      endGame();
     }
-  });
+  }, 1);
+}
+
+function endGame() {
+var clicsBySeconds = (score / duration).toFixed(2);
+timerTxt.textContent = duration.toFixed(3);
+clicksTxt.textContent = clicsBySeconds;
+show(startBtn);
+show(durationInP)
+setTimeout(function() {
+  alert('You made ' + score + ' clicks in ' + duration + 
+  ' seconds. It is ' + clicsBySeconds + 
+  ' clicks by seconds. Try again!');
+}, 10);
+}
+startBtn.addEventListener("click", function(e) {
+startGame();
+});
+clickArea.addEventListener("click", function(e) {
+if (!ended) {
+  score++;
+  scoreTxt.textContent = score;
+}
+});
+
 </script>
-</body>
 <footer class="mastfoot mb-auto">
   <div class="container-fluid mb-auto">
       <div class="">
           <div class="">    
-            <p style="position:static; text-align: center; padding-bottom: 10%; font-size: 19px; margin: 0px; padding: 0px;"><a href="https://invalidlenni.de/"
+            <p style="position:static; text-align: center; padding-bottom: 10%; font-size: 19px; margin: 0px; padding: 0px;"><a href="https://cps-clicktest.vercel.app/"
                       style="text-decoration: none; color: white;">Made with 💖 by</a></br>InvalidLenni ©
-                  <script>document.write((new Date()).getFullYear()) </script>. All<br>
-                  rights reserved. Source code available at <a href="https://github.com/InvalidLenni/invalidlenni.github.io/">Github</a> and the website will be hosted by <a href="https://netlify.com/">Netlify</a>. You can support me <a href="https://deinserverhost.de/store/aff.php?aff=4224">here</a> with money. You can you join my discord server or follow my twitter account <strong>without money</strong>.</br></p>
+                  2021 - <script>document.write((new Date()).getFullYear()) </script>. All<br>
+                  rights reserved. Source code available at <a href="https://github.com/InvalidLenni/invalidlenni.github.io/">Github</a> and the website will be hosted by <a href="https://vercel.app/">Vercel</a>.</br></p>
       </div>
     </div>
   </div>
 </div>
 </footer>
+<script src="scripts/cps.js"></script>
+<script>
+  if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('./scripts/sw.js')
+      })
+    }
+    window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault()
+    })
+
+</script> 
 </html>
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "cpsclicktest",
     "description": "Just a CPS Clicktest.",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "author": {
         "name": "InvalidLenni",
         "email": "contact@invalidlenni.de",

scripts/cps.js

@@ -0,0 +1,57 @@
+var score; 
+var startTime; 
+var ended = true; 
+var durationInP = document.getElementById("durationInP");
+var duration = int(durationInP());
+var timerTxt = document.getElementById("timer");
+var scoreTxt = document.getElementById("score");
+var clicksTxt = document.getElementById("clicks");
+var startBtn = document.getElementById("start");
+var clickArea = document.getElementById("clickarea");
+var show = function(elem) {
+  elem.style.display = 'inline';
+};
+var hide = function(elem) {
+  elem.style.display = 'none';
+};
+function startGame() {
+  hide(startBtn); 
+  hide(durationInP)
+  score = -1;
+  ended = false;
+  startTime = new Date().getTime();
+  var timerId = setInterval(function() {
+    var total = (new Date().getTime() - startTime) / 1000;
+    console.log(total)
+    if (total < duration) {
+      timerTxt.textContent = total.toFixed(3);
+      clicksTxt.textContent = (score / total).toFixed(2);
+    } else {
+      ended = true;
+      clearInterval(timerId);
+      endGame();
+    }
+  }, 1);
+}
+
+function endGame() {
+var clicsBySeconds = (score / durationInP).toFixed(2);
+timerTxt.textContent = durationInP.toFixed(3);
+clicksTxt.textContent = clicsBySeconds;
+show(startBtn);
+show(durationInP)
+setTimeout(function() {
+  alert('You made ' + score + ' clicks in ' + durationInP + 
+  ' seconds. It is ' + clicsBySeconds + 
+  ' clicks by seconds. Try again!');
+}, 10);
+}
+startBtn.addEventListener("click", function(e) {
+startGame();
+});
+clickArea.addEventListener("click", function(e) {
+if (!ended) {
+  score++;
+  scoreTxt.textContent = score;
+}
+});

scripts/sw.js

@@ -0,0 +1,7 @@
+importScripts('https://arc.io/arc-sw-core.js')
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
+
+workbox.routing.registerRoute(
+  /.*/,
+  new workbox.strategies.NetworkFirst()
+);