55 lines
2 KiB
TypeScript
55 lines
2 KiB
TypeScript
import { globalBus } from "game/events";
|
|
import { convertComputable } from "util/computed";
|
|
import { trackHover, VueFeature } from "util/vue";
|
|
import { nextTick, Ref } from "vue";
|
|
import { ref, watch } from "vue";
|
|
import Toast from "vue-toastification";
|
|
import "vue-toastification/dist/index.css";
|
|
|
|
globalBus.on("setupVue", vue => vue.use(Toast));
|
|
|
|
/**
|
|
* Gives a {@link CSSProperties} object that makes an object glow, to bring focus to it.
|
|
* Default values are for a "soft" white notif effect.
|
|
* @param color The color of the glow effect.
|
|
* @param strength The strength of the glow effect - affects its spread.
|
|
*/
|
|
export function getNotifyStyle(color = "white", strength = "8px") {
|
|
return {
|
|
transform: "scale(1.05, 1.05)",
|
|
borderColor: "rgba(0, 0, 0, 0.125)",
|
|
boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 ${strength} ${color}`,
|
|
zIndex: 1
|
|
};
|
|
}
|
|
|
|
/** Utility function to call {@link getNotifyStyle} with "high importance" parameters. */
|
|
export function getHighNotifyStyle() {
|
|
return getNotifyStyle("red", "20px");
|
|
}
|
|
|
|
/**
|
|
* Create a boolean ref that will automatically be set based on the given condition, but also dismissed when hovering over a given element, typically the element where acting upon the notification would take place.
|
|
* @param element The element that will dismiss the notification on hover.
|
|
* @param shouldNotify A function or ref that determines if the notif should be active currently or not.
|
|
*/
|
|
export function createDismissableNotify(
|
|
element: VueFeature,
|
|
shouldNotify: Ref<boolean> | (() => boolean)
|
|
): Ref<boolean> {
|
|
const processedShouldNotify = convertComputable(shouldNotify) as Ref<boolean>;
|
|
const notifying = ref(false);
|
|
nextTick(() => {
|
|
notifying.value = processedShouldNotify.value;
|
|
|
|
watch(trackHover(element), hovering => {
|
|
if (!hovering) {
|
|
notifying.value = false;
|
|
}
|
|
});
|
|
watch(processedShouldNotify, shouldNotify => {
|
|
notifying.value = shouldNotify;
|
|
});
|
|
});
|
|
return notifying;
|
|
}
|