Wheel.vue

<template>
    <div>
        <div class="row d-flex justify-content-center tick_row align-items-center">
            <i class="fa fa-caret-down fa-5x" id="ticker"></i>
        </div>
        <div class="row d-flex justify-content-center align-items-center mb-4">
            <svg :height="radius * 2" :width="radius * 2" id="roulette">
                <g :style="getTransform()">
                    <path v-for="(piece, i) in pieces"
                          stroke-width="70px"
                          :stroke="mapPieceToColor(piece)"
                          :key="piece + i"
                          :d="getArc(i)"
                    >
                    </path>
                    <circle :cx="0" :cy="radius" :r="radius - 40" fill="var(--gray)">
                    </circle>
                </g>
            </svg>
        </div>
    </div>
</template>

<script>

    import {TimelineMax} from "gsap/TimelineMax"
    import {Power4} from "gsap/TweenMax"

    // https://greensock.com/forums/topic/17380-lucky-wheel/

    import {mapPieceToColor} from '../services/WheelService'

    export default {
        mounted() {
            this.setRadiusFromWindowWidth()
            window.addEventListener('resize', this.setRadiusFromWindowWidth)
        },
        data() {
            const colors = {
                black: "black",
                green: "green",
                orange: "orange",
                blue: "blue"
            }
            const {black, green, orange, blue} = colors

            return {
                radius: 250,
                pieces: [
                    black,
                    orange,
                    green,
                    black,
                    green,
                    black,
                    green,
                    blue,
                    black,
                    green,
                    black,
                    orange,
                    blue,
                    green,
                    black,
                    orange,
                    black,
                    orange,
                    black,
                    green,
                    black,
                    green,
                    black,
                    green,
                    black,
                    green,
                    black,
                    orange,
                    black,
                    blue,
                    black,
                    orange,
                    black,
                    green
                ]
            }
        },
        computed: {
            betPiece() {
                return this.bet.piece
            },
            statement() { return this.$store.getters.getStatement },
            playWheel() { return this.$store.getters.getPlayWheel },
            roll() { return this.bet.roll },
            bet() { return this.$store.getters.getBet },
        },
        name: "Wheel",

        watch: {
            playWheel: function (newVal) {
                if (newVal === true) this.spin()
            },
        },

        methods: {

            mapPieceToColor,
            setRadiusFromWindowWidth() {
                if (window.innerWidth < 450)
                    this.radius = 150
            },
            spinTo(rotation, color) {
                const spinWheel = new TimelineMax({onComplete: () =>
                        this.$store.dispatch("setBalance", this.statement.balance)
                })
                return spinWheel
                    .to("#roulette", 0.01, {rotation: 0})
                    .to('#roulette', 3, {rotation, ease: Power4.ease, delay: 0.2})
                    .to("#ticker", 0.25, {color: mapPieceToColor(color), repeat: 3})
                    .to("#ticker", 0.25, {color: "white"})

            },
            spin() {
                const {roll, piece: {color}} = this.bet
                const degrees = roll * 3.6
                const rotation = (degrees - (360 * 4))
                this.spinTo(rotation, color)

            },
            getTransform() {
                return `transform: translate(${this.radius}px)`
            },
            describeArc(x, y, radius, startAngle, endAngle) {
                const start = this.polarToCartesian(x, y, radius, endAngle)
                const end = this.polarToCartesian(x, y, radius, startAngle)
                const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"
                return [
                    "M", start.x, start.y,
                    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
                ].join(" ")
            },
            getArc(i) {
                const o = 360 / this.pieces.length
                const start = i * o
                const end = start + o
                return this.describeArc(0, this.radius, this.radius - 50, start, end)
            },
            polarToCartesian(centerX, centerY, radius, angleInDegrees) {
                const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0
                return {
                    x: centerX + (radius * Math.cos(angleInRadians)),
                    y: centerY + (radius * Math.sin(angleInRadians))
                }
            },
        }
    }
</script>

<style scoped>
    .tick_row {
        margin-bottom: -45px;
    }
    i {
        z-index: 999;
    }
</style>