marvin/breach
1
0
Fork 0
mirror of https://github.com/Kugelschieber/breach.git synced 2026-01-18 12:00:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added basic components for UI.

Browse Source
This commit is contained in:
Marvin Blum
2020-12-16 00:12:22 +01:00
parent 63e87bbc87
commit 7df25e8a88
8 changed files with 280 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Buffer.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="buffer">
<h2>Buffer</h2>
<div class="buffer-slots">
<div class="buffer-slots-slot buffer-slots-border" v-for="(slot, i) in slots" :key="i">
{{slot}}
</div>
</div>
<h2>Sequences</h2>
<div class="buffer-codes" v-for="(code, i) in codes" :key="i">
<div class="buffer-slots">
<div class="buffer-slots-slot" v-for="(digit, j) in code.code" :key="j">
{{digit}}
</div>
</div>
<div class="buffer-points">
{{code.points}} Pts
</div>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
props: {
slots: {type: Array, required: true},
codes: {type: Array, required: true}
}
});
</script>

16
src/components/HelloWorld.test.ts
View File

@@ -1,16 +0,0 @@
import "jest";
import {shallowMount} from "@vue/test-utils";
import HelloWorld from "../components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
test("renders props.msg when passed", () => {
const msg = "new message"
const wrapper = shallowMount(HelloWorld, {
propsData: {
msg
}
});
expect(wrapper.text()).toMatch(msg)
});
});

61
src/components/HelloWorld.vue
View File

@@ -1,61 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links!</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
props: {
msg: String
}
});
</script>
<style lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

16
src/components/Level.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="level">
<h1>Breach</h1>
<div class="level-display">Level <span>{{level}}</span></div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
props: {
level: {type: Number, required: true}
}
});
</script>

21
src/components/Matrix.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="matrix">
<h2>Code-Matrix</h2>
<div class="matrix-row" v-for="i in size" :key="i">
<div class="matrix-column" v-for="j in size" :key="j">
{{matrix[(i-1)*5+(j-1)]}}
</div>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
props: {
size: {type: Number, required: true},
matrix: {type: Array, required: true}
}
});
</script>

37
src/components/Timer.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div class="timer">
<div class="timer-countdown">{{countdown}}</div>
<div class="timer-progress" :style="{width: `${progress}%`}"></div>
</div>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
export default defineComponent({
props: {
time: {type: Object, required: true}
},
setup(props) {
const countdown = ref("60.00");
const progress = ref(100);
setInterval(() => {
const remaining = (props.time.getTime()-new Date().getTime())/1000;
if(remaining > 0) {
countdown.value = remaining.toFixed(2);
progress.value = remaining/60*100;
} else {
countdown.value = "0.00";
progress.value = 0;
}
}, 100);
return {
countdown,
progress
};
}
});
</script>