Merge pull request #99 from SmartGecko44/timer

gxcko.me/src/App.tsx

@@ -4,6 +4,7 @@ import {ThemeProvider} from "./contexts/ThemeContext.tsx";
 import BottomBanner from "./components/BottomBanner.tsx";
 import {BlurProvider} from "./contexts/BlurContext.tsx";
 import ContentContainer from "./components/ContentContainer.tsx";
+import PageTime from "./components/PageTime.tsx";
 
 export default function App() {
     return (
@@ -14,6 +15,7 @@ export default function App() {
                     <ContentContainer/>
                     <CookiePopup/>
                     <BottomBanner/>
+                    <PageTime/>
                 </div>
             </BlurProvider>
         </ThemeProvider>

gxcko.me/src/components/PageTime.tsx

@@ -0,0 +1,28 @@
+import {useState} from "react";
+import {useBlur} from "../contexts/BlurContext.tsx";
+
+export default function PageTime() {
+
+    const [seconds, setSeconds] = useState(0);
+
+    setTimeout(() => {
+        setSeconds(seconds + 1);
+    }, 1000);
+
+    const {blur} = useBlur();
+
+    const secondsToString = (seconds: number) => {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor(seconds % 3600 / 60);
+        const secondsString = Math.floor(seconds % 3600 % 60);
+        console.log(hours + "h" + minutes + "m" + secondsString + "s");
+        return `${hours === 0 ? "" : hours < 10 ? "0" + hours + "h" + ":" : hours + "h" + ":"}${minutes === 0 && hours === 0 ? "" : minutes < 10 ? "0" + minutes + "m" + ":" : minutes + "m" + ":"}${secondsString === 0 && minutes === 0 && hours === 0 ? "" : secondsString < 10 ? "0" + secondsString + "s" : secondsString + "s"}`;
+    }
+
+    return (
+        <div id="pageTime" className={blur ? 'blur' : ""}>
+            <p>Time wasted on this page: {secondsToString(seconds)}</p>
+            {seconds > 3600 ? <p>Why are you still here?</p> : ""}
+        </div>
+    )
+}

gxcko.me/styles/text.css

@@ -34,4 +34,18 @@
 
 .half-br {
     margin-top: 0.5em;
+}
+
+#pageTime {
+    text-align: right;
+    font-size: x-large;
+    position: fixed;
+    bottom: 0;
+    right: 1%;
+    transition: all 1s ease-in-out,
+        color 0s;
+}
+
+#pageTime.blur {
+    filter: blur(5px);
 }