Implemented paper layer

This commit is contained in:
thepaperpilot 2022-12-04 11:56:30 -06:00
parent df29a309ee
commit a128d08c55
10 changed files with 409 additions and 52 deletions

View file

@ -9,6 +9,9 @@
style="left: 65%; bottom: 12%; width: 40px; height: 40px"
/>
<img v-if="day >= 3" :src="elves" class="scene-item" style="left: 52%; bottom: 12%" />
<div v-if="day >= 4" class="scene-bubble" style="left: 50%; bottom: 38%">
<img v-if="day >= 4" :src="paper" class="scene-item" />
</div>
</div>
</template>
@ -17,6 +20,7 @@ import tree from "./symbols/tree.png";
import workshop from "./symbols/sws.png";
import coal from "./symbols/coal.png";
import elves from "./symbols/elf.png";
import paper from "./symbols/paperStacks.png";
defineProps<{
day: number;
@ -48,4 +52,30 @@ defineProps<{
position: absolute;
z-index: 1;
}
.scene-bubble {
position: absolute;
background: white;
height: 60px;
padding: 5px;
border-radius: 10px;
}
.scene-bubble::after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 100%;
left: 20px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid white;
}
.scene-bubble .scene-item {
height: 60px;
width: 60px;
position: static;
}
</style>

View file

@ -30,6 +30,7 @@ import {
} from "game/modifiers";
import { createUpgrade, Upgrade } from "features/upgrades/upgrade";
import elves from "./elves";
import paper from "./paper";
interface BetterFertilizerUpgOptions {
canAfford: () => boolean;
@ -70,7 +71,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
fillStyle: `backgroundColor: ${colorCoal}`,
progress: () =>
main.day.value === day
? Decimal.log10(totalCoal.value).div(Math.log10(totalCoalGoal))
? Decimal.log10(Decimal.add(totalCoal.value, 1)).div(Math.log10(totalCoalGoal))
: 1,
display: jsx(() =>
main.day.value === day ? (
@ -412,6 +413,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
v = Decimal.pow(0.95, paper.books.heatedCuttersBook.amount.value).times(v);
return Decimal.add(v, 1).pow(2.5).times(10);
},
display: {
@ -423,7 +425,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
style: { color: colorText },
visibility: () => showIf(warmerCutters.bought.value)
})) as GenericBuyable;
})) as GenericBuyable & { display: { title: string } };
const heatedPlanters = createBuyable(() => ({
resource: coal,
cost() {
@ -431,6 +433,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
v = Decimal.pow(0.95, paper.books.heatedPlantersBook.amount.value).times(v);
return Decimal.add(v, 1).pow(2.5).times(10);
},
display: {
@ -442,7 +445,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
style: { color: colorText },
visibility: () => showIf(warmerPlanters.bought.value)
})) as GenericBuyable;
})) as GenericBuyable & { display: { title: string } };
const moreFertilizer = createBuyable(() => ({
resource: ash,
cost() {
@ -450,6 +453,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
v = Decimal.pow(0.95, paper.books.fertilizerBook.amount.value).times(v);
return Decimal.add(v, 1).pow(1.5).times(50000);
},
display: {
@ -461,7 +465,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
style: { color: colorText },
visibility: () => showIf(basicFertilizer.bought.value)
})) as GenericBuyable;
})) as GenericBuyable & { display: { title: string } };
const row3buyables = [heatedCutters, heatedPlanters, moreFertilizer];
const heatedCutterEffect = createSequentialModifier(() => [

View file

@ -14,13 +14,14 @@ import { createReset } from "features/reset";
import { createUpgrade, GenericUpgrade } from "features/upgrades/upgrade";
import { globalBus } from "game/events";
import { BaseLayer, createLayer } from "game/layers";
import { createMultiplicativeModifier, createSequentialModifier } from "game/modifiers";
import { createMultiplicativeModifier, createSequentialModifier, Modifier } from "game/modifiers";
import { persistent } from "game/persistence";
import Decimal, { DecimalSource, formatWhole } from "util/bignum";
import { Direction } from "util/common";
import { render, renderCol, renderRow } from "util/vue";
import { computed, ref, Ref, unref, watchEffect } from "vue";
import coal from "./coal";
import paper from "./paper";
import trees from "./trees";
import workshop from "./workshop";
@ -78,10 +79,147 @@ const layer = createLayer(id, function (this: BaseLayer) {
}
}));
function createElf(options: { name: string; description: string; buyable: GenericBuyable }) {
const cutterCooldown = createSequentialModifier(() => [
createMultiplicativeModifier(() => ({
multiplier: 2,
description: "6 Elves Trained",
enabled: elvesMilestone.earned
})),
createMultiplicativeModifier(() => ({
multiplier: () => Decimal.times(paper.books.cuttersBook.amount.value, 0.1).add(1),
description: "Now You're Logging!",
enabled: () => Decimal.gt(paper.books.cuttersBook.amount.value, 0)
}))
]);
const planterCooldown = createSequentialModifier(() => [
createMultiplicativeModifier(() => ({
multiplier: 2,
description: "6 Elves Trained",
enabled: elvesMilestone.earned
})),
createMultiplicativeModifier(() => ({
multiplier: () => Decimal.times(paper.books.plantersBook.amount.value, 0.1).add(1),
description: "The Man Who Planted Trees",
enabled: () => Decimal.gt(paper.books.plantersBook.amount.value, 0)
}))
]);
const expanderCooldown = createSequentialModifier(() => [
createMultiplicativeModifier(() => ({
multiplier: 2,
description: "6 Elves Trained",
enabled: elvesMilestone.earned
})),
createMultiplicativeModifier(() => ({
multiplier: () => Decimal.times(paper.books.expandersBook.amount.value, 0.1).add(1),
description: "Logjam",
enabled: () => Decimal.gt(paper.books.expandersBook.amount.value, 0)
}))
]);
const heatedCutterCooldown = createSequentialModifier(() => [
createMultiplicativeModifier(() => ({
multiplier: 2,
description: "6 Elves Trained",
enabled: elvesMilestone.earned
})),
createMultiplicativeModifier(() => ({
multiplier: () => Decimal.times(paper.books.heatedCuttersBook.amount.value, 0.1).add(1),
description: "Fahrenheit 451",
enabled: () => Decimal.gt(paper.books.heatedCuttersBook.amount.value, 0)
}))
]);
const heatedPlanterCooldown = createSequentialModifier(() => [
createMultiplicativeModifier(() => ({
multiplier: 2,
description: "6 Elves Trained",
enabled: elvesMilestone.earned
})),
createMultiplicativeModifier(() => ({
multiplier: () =>
Decimal.times(paper.books.heatedPlantersBook.amount.value, 0.1).add(1),
description: "Tillamook Burn Country",
enabled: () => Decimal.gt(paper.books.heatedPlantersBook.amount.value, 0)
}))
]);
const fertilizerCooldown = createSequentialModifier(() => [
createMultiplicativeModifier(() => ({
multiplier: 2,
description: "6 Elves Trained",
enabled: elvesMilestone.earned
})),
createMultiplicativeModifier(() => ({
multiplier: () => Decimal.times(paper.books.fertilizerBook.amount.value, 0.1).add(1),
description: "The Garden Tree's Handbook",
enabled: () => Decimal.gt(paper.books.fertilizerBook.amount.value, 0)
}))
]);
const [generalTab, generalTabCollapsed] = createCollapsibleModifierSections(() => [
{
title: "Holly Auto-Buy Frequency",
modifier: cutterCooldown,
base: 10,
unit: "/s",
visible: elves.cuttersElf.bought
},
{
title: "Ivy Auto-Buy Frequency",
modifier: planterCooldown,
base: 10,
unit: "/s",
visible: elves.plantersElf.bought
},
{
title: "Hope Auto-Buy Frequency",
modifier: expanderCooldown,
base: 10,
unit: "/s",
visible: elves.expandersElf.bought
},
{
title: "Jack Auto-Buy Frequency",
modifier: heatedCutterCooldown,
base: 10,
unit: "/s",
visible: elves.heatedCuttersElf.bought
},
{
title: "Mary Auto-Buy Frequency",
modifier: heatedPlanterCooldown,
base: 10,
unit: "/s",
visible: elves.heatedPlantersElf.bought
},
{
title: "Noel Auto-Buy Frequency",
modifier: fertilizerCooldown,
base: 10,
unit: "/s",
visible: elves.fertilizerElf.bought
}
]);
const showModifiersModal = ref(false);
const modifiersModal = jsx(() => (
<Modal
modelValue={showModifiersModal.value}
onUpdate:modelValue={(value: boolean) => (showModifiersModal.value = value)}
v-slots={{
header: () => <h2>{name} Modifiers</h2>,
body: generalTab
}}
/>
));
function createElf(options: {
name: string;
description: string;
buyable: GenericBuyable;
cooldownModifier: Modifier;
}) {
const trainingCost = computed(() => Decimal.pow(4, totalElves.value).times(1e6));
const buyProgress = persistent<DecimalSource>(0);
const computedAutoBuyCooldown = computed(() => options.cooldownModifier.apply(10));
function update(diff: number) {
if (upgrade.bought.value) {
buyProgress.value = Decimal.add(buyProgress.value, diff);
@ -100,10 +238,12 @@ const layer = createLayer(id, function (this: BaseLayer) {
const upgrade = createUpgrade(() => {
return {
...options,
buyProgress,
update,
resource: coal.coal,
cost: trainingCost,
computedAutoBuyCooldown,
display: () => ({
title: options.name,
description: jsx(() => (
@ -131,38 +271,44 @@ const layer = createLayer(id, function (this: BaseLayer) {
name: "Holly",
description:
"Holly will automatically purchase cutters you can afford, without actually spending any logs.",
buyable: trees.row1Buyables[0]
buyable: trees.row1Buyables[0],
cooldownModifier: cutterCooldown
});
const plantersElf = createElf({
name: "Ivy",
description:
"Ivy will automatically purchase planters you can afford, without actually spending any logs.",
buyable: trees.row1Buyables[1]
buyable: trees.row1Buyables[1],
cooldownModifier: planterCooldown
});
const expandersElf = createElf({
name: "Hope",
description:
"Hope will automatically purchase forest expanders you can afford, without actually spending any logs.",
buyable: trees.row1Buyables[2]
buyable: trees.row1Buyables[2],
cooldownModifier: expanderCooldown
});
const treesElves = [cuttersElf, plantersElf, expandersElf];
const heatedCuttersElf = createElf({
name: "Jack",
description:
"Jack will automatically purchase heated cutters you can afford, without actually spending any coal.",
buyable: coal.heatedCutters
buyable: coal.heatedCutters,
cooldownModifier: heatedCutterCooldown
});
const heatedPlantersElf = createElf({
name: "Mary",
description:
"Mary will automatically purchase heated planters you can afford, without actually spending any coal.",
buyable: coal.heatedPlanters
buyable: coal.heatedPlanters,
cooldownModifier: heatedPlanterCooldown
});
const fertilizerElf = createElf({
name: "Noel",
description:
"Noel will automatically purchase fertilized soil you can afford, without actually spending any ash.",
buyable: coal.moreFertilizer
buyable: coal.moreFertilizer,
cooldownModifier: fertilizerCooldown
});
const coalElves = [heatedCuttersElf, heatedPlantersElf, fertilizerElf];
const elves = {
@ -232,35 +378,6 @@ const layer = createLayer(id, function (this: BaseLayer) {
elvesMilestone
];
const autoBuyCooldown = createSequentialModifier(() => [
createMultiplicativeModifier(() => ({
multiplier: 2,
description: "6 Elves Trained",
enabled: elvesMilestone.earned
}))
]);
const computedAutoBuyCooldown = computed(() => autoBuyCooldown.apply(0.1));
const [generalTab, generalTabCollapsed] = createCollapsibleModifierSections(() => [
{
title: "Elf Auto-Buy Frequency",
modifier: autoBuyCooldown,
base: 10,
unit: "/s"
}
]);
const showModifiersModal = ref(false);
const modifiersModal = jsx(() => (
<Modal
modelValue={showModifiersModal.value}
onUpdate:modelValue={(value: boolean) => (showModifiersModal.value = value)}
v-slots={{
header: () => <h2>{name} Modifiers</h2>,
body: generalTab
}}
/>
));
globalBus.on("update", diff => {
if (Decimal.lt(main.day.value, day)) {
return;

193
src/data/layers/paper.tsx Normal file
View file

@ -0,0 +1,193 @@
/**
* @module
* @hidden
*/
import Spacer from "components/layout/Spacer.vue";
import { main } from "data/projEntry";
import { createBar } from "features/bars/bar";
import { createBuyable, GenericBuyable } from "features/buyable";
import { createClickable } from "features/clickables/clickable";
import { createCumulativeConversion, createPolynomialScaling } from "features/conversion";
import { jsx } from "features/feature";
import MainDisplay from "features/resources/MainDisplay.vue";
import { createResource, displayResource, trackTotal } from "features/resources/resource";
import { BaseLayer, createLayer } from "game/layers";
import Decimal, { DecimalSource, formatWhole } from "util/bignum";
import { Direction } from "util/common";
import { render, renderCol } from "util/vue";
import { computed, unref, watchEffect } from "vue";
import coal from "./coal";
import trees from "./trees";
const id = "paper";
const day = 5;
const layer = createLayer(id, function (this: BaseLayer) {
const name = "Paper";
const color = "#E8DCB8";
const colorDark = "#E8DCB8";
const totalPaperGoal = 5e3;
const paper = createResource<DecimalSource>(0, "paper");
const totalPaper = trackTotal(paper);
const pulp = createResource<DecimalSource>(
computed(() =>
Decimal.min(Decimal.div(trees.logs.value, 1e9), Decimal.div(coal.ash.value, 1e6))
),
"pulp"
);
const paperConversion = createCumulativeConversion(() => ({
scaling: createPolynomialScaling(1, 1.2),
baseResource: pulp,
gainResource: paper,
roundUpCost: true,
spend() {
trees.logs.value = 0;
coal.ash.value = 0;
}
}));
const makePaper = createClickable(() => ({
display: jsx(() => {
const cost = Decimal.gte(paperConversion.actualGain.value, 1)
? paperConversion.currentAt.value
: paperConversion.nextAt.value;
return (
<>
<span style="font-size: large">
Create {formatWhole(paperConversion.currentGain.value)} {paper.displayName}
</span>
<br />
<span style="font-size: large">
Cost: {displayResource(trees.logs, cost)} {pulp.displayName} (
{formatWhole(Decimal.times(cost, 1e9))} {trees.logs.displayName};{" "}
{formatWhole(Decimal.times(cost, 1e6))} {coal.ash.displayName})
</span>
</>
);
}),
canClick: () => Decimal.gte(paperConversion.actualGain.value, 1),
onClick() {
if (!unref(this.canClick)) {
return;
}
paperConversion.convert();
},
style: "width: 600px; min-height: unset"
}));
function createBook(options: { name: string; elfName: string; buyableName: string }) {
const buyable = createBuyable(() => ({
display: {
title: options.name,
description: `Print a copy of "${options.name}", which ${options.elfName} will use to improve their skills! Each copy printed will reduce the "${options.buyableName}" price scaling by 0.95x and make ${options.elfName} purchase +10% faster!`
},
resource: paper,
cost: () => Decimal.pow(5, buyable.amount.value).times(10),
style: "width: 600px"
})) as GenericBuyable;
return buyable;
}
const cuttersBook = createBook({
name: "Now You're Logging!",
elfName: "Holly",
buyableName: "Generic Cutters"
});
const plantersBook = createBook({
name: "The Man Who Planted Trees",
elfName: "Ivy",
buyableName: "Generic Planters"
});
const expandersBook = createBook({
name: "Logjam",
elfName: "Hope",
buyableName: "Expand Forest"
});
const heatedCuttersBook = createBook({
name: "Fahrenheit 451",
elfName: "Jack",
buyableName: "Heated Cutters"
});
const heatedPlantersBook = createBook({
name: "Tillamook Burn Country",
elfName: "Mary",
buyableName: "Heated Planters"
});
const fertilizerBook = createBook({
name: "The Garden Tree's Handbook",
elfName: "Noel",
buyableName: "Fertilized Soil"
});
const books = {
cuttersBook,
plantersBook,
expandersBook,
heatedCuttersBook,
heatedPlantersBook,
fertilizerBook
};
const dayProgress = createBar(() => ({
direction: Direction.Right,
width: 600,
height: 25,
fillStyle: `backgroundColor: ${colorDark}`,
textStyle: "color: var(--feature-foreground)",
progress: () =>
main.day.value === day
? Decimal.div(
Decimal.log10(Decimal.add(totalPaper.value, 1)),
Decimal.log10(totalPaperGoal)
)
: 1,
display: jsx(() =>
main.day.value === day ? (
<>
{formatWhole(totalPaper.value)}/{formatWhole(totalPaperGoal)}
</>
) : (
""
)
)
}));
watchEffect(() => {
if (main.day.value === day && Decimal.gte(totalPaper.value, totalPaperGoal)) {
main.completeDay();
}
});
return {
name,
day,
color,
paper,
totalPaper,
paperConversion,
books,
minWidth: 700,
display: jsx(() => (
<>
<div>
{main.day.value === day
? `Reach ${formatWhole(totalPaperGoal)} total ${
paper.displayName
} to complete the day`
: `${name} Complete!`}
</div>
{render(dayProgress)}
<Spacer />
<MainDisplay resource={paper} color={color} style="margin-bottom: 0" />
<Spacer />
{render(makePaper)}
<Spacer />
{renderCol(...Object.values(books))}
</>
))
};
});
export default layer;

View file

@ -7,7 +7,7 @@ import Modal from "components/Modal.vue";
import { createCollapsibleModifierSections } from "data/common";
import { main } from "data/projEntry";
import { createBar } from "features/bars/bar";
import { createBuyable } from "features/buyable";
import { createBuyable, GenericBuyable } from "features/buyable";
import { createClickable } from "features/clickables/clickable";
import { jsx, showIf } from "features/feature";
import { createHotkey } from "features/hotkey";
@ -30,6 +30,7 @@ import { render, renderRow } from "util/vue";
import { computed, ref, watchEffect } from "vue";
import coal from "./coal";
import elves from "./elves";
import paper from "./paper";
import workshop from "./workshop";
const id = "trees";
@ -183,6 +184,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
v = Decimal.pow(0.95, paper.books.cuttersBook.amount.value).times(v);
return Decimal.times(100, v).add(200);
},
display: {
@ -190,7 +192,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
description: "Each cutter cuts down 1 tree/s"
},
visibility: () => showIf(researchUpgrade2.bought.value)
}));
})) as GenericBuyable & { display: { title: string } };
const autoPlantingBuyable1 = createBuyable(() => ({
resource: logs,
cost() {
@ -198,6 +200,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
v = Decimal.pow(0.95, paper.books.plantersBook.amount.value).times(v);
return Decimal.times(100, v).add(200);
},
display: {
@ -205,13 +208,14 @@ const layer = createLayer(id, function (this: BaseLayer) {
description: "Each planter plants 0.5 trees/s"
},
visibility: () => showIf(researchUpgrade2.bought.value)
}));
})) as GenericBuyable & { display: { title: string } };
const expandingForestBuyable = createBuyable(() => ({
resource: logs,
cost() {
let v = this.amount.value;
if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
if (Decimal.gte(v, 1e5)) v = Decimal.pow(v, 2).div(1e5);
v = Decimal.pow(0.95, paper.books.expandersBook.amount.value).times(v);
return Decimal.pow(Decimal.add(v, 1), 1.5).times(500);
},
display: {
@ -219,7 +223,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
description: "Add 10 trees to the forest"
},
visibility: () => showIf(researchUpgrade2.bought.value)
}));
})) as GenericBuyable & { display: { title: string } };
const row1Buyables = [autoCuttingBuyable1, autoPlantingBuyable1, expandingForestBuyable];
const dayProgress = createBar(() => ({
@ -229,7 +233,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
fillStyle: `backgroundColor: ${colorDark}`,
progress: () =>
main.day.value === day
? Decimal.log10(totalLogs.value).div(Math.log10(totalLogGoal))
? Decimal.log10(Decimal.add(totalLogs.value, 1)).div(Math.log10(totalLogGoal))
: 1,
display: jsx(() =>
main.day.value === day ? (

View file

@ -1,5 +1,11 @@
import Spacer from "components/layout/Spacer.vue";
import { CoercableComponent, Component, GatherProps, GenericComponent, jsx } from "features/feature";
import {
CoercableComponent,
Component,
GatherProps,
GenericComponent,
jsx
} from "features/feature";
import { BaseLayer, createLayer, GenericLayer, layers } from "game/layers";
import { persistent } from "game/persistence";
import type { PlayerData } from "game/player";
@ -18,8 +24,10 @@ import treeSymbol from "./symbols/tree.png";
import workshopSymbol from "./symbols/sws.png";
import coalSymbol from "./symbols/coal.png";
import elfSymbol from "./symbols/elf.png";
import paperSymbol from "./symbols/paperStacks.png";
import coal from "./layers/coal";
import elves from "./layers/elves";
import paper from "./layers/paper";
export interface Day extends VueFeature {
day: number;
@ -152,10 +160,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
createDay(() => ({
day: 5,
shouldNotify: false,
layer: null,
symbol: "",
story: "",
completedStory: ""
layer: "paper",
symbol: paperSymbol,
story: "With the elves trained, we're almost ready to start working on these presents! Just a couple more pre-reqs first, starting with turning all this wood into wood pulp and finally into paper, which will be required for wrapping paper later on but in the meantime can be used to help write guides to help these elves continue their education!",
completedStory:
"You look upon your rivers of book pulp as you hand out stacks of papers to elves to read through. You've continued getting closer and closer to preparing for Christmas, and can go to bed satisfied with your progress. Good Job!"
})),
createDay(() => ({
day: 6,
@ -367,7 +376,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
export const getInitialLayers = (
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
player: Partial<PlayerData>
): Array<GenericLayer> => [main, trees, workshop, coal, elves];
): Array<GenericLayer> => [main, trees, workshop, coal, elves, paper];
/**
* A computed ref whose value is true whenever the game is over.

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB