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
4 years ago
|
<!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>
|