First test commit

frontend/app/components/Container.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="card">
+
+  <span class="corner tl"></span>
+  <span class="corner tr"></span>
+  <span class="corner bl"></span>
+  <span class="corner br"></span>
+
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$separation: 2px;
+
+.card{
+  position: relative;
+  margin: 15px;
+  background: var(--color-background-fore);
+  padding: 8px 24px;
+  color: white;
+  border: 1px solid var(--color-border-color);
+}
+
+.corner{
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border-color: #cfcfcf;
+}
+
+/* Top Left */
+.tl{
+  top: -$separation;
+  left: -$separation;
+  border-top:2px solid;
+  border-left:2px solid;
+}
+
+/* Top Right */
+.tr{
+  top: -$separation;
+  right: -$separation;
+  border-top:2px solid;
+  border-right:2px solid;
+}
+
+/* Bottom Left */
+.bl{
+  bottom: -$separation;
+  left: -$separation;
+  border-bottom:2px solid;
+  border-left:2px solid;
+}
+
+/* Bottom Right */
+.br{
+  bottom: -$separation;
+  right: -$separation;
+  border-bottom:2px solid;
+  border-right:2px solid;
+}
+</style>

frontend/app/components/Sprite.vue

@@ -0,0 +1,49 @@
+<template>
+<img ref="sprite" 
+    class="sprite pixelated"
+    :src="frame_paths[0]" 
+    :width="props.width">
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = defineProps<{
+  path: string,
+  frames: string,
+  top?: string,
+  right?: string,
+  left?: string,
+  bottom?: string,
+  width: string,
+  fps?: string
+}>();
+
+const sprite = ref(null);
+
+let frame_paths = [];
+for(let i = 1; i <= parseInt(props.frames); i++){
+    frame_paths.push(props.path + "frame" + i + ".png");
+}
+
+let current = 0;
+const fps = props.fps ? parseInt(props.fps) : 4;
+
+onMounted(() => {
+    sprite.value.style.top = props.top;
+    sprite.value.style.left = props.left;
+    sprite.value.style.bottom = props.bottom;
+    sprite.value.style.right = props.right;
+    setInterval(() => {
+        current = (current + 1) % frame_paths.length;
+        sprite.value.src = frame_paths[current];
+    }, 1000 / fps);
+});
+</script>
+
+<style lang="scss" scoped>
+.sprite {
+    position: absolute;
+    z-index: -10;
+}
+</style>