mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2024-11-24 17:31:54 +00:00
Hotkey display
This commit is contained in:
ducdat0507
parent
75f3ca9f68
commit
1493a401d2
6 changed files with 107 additions and 17 deletions
50
src/components/Hotkey.vue
Normal file
50
src/components/Hotkey.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!-- Make eslint not whine about putting spaces before the +'s -->
|
||||
<!-- eslint-disable prettier/prettier -->
|
||||
<template>
|
||||
<template v-if="isCtrl"
|
||||
><div class="key">Ctrl</div
|
||||
>+</template
|
||||
><template v-if="isShift"
|
||||
><div class="key">Shift</div
|
||||
>+</template
|
||||
>
|
||||
<div class="key">{{ key }}</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GenericHotkey } from "features/hotkey";
|
||||
import { reactive } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
hotkey: GenericHotkey;
|
||||
}>();
|
||||
|
||||
let key = reactive(props.hotkey).key;
|
||||
|
||||
let isCtrl = key.startsWith("ctrl+");
|
||||
if (isCtrl) key = key.slice(5);
|
||||
|
||||
let isShift = key.startsWith("shift+");
|
||||
if (isShift) key = key.slice(6);
|
||||
|
||||
let isAlpha = key.length == 1 && key.toLowerCase() != key.toUpperCase();
|
||||
if (isAlpha) key = key.toUpperCase();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.key {
|
||||
display: inline-block;
|
||||
height: 1.4em;
|
||||
min-width: 1em;
|
||||
margin: 0.1em;
|
||||
padding-inline: 0.2em;
|
||||
|
||||
background: var(--foreground);
|
||||
color: var(--feature-foreground);
|
||||
border: 1px solid #0007;
|
||||
border-radius: 0.3em;
|
||||
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
* @module
|
||||
* @hidden
|
||||
*/
|
||||
import HotkeyVue from "components/Hotkey.vue";
|
||||
import Row from "components/layout/Row.vue";
|
||||
import Spacer from "components/layout/Spacer.vue";
|
||||
import Modal from "components/Modal.vue";
|
||||
|
|
@ -61,7 +62,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
}));
|
||||
const breeding = createClickable(() => ({
|
||||
display: {
|
||||
title: "Breed sheep",
|
||||
title: jsx(() => (
|
||||
<h3>
|
||||
Breed sheep <HotkeyVue hotkey={breedSheepHK} />
|
||||
</h3>
|
||||
)),
|
||||
description: jsx(() => (
|
||||
<>
|
||||
Breed {formatWhole(Decimal.floor(computedSheepGain.value))} sheep
|
||||
|
|
@ -99,7 +104,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
}));
|
||||
const shearing = createClickable(() => ({
|
||||
display: {
|
||||
title: "Shear sheep",
|
||||
title: jsx(() => (
|
||||
<h3>
|
||||
Shear sheep <HotkeyVue hotkey={shearSheepHK} />
|
||||
</h3>
|
||||
)),
|
||||
description: jsx(() => (
|
||||
<>
|
||||
Shear up to {formatWhole(Decimal.floor(computedShearingAmount.value))} sheep
|
||||
|
|
@ -137,7 +146,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
}));
|
||||
const spinning = createClickable(() => ({
|
||||
display: {
|
||||
title: "Spinning wool",
|
||||
title: jsx(() => (
|
||||
<h3>
|
||||
Spin wool <HotkeyVue hotkey={spinWoolHK} />
|
||||
</h3>
|
||||
)),
|
||||
description: jsx(() => (
|
||||
<>
|
||||
Spin {formatWhole(Decimal.floor(computedSpinningAmount.value))} wool
|
||||
|
|
@ -165,7 +178,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
|
||||
const breedSheepHK = createHotkey(() => ({
|
||||
key: "b",
|
||||
description: 'Press the "Breed Sheep" button',
|
||||
description: "Breed sheep",
|
||||
onPress: () => {
|
||||
if (breeding.canClick.value) breeding.onClick();
|
||||
}
|
||||
|
|
@ -173,7 +186,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
|
||||
const shearSheepHK = createHotkey(() => ({
|
||||
key: "h", // For some reason, "shift+s" doesn't work properly
|
||||
description: 'Press the "Shear Sheep" button',
|
||||
description: "Shear sheep",
|
||||
onPress: () => {
|
||||
if (shearing.canClick.value) shearing.onClick();
|
||||
}
|
||||
|
|
@ -181,7 +194,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
|
||||
const spinWoolHK = createHotkey(() => ({
|
||||
key: "s",
|
||||
description: 'Press the "Spin Wool" button',
|
||||
description: "Spin wool",
|
||||
onPress: () => {
|
||||
if (spinning.canClick.value) spinning.onClick();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@ import paper from "./paper";
|
|||
import SqrtVue from "components/math/Sqrt.vue";
|
||||
import { globalBus } from "game/events";
|
||||
import { main } from "data/projEntry";
|
||||
import { createHotkey } from "features/hotkey";
|
||||
import HotkeyVue from "components/Hotkey.vue";
|
||||
|
||||
const id = "letters";
|
||||
const day = 14;
|
||||
|
|
@ -43,13 +45,17 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
height: 10,
|
||||
style: "margin-top: 8px",
|
||||
borderStyle: "border-color: black",
|
||||
baseStyle: "margin-top: 0",
|
||||
fillStyle: "margin-top: 0; transition-duration: 0s; background: black",
|
||||
baseStyle: "margin-top: -1px",
|
||||
fillStyle: "margin-top: -1px; transition-duration: 0s; background: black",
|
||||
progress: () => Decimal.div(processingProgress.value, computedProcessingCooldown.value)
|
||||
}));
|
||||
const process = createClickable(() => ({
|
||||
display: {
|
||||
title: "Process Letters",
|
||||
title: jsx(() => (
|
||||
<h3>
|
||||
Process letters <HotkeyVue hotkey={processHK} />
|
||||
</h3>
|
||||
)),
|
||||
description: jsx(() => (
|
||||
<>
|
||||
Process {format(computedLettersGain.value, 1)} letters
|
||||
|
|
@ -77,6 +83,14 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
}
|
||||
}));
|
||||
|
||||
const processHK = createHotkey(() => ({
|
||||
key: "l",
|
||||
description: "Process letters",
|
||||
onPress: () => {
|
||||
if (process.canClick.value) process.onClick();
|
||||
}
|
||||
}));
|
||||
|
||||
const metalBuyable = createBuyable(() => ({
|
||||
display: {
|
||||
title: "Sorting Machine",
|
||||
|
|
@ -285,6 +299,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
letters,
|
||||
totalLetters,
|
||||
processingProgress,
|
||||
processHK,
|
||||
buyables,
|
||||
milestones,
|
||||
minWidth: 700,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
* @module
|
||||
* @hidden
|
||||
*/
|
||||
import HotkeyVue from "components/Hotkey.vue";
|
||||
import Spacer from "components/layout/Spacer.vue";
|
||||
import Modal from "components/Modal.vue";
|
||||
import { createCollapsibleModifierSections, setUpDailyProgressTracker } from "data/common";
|
||||
|
|
@ -564,7 +565,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
|
||||
const cutTree = createClickable(() => ({
|
||||
display: {
|
||||
title: "Cut trees",
|
||||
title: jsx(() => (
|
||||
<h3>
|
||||
Cut trees <HotkeyVue hotkey={cutTreeHK} />
|
||||
</h3>
|
||||
)),
|
||||
description: jsx(() => (
|
||||
<>
|
||||
Cut down up to {formatWhole(Decimal.floor(computedManualCuttingAmount.value))}{" "}
|
||||
|
|
@ -620,7 +625,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
}));
|
||||
const plantTree = createClickable(() => ({
|
||||
display: {
|
||||
title: "Plant trees",
|
||||
title: jsx(() => (
|
||||
<h3>
|
||||
Plant trees <HotkeyVue hotkey={plantTreeHK} />
|
||||
</h3>
|
||||
)),
|
||||
description: jsx(() => (
|
||||
<>
|
||||
Plant up to {formatWhole(Decimal.floor(computedManualPlantingAmount.value))}{" "}
|
||||
|
|
@ -792,14 +801,14 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
|
||||
const cutTreeHK = createHotkey(() => ({
|
||||
key: "c",
|
||||
description: 'Press the "Cut trees" button.',
|
||||
description: "Cut trees",
|
||||
onPress: () => {
|
||||
if (cutTree.canClick.value) cutTree.onClick();
|
||||
}
|
||||
}));
|
||||
const plantTreeHK = createHotkey(() => ({
|
||||
key: "p",
|
||||
description: 'Press the "Plant trees" button.',
|
||||
description: "Plant trees",
|
||||
onPress: () => {
|
||||
if (plantTree.canClick.value) plantTree.onClick();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
* @module
|
||||
* @hidden
|
||||
*/
|
||||
import HotkeyVue from "components/Hotkey.vue";
|
||||
import Spacer from "components/layout/Spacer.vue";
|
||||
import { createCollapsibleMilestones } from "data/common";
|
||||
import { main } from "data/projEntry";
|
||||
|
|
@ -76,7 +77,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
display: jsx(() => (
|
||||
<>
|
||||
<b style="font-size: x-large">
|
||||
Build {formatWhole(foundationConversion.actualGain.value)}% of the foundation
|
||||
Build {formatWhole(foundationConversion.actualGain.value)}% of the foundation{" "}
|
||||
<HotkeyVue hotkey={buildFoundationHK} />
|
||||
</b>
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -131,7 +133,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
|
||||
const buildFoundationHK = createHotkey(() => ({
|
||||
key: "w",
|
||||
description: "Build part of the foundation.",
|
||||
description: "Build foundation",
|
||||
onPress: () => {
|
||||
if (buildFoundation.canClick.value) buildFoundation.onClick();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import type {
|
|||
import { processComputable } from "util/computed";
|
||||
import { createLazyProxy } from "util/proxies";
|
||||
import { shallowReactive, unref } from "vue";
|
||||
import HotkeyVue from "components/Hotkey.vue";
|
||||
|
||||
export const hotkeys: Record<string, GenericHotkey | undefined> = shallowReactive({});
|
||||
export const HotkeyType = Symbol("Hotkey");
|
||||
|
|
@ -102,8 +103,8 @@ registerInfoComponent(
|
|||
<br />
|
||||
<h4>Hotkeys</h4>
|
||||
{keys.map(hotkey => (
|
||||
<div>
|
||||
{hotkey?.key}: {hotkey?.description}
|
||||
<div v-if={hotkey !== undefined}>
|
||||
<HotkeyVue hotkey={hotkey as GenericHotkey} /> {hotkey?.description}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue