You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.3 KiB
134 lines
3.3 KiB
<!DOCTYPE html> |
|
<html lang="de"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>fishy</title> |
|
<style> |
|
body { |
|
font-family: Arial,sans-serif; |
|
} |
|
|
|
.rod { |
|
float: right; |
|
width: 25px; |
|
height: 300px; |
|
border: 1px solid black; |
|
background-color: lightblue; |
|
padding: 0; |
|
|
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-end; |
|
} |
|
|
|
.hook { |
|
background-color: sandybrown; |
|
width: 100%; |
|
height: 50px; |
|
margin: 0; |
|
} |
|
|
|
.pull { |
|
background-color: cornflowerblue; |
|
width: 250px; |
|
height: 250px; |
|
border-radius: 15px; |
|
border: 5px solid darkblue; |
|
|
|
display: flex; |
|
align-content: space-around; |
|
justify-content: space-around; |
|
align-items: center; |
|
|
|
font-size: 4.7em; |
|
user-select: none; |
|
color: white; |
|
} |
|
|
|
.pull:active { |
|
background-color: #a4bbe5; |
|
margin-top: 3px; |
|
} |
|
|
|
.fish { |
|
|
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div id="root"> |
|
<div class="rod"> |
|
<p class="hook" :style="'margin-bottom: '+force*2+'px'"> |
|
</div> |
|
|
|
{{ force }} | {{ pull }} | {{ intervalID }}<br> |
|
<div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false"> |
|
<span>PULL</span> |
|
</div> |
|
<a href="javascript:">let there be fish</a> |
|
</div> |
|
</div> |
|
|
|
<script src="https://unpkg.com/vue@next"></script> |
|
<script type="text/javascript"> |
|
Array.prototype.random = function () { |
|
return this[Math.floor((Math.random()*this.length))]; |
|
} |
|
|
|
const FishApp = { |
|
data() { |
|
return { |
|
force: 0, |
|
pull: false, |
|
intervalID: null, |
|
fish: null, |
|
fishies: [ |
|
{ |
|
name: 'Freddy the fishy', |
|
strength: 1, |
|
quirky: false, |
|
points: 100 |
|
} |
|
] |
|
} |
|
}, |
|
watch: { |
|
pull() { |
|
let vue = this; |
|
window.clearInterval(vue.intervalID); |
|
|
|
if (vue.pull) { |
|
vue.intervalID = setInterval(function () { |
|
if (vue.force < 125) { |
|
vue.force = Number(vue.force) + 1; |
|
} |
|
}, 50); |
|
} else { |
|
vue.intervalID = setInterval(function () { |
|
if (vue.force >= 0.0) { |
|
vue.force = Number(vue.force) - 2; |
|
} |
|
|
|
if (vue.force < 0.7) { |
|
vue.force = 0; |
|
} |
|
}, 50); |
|
} |
|
} |
|
}, |
|
methods: { |
|
pullRod() { |
|
this.force = Number(this.force) + 0.5; |
|
}, |
|
deployFish() { |
|
this.fish = this.fishies.random; |
|
} |
|
} |
|
}; |
|
|
|
Vue.createApp(FishApp).mount('#root'); |
|
</script> |
|
</body> |
|
</html> |