[pressffornoreason]add feature & file bundle

WebForFunThailand · Oct 10, 2019 · 8095e8b · 8095e8b
1 parent 05bad82
commit 8095e8b
Show file tree

Hide file tree

Showing 4 changed files with 187 additions and 100 deletions.
diff --git a/pressffornoreason/index.html b/pressffornoreason/index.html
@@ -1,28 +1,207 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
-    <link rel="stylesheet" href="style.css">
+    <style>
+        body {
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-around;
+            width: 100%;
+            height: 100vh;
+            margin: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+        }
+
+        #head-wrapper {
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #subtitle {
+            font-family: monospace;
+            color: #b4b038;
+            margin-top: 7vh;
+            position: absolute;
+            animation: minecraft 0.5s infinite linear;
+        }
+
+        #data-wrapper {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        #data-wrapper>* {
+            width: 50%;
+            /*demo*/
+            box-sizing: border-box
+        }
+
+        #data-wrapper>h3 {
+            margin: 0;
+            padding: 10px 0px;
+        }
+
+        @keyframes minecraft {
+            0% {
+                font-size: 1em;
+            }
+            50% {
+                font-size: 1.2em;
+            }
+            100% {
+                font-size: 1em;
+            }
+        }
+
+        #img-wrapper {
+            height: 270px;
+            width: 480px;
+            position: relative;
+            text-align: center;
+            box-shadow: 10px 0px 15px -5px rgba(0, 0, 0, 0.75);
+        }
+
+        #img-wrapper:active {
+            box-shadow: 10px 0px 15px -52px rgba(0, 0, 0, 0.75);
+            transform: translate(2px, 2px);
+        }
+
+        #img-wrapper>h1 {
+            position: absolute;
+            top: 25%;
+            left: 50%;
+            color: white;
+            font-size: 7rem;
+            transform: translate(-50%, -50%);
+        }
+
+        #img {
+            height: 270px;
+            width: 480px;
+        }
+
+        button {
+            height: 3rem;
+        }
+    </style>
 </head>
+
 <body>
     <div id="head-wrapper">
         <h1 id="text">Press F for no reason</h1>
-        <h3>(and hold to reset)</h3>
+        <h3 id="subtitle">yeah, that's it</h3>
     </div>
     <div>
-        <h3 id="counter"></h3>
-        <h3 id="timer"></h3>
-        <h3 id="fps">F per sec : 0.000</h3>
-        <h3 id="hs">highscore : 0</h3>
-        <h3 id="msg">hold F to reset</h3>
+        <div id="data-wrapper">
+            <h3 id="counter"></h3>
+            <h3 id="timer"></h3>
+            <h3 id="fps">F per sec : 0.000</h3>
+            <h3 id="hs">highscore : 0</h3>
+            <h3 id="total">total click : 0</h3>
+            <h3 id="sth"></h3>
+            <button id="reset">reset</button>
+            <button id="mf">mf-mode</button>
+        </div>
     </div>
     <div id="img-wrapper">
         <img id="img" src="f.gif"></img>
         <h1> F </h1>
     </div>
 </body>
-<script src="script.js"></script>
+<script>
+    const init = () => {
+        const quote = ["yeah, that's it", "f-pass", "(and hold to reset)", "f is for friend zone", "fruit ninja!", "foobarbaz", "nice", "ts6969&&hs420"]
+        document.querySelector("#subtitle").innerHTML = quote[Math.floor(Math.random()*quote.length)]
+        window.counter = 0
+        window.time = 60.00
+        window.start = false
+        window.highScore = +window.localStorage.getItem('highscore') || 0
+        window.totalClick = +window.localStorage.getItem('totalClick') || 0
+        document.querySelector("#mf").disabled = !(window.highScore>=420&&window.totalClick>=6969)
+        document.querySelector("#reset").disabled = !window.start
+        window.buttonMode = "f"
+        document.querySelector("#timer").innerHTML = `time : 60`
+        document.querySelector("#counter").innerHTML = `F pressed : ${window.counter}`
+        document.querySelector("#fps").innerHTML = "F per sec : 0.000"
+        document.querySelector("#hs").innerHTML = `highscore : ${window.highScore}`
+        document.querySelector("#total").innerHTML = `total click : ${window.totalClick}`
+    }
+    const reset = () => {
+        init()
+        clearTimeout(window.guide)
+        clearInterval(window.countdown)
+        clearInterval(window.persec)
+    }
+    const start = () => {
+        window.start = true
+        window.buttonMode = "f"
+        document.querySelector("#reset").disabled = !window.start
+        window.countdown = setInterval(() => {
+            window.time -= 0.01
+            document.querySelector("#timer").innerHTML = `time : ${window.time.toFixed(3)}`
+            if (window.time <= 0) {
+                window.start = false
+                clearInterval(window.countdown)
+                clearInterval(window.persec)
+                document.querySelector("#timer").innerHTML = "times up"
+                if (window.counter > window.highScore) {
+                    window.localStorage.setItem('highscore', window
+                    .counter)
+                    document.querySelector("#hs").innerHTML = `highscore : ${window.counter}`
+                }
+                window.localStorage.setItem('totalClick', window.totalClick)
+            }
+            if (isFinite(window.counter / (60 - window.time).toFixed(3)))
+                document.querySelector("#fps").innerHTML =
+                `F per sec :  ${(window.counter/(60-window.time)).toFixed(3)}`
+        }, 10)
+    }
+    document.addEventListener('keydown', e => {
+        if (e.key.toLowerCase() === "f" || e.key=== " ") if(window.start) {
+            document.querySelector("#counter").innerHTML =
+            `F pressed : ${++window.counter}`
+            document.querySelector("#total").innerHTML =
+            `total click : ${++window.totalClick}`
+        } else start()
+        if (e.key.toLowerCase() === "r" && window.start) reset()
+    })
+    document.querySelector("#img").addEventListener("mousedown", () => {
+        if(window.start) {
+            document.querySelector("#counter").innerHTML =
+            `F pressed : ${++window.counter}`
+            document.querySelector("#total").innerHTML =
+            `total click : ${++window.totalClick}`
+        } else start()
+        window.resetTimer = setTimeout(reset, 1500)
+    })
+    document.querySelector("#reset").addEventListener("click", () => {
+        reset()
+    })
+    document.querySelector("#mf").addEventListener("click", () => {
+        if(window.buttonMode==="f") {
+            window.buttonMode = "mf"
+            document.querySelector("#img").src = "./mf.gif"
+            document.querySelector("#mf").innerHTML = "f-mode"
+        } else {
+            window.buttonMode = "f"
+            document.querySelector("#img").src = "./f.gif"
+            document.querySelector("#mf").innerHTML = "mf-mode"
+        }
+    })
+    document.body.addEventListener("mouseup", () => {
+        if (window.resetTimer) clearTimeout(window.resetTimer)
+    })
+    init()
+</script>
+
 </html>
diff --git a/pressffornoreason/mf.gif b/pressffornoreason/mf.gif
diff --git a/pressffornoreason/script.js b/pressffornoreason/script.js
diff --git a/pressffornoreason/style.css b/pressffornoreason/style.css