powergrid-viewer 2.0.3 → 2.0.5

package/src/components/boards/ResourceBoxes.vue

@@ -0,0 +1,212 @@
+<template>
+    <g>
+        <template v-for="(block, b) in blocks">
+            <g :key="'block' + b" :transform="`translate(0, ${block.y})`">
+                <text v-if="block.title" x="4" y="16" font-weight="700" fill="black" style="font-size: 26px">
+                    {{ block.title }}
+                </text>
+
+                <!-- Restock, as the printed refill card reads it: one number per row,
+                     in the same order the rows are drawn. -->
+                <text
+                    v-if="block.restock"
+                    :x="BOX_W - 4"
+                    y="16"
+                    text-anchor="end"
+                    font-weight="600"
+                    fill="#3a2c08"
+                    style="font-size: 24px"
+                >
+                    Restock {{ block.restock }}
+                </text>
+
+                <text x="4" y="42" fill="#3a2c08" style="font-size: 24px; letter-spacing: 1px">CURRENT PRICE</text>
+                <text
+                    :x="CUBE_BAND_CENTRE"
+                    y="42"
+                    text-anchor="middle"
+                    fill="#3a2c08"
+                    style="font-size: 24px; letter-spacing: 1px"
+                >
+                    AT THIS PRICE
+                </text>
+                <text
+                    :x="BOX_W - 4"
+                    y="42"
+                    text-anchor="end"
+                    fill="#3a2c08"
+                    style="font-size: 24px; letter-spacing: 1px"
+                >
+                    CUBES LEFT
+                </text>
+
+                <g
+                    v-for="(row, r) in block.rows"
+                    :key="'row' + r"
+                    :transform="`translate(0, ${HEAD_H + r * (BOX_H + BOX_GAP)})`"
+                    :class="[{ canClick: row.buyable }]"
+                    @click="row.buyable && $emit('buyResource', row.move)"
+                >
+                    <rect
+                        :width="BOX_W"
+                        :height="BOX_H"
+                        rx="6"
+                        :fill="row.cubes > 0 ? 'darkgoldenrod' : '#9c8236'"
+                        :stroke="row.buyable ? '#1e63d0' : '#6b5312'"
+                        :stroke-width="row.buyable ? 5 : 2"
+                        :opacity="row.cubes > 0 ? 1 : 0.55"
+                    />
+                    <!-- Whole box is the tap target, cubes and all. -->
+                    <rect
+                        v-if="row.buyable"
+                        :width="BOX_W"
+                        :height="BOX_H"
+                        rx="6"
+                        fill="transparent"
+                        pointer-events="all"
+                    />
+
+                    <text x="18" y="26" font-weight="700" fill="black" style="font-size: 22px; letter-spacing: 1px">
+                        {{ row.label }}
+                    </text>
+
+                    <template v-if="row.price != null">
+                        <text x="18" y="80" font-weight="700" fill="black" style="font-size: 26px">$</text>
+                        <text x="40" y="84" font-weight="700" fill="black" style="font-size: 46px">
+                            {{ row.price }}
+                        </text>
+                        <text v-if="row.next != null" x="132" y="80" fill="#3a2c08" style="font-size: 22px">
+                            then ${{ row.next }}
+                        </text>
+                    </template>
+                    <text v-else x="18" y="78" font-weight="700" fill="black" style="font-size: 28px">out</text>
+
+                    <!-- One dot per cube still buyable at the current price. A pool
+                         with no price track behind it has no such number: every cube
+                         in it costs the same, so say that instead of drawing dots. -->
+                    <circle
+                        v-for="n in row.atPrice"
+                        :key="'cube' + n"
+                        :cx="cubeX(row.atPrice, n)"
+                        :cy="58"
+                        r="17"
+                        :fill="row.color"
+                        stroke="black"
+                        stroke-width="2"
+                    />
+                    <text v-if="row.flat && row.cubes > 0" x="300" y="66" fill="#3a2c08" style="font-size: 22px">
+                        every cube at this price
+                    </text>
+
+                    <text
+                        :x="BOX_W - 18"
+                        y="68"
+                        text-anchor="end"
+                        font-weight="700"
+                        fill="black"
+                        style="font-size: 40px"
+                    >
+                        {{ row.cubes }}
+                    </text>
+                    <text :x="BOX_W - 18" y="90" text-anchor="end" fill="#3a2c08" style="font-size: 20px">LEFT</text>
+
+                    <!-- India caps which prices are on sale per step; a row above the
+                         cap is on the board but cannot be bought by anyone yet. -->
+                    <text v-if="row.capped" x="130" y="96" fill="#7a1d12" font-weight="600" style="font-size: 20px">
+                        step {{ step }} sells to ${{ maxPrice }}
+                    </text>
+
+                    <title>{{ row.title }}</title>
+                </g>
+            </g>
+        </template>
+    </g>
+</template>
+
+<script lang="ts">
+import { GameState } from 'powergrid-engine';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { BuyMove, ResourceBlock, resourceBlocks } from '../../util/resource-rows';
+
+const BOX_W = 700;
+const BOX_H = 104;
+const BOX_GAP = 8;
+/** Block title + column captions above the first box. */
+const HEAD_H = 62;
+const BLOCK_GAP = 30;
+const CUBE_PITCH = 44;
+/** Middle of the band between the price block and the cubes-left count. */
+const CUBE_BAND_CENTRE = 420;
+
+/**
+ * The portrait resource market.
+ *
+ * The printed price track is a beautiful object and an unreadable one on a phone:
+ * eight to ten columns of three-cube slots, drawn at whatever width the map author
+ * chose and then squeezed into a strip. This draws the same market as one box per
+ * buyable source, carrying only what a purchase actually needs — what the next cube
+ * costs, how many are left at that price, how many are left at all.
+ *
+ * Every number comes out of the engine state rather than the printed geometry, so the
+ * map-specific markets come along for free: Europe's nine price columns, Korea's two
+ * sides, Australia's Step-3 CO2 shift (the engine rewrites the price array and the box
+ * is only ever a view of it), India's per-step price cap, South Africa's $8 storage
+ * pool, USA recharged's $8-from-supply once the track is bare.
+ *
+ * Which rows a player may actually tap is NOT decided here: `buyableResources` is the
+ * engine's own availableMoves, so money, storage capacity, the hybrid tank and Korea's
+ * side lock are all accounted for already. The row model itself lives in
+ * `util/resource-rows`, where it can be tested against the engine's own arithmetic.
+ */
+@Component
+export default class ResourceBoxes extends Vue {
+    @Prop() gameState!: GameState;
+    @Prop() buyableResources?: BuyMove[];
+    @Prop() resourceResupply?: (number | string)[];
+    @Prop() resourceResupplyNorth?: (number | string)[];
+    @Prop() isUsaRecharged?: boolean;
+    /** The seat looking at the board — only needed for Central Europe's Wien discount. */
+    @Prop() player?: number;
+
+    BOX_W = BOX_W;
+    BOX_H = BOX_H;
+    BOX_GAP = BOX_GAP;
+    HEAD_H = HEAD_H;
+    CUBE_BAND_CENTRE = CUBE_BAND_CENTRE;
+
+    /** Centre the cube cluster in that band, however many cubes there are. */
+    cubeX(count: number, n: number): number {
+        return CUBE_BAND_CENTRE - ((count - 1) * CUBE_PITCH) / 2 + (n - 1) * CUBE_PITCH;
+    }
+
+    get step(): number {
+        return this.gameState.step;
+    }
+
+    get maxPrice(): number {
+        const table = (this.gameState.map as { maxPriceAvailable?: number[] }).maxPriceAvailable;
+        return table ? table[this.gameState.step - 1] : 16;
+    }
+
+    get blocks(): (ResourceBlock & { y: number })[] {
+        let y = 0;
+        return resourceBlocks(this.gameState, {
+            player: this.player,
+            buyable: this.buyableResources,
+            resupply: this.resourceResupply,
+            resupplyNorth: this.resourceResupplyNorth,
+            isUsaRecharged: this.isUsaRecharged,
+        }).map((block) => {
+            const placed = { ...block, y };
+            y += HEAD_H + block.rows.length * (BOX_H + BOX_GAP) - BOX_GAP + BLOCK_GAP;
+            return placed;
+        });
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.canClick {
+    cursor: pointer;
+}
+</style>

package/src/launch.ts

@@ -15,14 +15,18 @@ function launch(selector: string) {
     } = {
         state: null,
         emitter: new EventEmitter(),
-        preferences: {
+        // Observable so preference changes update the UI immediately: Game receives
+        // this object as a prop, and Vue 2 does not deep-observe prop values coming
+        // from a non-reactive parent — plain-object mutations (the in-game sound/help
+        // toggles, platform preference pushes) would only paint on the next re-render.
+        preferences: Vue.observable({
             sound: true,
             disableHelp: false,
             adjustPlayerOrder: false,
             undoWholeTurn: true,
             fitToScreen: true,
             stackOnPortrait: true,
-        },
+        }),
         avatars: [],
     };
 
@@ -61,7 +65,8 @@ function launch(selector: string) {
         app.$forceUpdate();
     });
     item.addListener('preferences', (data) => {
-        params.preferences = { ...params.preferences, ...data };
+        // Mutate (don't replace) the observable object so the update stays reactive
+        Object.assign(params.preferences, data);
         app.$forceUpdate();
     });
     item.addListener('gamelog', (logData) => {

package/src/util/resource-rows.ts

@@ -0,0 +1,246 @@
+import type { GameState } from 'powergrid-engine';
+
+/**
+ * The row model behind the portrait resource market (`boards/ResourceBoxes.vue`).
+ *
+ * Kept out of the component so it can be tested against the engine directly: every
+ * row's `price` is the money the engine will actually take for the next cube bought
+ * from that source, and `resource-rows.spec.ts` asserts exactly that by buying one.
+ *
+ * Written without optional chaining: webpack 4 parses the unit-test bundle and
+ * rejects `?.` (same note as `util/turn-buffer.ts`).
+ */
+
+export type BuyMove = { resource: string; side?: 'north' | 'south'; fromStorage?: boolean };
+
+export interface ResourceRow {
+    label: string;
+    color: string;
+    /** What a tap sends. Identical in shape to the engine's BuyResource payload. */
+    move: BuyMove;
+    /** What the engine charges for the next cube here, or null when it is empty. */
+    price: number | null;
+    /** The price once the cubes at the current price run out. */
+    next: number | null;
+    /** How many cubes are still on sale at `price`. Zero for a flat pool. */
+    atPrice: number;
+    /** Cubes left in this source altogether. */
+    cubes: number;
+    buyable: boolean;
+    /** On the board but above the per-step price cap, so nobody may buy it yet. */
+    capped: boolean;
+    /** A flat-price pool with no track behind it: every cube costs the same. */
+    flat: boolean;
+    title: string;
+}
+
+export interface ResourceBlock {
+    title?: string;
+    restock?: string;
+    rows: ResourceRow[];
+}
+
+export const RESOURCE_COLORS: Record<string, string> = {
+    coal: '#6b2028',
+    oil: '#15130f',
+    garbage: '#f2d024',
+    uranium: '#dc2626',
+};
+
+/** The engine's own defaults, for maps that do not author their own arrays. */
+const DEFAULT_PRICES: Record<string, number[]> = {
+    coal: [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8],
+    oil: [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8],
+    garbage: [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8],
+    uranium: [1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16],
+};
+
+const FLAT_POOL_PRICE = 8;
+
+export interface RowOptions {
+    /** The seat reading the board — only needed for Central Europe's Wien discount. */
+    player?: number;
+    buyable?: BuyMove[];
+    /** Resupply for this step, indexed coal / oil / garbage / uranium. */
+    resupply?: (number | string)[];
+    resupplyNorth?: (number | string)[];
+    isUsaRecharged?: boolean;
+}
+
+function capitalize(s: string): string {
+    return s[0].toUpperCase() + s.slice(1);
+}
+
+function isKorea(G: GameState): boolean {
+    return G.coalPricesNorth !== undefined;
+}
+
+/** India and friends only sell up to a per-step price. 16 = no cap in practice. */
+function maxPrice(G: GameState): number {
+    const table = (G.map as { maxPriceAvailable?: number[] }).maxPriceAvailable;
+    return table ? table[G.step - 1] : 16;
+}
+
+function pricesFor(G: GameState, resource: string, north: boolean): number[] {
+    const bag = G as unknown as Record<string, number[] | undefined>;
+    const authored = bag[resource + 'Prices' + (north ? 'North' : '')];
+    return authored !== undefined ? authored : DEFAULT_PRICES[resource];
+}
+
+function cubesIn(G: GameState, resource: string, north: boolean): number {
+    const bag = G as unknown as Record<string, number | undefined>;
+    const count = bag[resource + 'Market' + (north ? 'North' : '')];
+    return count === undefined ? 0 : count;
+}
+
+function sameMove(a: BuyMove, b: BuyMove): boolean {
+    return a.resource === b.resource && a.side === b.side && !!a.fromStorage === !!b.fromStorage;
+}
+
+/**
+ * Central Europe sells garbage a dollar cheaper to whoever holds Wien — and the
+ * engine really does charge the lower price, not just offer the move. The box shows
+ * the price THIS player would pay, because that is the only number a tap can act on.
+ */
+function wienDiscount(G: GameState, resource: string, player: number | undefined): number {
+    if (resource !== 'garbage' || G.map.name !== 'Central Europe' || player === undefined) return 0;
+    const me = G.players[player];
+    if (!me) return 0;
+    return me.cities.some((c) => c.name === 'Wien') ? 1 : 0;
+}
+
+function marketRow(G: GameState, resource: string, north: boolean, opts: RowOptions): ResourceRow {
+    const prices = pricesFor(G, resource, north);
+    const cubes = cubesIn(G, resource, north);
+    // Cubes fill from the dear end, so the next one sold is at `length - cubes`.
+    // Clamped only so a market holding more cubes than its track has slots reads as
+    // the cheapest price rather than as a blank — the engine indexes the same array
+    // the same way, so it could not price such a state either. Middle East's "surplus
+    // oil" is not that case: its track is the full 24 and the surplus IS the $1 end.
+    const idx = Math.max(0, prices.length - cubes);
+
+    let price: number | null = null;
+    let atPrice = 0;
+    let next: number | null = null;
+
+    if (cubes > 0) {
+        price = prices[idx] - (north ? 0 : wienDiscount(G, resource, opts.player));
+        for (let i = idx; i < prices.length && prices[i] === prices[idx]; i++) atPrice++;
+        for (let i = idx; i < prices.length; i++) {
+            if (prices[i] !== prices[idx]) {
+                next = prices[i] - (north ? 0 : wienDiscount(G, resource, opts.player));
+                break;
+            }
+        }
+    }
+
+    const move: BuyMove = isKorea(G) ? { resource, side: north ? 'north' : 'south' } : { resource };
+
+    return {
+        label: capitalize(resource),
+        color: RESOURCE_COLORS[resource],
+        move,
+        price,
+        next,
+        atPrice,
+        cubes,
+        buyable: !!opts.buyable && opts.buyable.some((b) => sameMove(b, move)),
+        capped: price !== null && price > maxPrice(G),
+        flat: false,
+        title:
+            cubes > 0
+                ? `${capitalize(resource)} — $${price} each, ${atPrice} at that price, ${cubes} left`
+                : `${capitalize(resource)} — market empty`,
+    };
+}
+
+/** South Africa's storage pool and USA recharged's supply: a flat $8, no track. */
+function flatRow(G: GameState, cubes: number, fromStorage: boolean, label: string, opts: RowOptions): ResourceRow {
+    const move: BuyMove = fromStorage ? { resource: 'coal', fromStorage: true } : { resource: 'coal' };
+    return {
+        label,
+        color: RESOURCE_COLORS.coal,
+        move,
+        price: cubes > 0 ? FLAT_POOL_PRICE : null,
+        next: null,
+        atPrice: 0,
+        cubes,
+        buyable: !!opts.buyable && opts.buyable.some((b) => sameMove(b, move)),
+        capped: cubes > 0 && FLAT_POOL_PRICE > maxPrice(G),
+        flat: true,
+        title: `${label} — $${FLAT_POOL_PRICE} each, ${cubes} left`,
+    };
+}
+
+/**
+ * Does this map sell uranium on the main track at all? Australia moves it to a
+ * separate mine market and Bremen has no nuclear, so on both the row would be a
+ * permanently empty box.
+ */
+function uraniumOnTrack(G: GameState): boolean {
+    return G.map.name !== 'Australia' && G.map.name !== 'Bremen';
+}
+
+function rowsFor(G: GameState, north: boolean, opts: RowOptions): ResourceRow[] {
+    const rows: ResourceRow[] = [];
+
+    // USA recharged keeps selling coal at a flat $8 out of the supply once the printed
+    // track is bare, so the row would otherwise read "out" while the move is on offer.
+    if (!north && opts.isUsaRecharged && G.coalMarket === 0 && G.coalSupply > 0) {
+        rows.push(flatRow(G, G.coalSupply, false, 'Coal (from supply)', opts));
+    } else {
+        rows.push(marketRow(G, 'coal', north, opts));
+    }
+
+    // South Africa: used coal returns to a storage pool below the market and can
+    // always be bought back at $8, alongside whatever the track is charging. It sits
+    // directly under the market coal rather than at the bottom of the list, so the two
+    // coal prices are read together — the track is usually the cheaper of the two and
+    // that should be obvious without hunting.
+    if (!north && G.coalStorage !== undefined) {
+        rows.push(flatRow(G, G.coalStorage, true, 'Coal (from storage)', opts));
+    }
+
+    rows.push(marketRow(G, 'oil', north, opts));
+    rows.push(marketRow(G, 'garbage', north, opts));
+
+    // Korea's north side has no uranium row.
+    if (!north && uraniumOnTrack(G)) {
+        rows.push(marketRow(G, 'uranium', north, opts));
+    }
+
+    return rows;
+}
+
+/**
+ * The resupply table is indexed coal / oil / garbage / uranium, and the track rows
+ * are drawn in that order — so the numbers line up with the boxes below them. Rows
+ * that are not part of the printed track (the flat pools) get no number.
+ */
+function restockText(table: (number | string)[] | undefined, rows: ResourceRow[]): string | undefined {
+    if (!table) return undefined;
+    const numbers = rows.filter((r) => !r.flat).map((r, i) => table[i]);
+    return numbers.every((n) => n === undefined) ? undefined : numbers.filter((n) => n !== undefined).join(' / ');
+}
+
+export function resourceBlocks(G: GameState, opts: RowOptions = {}): ResourceBlock[] {
+    const blocks: ResourceBlock[] = [];
+
+    if (isKorea(G)) {
+        const northRows = rowsFor(G, true, opts);
+        blocks.push({
+            title: 'North Market',
+            restock: restockText(opts.resupplyNorth, northRows),
+            rows: northRows,
+        });
+    }
+
+    const southRows = rowsFor(G, false, opts);
+    blocks.push({
+        title: isKorea(G) ? 'South Market' : undefined,
+        restock: restockText(opts.resupply, southRows),
+        rows: southRows,
+    });
+
+    return blocks;
+}

package/dist/img/help.ba7779cc.svg

@@ -1 +0,0 @@
-<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/dist/img/log.04ef6981.svg

@@ -1 +0,0 @@
-<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/dist/img/pass.da9065dc.svg

@@ -1,3 +0,0 @@
-<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/dist/img/rules.64f9aae5.svg

@@ -1,28 +0,0 @@
-<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/dist/img/sound-off.72ada995.svg

@@ -1,3 +0,0 @@
-<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/dist/img/sound-on.c55edd90.svg

@@ -1,3 +0,0 @@
-<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/dist/img/undo.208666d2.svg

@@ -1,3 +0,0 @@
-<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>