Commit 31bd3cde authored by gj4210's avatar gj4210 👽 Committed by janis.streib
Browse files

FIX: 404 error text didn't move correctly

parent 5d06a9be
......@@ -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>
<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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment