|
|
@@ -1,21 +1,97 @@
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ history: [],
|
|
|
+ state: {
|
|
|
+ completes: 0,
|
|
|
+ skips: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ keydown(event) {
|
|
|
+ if (event.code === 'Escape') this.skip()
|
|
|
+ if (event.code === 'Backspace') this.undo()
|
|
|
+ if (event.code === 'Space') this.complete()
|
|
|
+ },
|
|
|
+ newState(state) {
|
|
|
+ this.history.push(this.state)
|
|
|
+ this.state = {
|
|
|
+ ...this.state,
|
|
|
+ ...state
|
|
|
+ }
|
|
|
+ },
|
|
|
+ complete() {
|
|
|
+ this.newState({
|
|
|
+ completes: this.state.completes + 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ skip() {
|
|
|
+ this.newState({
|
|
|
+ skips: this.state.skips + 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ undo() {
|
|
|
+ this.state = this.history.pop() || this.state
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
<template>
|
|
|
+ <div @keydown="keydown" tabindex="0">
|
|
|
<v-app>
|
|
|
<v-content>
|
|
|
<v-toolbar color="primary">
|
|
|
<v-toolbar-side-icon />
|
|
|
- <v-toolbar-title>Change Me</v-toolbar-title>
|
|
|
+ <v-toolbar-title>Twitch Rivals</v-toolbar-title>
|
|
|
</v-toolbar>
|
|
|
- <v-container>Hello world</v-container>
|
|
|
+ <v-container>
|
|
|
+ <div class="score">
|
|
|
+ <div class="skips-label">Skips <strong>({{state.skips}} / 15)</strong></div>
|
|
|
+ <div class="skips">
|
|
|
+ <div class="skip" v-for="(_, i) in Array(Math.max(15, state.skips)).fill()" :key="i" :class="{ used: i < state.skips, extra: i >= 15 }" />
|
|
|
+ </div>
|
|
|
+ <div class="completes-label">Completes <strong>({{state.completes}})</strong>:</div>
|
|
|
+ <div class="completes">
|
|
|
+ <div class="complete" v-for="(_, i) in Array(state.completes).fill()" :key="i" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </v-container>
|
|
|
</v-content>
|
|
|
</v-app>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-export default {
|
|
|
+<style lang="less" scoped>
|
|
|
+.score {
|
|
|
+ display: grid;
|
|
|
+ margin: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ grid-template: 'skips-label skips' 'completes-label completes' / 100px auto;
|
|
|
|
|
|
+ .skip, .complete {
|
|
|
+ display: inline-block;
|
|
|
+ width: 15px;
|
|
|
+ margin: 2.5px;
|
|
|
+ height: 15px;
|
|
|
+ border-radius: 7.5px;
|
|
|
+ }
|
|
|
+ .skip {
|
|
|
+ border: solid 1px darkmagenta;
|
|
|
+ &.used {
|
|
|
+ background-color: purple;
|
|
|
+ }
|
|
|
+ &.extra {
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .complete {
|
|
|
+ border: solid 1px green;
|
|
|
+ background-color: greenyellow;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-
|
|
|
</style>
|
Alan Colon
