From 38232c3182082201be4a781b1c5aac23af894efd Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Mon, 27 Apr 2020 16:09:08 -0400
Subject: [PATCH] [+] Create star rating component

---
 src/components/star-rating.vue | 36 ++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/star-rating.vue

diff --git a/src/components/star-rating.vue b/src/components/star-rating.vue
new file mode 100644
index 0000000..a09ca76
--- /dev/null
+++ b/src/components/star-rating.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="background">
+        <span :style="{width: (score / 5 * 100).toFixed(2) + '%'}" class="rating"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from 'vue-property-decorator'
+
+    @Component
+    export default class StarRating extends Vue
+    {
+        @Prop({required: true}) score: number;
+    }
+</script>
+
+<style lang="scss" scoped>
+    .background
+    {
+        background: url("./star-rating-sprite.png") repeat-x;
+        font-size: 0;
+        height: 21px;
+        line-height: 0;
+        overflow: hidden;
+        width: 110px;
+        margin: 0 auto;
+
+        span.rating
+        {
+            background: url("./star-rating-sprite.png") repeat-x 0 100%;
+            float: left;
+            height: 21px;
+            display: block;
+        }
+    }
+</style>