Basically, the following code will add 5 points to the score every time the space key is pressed. And you click on the reset button to take the score back to 0.
<template>
<div class="test-gui">
<p>Test</p>
<div class="bar">
<div class="inner-bar" :style="{ width }"></div>
</div>
<button @click="resetScore">Reset</button>
</div>
</template>
<script>
export default {
name: 'test-gui',
inject: ['rpgKeypress'],
data() {
return {
score: 0,
maxScore: 100,
};
},
mounted() {
this.obs = this.rpgKeypress.subscribe(({ inputName, control }) => {
if (inputName === 'space') {
this.performAction();
}
});
},
methods: {
performAction() {
this.score += 5;
if (this.score > this.maxScore) {
this.score = this.maxScore;
}
console.log(this.score);
},
resetScore() {
console.log("reset");
this.score = 0;
},
},
computed: {
width() {
return ((this.score / this.maxScore) * 100) + '%';
}
},
unmounted() {
this.obs.unsubscribe();
},
}
</script>
<style>
.test-gui {
width: 400px;
height: 400px;
background: rgb(33, 206, 117);
}
</style>
However, after you click the reset button, no matter how many times you press space, it will always bring the score back to 0 (even if you do not press the reset button). I'm not sure why this happened, is it a bug? Can someone explain it for me?
here's a video to demonstrate it:
Also, the style is somehow shared with the other Vue components (the bar and inner-bar), I'm not sure if this is intentional
Thanks!
P/S: Do we have any way to track key hold? I can only find keyPress.