thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2025-02-07 18:51:35 +00:00
Code Issues Releases Activity Actions

Add tracking for clickables being held

Browse source
This commit is contained in:
thepaperpilot 2022-11-30 22:17:13 -06:00
parent 2688dbbc69
commit 407afae3f3
3 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/features/clickables/Clickable.vue
View file

@ -41,7 +41,7 @@ import {
setupHoldToClick, setupHoldToClick,
unwrapRef unwrapRef
} from "util/vue"; } from "util/vue";
import type { Component, PropType, UnwrapRef } from "vue"; import type { Component, PropType, Ref, UnwrapRef } from "vue";
import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue"; import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
export default defineComponent({ export default defineComponent({
@ -71,7 +71,8 @@ export default defineComponent({
id: { id: {
type: String, type: String,
required: true required: true
} },
isHolding: Object as PropType<Ref<boolean>>
}, },
components: { components: {
Node, Node,
@ -108,7 +109,7 @@ export default defineComponent({
); );
}); });
const { start, stop } = setupHoldToClick(onClick, onHold); const { start, stop } = setupHoldToClick(onClick, onHold, props.isHolding);
return { return {
start, start,

7
src/features/clickables/clickable.ts
View file

@ -11,7 +11,7 @@ import type {
} from "util/computed"; } from "util/computed";
import { processComputable } from "util/computed"; import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies"; import { createLazyProxy } from "util/proxies";
import { computed, unref } from "vue"; import { computed, Ref, ref, unref } from "vue";
export const ClickableType = Symbol("Clickable"); export const ClickableType = Symbol("Clickable");
@ -36,6 +36,7 @@ export interface ClickableOptions {
export interface BaseClickable { export interface BaseClickable {
id: string; id: string;
type: typeof ClickableType; type: typeof ClickableType;
isHolding: Ref<boolean>;
[Component]: typeof ClickableComponent; [Component]: typeof ClickableComponent;
[GatherProps]: () => Record<string, unknown>; [GatherProps]: () => Record<string, unknown>;
} }
@ -69,6 +70,8 @@ export function createClickable<T extends ClickableOptions>(
clickable.type = ClickableType; clickable.type = ClickableType;
clickable[Component] = ClickableComponent; clickable[Component] = ClickableComponent;
clickable.isHolding = ref(false);
processComputable(clickable as T, "visibility"); processComputable(clickable as T, "visibility");
setDefault(clickable, "visibility", Visibility.Visible); setDefault(clickable, "visibility", Visibility.Visible);
processComputable(clickable as T, "canClick"); processComputable(clickable as T, "canClick");
@ -103,6 +106,7 @@ export function createClickable<T extends ClickableOptions>(
classes, classes,
onClick, onClick,
onHold, onHold,
isHolding,
canClick, canClick,
small, small,
mark, mark,
@ -115,6 +119,7 @@ export function createClickable<T extends ClickableOptions>(
classes, classes,
onClick, onClick,
onHold, onHold,
isHolding,
canClick, canClick,
small, small,
mark, mark,

10
src/util/vue.tsx
View file

@ -112,7 +112,8 @@ export function isCoercableComponent(component: unknown): component is Coercable
export function setupHoldToClick( export function setupHoldToClick(
onClick?: Ref<((e?: MouseEvent | TouchEvent) => void) | undefined>, onClick?: Ref<((e?: MouseEvent | TouchEvent) => void) | undefined>,
onHold?: Ref<VoidFunction | undefined> onHold?: Ref<VoidFunction | undefined>,
isHolding?: Ref<boolean>
): { ): {
start: (e: MouseEvent | TouchEvent) => void; start: (e: MouseEvent | TouchEvent) => void;
stop: VoidFunction; stop: VoidFunction;
@ -126,12 +127,19 @@ export function setupHoldToClick(
interval.value = setInterval(handleHolding, 250); interval.value = setInterval(handleHolding, 250);
} }
event.value = e; event.value = e;
if (isHolding) {
isHolding.value = true;
}
} }
function stop() { function stop() {
if (interval.value) { if (interval.value) {
clearInterval(interval.value); clearInterval(interval.value);
interval.value = null; interval.value = null;
} }
console.log(isHolding);
if (isHolding) {
isHolding.value = false;
}
} }
function handleHolding() { function handleHolding() {
if (onHold && onHold.value) { if (onHold && onHold.value) {