FIX: 404 error text didn't move correctly

frontend/src/App.vue

@@ -247,4 +247,14 @@ export default {
 .not-collapsed > .collapse-icon {
   transform: rotate(-180deg);
 }
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
 </style>

frontend/src/views/PageNotFound.vue

 <template>
-  <div ref="404-bounds" style="width: 100%; height: 500px;">
-    <div ref="404"
+  <div ref="404-bounds" style="width: 100%; height: 700px; position: relative; overflow: visible">
+    <div ref="404" class="noselect" @click="clicked404"
          style="position: relative; left: 1px; top: 1px; display: inline-block; text-align: center">
-      <span style="font-size: 130px; font-weight: bold; line-height: 105px">404</span><br>
-      <span style="font-size: 30px; font-weight: bold;">Ungültige URL!</span>
+      <span style="font-size: 130px; font-weight: bold; line-height: 105px">{{ scoreL }}0{{ scoreR }}</span><br>
+      <span style="font-size: 30px; font-weight: bold;">{{ subText }}</span>
     </div>
+    <span v-if="game" ref="paddle-left" class="paddle left" style="top: 100px;"/>
+    <span v-if="game" ref="paddle-right" class="paddle right" style="top: 100px;"/>
   </div>
 </template>
 
 <script>
+import Mousetrap from 'mousetrap'
+
 export default {
   name: 'PageNotFound',
   mounted() {
-    this.yspeed = this.xspeed = this.speed
+    this.xspeed = this.yspeed = this.baseSpeed
     this.$refs['404'].style.color = this.random_color()
     this.animate()
   },
@@ -23,15 +27,27 @@ export default {
     return {
       running: true,
       frameInterval: 1000 / 30, // 30 FPS
-      speed: 5,
-      xspeed: 0,
-      yspeed: 0,
-      hue: Math.random() * 256
+      baseSpeed: 5,
+      xspeed: 5,
+      yspeed: 5,
+      hue: Math.random() * 256,
+      clicks: 0,
+      scoreL: 4,
+      scoreR: 4,
+      dirL: 0,
+      dirR: 0,
+      paddleSpeed: 20,
+      game: false,
+      speedIncreaseFactor: 5,
+      speedIncreaseBase: 5,
+      subText: 'Ungültige URL!'
     }
   },
   methods: {
     animate() {
       const logo = this.$refs['404']
+      const paddleL = this.$refs['paddle-left']
+      const paddleR = this.$refs['paddle-right']
       if (logo) {
         const logo_rect = logo.getBoundingClientRect()
         const bounds_rect = this.$refs['404-bounds'].getBoundingClientRect()
@@ -39,35 +55,142 @@ export default {
         // window.console.log(parseInt(logo.style.left) + ' : ' + parseInt(logo.style.top))
 
         if (logo_rect.left <= bounds_rect.left) {
-          this.xspeed = this.speed
-          logo.style.color = this.random_color()
+          this.xspeed = -this.xspeed
+          this.bounce(logo)
+          if (this.game) {
+            const paddle_rect = this.$refs['paddle-left'].getBoundingClientRect()
+            if (logo_rect.top > paddle_rect.bottom || logo_rect.bottom < paddle_rect.top) {
+              if (this.scoreR === 9) {
+                this.game = false
+                this.subText = 'Rechts gewinnt!'
+                this.clicks = 0
+                this.xspeed = this.baseSpeed * Math.sign(this.xspeed)
+                this.yspeed = this.baseSpeed * Math.sign(this.yspeed)
+              } else this.scoreR += 1
+              this.xspeed = this.baseSpeed * Math.sign(this.xspeed)
+              this.yspeed = this.baseSpeed * Math.sign(this.yspeed)
+              this.$nextTick(() => {
+                logo.style.left = '1px'
+              })
+            } else {
+              this.xspeed += ((Math.random() - 0.75) * this.speedIncreaseFactor + this.speedIncreaseBase) * Math.sign(this.xspeed)
+              this.yspeed += ((Math.random() - 0.75) * this.speedIncreaseFactor + this.speedIncreaseBase) * Math.sign(this.yspeed)
+            }
+          }
         } else if (logo_rect.right >= bounds_rect.right) {
-          this.xspeed = -this.speed
-          logo.style.color = this.random_color()
+          this.xspeed = -this.xspeed
+          this.bounce(logo)
+          if (this.game) {
+            const paddle_rect = this.$refs['paddle-right'].getBoundingClientRect()
+            if (logo_rect.top > paddle_rect.bottom || logo_rect.bottom < paddle_rect.top) {
+              if (this.scoreL === 9) {
+                this.game = false
+                this.subText = 'Links gewinnt!'
+                this.clicks = 0
+                this.xspeed = this.baseSpeed * Math.sign(this.xspeed)
+                this.yspeed = this.baseSpeed * Math.sign(this.yspeed)
+              } else this.scoreL += 1
+              this.xspeed = this.baseSpeed * Math.sign(this.xspeed)
+              this.yspeed = this.baseSpeed * Math.sign(this.yspeed)
+              this.$nextTick(() => {
+                logo.style.left = bounds_rect.width - logo_rect.width - 1 + 'px'
+              })
+            } else {
+              this.xspeed += ((Math.random() - 0.75) * this.speedIncreaseFactor + this.speedIncreaseBase) * Math.sign(this.xspeed)
+              this.yspeed += ((Math.random() - 0.75) * this.speedIncreaseFactor + this.speedIncreaseBase) * Math.sign(this.yspeed)
+            }
+          }
         }
 
         if (logo_rect.top <= bounds_rect.top) {
-          this.yspeed = this.speed
-          logo.style.color = this.random_color()
+          this.yspeed = -this.yspeed
+          this.bounce(logo)
         } else if (logo_rect.bottom >= bounds_rect.bottom) {
-          this.yspeed = -this.speed
-          logo.style.color = this.random_color()
+          this.yspeed = -this.yspeed
+          this.bounce(logo)
         }
 
         logo.style.left = parseInt(logo.style.left) + this.xspeed + 'px'
         logo.style.top = parseInt(logo.style.top) + this.yspeed + 'px'
 
+        if (this.game) {
+          paddleL.style.top = parseInt(paddleL.style.top) + this.dirL * this.paddleSpeed + 'px'
+          paddleR.style.top = parseInt(paddleR.style.top) + this.dirR * this.paddleSpeed + 'px'
+        }
+
         setTimeout(this.animate, this.frameInterval)
       }
     },
     random_color() {
       this.hue += Math.random() * 180 + 90
       return `hsl(${this.hue}, ${Math.random() * 25 + 75}%, ${Math.random() * 50 + 25}%)`
+    },
+    clicked404() {
+      this.clicks += 1
+      if (this.clicks === 5) {
+        this.start_game()
+      }
+    },
+    start_game() {
+      this.game = true
+      this.scoreL = 0
+      this.scoreR = 0
+      this.subText = 'Ungültige URL!'
+      const self = this
+      Mousetrap.bind('up', function (e) {
+        e.preventDefault()
+        self.dirR = -1
+      })
+      Mousetrap.bind('down', function (e) {
+        e.preventDefault()
+        self.dirR = 1
+      })
+      Mousetrap.bind('w', function (e) {
+        e.preventDefault()
+        self.dirL = -1
+      })
+      Mousetrap.bind('s', function (e) {
+        e.preventDefault()
+        self.dirL = 1
+      })
+      Mousetrap.bind('up', function (e) {
+        e.preventDefault()
+        self.dirR = 0
+      }, 'keyup')
+      Mousetrap.bind('down', function (e) {
+        e.preventDefault()
+        self.dirR = 0
+      }, 'keyup')
+      Mousetrap.bind('w', function (e) {
+        e.preventDefault()
+        self.dirL = 0
+      }, 'keyup')
+      Mousetrap.bind('s', function (e) {
+        e.preventDefault()
+        self.dirL = 0
+      }, 'keyup')
+    },
+    bounce(logo) {
+      logo.style.color = this.random_color()
+      if (this.game) this.speed += 1
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.paddle {
+  position: absolute;
+  background: black;
+  width: 5px;
+  height: 50px;
+}
 
+.paddle.left {
+  left: 0;
+}
+
+.paddle.right {
+  right: 0;
+}
 </style>