70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
|
|
Vue.component('play-button', {
|
|
props: ["state", "icon"],
|
|
methods: {
|
|
clicked: function() {
|
|
this.$emit('click', {event: this.icon});
|
|
},
|
|
css() {
|
|
let result = "play-button";
|
|
if (this.state == this.icon) {
|
|
result += " player-active";
|
|
}
|
|
return result;
|
|
}
|
|
},
|
|
template: `
|
|
<div :class="css()">
|
|
<img :src="'images/' + icon + '.png'" v-on:click="clicked">
|
|
</div>
|
|
`
|
|
});
|
|
|
|
Vue.component('play-controls', {
|
|
mounted: function() {
|
|
this.request.startRequesting("entity/flecs/core/World");
|
|
},
|
|
beforeDestroy: function() {
|
|
this.stopRequesting();
|
|
},
|
|
data: function() {
|
|
return {
|
|
state: undefined,
|
|
request: new PeriodicRequest(100, this.on_recv_world, this.on_recv_err),
|
|
data: undefined
|
|
}
|
|
},
|
|
methods: {
|
|
play: function(e) {
|
|
this.state = e.event;
|
|
app.put("player/" + e.event, (msg) => { });
|
|
},
|
|
on_recv_world(data) {
|
|
this.data = data;
|
|
if (!this.state) {
|
|
const state = this.data.data["flecs.player.Player"];
|
|
if (state.state == "EcsPlayerPlay") {
|
|
this.state = "play";
|
|
} else if (state.state == "EcsPlayerStop") {
|
|
this.state = "stop";
|
|
} else if (state.state == "EcsPlayerPause") {
|
|
this.state = "pause";
|
|
}
|
|
}
|
|
},
|
|
on_recv_err() {
|
|
this.state = undefined;
|
|
}
|
|
},
|
|
template: `
|
|
<div class="play-controls">
|
|
<div class="play-buttons">
|
|
<play-button icon="stop" :state="state" v-on:click="play"></play-button>
|
|
<play-button icon="play" :state="state" v-on:click="play"></play-button>
|
|
<play-button icon="pause" :state="state" v-on:click="play"></play-button>
|
|
</div>
|
|
<perf-summary :data="data"></perf-summary>
|
|
</div>
|
|
`
|
|
});
|