powergrid-viewer 1.5.4

package/src/components/buttons/LogButton.vue

@@ -0,0 +1,15 @@
+<template>
+    <g class="button enabled" @click="$emit('click')">
+        <rect width="80" height="26" fill="gainsboro" stroke="black" rx="2" />
+        <image x="11" y="5" width="16" height="16" href="../../icons/log.svg" />
+        <text text-anchor="middle" fill="black" x="47" y="13">Log</text>
+        <title>Show log</title>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component
+export default class LogButton extends Vue {
+}
+</script>

package/src/components/buttons/PassButton.vue

@@ -0,0 +1,18 @@
+<template>
+    <g :class="['button', { enabled, highlightButton }]" @click="enabled && $emit('click')">
+        <rect width="80" height="26" fill="gainsboro" stroke="black" rx="2" />
+        <image x="15" y="8" width="10" height="10" href="../../icons/pass.svg" />
+        <text text-anchor="middle" fill="black" x="47" y="13">{{ text }}</text>
+        <title>Pass turn</title>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+
+@Component
+export default class PassButton extends Vue {
+    @Prop() enabled!: boolean;
+    @Prop() highlightButton!: boolean;
+    @Prop() text!: string;
+}
+</script>

package/src/components/buttons/RulesButton.vue

@@ -0,0 +1,14 @@
+<template>
+    <g class="button enabled" @click="$emit('click')">
+        <circle cx="15" cy="15" r="15" fill="gainsboro" stroke="black" stroke-width="2px" />
+        <image x="5" y="5" width="20" height="20" href="../../icons/rules.svg" />
+        <title>Rules</title>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class RulesButton extends Vue {
+}
+</script>

package/src/components/buttons/SoundButton.vue

@@ -0,0 +1,18 @@
+<template>
+    <g class="button enabled" @click="$emit('click')">
+        <circle cx="15" cy="15" r="15" fill="gainsboro" stroke="black" stroke-width="2px" />
+        <image v-if="isOn" x="5" y="5" width="20" height="20" href="../../icons/sound-on.svg" />
+        <image v-else x="5" y="5" width="20" height="20" href="../../icons/sound-off.svg" />
+        <title v-if="isOn">Sound off</title>
+        <title v-else>Sound on</title>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class SoundButton extends Vue {
+    @Prop()
+    isOn?: boolean;
+}
+</script>

package/src/components/buttons/UndoButton.vue

@@ -0,0 +1,17 @@
+<template>
+    <g :class="['button', { enabled, highlightButton }]" @click="enabled && $emit('click')">
+        <rect width="80" height="26" fill="gainsboro" stroke="black" rx="2" />
+        <image x="11" y="4" width="16" height="16" href="../../icons/undo.svg" />
+        <text text-anchor="middle" fill="black" x="47" y="13">Undo</text>
+        <title>Undo last move</title>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class UndoButton extends Vue {
+    @Prop() enabled!: boolean;
+    @Prop() highlightButton!: boolean;
+}
+</script>

package/src/components/buttons/index.js

@@ -0,0 +1,9 @@
+import Button from './Button.vue';
+import HelpButton from './HelpButton.vue';
+import LogButton from './LogButton.vue';
+import PassButton from './PassButton.vue';
+import SoundButton from './SoundButton.vue';
+import RulesButton from './RulesButton.vue';
+import UndoButton from './UndoButton.vue';
+
+export { Button, HelpButton, LogButton, PassButton, SoundButton, RulesButton, UndoButton };

package/src/components/pieces/Card.vue

@@ -0,0 +1,131 @@
+<template>
+    <g v-if="powerPlant.number == 99" :id="elId" :transform="`translate(${currentX}, ${currentY})`">
+        <rect width="60" height="40" :fill="getColor()" stroke="black" stroke-width="2" rx="4" />
+        <text text-anchor="middle" x="30" y="20" fill="black">Step 3</text>
+    </g>
+    <g
+        v-else
+        :id="elId"
+        :class="[{ canClick: canClick }]"
+        :transform="`translate(${currentX}, ${currentY})`"
+        @click="canClick && $emit('click')"
+    >
+        <rect
+            width="60"
+            height="40"
+            :fill="getColor()"
+            :stroke="hasDiscount ? 'palegreen' : 'black'"
+            stroke-width="2"
+            rx="4"
+        />
+        <g v-if="hasDiscount">
+            <rect width="12" height="12" rx="4" fill="palegreen" />
+            <text text-anchor="middle" x="6" y="6" style="font-size: 12px" fill="black">$</text>
+        </g>
+        <g transform="translate(30, 10)">
+            <text text-anchor="middle" x="1" y="1" fill="gray">{{ powerPlant.number }}</text>
+            <text text-anchor="middle" fill="white">{{ powerPlant.number }}</text>
+        </g>
+
+        <g :id="elId" :class="['piece']" transform="translate(40, 20) scale(0.035)">
+            <path
+                d="M187.698 263.636V456.017L3 341.204V169.522L80.8579 108.141L187.698 263.636Z"
+                fill="white"
+                stroke="white"
+                stroke-width="12"
+                stroke-miterlimit="10"
+            />
+            <path
+                d="M395.724 136.361V300.164L187.698 456.017V263.636L395.724 136.361Z"
+                fill="white"
+                stroke="white"
+                stroke-width="12"
+                stroke-miterlimit="10"
+            />
+            <path
+                d="M395.724 136.361L187.698 263.636L80.8579 108.141L304.771 4L395.724 136.361Z"
+                fill="white"
+                stroke="white"
+                stroke-width="12"
+                stroke-miterlimit="10"
+            />
+        </g>
+        <text text-anchor="middle" x="47" y="28" style="font-size: 12px" fill="black">
+            {{ powerPlant.citiesPowered }}
+        </text>
+
+        <g transform="translate(5, 20)">
+            <path :d="getResourcePath()" fill="white" />
+        </g>
+        <text v-if="powerPlant.cost > 0" text-anchor="middle" x="12.5" y="27.5" style="font-size: 12px" fill="black">
+            {{ powerPlant.cost }}
+        </text>
+
+        <g transform="translate(24, 22)">
+            <path d="M0,3 L8,3 L8,0 L14,6 L8,12 L8,9 L0,9Z" fill="white" />
+        </g>
+
+        <defs>
+            <linearGradient id="hybrid" x1="0" y1="0" x2="100%" y2="100%">
+                <stop offset="50%" stop-color="#8b4513" />
+                <stop offset="50%" stop-color="#445" />
+            </linearGradient>
+        </defs>
+    </g>
+</template>
+<script lang="ts">
+import { PieceType } from './../../types/ui-data';
+import { PowerPlant, PowerPlantType } from 'powergrid-engine/src/gamestate';
+import { Component, Mixins, Prop } from 'vue-property-decorator';
+import Piece from './Piece.vue';
+
+@Component({
+    created(this: Card) {
+        this.pieceType = PieceType.Card;
+    }
+})
+export default class Card extends Mixins(Piece) {
+    @Prop()
+    owner?: number;
+
+    @Prop()
+    powerPlant?: PowerPlant;
+
+    @Prop()
+    canClick?: boolean;
+
+    @Prop({ default: false })
+    hasDiscount?: boolean;
+
+    getColor() {
+        switch (this.powerPlant?.type) {
+            case PowerPlantType.Coal: return '#8b4513';
+            case PowerPlantType.Oil: return '#445';
+            case PowerPlantType.Garbage: return 'goldenrod';
+            case PowerPlantType.Uranium: return 'red';
+            case PowerPlantType.Hybrid: return 'url(#hybrid)';
+            case PowerPlantType.Wind: return 'limegreen';
+            case PowerPlantType.Nuclear: return 'dodgerblue';
+            case PowerPlantType.Step3: return 'dodgerblue';
+        }
+    }
+
+    getResourcePath() {
+        switch (this.powerPlant?.type) {
+            case PowerPlantType.Coal: return 'M0,3 L7.5,0 L15,3 L15,12 L7.5,15 L0,12Z';
+            case PowerPlantType.Oil: return 'M3,2 A6,3 0 0,1 12,2 L12,12 A6,3 0 0,1 3,12Z';
+            case PowerPlantType.Garbage: return 'M0,3 A7.5,3 0 0,1 15,3 L15,12 A7.5,3 0 0,1 0,12Z';
+            case PowerPlantType.Uranium: return 'M1,2 l4,-2 l6,0 l4,2 l0,11 l-4,2 l-6,0 l-4,-2Z';
+            case PowerPlantType.Hybrid: return 'M0,3 L7.5,0 L15,3 L15,12 L7.5,15 L0,12Z M9,1 A6,3 0 0,1 18,1 L18,10 A6,3 0 0,1 10,10Z';
+            case PowerPlantType.Wind: return '';
+            case PowerPlantType.Nuclear: return '';
+            case PowerPlantType.Step3: return '';
+        }
+    }
+}
+</script>
+<style lang="scss">
+.canClick {
+    cursor: pointer;
+}
+</style>

package/src/components/pieces/Coal.vue

@@ -0,0 +1,40 @@
+<template>
+    <g
+        :id="elId"
+        :class="[{ canClick: canClick }]"
+        :transform="`translate(${currentX}, ${currentY}) scale(${scale})`"
+        :opacity="transparent ? 0.3 : 1"
+        @click="canClick && $emit('click')"
+    >
+        <path
+            d="M136.8 21.2L43.1001 48.9L43.2001 167.2L135.2 210.3L228.8 174V55.7L136.8 21.2Z"
+            fill="#5a2d0c"
+            stroke="black"
+            stroke-width="20"
+            stroke-miterlimit="10"
+        />
+        <path d="M135.2 210.3L43.2001 167.2L43.1001 48.8999L135.1 83.4999L135.2 210.3Z" fill="#70380f" />
+        <path d="M135.1 83.5L43.1001 48.9L136.8 21.2L228.8 55.7L135.1 83.5Z" fill="#8b4513" />
+        <path d="M228.8 55.7V174L135.2 210.3L135.1 83.5L228.8 55.7Z" fill="#5a2d0c" />
+
+        <title>Coal</title>
+    </g>
+</template>
+<script lang="ts">
+import { PieceType } from './../../types/ui-data';
+import { Component, Mixins, Prop } from 'vue-property-decorator';
+import Piece from './Piece.vue';
+
+@Component({
+    created(this: Coal) {
+        this.pieceType = PieceType.Coal;
+    }
+})
+export default class Coal extends Mixins(Piece) {
+    @Prop()
+    canClick?: boolean;
+
+    @Prop({ default: 0.08 })
+    scale?: number;
+}
+</script>

package/src/components/pieces/Garbage.vue

@@ -0,0 +1,40 @@
+<template>
+    <g
+        :id="elId"
+        :class="[{ canClick: canClick }]"
+        :transform="`translate(${currentX}, ${currentY}) scale(${scale})`"
+        :opacity="transparent ? 0.3 : 1"
+        @click="canClick && $emit('click')"
+    >
+        <path d="M2,5 A9,5,0 0,1 18,5 L18,15 A9,5 0 0,1 2,15Z" fill="none" stroke="black" stroke-miterlimit="0" />
+        <path d="M2,5 A9,5 0 0,0 18,5 A9,5 0 0,0 2,5" fill="#FF0" />
+        <path d="M2,5 A9,5 0 0,0 2,5 L2,15 A9,5,0 0,0 18,15 L18,5 A9,5 0 0,1 2,5" fill="url(#garbage-linear)" />
+
+        <title>Garbage</title>
+
+        <defs>
+            <linearGradient id="garbage-linear" x1="0" y1="10" x2="20" y2="10" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#DD0" />
+                <stop offset="1" stop-color="#AA0" />
+            </linearGradient>
+        </defs>
+    </g>
+</template>
+<script lang="ts">
+import { PieceType } from './../../types/ui-data';
+import { Component, Mixins, Prop } from 'vue-property-decorator';
+import Piece from './Piece.vue';
+
+@Component({
+    created(this: Garbage) {
+        this.pieceType = PieceType.Garbage;
+    }
+})
+export default class Garbage extends Mixins(Piece) {
+    @Prop()
+    canClick?: boolean;
+
+    @Prop({ default: 1 })
+    scale?: number;
+}
+</script>

package/src/components/pieces/House.vue

@@ -0,0 +1,51 @@
+<template>
+    <g :id="elId" :class="['piece']" :transform="`translate(${currentX}, ${currentY}) scale(0.035)`">
+        <!-- <path d="M15 0 L30 10 L30 30 L0 30 L0 10Z" :fill="color" stroke="black" /> -->
+        <path
+            d="M187.698 263.636V456.017L3 341.204V169.522L80.8579 108.141L187.698 263.636Z"
+            :fill="color"
+            stroke="#010101"
+            stroke-width="12"
+            stroke-miterlimit="10"
+        />
+        <path
+            d="M395.724 136.361V300.164L187.698 456.017V263.636L395.724 136.361Z"
+            :fill="color"
+            stroke="#010101"
+            stroke-width="12"
+            stroke-miterlimit="10"
+        />
+        <path
+            d="M395.724 136.361L187.698 263.636L80.8579 108.141L304.771 4L395.724 136.361Z"
+            :fill="color"
+            stroke="#010101"
+            stroke-width="12"
+            stroke-miterlimit="10"
+        />
+        <title>{{ ownerName }}'s House</title>
+    </g>
+</template>
+<script lang="ts">
+import { PieceType } from './../../types/ui-data';
+import { Component, InjectReactive, Mixins, Prop } from 'vue-property-decorator';
+import Piece from './Piece.vue';
+
+@Component({
+    created(this: House) {
+        this.pieceType = PieceType.House;
+    }
+})
+export default class House extends Mixins(Piece) {
+    @InjectReactive()
+    readonly player!: number;
+
+    @Prop()
+    color?: string;
+
+    @Prop()
+    owner?: number;
+
+    @Prop()
+    ownerName?: string;
+}
+</script>

package/src/components/pieces/Hybrid.vue

@@ -0,0 +1,37 @@
+<template>
+    <g :id="elId" :class="['piece']" :transform="`translate(${currentX}, ${currentY})`">
+        <g transform="scale(0.08)">
+            <path
+                d="M136.8 21.2L43.1001 48.9L43.2001 167.2L135.2 210.3L228.8 174V55.7L136.8 21.2Z"
+                fill="#5a2d0c"
+                stroke="black"
+                stroke-width="20"
+                stroke-miterlimit="10"
+            />
+            <path d="M135.2 210.3L43.2001 167.2L43.1001 48.8999L135.1 83.4999L135.2 210.3Z" fill="#70380f" />
+            <path d="M135.1 83.5L43.1001 48.9L136.8 21.2L228.8 55.7L135.1 83.5Z" fill="#8b4513" />
+            <path d="M228.8 55.7V174L135.2 210.3L135.1 83.5L228.8 55.7Z" fill="#5a2d0c" />
+        </g>
+
+        <g transform="translate(5, 0)">
+            <path d="M6,4 A6,4,0 0,1 14,4 L14,16 A6,4 0 0,1 6,16Z" fill="none" stroke="black" />
+            <path d="M6,4 A6,4 0 0,0 14,4 A6,4 0 0,0 6,4" fill="#556" />
+            <path d="M6,4 A6,4 0 0,0 6,4 L6,16 A6,4,0 0,0 14,16 L14,4 A6,4 0 0,1 6,4" fill="url(#oil-linear)" />
+        </g>
+
+        <title>Coal/Oil</title>
+    </g>
+</template>
+<script lang="ts">
+import { PieceType } from './../../types/ui-data';
+import { Component, Mixins } from 'vue-property-decorator';
+import Piece from './Piece.vue';
+
+@Component({
+    created(this: Hybrid) {
+        this.pieceType = PieceType.Hybrid;
+    }
+})
+export default class Hybrid extends Mixins(Piece) {
+}
+</script>

package/src/components/pieces/Oil.vue

@@ -0,0 +1,40 @@
+<template>
+    <g
+        :id="elId"
+        :class="[{ canClick: canClick }]"
+        :transform="`translate(${currentX}, ${currentY}) scale(${scale})`"
+        :opacity="transparent ? 0.3 : 1"
+        @click="canClick && $emit('click')"
+    >
+        <path d="M6,4 A6,4,0 0,1 14,4 L14,16 A6,4 0 0,1 6,16Z" fill="none" stroke="black" />
+        <path d="M6,4 A6,4 0 0,0 14,4 A6,4 0 0,0 6,4" fill="#556" />
+        <path d="M6,4 A6,4 0 0,0 6,4 L6,16 A6,4,0 0,0 14,16 L14,4 A6,4 0 0,1 6,4" fill="url(#oil-linear)" />
+
+        <title>Oil</title>
+
+        <defs>
+            <linearGradient id="oil-linear" x1="0" y1="10" x2="20" y2="10" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#445" />
+                <stop offset="1" stop-color="#223" />
+            </linearGradient>
+        </defs>
+    </g>
+</template>
+<script lang="ts">
+import { PieceType } from './../../types/ui-data';
+import { Component, Mixins, Prop } from 'vue-property-decorator';
+import Piece from './Piece.vue';
+
+@Component({
+    created(this: Oil) {
+        this.pieceType = PieceType.Oil;
+    }
+})
+export default class Oil extends Mixins(Piece) {
+    @Prop()
+    canClick?: boolean;
+
+    @Prop({ default: 1 })
+    scale?: number;
+}
+</script>

package/src/components/pieces/Piece.vue

@@ -0,0 +1,104 @@
+<script lang="ts">
+import { Vue, Component, Inject, Prop, Watch } from 'vue-property-decorator';
+import { EventEmitter } from 'events';
+import { PieceType, UIData } from './../../types/ui-data';
+
+@Component({
+    created(this: Piece) {
+    },
+    mounted(this: Piece) {
+        this.mounted = true;
+    },
+    beforeDestroy(this: Piece) {
+        this.onTransitionEnd();
+    }
+})
+export default class Piece extends Vue {
+    @Prop({ default: () => ({ x: 0, y: 0, rotate: 0 }) })
+    targetState!: {
+        x: number,
+        y: number,
+        rotate: number,
+    };
+
+    @Prop()
+    pieceId!: string;
+
+    @Prop()
+    transparent?: boolean;
+
+    @Inject()
+    readonly communicator!: EventEmitter;
+
+    @Inject()
+    readonly ui!: UIData;
+
+    public pieceType!: PieceType;
+
+    currentX = 0;
+    currentY = 0;
+    mounted = false;
+    transitioning = false;
+    transitionCount = 0;
+
+    moving = false;
+
+    startTransitioning() {
+        if (this.transitioning) {
+            return;
+        }
+
+        this.ui.waitingAnimations += 1;
+        this.transitioning = true;
+        this.transitionCount += 1;
+
+        const count = this.transitionCount;
+
+        // Safeguard to make sure even if we don't catch the transition end event, we stop the transition
+        setTimeout(() => {
+            if (count === this.transitionCount) {
+                this.onTransitionEnd();
+            }
+        }, 1000);
+    }
+
+    @Watch('dragging')
+    @Watch('targetState', { immediate: true })
+    onTargetChanged(newVal: boolean, oldVal: boolean) {
+        if (this.targetState.x === this.currentX && this.targetState.y === this.currentY) {
+            return;
+        }
+
+        if (!this.transitioning && this.mounted) {
+            if (!(oldVal && !newVal)) {
+                this.startTransitioning();
+            } else {
+                this.moving = true;
+                setTimeout(() => this.moving = false, 800);
+            }
+        }
+
+        if (!this.mounted) {
+            this.currentX = this.targetState.x;
+            this.currentY = this.targetState.y;
+        } else {
+            // Make sure the animation plays by waiting until the class "dragging" is removed for sure from the element
+            setTimeout(() => {
+                this.currentX = this.targetState.x;
+                this.currentY = this.targetState.y;
+            });
+        }
+    }
+
+    onTransitionEnd() {
+        if (this.transitioning) {
+            this.transitioning = false;
+            this.ui.waitingAnimations = Math.max(this.ui.waitingAnimations - 1, 0);
+        }
+    }
+
+    get elId() {
+        return this.transitioning || this.moving ? 'moving' : undefined;
+    }
+}
+</script>

package/src/components/pieces/Uranium.vue

@@ -0,0 +1,32 @@
+<template>
+    <g
+        :id="elId"
+        :class="[{ canClick: canClick }]"
+        :transform="`translate(${currentX}, ${currentY})`"
+        :opacity="transparent ? 0.3 : 1"
+        @click="canClick && $emit('click')"
+    >
+        <path d="M3,3 l4,-2 l6,0 l4,2 l0,11 l-4,2 l-6,0 l-4,-2Z" fill="#F00" stroke="black" />
+        <path d="M3,3 l4,-2 l6,0 l4,2 l0,2.1 l-4,2 l-6,0 l-4,-2 l0,-2.1" fill="#F00" />
+        <path d="M3,5 l0,9 l4.1,2 l0,-9 l-4.1,-2" fill="#e60000" />
+        <path d="M7,7 l6.1,0 l0,9 l-6.1,0 l0,-9" fill="#cc0000" />
+        <path d="M13,7 l4.1,-2 l0,9 l-4.1,2 l0,-9" fill="#b30000" />
+
+        <title>Uranium</title>
+    </g>
+</template>
+<script lang="ts">
+import { PieceType } from './../../types/ui-data';
+import { Component, Mixins, Prop } from 'vue-property-decorator';
+import Piece from './Piece.vue';
+
+@Component({
+    created(this: Uranium) {
+        this.pieceType = PieceType.Uranium;
+    }
+})
+export default class Uranium extends Mixins(Piece) {
+    @Prop()
+    canClick?: boolean;
+}
+</script>

package/src/components/pieces/index.js

@@ -0,0 +1,10 @@
+import Card from './Card.vue';
+import Coal from './Coal.vue';
+import Garbage from './Garbage.vue';
+import House from './House.vue';
+import Hybrid from './Hybrid.vue';
+import Oil from './Oil.vue';
+import Piece from './Piece.vue';
+import Uranium from './Uranium.vue';
+
+export { Card, House, Coal, Oil, Garbage, Uranium, Hybrid, Piece };

package/src/icons/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.601 21.5c0 1.38-1.116 2.5-2.499 2.5-1.378 0-2.499-1.12-2.499-2.5s1.121-2.5 2.499-2.5c1.383 0 2.499 1.119 2.499 2.5zm-2.42-21.5c-4.029 0-7.06 2.693-7.06 8h3.955c0-2.304.906-4.189 3.024-4.189 1.247 0 2.57.828 2.684 2.411.123 1.666-.767 2.511-1.892 3.582-2.924 2.78-2.816 4.049-2.816 7.196h3.943c0-1.452-.157-2.508 1.838-4.659 1.331-1.436 2.986-3.222 3.021-5.943.047-3.963-2.751-6.398-6.697-6.398z"/></svg>

package/src/icons/log.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12c0 6.627-5.373 12-12 12s-12-5.373-12-12h2c0 5.514 4.486 10 10 10s10-4.486 10-10-4.486-10-10-10c-2.777 0-5.287 1.141-7.099 2.977l2.061 2.061-6.962 1.354 1.305-7.013 2.179 2.18c2.172-2.196 5.182-3.559 8.516-3.559 6.627 0 12 5.373 12 12zm-13-6v8h7v-2h-5v-6h-2z"/></svg>

package/src/icons/pass.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0 L20 20 L0 40 Z M20 0 L40 20 L20 40 Z" />
+</svg>

package/src/icons/rules.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="475.452px" height="475.451px" viewBox="0 0 475.452 475.451">
+<g>
+	<path d="M468.083,118.385c-3.99-5.33-9.61-9.419-16.854-12.275c0.387,6.665-0.086,12.09-1.42,16.281l-85.65,281.789
+		c-1.526,4.948-4.859,8.897-9.992,11.848c-5.141,2.953-10.469,4.428-15.989,4.428H74.66c-22.84,0-36.542-6.652-41.112-19.985
+		c-1.903-5.14-1.807-9.229,0.288-12.275c2.092-2.857,5.708-4.288,10.85-4.288h248.102c17.702,0,29.93-3.285,36.688-9.852
+		c6.763-6.567,13.565-21.177,20.413-43.824l78.228-258.669c4.186-14.084,2.474-26.457-5.141-37.113s-18.462-15.987-32.548-15.987
+		H173.163c-2.474,0-7.329,0.854-14.562,2.568l0.284-0.859c-5.33-1.14-9.851-1.662-13.562-1.571
+		c-3.71,0.099-7.137,1.192-10.277,3.289c-3.14,2.094-5.664,4.328-7.566,6.706c-1.903,2.38-3.761,5.426-5.568,9.136
+		c-1.805,3.715-3.33,7.142-4.567,10.282c-1.237,3.14-2.666,6.473-4.281,9.998c-1.62,3.521-3.186,6.423-4.71,8.706
+		c-1.143,1.523-2.758,3.521-4.854,5.996c-2.091,2.474-3.805,4.664-5.137,6.567c-1.331,1.903-2.19,3.616-2.568,5.14
+		c-0.378,1.711-0.19,4.233,0.571,7.566c0.76,3.328,1.047,5.753,0.854,7.277c-0.76,7.232-3.378,16.414-7.849,27.552
+		c-4.471,11.136-8.52,19.18-12.135,24.126c-0.761,0.95-2.853,3.092-6.28,6.424c-3.427,3.33-5.52,6.23-6.279,8.704
+		c-0.762,0.951-0.81,3.617-0.144,7.994c0.666,4.38,0.907,7.423,0.715,9.136c-0.765,6.473-3.14,15.037-7.139,25.697
+		c-3.999,10.657-7.994,19.414-11.993,26.265c-0.569,1.141-2.185,3.328-4.853,6.567c-2.662,3.237-4.283,5.902-4.853,7.99
+		c-0.38,1.523-0.33,4.188,0.144,7.994c0.473,3.806,0.426,6.66-0.144,8.562c-1.521,7.228-4.377,15.94-8.565,26.125
+		c-4.187,10.178-8.47,18.896-12.851,26.121c-1.138,1.906-2.712,4.145-4.708,6.711c-1.999,2.566-3.568,4.805-4.711,6.707
+		c-1.141,1.903-1.903,3.901-2.284,5.996c-0.19,1.143,0.098,2.998,0.859,5.571c0.76,2.566,1.047,4.612,0.854,6.14
+		c-0.192,2.662-0.57,6.187-1.141,10.567c-0.572,4.373-0.859,6.939-0.859,7.699c-4.187,11.424-3.999,23.511,0.572,36.269
+		c5.33,14.838,14.797,27.36,28.406,37.541c13.61,10.185,27.74,15.27,42.398,15.27h263.521c12.367,0,24.026-4.141,34.971-12.416
+		c10.944-8.281,18.227-18.507,21.837-30.696l78.511-258.662C477.412,141.51,475.701,129.234,468.083,118.385z M164.31,118.956
+		l5.997-18.274c0.76-2.474,2.329-4.615,4.709-6.423c2.38-1.805,4.808-2.712,7.282-2.712h173.589c2.663,0,4.565,0.903,5.708,2.712
+		c1.14,1.809,1.335,3.949,0.575,6.423l-6.002,18.274c-0.764,2.475-2.327,4.611-4.713,6.424c-2.382,1.805-4.805,2.708-7.278,2.708
+		H170.593c-2.666,0-4.568-0.9-5.711-2.708C163.74,123.567,163.55,121.431,164.31,118.956z M140.615,192.045l5.996-18.271
+		c0.76-2.474,2.331-4.615,4.709-6.423c2.38-1.809,4.805-2.712,7.282-2.712h173.583c2.666,0,4.572,0.9,5.712,2.712
+		c1.14,1.809,1.331,3.949,0.568,6.423l-5.996,18.271c-0.759,2.474-2.33,4.617-4.708,6.423c-2.383,1.809-4.805,2.712-7.283,2.712
+		H146.895c-2.664,0-4.567-0.9-5.708-2.712C140.043,196.662,139.854,194.519,140.615,192.045z"/>
+</g>
+</svg>

package/src/icons/sound-off.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M5 17h-5v-10h5v10zm2-10v10l9 5v-20l-9 5zm15.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"/>
+</svg>

package/src/icons/sound-on.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M5 17h-5v-10h5v10zm2-10v10l9 5v-20l-9 5zm17 4h-5v2h5v-2zm-1.584-6.232l-4.332 2.5 1 1.732 4.332-2.5-1-1.732zm1 12.732l-4.332-2.5-1 1.732 4.332 2.5 1-1.732z"/>
+</svg>

package/src/icons/undo.svg

@@ -0,0 +1,3 @@
+<svg width="497.25px" height="497.25px" viewBox="0 0 497.25 497.25" xmlns="http://www.w3.org/2000/svg">
+    <path fill="black" d="M248.625,89.25 V0 l-127.5,127.5 l127.5,127.5 V140.25 c84.15,0,153,68.85,153,153 c0,84.15-68.85,153-153,153 c-84.15,0-153-68.85-153-153 h-51 c0,112.2,91.8,204,204,204 s204-91.8,204-204 S360.825,89.25,248.625,89.25z"/>
+</svg>