powergrid-viewer 1.5.4

package/src/components/boards/PowerPlantMarket.vue

@@ -0,0 +1,184 @@
+<template>
+    <g>
+        <text x="10" y="14" font-weight="600" fill="black">Power Plant Deck:</text>
+        <template v-if="cardsLeft > 0">
+            <rect
+                v-for="index in cardsLeft"
+                :key="'card' + index"
+                :x="35 + index / 5"
+                :y="38 - index / 10"
+                width="60"
+                height="40"
+                fill="gray"
+                stroke="black"
+                stroke-width="2"
+                rx="4"
+            />
+            <rect
+                :x="35 + cardsLeft / 5"
+                :y="38 - cardsLeft / 10"
+                width="60"
+                height="40"
+                :fill="nextCardWeak ? 'gray' : 'lightgray'"
+                stroke="black"
+                stroke-width="2"
+                rx="4"
+            >
+                <title>{{ cardsLeft }} cards left{{ nextCardWeak ? ', next is an initial plant' : '' }}</title>
+            </rect>
+        </template>
+
+        <text x="165" y="14" font-weight="600" fill="black">Actual Market:</text>
+        <template v-for="(card, i) in actualMarketCards">
+            <Card
+                :key="card.id"
+                :targetState="{ x: card.x, y: card.y }"
+                :powerPlant="card.powerPlant"
+                :canClick="chooseablePowerPlants && chooseablePowerPlants.includes(card.powerPlant.number)"
+                :hasDiscount="plantDiscountActive && i == 0"
+                @click="choosePowerPlant(card.powerPlant)"
+            />
+        </template>
+
+        <template v-if="futureMarketCards.length > 0">
+            <text x="165" y="80" font-weight="600" fill="black">Future Market:</text>
+            <template v-for="card in futureMarketCards">
+                <Card :key="card.id" :targetState="{ x: card.x, y: card.y }" :powerPlant="card.powerPlant" />
+            </template>
+        </template>
+
+        <template v-if="chosenPowerPlant">
+            <text :x="actualMarketWidth" y="14" font-weight="600" fill="black">Current Auction:</text>
+            <Card
+                :key="chosenPowerPlant.id"
+                :targetState="{ x: chosenPowerPlant.x, y: chosenPowerPlant.y }"
+                :powerPlant="chosenPowerPlant.powerPlant"
+            />
+            <Calculator
+                v-if="canBid"
+                :transform="`translate(${actualMarketWidth}, 80)`"
+                :minValue="minBid"
+                :maxValue="maxBid"
+                @bid="bid($event)"
+            />
+        </template>
+
+        <template v-if="!preferences.disableHelp">
+            <g v-if="canChoose">
+                <rect
+                    v-if="futureMarketCards.length > 0"
+                    x="160"
+                    y="5"
+                    :width="65 * actualMarketCards.length + 5"
+                    height="65"
+                    fill="none"
+                    stroke="blue"
+                    stroke-width="2px"
+                    rx="2px"
+                />
+
+                <rect
+                    v-else
+                    x="160"
+                    y="5"
+                    width="200"
+                    height="120"
+                    fill="none"
+                    stroke="blue"
+                    stroke-width="2px"
+                    rx="2px"
+                />
+            </g>
+        </template>
+    </g>
+</template>
+
+<script lang="ts">
+import type { GameState } from 'powergrid-engine';
+import { PowerPlant } from 'powergrid-engine/src/gamestate';
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+import { Card } from './../pieces';
+import { Piece, Preferences } from '../../types/ui-data';
+import Calculator from './../Calculator.vue';
+
+@Component({
+    components: {
+        Card,
+        Calculator
+    },
+})
+export default class PowerPlantMarket extends Vue {
+    @Prop() cardsLeft?: number;
+    @Prop() nextCardWeak?: boolean;
+    @Prop() plantDiscountActive?: boolean;
+    @Prop() canBid?: boolean;
+    @Prop() canChoose?: boolean;
+    @Prop() chooseablePowerPlants?: number[];
+    @Prop() minBid?: number;
+    @Prop() maxBid?: number;
+
+    @Inject() preferences!: Preferences;
+
+    actualMarketCards: Piece[] = [];
+    futureMarketCards: Piece[] = [];
+    chosenPowerPlant: Piece | null = null;
+    actualMarketWidth: number = 430;
+
+    createPieces(gameState: GameState) {
+        this.actualMarketWidth = gameState.map.actualMarketWidth ?? 430;
+        this.actualMarketCards = [];
+        gameState.actualMarket.forEach((card, i) => {
+            if (gameState.futureMarket.length > 0) {
+                if (card.number != gameState.chosenPowerPlant?.number) {
+                    this.actualMarketCards.push({
+                        id: 'actual_' + i,
+                        x: 165 + i * 65,
+                        y: 24,
+                        powerPlant: card
+                    });
+                }
+            } else {
+                if (card.number != gameState.chosenPowerPlant?.number) {
+                    this.actualMarketCards.push({
+                        id: 'actual_' + i,
+                        x: 165 + (i % 3) * 65,
+                        y: i < 3 ? 24 : 80,
+                        powerPlant: card
+                    });
+                }
+            }
+        });
+
+        this.futureMarketCards = [];
+        gameState.futureMarket.forEach((card, i) => {
+            if (card.number != gameState.chosenPowerPlant?.number) {
+                this.futureMarketCards.push({
+                    id: 'future_' + i,
+                    x: 165 + i * 65,
+                    y: 90,
+                    powerPlant: card
+                });
+            }
+        });
+
+        if (gameState.chosenPowerPlant) {
+            this.chosenPowerPlant = {
+                id: 'chosen',
+                x: this.actualMarketWidth + 30,
+                y: 30,
+                powerPlant: gameState.chosenPowerPlant
+            };
+        } else {
+            this.chosenPowerPlant = null;
+        }
+    }
+
+    choosePowerPlant(powerPlant: PowerPlant) {
+        this.$emit('choosePowerPlant', powerPlant);
+    }
+
+    bid(bid: number) {
+        this.$emit('bid', bid);
+    }
+}
+</script>

package/src/components/boards/Resources.vue

@@ -0,0 +1,446 @@
+<template>
+    <g>
+        <text v-if="resourceResupply[0] < 10" x="30" y="20" font-weight="600" fill="black" style="font-size: 24px"
+            >Resource Resupply:</text
+        >
+        <text v-else x="20" y="20" font-weight="600" fill="black" style="font-size: 24px">Resource Resupply:</text>
+        <text v-if="resourceResupply[0] < 10" x="276" y="20" font-weight="600" fill="black" style="font-size: 24px">
+            {{ resourceResupply[0] }}
+        </text>
+        <text v-else x="262" y="20" font-weight="600" fill="black" style="font-size: 24px">
+            {{ resourceResupply[0] }}
+        </text>
+        <Coal :pieceId="-1" :targetState="{ x: 288, y: 12 }" :canClick="false" :transparent="false" />
+        <text x="321" y="20" font-weight="600" fill="black" style="font-size: 24px">
+            {{ resourceResupply[1] }}
+        </text>
+        <Oil :pieceId="-1" :targetState="{ x: 331, y: 11 }" :canClick="false" :transparent="false" />
+        <text x="368" y="20" font-weight="600" fill="black" style="font-size: 24px">
+            {{ resourceResupply[2] }}
+        </text>
+        <Garbage :pieceId="-1" :targetState="{ x: 382, y: 11 }" :canClick="false" :transparent="false" />
+        <text x="414" y="20" font-weight="600" fill="black" style="font-size: 24px">
+            {{ resourceResupply[3] }}
+        </text>
+        <Uranium :pieceId="-1" :targetState="{ x: 428, y: 12 }" :canClick="false" :transparent="false" />
+
+        <rect v-if="!isIndiaResourceMarket" width="760" height="80" x="20" y="40" rx="3" fill="goldenrod" />
+        <rect v-if="isIndiaResourceMarket" width="680" height="80" x="20" y="40" rx="3" fill="goldenrod" />
+        <template v-for="index in 8">
+            <rect
+                :key="'resources' + index"
+                width="70"
+                height="70"
+                :x="25 + 85 * (index - 1)"
+                y="45"
+                rx="2"
+                fill="darkgoldenrod"
+            />
+            <circle :key="'resourcesCircle' + index" r="10" :cx="92 + 85 * (index - 1)" cy="48" fill="yellow" />
+            <text
+                :key="'resourcesText' + index"
+                text-anchor="middle"
+                style="font-size: 16px; font-family: monospace"
+                :x="92 + 85 * (index - 1)"
+                y="48"
+                fill="darkgoldenrod"
+            >
+                {{ index }}
+            </text>
+            <g :key="'lines' + index" v-if="!isIndiaResourceMarket">
+                <line :x1="25 + 85 * (index - 1)" y1="68" :x2="95 + 85 * (index - 1)" y2="68" stroke="goldenrod" />
+                <line :x1="25 + 85 * (index - 1)" y1="92" :x2="95 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
+
+                <line :x1="48 + 85 * (index - 1)" y1="40" :x2="48 + 85 * (index - 1)" y2="68" stroke="goldenrod" />
+                <line :x1="72 + 85 * (index - 1)" y1="40" :x2="72 + 85 * (index - 1)" y2="68" stroke="goldenrod" />
+                <line :x1="42 + 85 * (index - 1)" y1="68" :x2="42 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
+                <line :x1="58 + 85 * (index - 1)" y1="68" :x2="58 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
+                <line :x1="74 + 85 * (index - 1)" y1="68" :x2="74 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
+                <line :x1="48 + 85 * (index - 1)" y1="92" :x2="48 + 85 * (index - 1)" y2="120" stroke="goldenrod" />
+                <line :x1="72 + 85 * (index - 1)" y1="92" :x2="72 + 85 * (index - 1)" y2="120" stroke="goldenrod" />
+            </g>
+            <g :key="'lines' + index" v-if="isIndiaResourceMarket">
+                <line :x1="25 + 85 * (index - 1)" y1="68" :x2="95 + 85 * (index - 1)" y2="68" stroke="goldenrod" />
+                <line :x1="25 + 85 * (index - 1)" y1="92" :x2="95 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
+
+                <line :x1="42 + 85 * (index - 1)" y1="40" :x2="42 + 85 * (index - 1)" y2="68" stroke="goldenrod" />
+                <line :x1="59 + 85 * (index - 1)" y1="40" :x2="59 + 85 * (index - 1)" y2="68" stroke="goldenrod" />
+                <line :x1="76 + 85 * (index - 1)" y1="40" :x2="76 + 85 * (index - 1)" y2="68" stroke="goldenrod" />
+                <line :x1="42 + 85 * (index - 1)" y1="68" :x2="42 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
+                <line :x1="58 + 85 * (index - 1)" y1="68" :x2="58 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
+                <line :x1="74 + 85 * (index - 1)" y1="68" :x2="74 + 85 * (index - 1)" y2="92" stroke="goldenrod" />
+                <line :x1="42 + 85 * (index - 1)" y1="92" :x2="42 + 85 * (index - 1)" y2="120" stroke="goldenrod" />
+                <line :x1="59 + 85 * (index - 1)" y1="92" :x2="59 + 85 * (index - 1)" y2="120" stroke="goldenrod" />
+                <line :x1="76 + 85 * (index - 1)" y1="92" :x2="76 + 85 * (index - 1)" y2="120" stroke="goldenrod" />
+            </g>
+        </template>
+
+        <template v-if="isIndiaResourceMarket">
+            <g :key="'separators'">
+                <line x1="275" y1="40" x2="275" y2="140" stroke="red" />
+                <line x1="445" y1="40" x2="445" y2="140" stroke="red" />
+
+                <text x="220" y="130" stroke="red">Step 1</text>
+                <text x="390" y="130" stroke="red">Step 2</text>
+            </g>
+        </template>
+
+        <template v-if="!isIndiaResourceMarket">
+            <rect width="30" height="30" x="705" y="45" rx="2" fill="darkgoldenrod" />
+            <circle r="10" cx="732" cy="48" fill="yellow" />
+            <text
+                text-anchor="middle"
+                style="font-size: 12px; font-family: monospace"
+                x="732"
+                y="48"
+                fill="darkgoldenrod"
+            >
+                10
+            </text>
+
+            <rect width="30" height="30" x="745" y="45" rx="2" fill="darkgoldenrod" />
+            <circle r="10" cx="772" cy="48" fill="yellow" />
+            <text
+                text-anchor="middle"
+                style="font-size: 12px; font-family: monospace"
+                x="772"
+                y="48"
+                fill="darkgoldenrod"
+            >
+                12
+            </text>
+
+            <rect width="30" height="30" x="705" y="85" rx="2" fill="darkgoldenrod" />
+            <circle r="10" cx="732" cy="88" fill="yellow" />
+            <text
+                text-anchor="middle"
+                style="font-size: 12px; font-family: monospace"
+                x="732"
+                y="88"
+                fill="darkgoldenrod"
+            >
+                14
+            </text>
+
+            <rect width="30" height="30" x="745" y="85" rx="2" fill="darkgoldenrod" />
+            <circle r="10" cx="772" cy="88" fill="yellow" />
+            <text
+                text-anchor="middle"
+                style="font-size: 12px; font-family: monospace"
+                x="772"
+                y="88"
+                fill="darkgoldenrod"
+            >
+                16
+            </text>
+        </template>
+
+        <template v-if="isUsaRecharged">
+            <rect
+                width="180"
+                height="70"
+                x="795"
+                y="45"
+                rx="2"
+                fill="chocolate"
+                stroke="sandybrown"
+                stroke-width="4px"
+            />
+            <circle r="10" cx="973" cy="45" fill="yellow" />
+            <text
+                text-anchor="middle"
+                style="font-size: 16px; font-family: monospace"
+                x="973"
+                y="45"
+                fill="darkgoldenrod"
+            >
+                8
+            </text>
+            <Coal :pieceId="-1" :targetState="{ x: 858, y: 57 }" :canClick="false" :transparent="true" :scale="0.2" />
+        </template>
+
+        <template v-for="coal in coals">
+            <Coal
+                :key="coal.id"
+                :pieceId="coal.id"
+                :targetState="{ x: coal.x, y: coal.y }"
+                :canClick="!coal.transparent && canBuyResource('coal')"
+                :transparent="coal.transparent"
+                :scale="isIndiaResourceMarket ? 0.06 : 0.08"
+                @click="buyResource('coal')"
+            />
+        </template>
+
+        <template v-for="oil in oils">
+            <Oil
+                :key="oil.id"
+                :pieceId="oil.id"
+                :targetState="{ x: oil.x, y: oil.y }"
+                :canClick="!oil.transparent && canBuyResource('oil')"
+                :transparent="oil.transparent"
+                @click="buyResource('oil')"
+            />
+        </template>
+
+        <template v-for="garbage in garbages">
+            <Garbage
+                :key="garbage.id"
+                :pieceId="garbage.id"
+                :targetState="{ x: garbage.x, y: garbage.y }"
+                :canClick="!garbage.transparent && canBuyResource('garbage')"
+                :transparent="garbage.transparent"
+                :scale="isIndiaResourceMarket ? 0.8 : 1"
+                @click="buyResource('garbage')"
+            />
+        </template>
+
+        <template v-for="uranium in uraniums">
+            <Uranium
+                :key="uranium.id"
+                :pieceId="uranium.id"
+                :targetState="{ x: uranium.x, y: uranium.y }"
+                :canClick="!uranium.transparent && canBuyResource('uranium')"
+                :transparent="uranium.transparent"
+                @click="buyResource('uranium')"
+            />
+        </template>
+
+        <template v-if="isMiddleEast">
+            <rect width="80" height="50" x="20" y="70" rx="2" fill="gray" stroke="darkgray" stroke-width="4px" />
+            <Oil
+                :pieceId="-1"
+                :targetState="{ x: 35, y: 80 }"
+                :scale="1.5"
+                :canClick="availableSurplusOil > 0 && canBuyResource('oil')"
+                :transparent="availableSurplusOil == 0"
+                @click="buyResource('oil')"
+            />
+            <text text-anchor="middle" style="font-size: 16px; font-family: monospace" x="70" y="93.5">
+                x{{ availableSurplusOil }}
+            </text>
+        </template>
+
+        <template v-if="!preferences.disableHelp">
+            <rect
+                v-if="buyableResources.length > 0"
+                x="15"
+                y="35"
+                width="770"
+                height="90"
+                rx="2"
+                fill="none"
+                stroke="blue"
+                stroke-width="2px"
+            />
+        </template>
+    </g>
+</template>
+
+<script lang="ts">
+import type { GameState } from 'powergrid-engine';
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+import { Coal, Garbage, Oil, Uranium } from '../pieces';
+import { Piece, Preferences } from '../../types/ui-data';
+import { range } from 'lodash';
+
+@Component({
+    components: {
+        Coal, Oil, Garbage, Uranium
+    },
+})
+export default class Resources extends Vue {
+    @Prop() resourceResupply?: number[];
+    @Prop() isUsaRecharged?: boolean;
+    @Prop() isMiddleEast?: boolean;
+    @Prop() isIndiaResourceMarket?: boolean;
+    @Prop() availableSurplusOil?: number;
+    @Prop() buyableResources?: string[];
+
+    @Inject() preferences!: Preferences;
+
+    coals: Piece[] = [];
+    oils: Piece[] = [];
+    garbages: Piece[] = [];
+    uraniums: Piece[] = [];
+
+    createPieces(gameState: GameState) {
+        if (gameState) {
+            this.coals = [];
+            if (gameState.map?.name == 'India') {
+                Array(24)
+                    .fill(0)
+                    .forEach((_, i) => {
+                        // Convert i to which of the 32 slots it belongs in, some of which are empty.
+                        let index = i;
+                        if (i >= 0) {
+                            index += 2; // 2 empty slots for $8
+                        }
+                        if (i >= 2) {
+                            index += 2; // 2 empty slots for $7
+                        }
+                        if (i >= 4) {
+                            index++; // 1 empty slot for $6
+                        }
+                        if (i >= 7) {
+                            index++; // 1 empty slot for $5
+                        }
+                        if (i >= 10) {
+                            index++; // 1 empty slot for $4
+                        }
+                        if (i >= 13) {
+                            index++; // 1 empty slot for $3
+                        }
+
+                        this.coals.push({
+                            id: 'coal_' + i,
+                            x: 672 - 17 * index - 17 * Math.floor(index / 4),
+                            y: 48,
+                            transparent: i >= gameState!.coalMarket
+                        });
+                    });
+            } else {
+                Array(24)
+                    .fill(0)
+                    .forEach((_, i) => {
+                        this.coals.push({
+                            id: 'coal_' + i,
+                            x: 668 - 23.5 * i - 14.5 * Math.floor(i / 3),
+                            y: 48,
+                            transparent: i >= gameState!.coalMarket,
+                        });
+                    });
+            }
+
+            if (gameState.options.variant == 'recharged' && gameState.map?.name == 'USA') {
+                range(gameState.coalSupply).forEach((i) => {
+                    this.coals.push({
+                        id: 'coal_supply_' + i,
+                        x: 800 + (i % 8) * 20 + (i >= 8 && i < 16 ? 10 : 0),
+                        y: 50 + Math.floor(i / 8) * 20,
+                        transparent: false,
+                    });
+                });
+            }
+
+            this.oils = [];
+            if (gameState.map?.name == 'Middle East') {
+                let maxRegularOil = gameState.oilPrices!.filter(p => p > 1).length;
+                let maxSurplusOil = gameState.oilPrices!.filter(p => p == 1).length;
+                let availableRegularOil = Math.min(maxRegularOil, gameState.oilMarket);
+
+                Array(maxRegularOil)
+                    .fill(0)
+                    .forEach((_, i) => {
+                        let adjustedIndex = i + (maxSurplusOil - 3);
+                        this.oils.push({
+                            id: 'normal_oil_' + adjustedIndex,
+                            x: 651 - 16 * adjustedIndex - 37 * Math.floor(adjustedIndex / 3),
+                            y: 70,
+                            transparent: i >= availableRegularOil,
+                        });
+                    });
+            } else {
+                Array(24)
+                    .fill(0)
+                    .forEach((_, i) => {
+                        this.oils.push({
+                            id: 'oil_' + i,
+                            x: 651 - 16 * i - 37 * Math.floor(i / 3),
+                            y: 70,
+                            transparent: i >= gameState!.oilMarket,
+                        });
+                    });
+            }
+
+            this.garbages = [];
+            if (gameState.map?.name == 'India') {
+                Array(24)
+                    .fill(0)
+                    .forEach((_, i) => {
+                        let index = i + 8; // Leave $7 and $8 empty.
+                        this.garbages.push({
+                            id: 'garbage_' + i,
+                            x: 672 - 17 * index - 17 * Math.floor(index / 4),
+                            y: 94,
+                            transparent: i >= gameState!.garbageMarket,
+                        });
+                    });
+            } else {
+                Array(24)
+                    .fill(0)
+                    .forEach((_, i) => {
+                        this.garbages.push({
+                            id: 'garbage_' + i,
+                            x: 668 - 23.5 * i - 14.5 * Math.floor(i / 3),
+                            y: 94,
+                            transparent: i >= gameState!.garbageMarket,
+                        });
+                    });
+            }
+
+            this.uraniums = [];
+            if (gameState.map?.name == 'India') {
+                Array(8)
+                    .fill(0)
+                    .forEach((_, i) => {
+                        this.uraniums.push({
+                            id: 'uranium_' + i,
+                            x: 670 - 85 * i,
+                            y: 72,
+                            transparent: i >= gameState!.uraniumMarket
+                        });
+                    });
+            } else {
+                Array(12)
+                    .fill(0)
+                    .forEach((_, i) => {
+                        if (i == 0) {
+                            this.uraniums.push({
+                                id: 'uranium_' + i,
+                                x: 750,
+                                y: 91,
+                                transparent: i >= gameState!.uraniumMarket,
+                            });
+                        } else if (i == 1) {
+                            this.uraniums.push({
+                                id: 'uranium_' + i,
+                                x: 710,
+                                y: 91,
+                                transparent: i >= gameState!.uraniumMarket,
+                            });
+                        } else if (i == 2) {
+                            this.uraniums.push({
+                                id: 'uranium_' + i,
+                                x: 750,
+                                y: 52,
+                                transparent: i >= gameState!.uraniumMarket,
+                            });
+                        } else if (i == 3) {
+                            this.uraniums.push({
+                                id: 'uranium_' + i,
+                                x: 710,
+                                y: 52,
+                                transparent: i >= gameState!.uraniumMarket,
+                            });
+                        } else {
+                            this.uraniums.push({
+                                id: 'uranium_' + i,
+                                x: 1010 - 85 * i,
+                                y: 72,
+                                transparent: i >= gameState!.uraniumMarket,
+                            });
+                        }
+                    });
+            }
+        }
+    }
+
+    canBuyResource(resource: string) {
+        return !!this.buyableResources!.find(r => r == resource);
+    }
+
+    buyResource(resource: string) {
+        this.$emit('buyResource', resource);
+    }
+}
+</script>

package/src/components/buttons/Button.vue

@@ -0,0 +1,26 @@
+<template>
+    <g :class="['button', { enabled }]" @click="enabled && $emit('click')">
+        <rect :width="width" height="30" fill="gainsboro" stroke="black" rx="2" />
+        <text text-anchor="middle" fill="black" :x="width / 2" y="16">{{ getText() }}</text>
+        <title>{{ text }}</title>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class Button extends Vue {
+    @Prop()
+    text?: string;
+
+    @Prop()
+    width?: number;
+
+    @Prop({ default: true })
+    enabled!: boolean;
+
+    getText() {
+        return this.text!.length > 15 ? this.text?.substring(0, 12).concat('...') : this.text;
+    }
+}
+</script>

package/src/components/buttons/HelpButton.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 x="5" y="5" width="20" height="20" href="../../icons/help.svg" />
+        <line v-if="!isOn" x1="5" y1="25" x2="25" y2="5" stroke="black" stroke-width="3px" stroke-linecap="round" />
+        <title v-if="isOn">Help off</title>
+        <title v-else>Help on</title>
+    </g>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class HelpButton extends Vue {
+    @Prop()
+    isOn?: boolean;
+}
+</script>