From e1bc098fb7b8a7d1f1c924703ad59c3983ca10d4 Mon Sep 17 00:00:00 2001
From: ark120202 <ark120202@gmail.com>
Date: Mon, 21 Aug 2017 14:17:22 +0500
Subject: [PATCH] Enabled linting and fixed linting warnings in games tab
 components

---
 .eslintignore                                |   4 -
 src/renderer/components/Games/Carousel.vue   | 408 ++++++++++++++++++
 src/renderer/components/Games/Carousel3d.vue | 423 -------------------
 src/renderer/components/Games/Controls.vue   | 109 ++---
 src/renderer/components/Games/Installed.vue  |  21 +-
 src/renderer/components/Games/Preview.vue    |   4 +-
 src/renderer/components/Games/Slide.vue      |  63 ++-
 7 files changed, 506 insertions(+), 526 deletions(-)
 create mode 100644 src/renderer/components/Games/Carousel.vue
 delete mode 100644 src/renderer/components/Games/Carousel3d.vue

diff --git a/.eslintignore b/.eslintignore
index c3c2405..6f00b02 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,7 +4,3 @@ dist/*
 build/*
 
 src/renderer/assets/libs/*.js
-
-Slide.vue
-Carousel3d.vue
-Controls.vue
diff --git a/src/renderer/components/Games/Carousel.vue b/src/renderer/components/Games/Carousel.vue
new file mode 100644
index 0000000..bbab7d4
--- /dev/null
+++ b/src/renderer/components/Games/Carousel.vue
@@ -0,0 +1,408 @@
+<template>
+    <div class="carousel-3d-container" :style="{ height: this.slideHeight + 'vh' }">
+        <div class="carousel-3d-slider" :style="{
+          width: this.slideWidth + 'vh',
+          height: this.slideHeight + 'vh'
+        }">
+          <slot></slot>
+        </div>
+        <controls
+          v-if="controlsVisible"
+          :next-html="controlsNextHtml"
+          :prev-html="controlsPrevHtml"
+          :width="controlsWidth"
+          :height="controlsHeight"
+        ></controls>
+    </div>
+</template>
+
+<script>
+  import Controls from './Controls';
+  import Slide from './Slide';
+
+  export default {
+    name: 'Carousel',
+    components: {
+      Controls,
+      Slide,
+    },
+    props: {
+      count: {
+        type: [Number, String],
+        default: 0,
+      },
+      perspective: {
+        type: [Number, String],
+        default: 40,
+      },
+      display: {
+        type: Number,
+        default: 5,
+      },
+      loop: {
+        type: Boolean,
+        default: true,
+      },
+      animationSpeed: {
+        type: [Number, String],
+        default: 500,
+      },
+      dir: {
+        type: String,
+        default: 'rtl',
+      },
+      width: {
+        type: Number,
+        default: 360,
+      },
+      height: {
+        type: Number,
+        default: 270,
+      },
+      border: {
+        type: Number,
+        default: 1,
+      },
+      space: Number,
+      startIndex: {
+        type: Number,
+        default: 0,
+      },
+      clickable: {
+        type: Boolean,
+        default: true,
+      },
+      disable3d: {
+        type: Boolean,
+        default: false,
+      },
+      minSwipeDistance: {
+        type: Number,
+        default: 10,
+      },
+      inverseScaling: {
+        type: [Number, String],
+        default: 100,
+      },
+      controlsVisible: {
+        type: Boolean,
+        default: false,
+      },
+      controlsPrevHtml: {
+        type: String,
+        default: '&lsaquo;',
+      },
+      controlsNextHtml: {
+        type: String,
+        default: '&rsaquo;',
+      },
+      controlsWidth: {
+        type: [String, Number],
+        default: 50,
+      },
+      controlsHeight: {
+        type: [String, Number],
+        default: 50,
+      },
+    },
+    data: () => ({
+      viewport: 0,
+      currentIndex: 0,
+      total: 0,
+      lock: false,
+      dragOffset: 0,
+      dragStartX: 0,
+      mousedown: false,
+      zIndex: 998,
+    }),
+    computed: {
+      isLastSlide() {
+        return this.currentIndex === this.total - 1;
+      },
+      isFirstSlide() {
+        return this.currentIndex === 0;
+      },
+      isNextPossible() {
+        return !(!this.loop && this.isLastSlide);
+      },
+      isPrevPossible() {
+        return !(!this.loop && this.isFirstSlide);
+      },
+      slideWidth() {
+        const vw = this.viewport;
+        const sw = this.width + (this.border * 2);
+
+        return vw < sw ? vw : sw;
+      },
+      slideHeight() {
+        const sw = this.width + (this.border * 2);
+        const sh = this.height + (this.border * 2);
+        const ar = this.calculateAspectRatio(sw, sh);
+
+        return this.slideWidth / ar;
+      },
+      visible() {
+        const v = (this.display > this.total) ? this.total : this.display;
+        return v;
+      },
+      hasHiddenSlides() {
+        return this.total > this.visible;
+      },
+      leftIndices() {
+        const n = this.loop ? this.visible + 1 :
+                              Math.min(this.visible, this.currentIndex) + 1;
+        const indices = [];
+
+        for (let m = 1; m < n; m += 1) {
+          indices.push((this.dir === 'ltr')
+                      ? (this.currentIndex + m) % (this.total)
+                      : (this.currentIndex - m) % (this.total));
+        }
+
+
+        return indices;
+      },
+      rightIndices() {
+        const n = this.loop ? this.visible + 1 :
+                              Math.min(this.visible, this.total - 1 - this.currentIndex) + 1;
+        const indices = [];
+
+        for (let m = 1; m < n; m += 1) {
+          indices.push((this.dir === 'ltr')
+                      ? (this.currentIndex - m) % (this.total)
+                      : (this.currentIndex + m) % (this.total));
+        }
+
+        return indices;
+      },
+    },
+    watch: {
+      count() {
+        this.computeData();
+      },
+    },
+
+    mounted() {
+      this.computeData();
+      this.attachMutationObserver();
+
+      if (!this.$isServer) {
+        window.addEventListener('resize', this.setSize);
+
+        if ('ontouchstart' in window) {
+          this.$el.addEventListener('touchstart', this.handleMousedown);
+          this.$el.addEventListener('touchend', this.handleMouseup);
+          this.$el.addEventListener('touchmove', this.handleMousemove);
+        } else {
+          this.$el.addEventListener('mousedown', this.handleMousedown);
+          this.$el.addEventListener('mouseup', this.handleMouseup);
+          this.$el.addEventListener('mousemove', this.handleMousemove);
+        }
+      }
+    },
+
+    beforeDestroy() {
+      if (!this.$isServer) {
+        this.detachMutationObserver();
+
+        if ('ontouchstart' in window) {
+          this.$el.removeEventListener('touchmove', this.handleMousemove);
+        } else {
+          this.$el.removeEventListener('mousemove', this.handleMousemove);
+        }
+
+        window.removeEventListener('resize', this.setSize);
+      }
+    },
+
+    methods: {
+      /**
+       * Go to next slide
+       */
+      goNext() {
+        if (this.isNextPossible) {
+          this.goSlide(this.isLastSlide ? 0 : this.currentIndex + 1);
+        }
+      },
+      /**
+       * Go to previous slide
+       */
+      goPrev() {
+        if (this.isPrevPossible) {
+          this.goSlide(this.isFirstSlide ? this.total - 1 : this.currentIndex - 1);
+        }
+      },
+      /**
+       * Go to slide
+       *
+       * @param  {String} index of slide where to go
+       */
+      goSlide(index) {
+        this.currentIndex = (index < 0 || index > this.total - 1) ? 0 : index;
+        this.lock = true;
+
+        if (this.isLastSlide) {
+          this.$emit('last-slide', this.currentIndex);
+        }
+
+        this.$emit('before-slide-change', this.currentIndex);
+
+        setTimeout(() => this.animationEnd(), this.animationSpeed);
+      },
+      /**
+       * Go to slide far slide
+       */
+      goFar(index) {
+        let diff = (index === this.total - 1 && this.isFirstSlide) ?
+          -1 : (index - this.currentIndex);
+
+        if (this.isLastSlide && index === 0) {
+          diff = 1;
+        }
+
+        const diff2 = (diff < 0) ? -diff : diff;
+        let timeBuff = 0;
+        let i = 0;
+
+        while (i < diff2) {
+          i += 1;
+          const timeout = (diff2 === 1) ? 0 : (timeBuff);
+
+          setTimeout(() => ((diff < 0) ? this.goPrev(diff2) : this.goNext(diff2)), timeout);
+
+          timeBuff += (this.animationSpeed / (diff2));
+        }
+      },
+      /**
+       * Trigger actions when animation ends
+       */
+      animationEnd() {
+        this.lock = false;
+        this.$emit('after-slide-change', this.currentIndex);
+      },
+      /**
+       * Trigger actions when mouse is released
+       * @param  {Object} e The event object
+       */
+      handleMouseup() {
+        this.mousedown = false;
+        this.dragOffset = 0;
+      },
+      /**
+       * Trigger actions when mouse is pressed
+       * @param  {Object} e The event object
+       */
+      handleMousedown(e) {
+        if (!e.touches) {
+          e.preventDefault();
+        }
+
+        this.mousedown = true;
+        this.dragStartX = ('ontouchstart' in window) ? e.touches[0].clientX : e.clientX;
+      },
+      /**
+       * Trigger actions when mouse is pressed and then moved (mouse drag)
+       * @param  {Object} e The event object
+       */
+      handleMousemove(e) {
+        if (!this.mousedown) {
+          return;
+        }
+
+        const eventPosX = ('ontouchstart' in window) ? e.touches[0].clientX : e.clientX;
+        const deltaX = (this.dragStartX - eventPosX);
+
+        this.dragOffset = deltaX;
+
+        if (this.dragOffset > this.minSwipeDistance) {
+          this.handleMouseup();
+          this.goNext();
+        } else if (this.dragOffset < -this.minSwipeDistance) {
+          this.handleMouseup();
+          this.goPrev();
+        }
+      },
+      /**
+       * A mutation observer is used to detect changes to the containing node
+       * in order to keep the magnet container in sync with the height its reference node.
+       */
+      attachMutationObserver() {
+        const MutationObserver = window.MutationObserver ||
+          window.WebKitMutationObserver ||
+          window.MozMutationObserver;
+
+        if (MutationObserver) {
+          const config = {
+            attributes: true,
+            childList: true,
+            characterData: true,
+          };
+
+          this.mutationObserver = new MutationObserver(() => {
+            this.$nextTick(() => {
+              this.computeData();
+            });
+          });
+
+          if (this.$el) {
+            this.mutationObserver.observe(this.$el, config);
+          }
+        }
+      },
+      /**
+       * Stop listening to mutation changes
+       */
+      detachMutationObserver() {
+        if (this.mutationObserver) {
+          this.mutationObserver.disconnect();
+        }
+      },
+      /**
+       * Get the number of slides
+       * @return {Number} Number of slides
+       */
+      getSlideCount() {
+        if (this.$slots.default !== undefined) {
+          return this.$slots.default.filter(value => value.tag !== undefined).length;
+        }
+
+        return 0;
+      },
+      /**
+       * Calculate slide with and keep defined aspect ratio
+       * @return {Number} Aspect ratio number
+       */
+      calculateAspectRatio(width, height) {
+        return Math.min(width / height);
+      },
+      /**
+       * Re-compute the number of slides and current slide
+       */
+      computeData() {
+        this.total = this.getSlideCount();
+        this.currentIndex = this.startIndex > this.total - 1 ? this.total - 1 : this.startIndex;
+        this.viewport = this.$el.clientWidth;
+      },
+      setSize() {
+        this.$el.style.cssText += `height:${this.slideHeight}px;`;
+        this.$el.childNodes[0].style.cssText += `width:${this.slideWidth}px; height:${this.slideHeight}px;`;
+      },
+    },
+  };
+</script>
+
+<style lang="sass" scoped>
+  .carousel-3d-container
+    min-height: 1px
+    width: 100%
+    position: relative
+    z-index: 0
+    overflow: hidden
+    box-sizing: border-box
+
+  .carousel-3d-slider
+    position: relative
+    margin: 0 auto
+    transform-style: preserve-3d
+    perspective: 500vh
+</style>
diff --git a/src/renderer/components/Games/Carousel3d.vue b/src/renderer/components/Games/Carousel3d.vue
deleted file mode 100644
index 3f86a23..0000000
--- a/src/renderer/components/Games/Carousel3d.vue
+++ /dev/null
@@ -1,423 +0,0 @@
-<template>
-    <div class="carousel-3d-container" :style="{height: this.slideHeight + 'vh'}">
-        <div class="carousel-3d-slider" :style="{width: this.slideWidth + 'vh', height: this.slideHeight + 'vh'}">
-            <slot></slot>
-        </div>
-        <controls v-if="controlsVisible" :next-html="controlsNextHtml" :prev-html="controlsPrevHtml"
-                  :width="controlsWidth" :height="controlsHeight"></controls>
-    </div>
-</template>
-
-<script>
-    import Controls from './Controls';
-    import Slide from './Slide';
-
-    const noop = () => {};
-
-    export default {
-      name: 'Carousel3d',
-      components: {
-        Controls,
-        Slide,
-      },
-      props: {
-        count: {
-          type: [Number, String],
-          default: 0,
-        },
-        perspective: {
-          type: [Number, String],
-          default: 40,
-        },
-        display: {
-          type: [Number, String],
-          default: 5,
-        },
-        loop: {
-          type: Boolean,
-          default: true,
-        },
-        animationSpeed: {
-          type: [Number, String],
-          default: 500,
-        },
-        dir: {
-          type: String,
-          default: 'rtl',
-        },
-        width: {
-          type: [Number, String],
-          default: 360,
-        },
-        height: {
-          type: [Number, String],
-          default: 270,
-        },
-        border: {
-          type: [Number, String],
-          default: 1,
-        },
-        space: {
-          type: [Number, String],
-          default: 'auto',
-        },
-        startIndex: {
-          type: [Number, String],
-          default: 0,
-        },
-        clickable: {
-          type: Boolean,
-          default: true,
-        },
-        disable3d: {
-          type: Boolean,
-          default: false,
-        },
-        minSwipeDistance: {
-          type: Number,
-          default: 10,
-        },
-        inverseScaling: {
-          type: [Number, String],
-          default: 100,
-        },
-        controlsVisible: {
-          type: Boolean,
-          default: false,
-        },
-        controlsPrevHtml: {
-          type: String,
-          default: '&lsaquo;',
-        },
-        controlsNextHtml: {
-          type: String,
-          default: '&rsaquo;',
-        },
-        controlsWidth: {
-          type: [String, Number],
-          default: 50,
-        },
-        controlsHeight: {
-          type: [String, Number],
-          default: 50,
-        },
-        onLastSlide: {
-          type: Function,
-          default: noop,
-        },
-        onSlideChange: {
-          type: Function,
-          default: noop,
-        },
-      },
-      data() {
-        return {
-          viewport: 0,
-          currentIndex: 0,
-          total: 0,
-          lock: false,
-          dragOffset: 0,
-          dragStartX: 0,
-          mousedown: false,
-          zIndex: 998,
-        };
-      },
-      watch: {
-        count() {
-          this.computeData();
-        },
-      },
-      computed: {
-        isLastSlide() {
-          return this.currentIndex === this.total - 1;
-        },
-        isFirstSlide() {
-          return this.currentIndex === 0;
-        },
-        isNextPossible() {
-          return !(!this.loop && this.isLastSlide);
-        },
-        isPrevPossible() {
-          return !(!this.loop && this.isFirstSlide);
-        },
-        slideWidth() {
-          const vw = this.viewport;
-          const sw = parseInt(this.width) + (parseInt(this.border, 10) * 2);
-
-          return vw < sw ? vw : sw;
-        },
-        slideHeight() {
-          const sw = parseInt(this.width, 10) + (parseInt(this.border, 10) * 2);
-          const sh = parseInt(parseInt(this.height) + (this.border * 2), 10);
-          const ar = this.calculateAspectRatio(sw, sh);
-
-          return this.slideWidth / ar;
-        },
-        visible() {
-          const v = (this.display > this.total) ? this.total : this.display;
-          return v;
-        },
-        hasHiddenSlides() {
-          return this.total > this.visible;
-        },
-        leftIndices() {
-          const n = this.loop ? this.visible + 1 : 
-                                Math.min(this.visible, this.currentIndex) + 1;
-          const indices = [];
-          
-          for (let m = 1; m < n; m++) {
-            indices.push((this.dir === 'ltr')
-                        ? (this.currentIndex + m) % (this.total)
-                        : (this.currentIndex - m) % (this.total));
-          }
-          
-
-          return indices;
-        },
-        rightIndices() {
-          const n = this.loop ? this.visible + 1 :
-                                Math.min(this.visible, this.total - 1 - this.currentIndex) + 1;
-          const indices = [];
-
-          for (let m = 1; m < n; m++) {
-            indices.push((this.dir === 'ltr')
-                        ? (this.currentIndex - m) % (this.total)
-                        : (this.currentIndex + m) % (this.total));
-          }
-
-          return indices;
-        }        
-      },
-      methods: {
-            /**
-             * Go to next slide
-             */
-        goNext() {
-          if (this.isNextPossible) {
-            this.isLastSlide ? this.goSlide(0) : this.goSlide(this.currentIndex + 1);
-          }
-        },
-            /**
-             * Go to previous slide
-             */
-        goPrev() {
-          if (this.isPrevPossible) {
-            this.isFirstSlide ? this.goSlide(this.total - 1) : this.goSlide(this.currentIndex - 1);
-          }
-        },
-            /**
-             * Go to slide
-             * @param  {String} index of slide where to go
-             */
-        goSlide(index) {
-          this.currentIndex = (index < 0 || index > this.total - 1) ? 0 : index;
-          this.lock = true;
-
-          if (this.isLastSlide) {
-            if (this.onLastSlide !== noop) {
-              console.warn('onLastSlide deprecated, please use @last-slide');
-            }
-            this.onLastSlide(this.currentIndex);
-
-            this.$emit('last-slide', this.currentIndex);
-          }
-
-          this.$emit('before-slide-change', this.currentIndex);
-
-          setTimeout(() => this.animationEnd(), this.animationSpeed);
-        },
-            /**
-             * Go to slide far slide
-             */
-        goFar(index) {
-          let diff = (index === this.total - 1 && this.isFirstSlide) ? -1 : (index - this.currentIndex);
-
-          if (this.isLastSlide && index === 0) {
-            diff = 1;
-          }
-
-          const diff2 = (diff < 0) ? -diff : diff;
-          let timeBuff = 0;
-          let i = 0;
-
-          while (i < diff2) {
-            i += 1;
-            const timeout = (diff2 === 1) ? 0 : (timeBuff);
-
-            setTimeout(() => (diff < 0) ? this.goPrev(diff2) : this.goNext(diff2), timeout);
-
-            timeBuff += (this.animationSpeed / (diff2));
-          }
-        },
-            /**
-             * Trigger actions when animation ends
-             */
-        animationEnd() {
-          this.lock = false;
-
-          if (this.onSlideChange !== noop) {
-            console.warn('onSlideChange deprecated, please use @after-slide-change');
-          }
-          this.onSlideChange(this.currentIndex);
-
-          this.$emit('after-slide-change', this.currentIndex);
-        },
-            /**
-             * Trigger actions when mouse is released
-             * @param  {Object} e The event object
-             */
-        handleMouseup() {
-          this.mousedown = false;
-          this.dragOffset = 0;
-        },
-            /**
-             * Trigger actions when mouse is pressed
-             * @param  {Object} e The event object
-             */
-        handleMousedown(e) {
-          if (!e.touches) {
-            e.preventDefault();
-          }
-
-          this.mousedown = true;
-          this.dragStartX = ('ontouchstart' in window) ? e.touches[0].clientX : e.clientX;
-        },
-            /**
-             * Trigger actions when mouse is pressed and then moved (mouse drag)
-             * @param  {Object} e The event object
-             */
-        handleMousemove(e) {
-          if (!this.mousedown) {
-            return;
-          }
-
-          const eventPosX = ('ontouchstart' in window) ? e.touches[0].clientX : e.clientX;
-          const deltaX = (this.dragStartX - eventPosX);
-
-          this.dragOffset = deltaX;
-
-          if (this.dragOffset > this.minSwipeDistance) {
-            this.handleMouseup();
-            this.goNext();
-          } else if (this.dragOffset < -this.minSwipeDistance) {
-            this.handleMouseup();
-            this.goPrev();
-          }
-        },
-            /**
-             * A mutation observer is used to detect changes to the containing node
-             * in order to keep the magnet container in sync with the height its reference node.
-             */
-        attachMutationObserver() {
-          const MutationObserver = window.MutationObserver ||
-                    window.WebKitMutationObserver ||
-                    window.MozMutationObserver;
-
-          if (MutationObserver) {
-            const config = {
-              attributes: true,
-              childList: true,
-              characterData: true,
-            };
-
-            this.mutationObserver = new MutationObserver(() => {
-              this.$nextTick(() => {
-                this.computeData();
-              });
-            });
-
-            if (this.$el) {
-              this.mutationObserver.observe(this.$el, config);
-            }
-          }
-        },
-            /**
-             * Stop listening to mutation changes
-             */
-        detachMutationObserver() {
-          if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-          }
-        },
-            /**
-             * Get the number of slides
-             * @return {Number} Number of slides
-             */
-        getSlideCount() {
-          if (this.$slots.default !== undefined) {
-            return this.$slots.default.filter(value => value.tag !== void 0).length;
-          }
-
-          return 0;
-        },
-            /**
-             * Calculate slide with and keep defined aspect ratio
-             * @return {Number} Aspect ratio number
-             */
-        calculateAspectRatio(width, height) {
-          return Math.min(width / height);
-        },
-            /**
-             * Re-compute the number of slides and current slide
-             */
-        computeData() {
-          this.total = this.getSlideCount();
-          this.currentIndex = parseInt(this.startIndex) > this.total - 1 ? this.total - 1 : parseInt(this.startIndex);
-          this.viewport = this.$el.clientWidth;
-        },
-        setSize() {
-          this.$el.style.cssText += `height:${this.slideHeight}px;`;
-          this.$el.childNodes[0].style.cssText += `width:${this.slideWidth}px;` + ` height:${this.slideHeight}px;`;
-        },
-      },
-
-      mounted() {
-        this.computeData();
-        this.attachMutationObserver();
-
-        if (!this.$isServer) {
-          window.addEventListener('resize', this.setSize);
-
-          if ('ontouchstart' in window) {
-            this.$el.addEventListener('touchstart', this.handleMousedown);
-            this.$el.addEventListener('touchend', this.handleMouseup);
-            this.$el.addEventListener('touchmove', this.handleMousemove);
-          } else {
-            this.$el.addEventListener('mousedown', this.handleMousedown);
-            this.$el.addEventListener('mouseup', this.handleMouseup);
-            this.$el.addEventListener('mousemove', this.handleMousemove);
-          }
-        }
-      },
-
-      beforeDestroy() {
-        if (!this.$isServer) {
-          this.detachMutationObserver();
-
-          if ('ontouchstart' in window) {
-            this.$el.removeEventListener('touchmove', this.handleMousemove);
-          } else {
-            this.$el.removeEventListener('mousemove', this.handleMousemove);
-          }
-
-          window.removeEventListener('resize', this.setSize);
-        }
-      },
-    };
-</script>
-
-<style lang="sass" scoped>
-  .carousel-3d-container
-    min-height: 1px
-    width: 100%
-    position: relative
-    z-index: 0
-    overflow: hidden
-    box-sizing: border-box
-
-  .carousel-3d-slider
-    position: relative
-    margin: 0 auto
-    transform-style: preserve-3d
-    perspective: 500vh
-</style>
diff --git a/src/renderer/components/Games/Controls.vue b/src/renderer/components/Games/Controls.vue
index d44517d..9120a38 100644
--- a/src/renderer/components/Games/Controls.vue
+++ b/src/renderer/components/Games/Controls.vue
@@ -1,57 +1,66 @@
 <template>
-    <div class="carousel-3d-controls">
-        <a href="#" class="prev" @click.prevent="parent.goPrev()"
-           :class="{ disabled: !parent.isPrevPossible }"
-           :style="`width: ${width}px; height: ${height}px; line-height: ${height}px;`">
-            <span v-html="prevHtml"></span>
-        </a>
-        <a href="#" class="next" @click.prevent="parent.goNext()"
-           :class="{ disabled: !parent.isNextPossible }"
-           :style="`width: ${width}px; height: ${height}px; line-height: ${height}px;`">
-            <span v-html="nextHtml"></span>
-        </a>
-    </div>
+  <div class="carousel-3d-controls">
+    <a href="#"
+      @click.prevent="this.$parent.goPrev()"
+      :class="['prev', { disabled: !this.$parent.isPrevPossible }]"
+      :style="buttonStyle">
+      <span v-html="prevHtml"></span>
+    </a>
+    <a href="#"
+      @click.prevent="this.$parent.goNext()"
+      :class="['next', { disabled: !this.$parent.isNextPossible }]"
+      :style="buttonStyle">
+      <span v-html="nextHtml"></span>
+    </a>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: 'Controls',
-        props: {
-            /**
-             * Width in pixels of the navigation buttons
-             */
-            width: {
-                type: [String, Number],
-                default: 50
-            },
-            /**
-             * Height in pixels of the navigation buttons
-             */
-            height: {
-                type: [String, Number],
-                default: 60
-            },
-            /**
-             * Text content of the navigation prev button
-             */
-            prevHtml: {
-                type: String,
-                default: '&lsaquo;'
-            },
-            /**
-             * Text content of the navigation next button
-             */
-            nextHtml: {
-                type: String,
-                default: '&rsaquo;'
-            }
-        },
-        data () {
-            return {
-                parent: this.$parent
-            }
-        }
-    }
+  export default {
+    name: 'Controls',
+    props: {
+      /**
+       * Width in pixels of the navigation buttons
+       */
+      width: {
+        type: [String, Number],
+        default: 50,
+      },
+
+      /**
+       * Height in pixels of the navigation buttons
+       */
+      height: {
+        type: [String, Number],
+        default: 60,
+      },
+
+      /**
+       * Text content of the navigation prev button
+       */
+      prevHtml: {
+        type: String,
+        default: '&lsaquo;',
+      },
+
+      /**
+       * Text content of the navigation next button
+       */
+      nextHtml: {
+        type: String,
+        default: '&rsaquo;',
+      },
+    },
+    computed: {
+      buttonStyle() {
+        return {
+          width: this.width,
+          height: this.height,
+          lineHeight: this.height,
+        };
+      },
+    },
+  };
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/renderer/components/Games/Installed.vue b/src/renderer/components/Games/Installed.vue
index 04e6bd9..4cf7eae 100644
--- a/src/renderer/components/Games/Installed.vue
+++ b/src/renderer/components/Games/Installed.vue
@@ -1,32 +1,33 @@
 <template>
   <div id="installed" ref="dick">
-    <carousel-3d height="50" width="80" :display="50" startIndex="3"
-    :controls-visible="true" :loop="false">
+    <carousel
+      :height="50"
+      :width="80"
+      :display="50"
+      :startIndex="3"
+      :controls-visible="true"
+      :loop="false"
+    >
       <slide v-for="(id,index) in installedGames" :index="index" :key="id" :gameID="id">
       </slide>
-    </carousel-3d>
+    </carousel>
   </div>
 </template>
 <script>
-  import Carousel3d from './Carousel3d';
+  import Carousel from './Carousel';
   import Slide from './Slide';
   import Preview from './Preview';
 
   export default {
     name: 'Installed',
     components: {
-      Carousel3d,
+      Carousel,
       Slide,
       Preview,
     },
     data: () => ({
       installedGames: [0, 1, 2, 3, 4, 5],
     }),
-    created() {
-      this.$nextTick(() => {
-        this.height = this.$parent.clientHeight;
-      });
-    },
   };
 </script>
 <style lang="sass" scoped>
diff --git a/src/renderer/components/Games/Preview.vue b/src/renderer/components/Games/Preview.vue
index 440ade7..55815fe 100644
--- a/src/renderer/components/Games/Preview.vue
+++ b/src/renderer/components/Games/Preview.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="preview">
     <img src="~@/assets/preview_vignette.png" id="previewImage">
-    <label :id="'gameName'+gameID">{{ 'a game that is called ' + gameID }}</label>
+    <label :id="`gameName${gameID}`">{{ `a game that is called ${gameID}` }}</label>
   </div>
 </template>
 
@@ -9,8 +9,6 @@
   export default {
     name: 'Preview',
     props: ['gameID'],
-    methods: {
-    },
   };
 </script>
 
diff --git a/src/renderer/components/Games/Slide.vue b/src/renderer/components/Games/Slide.vue
index 6ce5461..b9860f1 100644
--- a/src/renderer/components/Games/Slide.vue
+++ b/src/renderer/components/Games/Slide.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="carousel-3d-slide" :style="slideStyle" :class="{ 'current': isCurrent }" @click="goTo()">
+  <div :style="slideStyle" :class="['carousel-3d-slide', { current: isCurrent }]" @click="goTo()">
     <preview :gameID="`${ this.gameID }`"></preview>
   </div>
 </template>
@@ -13,50 +13,43 @@
       preview: Preview,
     },
     props: {
-      index: {
-        type: Number,
-      },
-      gameID: {
-        type: Number,
-      },
-    },
-    data() {
-      return {
-        parent: this.$parent,
-        styles: {},
-        zIndex: 999,
-      };
+      index: Number,
+      gameID: Number,
     },
+    data: () => ({
+      styles: {},
+      zIndex: 999,
+    }),
     computed: {
       isCurrent() {
-        return this.index === this.parent.currentIndex;
+        return this.index === this.$parent.currentIndex;
       },
       slideStyle() {
         let styles = {};
 
         if (!this.isCurrent) {
-          const rIndex = this.getSideIndex(this.parent.rightIndices);
-          const lIndex = this.getSideIndex(this.parent.leftIndices);          
+          const rIndex = this.getSideIndex(this.$parent.rightIndices);
+          const lIndex = this.getSideIndex(this.$parent.leftIndices);
 
           if (rIndex >= 0 || lIndex >= 0) {
-            styles = rIndex >= 0 ? this.calculatePosition(rIndex, true, this.zIndex, this.parent.rightIndices.length) : 
-                                   this.calculatePosition(lIndex, false, this.zIndex, this.parent.leftIndices.length);
-            let idxInDeck = Math.max(rIndex, lIndex)
-            styles.opacity = 1.0 / (1.25 + idxInDeck * 0.75);
+            styles = rIndex >= 0 ?
+              this.calculatePosition(rIndex, true, this.zIndex, this.$parent.rightIndices.length) :
+              this.calculatePosition(lIndex, false, this.zIndex, this.$parent.leftIndices.length);
+            const idxInDeck = Math.max(rIndex, lIndex);
+            styles.opacity = 1.0 / (1.25 + (idxInDeck * 0.75));
             styles.visibility = 'visible';
-          }
-          else {
+          } else {
             styles.opacity = 0;
             styles.visibility = 'hidden';
           }
         }
 
         return Object.assign(styles, {
-          'border-width': `${this.parent.border}px`,
-          width: `${this.parent.slideWidth}vh`,
-          height: `${this.parent.slideHeight}vh`,
-          transition: ` transform ${this.parent.animationSpeed}ms, ` +
-                      ` opacity ${this.parent.animationSpeed}ms `,
+          'border-width': `${this.$parent.border}px`,
+          width: `${this.$parent.slideWidth}vh`,
+          height: `${this.$parent.slideHeight}vh`,
+          transition: ` transform ${this.$parent.animationSpeed}ms, ` +
+                      ` opacity ${this.$parent.animationSpeed}ms `,
         });
       },
     },
@@ -73,19 +66,19 @@
         return index;
       },
       matchIndex(index) {
-        return (index >= 0) ? this.index === index : (this.parent.total + index) === this.index;
+        return (index >= 0) ? this.index === index : (this.$parent.total + index) === this.index;
       },
-      calculatePosition(i, positive, zIndex, deckSize) {
+      calculatePosition(i, positive, zIndex /* , deckSize */) {
         const offsetInDeck = 10;
         const z = -75;
         const yAngle = 70;
-        const leftRemain = parseInt((this.parent.width * 0.8 + i * offsetInDeck), 10);
+        const leftRemain = parseInt(((this.$parent.width * 0.8) + (i * offsetInDeck)), 10);
         const transform = (positive)
                   ? `translateX(${leftRemain}vh) translateZ(${z}vh) ` +
               `rotateY(-${yAngle}deg)`
                   : `translateX(-${leftRemain}vh) translateZ(${z}vh) ` +
               `rotateY(${yAngle}deg)`;
-        const top = this.parent.space === 'auto' ? 0 : parseInt((i + 1) * (this.parent.space));
+        const top = this.$parent.space == null ? 0 : (i + 1) * this.$parent.space;
 
         return {
           transform,
@@ -96,10 +89,8 @@
       goTo() {
         if (this.isCurrent) {
           this.$store.commit('setPage', 'gameView');
-        } else {
-          if (this.parent.clickable === true) {
-            this.parent.goFar(this.index);
-          }
+        } else if (this.$parent.clickable === true) {
+          this.$parent.goFar(this.index);
         }
       },
     },