powergrid-viewer 1.5.4

package/src/components/PlayerBoard.vue

@@ -0,0 +1,230 @@
+<template>
+    <g class="player-board">
+        <rect width="350" height="100" x="0" y="0" fill="gold" :stroke="color" />
+        <rect width="350" height="25" x="0" y="0" :fill="color" />
+        <foreignObject height="30" width="30" x="-30" y="-5">
+            <img
+                :src="avatar || `https://avatars.dicebear.com/api/pixel-art/${player.name}.svg`"
+                width="100%"
+                height="100%"
+                style="border-radius: 50%"
+            />
+        </foreignObject>
+        <text x="5" y="13" font-weight="600" fill="black">
+            {{ getPlayerName() }}
+        </text>
+        <text v-if="showMoney" x="250" y="13" font-weight="600" fill="black">Money: ${{ player.money }}</text>
+
+        <Card
+            v-for="(powerPlant, i) in player.powerPlants"
+            :key="'powerPlant_' + powerPlant.number"
+            :targetState="{ x: player.powerPlants.length < 5 ? 20 + 80 * i : 5 + 70 * i, y: 30 }"
+            :owner="owner"
+            :powerPlant="powerPlant"
+            :canClick="canUse(powerPlant)"
+            @click="powerPlantClick(powerPlant)"
+        />
+
+        <template v-if="!preferences.disableHelp">
+            <template v-for="(powerPlant, i) in player.powerPlants">
+                <rect
+                    v-if="canUse(powerPlant)"
+                    :key="i + '_' + i + '_helper'"
+                    :x="player.powerPlants.length < 5 ? 20 + 80 * i : 5 + 70 * i"
+                    :y="30"
+                    width="60"
+                    height="40"
+                    fill="none"
+                    stroke="blue"
+                    stroke-width="4px"
+                    rx="2px"
+                />
+            </template>
+        </template>
+
+        <g v-if="canClickResources">
+            <rect width="30" height="30" x="0" y="71" fill="none" stroke="blue" stroke-width="2px" rx="2px" />
+            <rect width="30" height="30" x="70" y="71" fill="none" stroke="blue" stroke-width="2px" rx="2px" />
+        </g>
+
+        <Coal
+            :pieceId="'Coal' + player.id"
+            :targetState="{ x: 5, y: 76 }"
+            :canClick="canClickResources"
+            @click="clickResource('coal')"
+        />
+        <text text-anchor="middle" x="40" y="85" fill="black">{{ player.coalLeft }}</text>
+
+        <Oil
+            :pieceId="'Oil' + player.id"
+            :targetState="{ x: 75, y: 76 }"
+            :canClick="canClickResources"
+            @click="clickResource('oil')"
+        />
+        <text text-anchor="middle" x="110" y="85" fill="black">{{ player.oilLeft }}</text>
+
+        <Garbage :pieceId="'Garbage' + player.id" :targetState="{ x: 145, y: 76 }" />
+        <text text-anchor="middle" x="180" y="85" fill="black">{{ player.garbageLeft }}</text>
+
+        <Uranium :pieceId="'Uranium' + player.id" :targetState="{ x: 215, y: 76 }" />
+        <text text-anchor="middle" x="250" y="85" fill="black">{{ player.uraniumLeft }}</text>
+    </g>
+</template>
+<script lang="ts">
+import { MoveName, Player } from 'powergrid-engine';
+import { Phase, PowerPlant, PowerPlantType, ResourceType } from 'powergrid-engine/src/gamestate';
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+import { Preferences } from '../types/ui-data';
+import { Coal, Oil, Garbage, Uranium, Card } from './pieces';
+
+@Component({
+    components: {
+        Coal,
+        Oil,
+        Garbage,
+        Uranium,
+        Card,
+    },
+})
+export default class PlayerBoard extends Vue {
+    @Prop() color?: string;
+    @Prop() avatar?: string;
+    @Prop() player!: Player;
+    @Prop() isCurrentPlayer?: boolean;
+    @Prop() owner?: number;
+    @Prop() ended?: boolean;
+    @Prop() isPlayer?: boolean;
+    @Prop() ranking?: number;
+    @Prop() showMoney?: boolean;
+    @Prop() showBid?: boolean;
+    @Prop() phase?: Phase;
+
+    @Inject() preferences!: Preferences;
+
+    powerPlantClicked?: PowerPlant;
+
+    getPlayerName() {
+        let name = '';
+        if (this.isCurrentPlayer) {
+            name += '• ';
+        }
+
+        name += this.player.name;
+
+        if (this.ended) {
+            switch (this.ranking) {
+                case 1:
+                    name += ' (1st)';
+                    break;
+                case 2:
+                    name += ' (2nd)';
+                    break;
+                case 3:
+                    name += ' (3rd)';
+                    break;
+                case 4:
+                case 5:
+                case 6:
+                    name += ` (${this.ranking}th)`;
+                    break;
+            }
+        } else if (this.player.skipAuction) {
+            name += ' (Skipping)';
+        } else if (this.player.passed) {
+            name += ' (Passed)';
+        } else if (this.player.bid && !this.isCurrentPlayer && this.showBid) {
+            name += ' (Bid: $' + this.player.bid + ')';
+        }
+
+        return name;
+    }
+
+    canUse(powerPlant) {
+        if (!this.isCurrentPlayer) return false;
+
+        if (this.player.availableMoves?.[MoveName.DiscardPowerPlant]) {
+            return powerPlant.number !== this.player.powerPlants[this.player.powerPlants.length - 1].number;
+        } else {
+            if (!this.player.availableMoves?.[MoveName.UsePowerPlant]) return false;
+
+            if (!this.player.powerPlantsNotUsed.includes(powerPlant.number) || this.player.resourcesUsed.length > 0) {
+                return false;
+            }
+
+            switch (powerPlant.type) {
+                case PowerPlantType.Coal: {
+                    return this.player.coalLeft >= powerPlant.cost;
+                }
+
+                case PowerPlantType.Oil: {
+                    return this.player.oilLeft >= powerPlant.cost;
+                }
+
+                case PowerPlantType.Garbage: {
+                    return this.player.garbageLeft >= powerPlant.cost;
+                }
+
+                case PowerPlantType.Uranium: {
+                    return this.player.uraniumLeft >= powerPlant.cost;
+                }
+
+                case PowerPlantType.Hybrid: {
+                    return this.player.coalLeft + this.player.oilLeft >= powerPlant.cost;
+                }
+
+                case PowerPlantType.Wind:
+                case PowerPlantType.Nuclear:
+                    return this.player.coalLeft + this.player.oilLeft >= powerPlant.cost;
+            }
+        }
+    }
+
+    powerPlantClick(powerPlant: PowerPlant) {
+        if (this.phase == Phase.Bureaucracy && powerPlant.type == PowerPlantType.Hybrid) {
+            if (
+                this.player.coalLeft == 0 ||
+                this.player.oilLeft == 0 ||
+                this.player.coalLeft + this.player.oilLeft == powerPlant.cost
+            ) {
+                this.player.resourcesUsed = Array(Math.min(powerPlant.cost, this.player.coalLeft))
+                    .fill(ResourceType.Coal)
+                    .concat(
+                        Array(powerPlant.cost - Math.min(powerPlant.cost, this.player.coalLeft)).fill(ResourceType.Oil)
+                    );
+                this.$emit('powerPlantClick', powerPlant);
+            } else {
+                this.powerPlantClicked = powerPlant;
+                this.player.resourcesUsed = Array(powerPlant.cost).fill(null);
+            }
+        } else {
+            this.$emit('powerPlantClick', powerPlant);
+        }
+    }
+
+    get canClickResources() {
+        return (
+            (this.player.availableMoves && this.player.availableMoves['DiscardResources']) ||
+            this.player.resourcesUsed.some((r) => r == null)
+        );
+    }
+
+    clickResource(resourceType) {
+        if (this.player.availableMoves && this.player.availableMoves['DiscardResources']) {
+            this.$emit('discardResource', resourceType);
+        } else if (this.player.resourcesUsed.some((r) => r == null)) {
+            const index = this.player.resourcesUsed.findIndex((r) => r == null)!;
+            this.player.resourcesUsed[index] = resourceType;
+
+            if (resourceType == 'coal') {
+                this.player.coalLeft--;
+            } else if (resourceType == 'oil') {
+                this.player.oilLeft--;
+            }
+
+            if (!this.player.resourcesUsed.some((r) => r == null)) {
+                this.$emit('powerPlantClick', this.powerPlantClicked);
+            }
+        }
+    }
+}
+</script>

package/src/components/boards/CityCount.vue

@@ -0,0 +1,82 @@
+<template>
+    <g>
+        <rect width="730" height="50" x="10" y="10" rx="3" fill="goldenrod" />
+        <template v-for="index in 21">
+            <rect
+                :key="'playerCityCount' + index"
+                width="28"
+                height="38"
+                :x="46 + 33 * (index - 1)"
+                y="16"
+                rx="2"
+                fill="darkgoldenrod"
+                :stroke="index == citiesToStep2 || index == citiesToEndGame ? '#916a08' : 'darkgoldenrod'"
+                stroke-width="2px"
+            />
+            <text
+                :key="'playerCityCountText' + index"
+                text-anchor="middle"
+                style="font-size: 24px; font-family: monospace"
+                letter-spacing="-2"
+                :x="59 + 33 * (index - 1)"
+                y="35"
+                fill="gold"
+            >
+                {{ index }}
+            </text>
+        </template>
+        <template v-for="house in houses">
+            <House
+                :key="house.id"
+                :pieceId="house.id"
+                :targetState="{ x: house.x, y: house.y }"
+                :owner="house.owner"
+                :ownerName="house.ownerName"
+                :color="house.color"
+            />
+        </template>
+    </g>
+</template>
+
+<script lang="ts">
+import type { GameState } from 'powergrid-engine';
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { House } from '../pieces';
+import { Piece } from '../../types/ui-data';
+
+@Component({
+    components: {
+        House
+    },
+})
+export default class CityCount extends Vue {
+    @Prop() citiesToStep2?: number;
+    @Prop() citiesToEndGame?: number;
+    @Prop() playerColors?: string[];
+
+    houses: Piece[] = [];
+
+    createPieces(gameState: GameState) {
+        this.houses = [];
+        const adjustCityCount: number[][] = [];
+        for (let i = 0; i < 22; i++) adjustCityCount[i] = [];
+
+        gameState.players.forEach((player, pi) => adjustCityCount[player.cities.length].push(pi));
+        gameState.players.forEach((player, pi) => {
+            let x = (adjustCityCount[player.cities.length].length == 1 ? 23 : 20) + 33 * player.cities.length;
+            x += (adjustCityCount[player.cities.length].indexOf(pi) % 2) * 6;
+
+            this.houses.push({
+                id: pi + '_cityCount',
+                x: x,
+                y:
+                    15 +
+                    (adjustCityCount[player.cities.length].indexOf(pi) * 30) /
+                    adjustCityCount[player.cities.length].length,
+                color: this.playerColors![pi],
+                owner: pi,
+            });
+        });
+    }
+}
+</script>

package/src/components/boards/Map.vue

@@ -0,0 +1,196 @@
+<template>
+    <g>
+        <!-- <template v-for="polygon in polygons">
+            <polygon
+                :key="'pol_ ' + polygon.region"
+                :points="polygon.points.map((p) => `${p[0]},${p[1]}`).join(' ')"
+                :fill="polygon.region"
+                opacity="0.8"
+                stroke="black"
+            ></polygon>
+        </template> -->
+
+        <template v-for="city in cities">
+            <circle :key="city.name + '_region'" r="25" :cx="city.x" :cy="city.y" :fill="city.region" stroke="black">
+                <title>{{ city.name }}</title>
+            </circle>
+            <circle :key="city.name + '_circle'" r="20" :cx="city.x" :cy="city.y" fill="gray" stroke="black">
+                <title>{{ city.name }}</title>
+            </circle>
+        </template>
+
+        <template v-for="connection in connections">
+            <line
+                :key="connection.nodes[0] + '_' + connection.nodes[1] + '_line1'"
+                :x1="getX1(connection)"
+                :y1="getY1(connection)"
+                :x2="getX2(connection)"
+                :y2="getY2(connection)"
+                stroke-width="10"
+                stroke="black"
+            />
+            <line
+                :key="connection.nodes[0] + '_' + connection.nodes[1] + '_line2'"
+                :x1="getX1(connection)"
+                :y1="getY1(connection)"
+                :x2="getX2(connection)"
+                :y2="getY2(connection)"
+                stroke-width="9"
+                stroke="gray"
+            />
+        </template>
+
+        <template v-for="city in cities">
+            <circle
+                :key="city.name + '_circle2'"
+                :class="[{ canClick: canBuild(city) }]"
+                r="20"
+                :cx="city.x"
+                :cy="city.y"
+                fill="gray"
+                @click="canBuild(city) && build(city)"
+            >
+                <title>{{ city.name }}</title>
+            </circle>
+        </template>
+
+        <template v-for="connection in connections">
+            <circle
+                v-if="connection.cost > 0"
+                :key="connection.nodes[0] + '_' + connection.nodes[1] + '_border'"
+                stroke="black"
+                :r="10 + (connection.cost * 10) / 28"
+                :cx="(getX1(connection) + getX2(connection)) / 2"
+                :cy="(getY1(connection) + getY2(connection)) / 2"
+                :fill="connection.cost > 15 ? 'gold' : connection.cost > 10 ? 'lightgray' : 'tan'"
+            />
+            <circle
+                v-if="connection.cost > 0"
+                :key="connection.nodes[0] + '_' + connection.nodes[1] + '_circle'"
+                :r="6 + (connection.cost * 10) / 28"
+                :cx="(getX1(connection) + getX2(connection)) / 2"
+                :cy="(getY1(connection) + getY2(connection)) / 2"
+                fill="gray"
+                stroke="black"
+            />
+            <text
+                v-if="connection.cost > 0"
+                :key="connection.nodes[0] + '_' + connection.nodes[1] + '_text'"
+                text-anchor="middle"
+                :style="`font-size: ${12 + (connection.cost * 6) / 28}px`"
+                fill="black"
+                :x="(getX1(connection) + getX2(connection)) / 2"
+                :y="(getY1(connection) + getY2(connection)) / 2"
+            >
+                {{ connection.cost }}
+            </text>
+        </template>
+        <template v-for="house in houses">
+            <House
+                :key="house.id"
+                :pieceId="house.id"
+                :targetState="{ x: house.x, y: house.y }"
+                :owner="house.owner"
+                :ownerName="house.ownerName"
+                :color="house.color"
+            />
+        </template>
+
+        <template v-if="!preferences.disableHelp">
+            <template v-for="city in cities">
+                <circle
+                    v-if="canBuild(city)"
+                    :key="city.name + '_circleHelp'"
+                    :class="[{ canClick: canBuild(city) }]"
+                    r="18"
+                    :cx="city.x"
+                    :cy="city.y"
+                    fill="none"
+                    stroke="blue"
+                    stroke-width="4px"
+                />
+            </template>
+        </template>
+    </g>
+</template>
+
+<script lang="ts">
+import type { GameState } from 'powergrid-engine';
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+import { House } from '../pieces';
+import { Piece, Preferences } from '../../types/ui-data';
+import { City, Connection, Polygon } from 'powergrid-engine/src/maps';
+
+@Component({
+    components: {
+        House
+    },
+})
+export default class Map extends Vue {
+    @Prop() polygons?: Polygon[];
+    @Prop() cities?: City[];
+    @Prop() connections?: Connection[];
+    @Prop() playerColors?: string[];
+    @Prop() buildableCities?: string[];
+
+    @Inject() preferences!: Preferences;
+
+    houses: Piece[] = [];
+
+    createPieces(gameState: GameState) {
+        this.houses = [];
+        gameState.players.forEach((player, pi) => {
+            player.cities.forEach((cityPiece) => {
+                const city = gameState.map.cities.find((city) => city.name == cityPiece.name)!;
+                let offsetX, offsetY;
+                if (cityPiece.position == 0) {
+                    offsetX = -6;
+                    offsetY = -18;
+                } else if (cityPiece.position == 1) {
+                    offsetX = -15;
+                    offsetY = -4;
+                } else {
+                    offsetX = 1;
+                    offsetY = -4;
+                }
+
+                this.houses.push({
+                    id: pi + '_' + cityPiece.name,
+                    x: city.x + offsetX,
+                    y: city.y + offsetY,
+                    color: this.playerColors![pi],
+                    owner: pi,
+                });
+            });
+        });
+    }
+
+    getX1(connection) {
+        const city = this.cities!.find((city) => city.name == connection.nodes[0])!;
+        return city.x;
+    }
+
+    getY1(connection) {
+        const city = this.cities!.find((city) => city.name == connection.nodes[0])!;
+        return city.y;
+    }
+
+    getX2(connection) {
+        const city = this.cities!.find((city) => city.name == connection.nodes[1])!;
+        return city.x;
+    }
+
+    getY2(connection) {
+        const city = this.cities!.find((city) => city.name == connection.nodes[1])!;
+        return city.y;
+    }
+
+    canBuild(city: City) {
+        return !!this.buildableCities!.find((cityName) => cityName == city.name);
+    }
+
+    build(city: City) {
+        this.$emit('build', city);
+    }
+}
+</script>

package/src/components/boards/PlayerOrder.vue

@@ -0,0 +1,68 @@
+<template>
+    <g>
+        <rect x="10" y="10" width="185" height="40" rx="3" fill="goldenrod" />
+        <template v-for="index in 6">
+            <rect
+                :key="'playerOrder' + index"
+                :x="15 + 30 * (index - 1)"
+                y="15"
+                width="24"
+                height="30"
+                rx="2"
+                fill="darkgoldenrod"
+            />
+            <text
+                :key="'playerOrderText' + index"
+                text-anchor="middle"
+                style="font-size: 32px; font-family: monospace"
+                :x="27 + 30 * (index - 1)"
+                y="30"
+                fill="gold"
+            >
+                {{ index }}
+            </text>
+        </template>
+        <template v-for="house in houses">
+            <House
+                :key="house.id"
+                :pieceId="house.id"
+                :targetState="{ x: house.x, y: house.y }"
+                :owner="house.owner"
+                :ownerName="house.ownerName"
+                :color="house.color"
+            />
+        </template>
+    </g>
+</template>
+
+<script lang="ts">
+import type { GameState } from 'powergrid-engine';
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { House } from '../pieces';
+import { Piece } from '../../types/ui-data';
+
+@Component({
+    components: {
+        House
+    },
+})
+export default class PlayerOrder extends Vue {
+    @Prop() playerColors?: string[];
+
+    houses: Piece[] = [];
+
+    createPieces(gameState: GameState) {
+        this.houses = [];
+        gameState.playerOrder.forEach((p, i) => {
+            this.houses.push({
+                id: p + '_order',
+                x: 20 + 30 * i,
+                y: 22,
+                color: this.playerColors![p],
+                owner: p,
+                ownerName: gameState.players[p].name
+            });
+        });
+    }
+}
+</script>