From 0081b43a9ef831c48d7c281d76f66dd1da5a5219 Mon Sep 17 00:00:00 2001 From: Jesse James Isler Date: Fri, 3 Jun 2022 09:26:25 +0200 Subject: [PATCH] "Borrowd" https://github.com/Teshynil/combatreadythemes --- COPYRIGHT.md | 9 ++++ combatreadythemes.ts | 35 +++++++++++++ module.json | 43 ++++++++++++++++ themes/light-meter/light-meter.css | 31 ++++++++++++ themes/light-meter/lightMeter.ts | 81 ++++++++++++++++++++++++++++++ themes/light-meter/swords.svg | 1 + 6 files changed, 200 insertions(+) create mode 100644 COPYRIGHT.md create mode 100644 combatreadythemes.ts create mode 100644 module.json create mode 100644 themes/light-meter/light-meter.css create mode 100644 themes/light-meter/lightMeter.ts create mode 100644 themes/light-meter/swords.svg diff --git a/COPYRIGHT.md b/COPYRIGHT.md new file mode 100644 index 0000000..470ac05 --- /dev/null +++ b/COPYRIGHT.md @@ -0,0 +1,9 @@ +## Credits +The next list is the icons used inside each theme or timer. + +| light-meter\sword.svg | | +|---|---| +|Original name|Sword | +|Author|[franc11s](https://thenounproject.com/franc11s/)| +|Source|https://thenounproject.com/term/sword/3376430 | +|License|[Creative Commons - Attribution 3.0 United States](https://creativecommons.org/licenses/by/3.0/us/legalcode)| diff --git a/combatreadythemes.ts b/combatreadythemes.ts new file mode 100644 index 0000000..e94f1fa --- /dev/null +++ b/combatreadythemes.ts @@ -0,0 +1,35 @@ +import { registerLightMeter } from "./themes/light-meter/lightMeter"; + +export function getCanvas(): Canvas { + if (!(canvas instanceof Canvas) || !canvas.ready) { + throw new Error('Canvas Is Not Initialized'); + } + return canvas; +} + +export function getGame(): Game { + if (!(game instanceof Game)) { + throw new Error('Game Is Not Initialized'); + } + return game; +} + +export function getCombats(): CombatEncounters { + if (!(getGame().combats instanceof CombatEncounters)) { + throw new Error('CombatEncounters Is Not Initialized'); + } + return getGame().combats; +} + +/** + * Ready hook + */ +Hooks.on("ready", function () { + //@ts-ignore + if (!(game.modules.get("combatready")?.active ?? false)) { + ui?.notifications?.notify('Please make sure you have the "Combat Ready!" module installed and enabled.', "error"); + } +}); +Hooks.on("combatready.ready", (CombatReadyAnimationTheme, CombatReadyTimer) => { + registerLightMeter(CombatReadyTimer); +}); \ No newline at end of file diff --git a/module.json b/module.json new file mode 100644 index 0000000..c5cc8d2 --- /dev/null +++ b/module.json @@ -0,0 +1,43 @@ +{ + "name": "combatreadythemes", + "title": "Combat Ready! Themes Pack", + "description": "A pack of basic themes for the Combat Ready! module", + "version": "1.1.0", + "author": "Teshynil", + "authors": [ + { + "name": "Teshynil", + "url": "https://github.com/Teshynil/", + "email": "", + "discord": "Teshynil#8564", + "ko-fi": "", + "patreon": "", + "reddit": "u/Teshynil", + "twitter": "@Teshynil" + } + ], + "manifestPlusVersion": "1.2.0", + "socket": true, + "languages": [], + "esmodules": [ + "combatreadythemes.js" + ], + "styles": [ + "themes/light-meter/light-meter.css" + ], + "dependencies": [ + { + "name": "combatready", + "manifest": "https://raw.githubusercontent.com/Teshynil/combatready/master/src/module.json" + } + ], + "packs": [], + "minimumCoreVersion": "0.8.6", + "compatibleCoreVersion": "9", + "url": "https://github.com/Teshynil/combatreadythemes", + "download": "https://github.com/Teshynil/combatreadythemes/releases/download/1.1.0/combatreadythemes-v1.1.0.zip", + "manifest": "https://raw.githubusercontent.com/Teshynil/combatreadythemes/master/src/module.json", + "license": "https://github.com/Teshynil/combatreadythemes/blob/1.1.0/LICENSE", + "readme": "https://github.com/Teshynil/combatreadythemes/blob/1.1.0/README.md", + "changelog": "https://github.com/Teshynil/combatreadythemes/blob/1.1.0/CHANGELOG.md" +} \ No newline at end of file diff --git a/themes/light-meter/light-meter.css b/themes/light-meter/light-meter.css new file mode 100644 index 0000000..6739271 --- /dev/null +++ b/themes/light-meter/light-meter.css @@ -0,0 +1,31 @@ +.combatready-theme-dd-timebar { + display: flex; + justify-content: center; + position: fixed; + left: 0; + top: 25px; + width: 100%; + height: 10px; + transition: width 500ms linear; +} + +.combatready-theme-dd-timebar-fill { + display: flex; + flex-direction: row-reverse; + position: absolute; + height: 100%; + width: 100%; + background-color: transparent; + background-image: linear-gradient(90deg, transparent, rgba(100, 0, 0, 1) 2%, rgba(252, 120, 0, 1), rgba(100, 0, 0, 1) 98%, transparent); + transition: width 1000ms linear; +} + +.combatready-theme-dd-timebar-icon { + height: 60px; + width: 60px; + background-size: contain; + background-repeat: no-repeat; + z-index: 1; + margin-top: -25px; + background-image: url("swords.svg"); +} \ No newline at end of file diff --git a/themes/light-meter/lightMeter.ts b/themes/light-meter/lightMeter.ts new file mode 100644 index 0000000..fe68c08 --- /dev/null +++ b/themes/light-meter/lightMeter.ts @@ -0,0 +1,81 @@ +import { getGame } from "../../combatreadythemes"; + +export function registerLightMeter(CombatReadyTimer) { + class LightMeter extends CombatReadyTimer { + name = "LightMeter"; + public TIMEBAR: HTMLDivElement; + public TIMEFILL: HTMLDivElement; + public ICON: HTMLDivElement; + public initialize() { + let body = document.getElementsByTagName("body")[0] as HTMLElement; + let sidebar = document.getElementById("sidebar") as HTMLElement; + + let timebar = document.createElement("div"); + let timefill = document.createElement("div"); + let icon = document.createElement("div"); + timebar.id = "combatready-theme-dd-timebar"; + $(timebar).addClass("combatready-theme-dd-timebar"); + $(timefill).addClass("combatready-theme-dd-timebar-fill"); + $(icon).addClass("combatready-theme-dd-timebar-icon"); + timebar.appendChild(icon); + timebar.appendChild(timefill); + + body.appendChild(timebar); + // Ajust due to DOM elements + timebar.style.width = `100%`; + this.TIMEBAR = timebar; + this.TIMEFILL = timefill; + this.ICON = icon; + this.adjustWidth(); + this.tick();//Do a tick to redraw in case is a reload; + this.ready = true; + } + public destroy() { + this.TIMEBAR?.remove(); + this.TIMEFILL?.remove(); + this.ICON?.remove(); + this.ready = false; + } + public start() { + if (!this.ready) return; + this.TIMEBAR.style.display = "flex"; + this.TIMEFILL.style.width = "100%"; + this.TIMEFILL.style.transition = "none"; + } + public stop() { + if (!this.ready) return; + this.TIMEBAR.style.display = "none"; + this.TIMEFILL.style.width = "100%"; + this.TIMEFILL.style.transition = "none"; + } + public pause() { + if (!this.ready) return; + this.TIMEBAR.style.display = "flex"; + } + public resume() { + if (!this.ready) return; + this.TIMEBAR.style.display = "flex"; + } + public tick() { + if (!this.ready) return; + this.TIMEBAR.style.display = "flex"; + //@ts-ignore + let width = 100 - ((getGame().modules.get("combatready")?.api?.getCurrentTime() / getGame().modules.get("combatready")?.api?.getMaxTime()) * 100); + this.TIMEFILL.style.transition = ""; + this.TIMEFILL.style.width = `${width}%`; + } + public adjustWidth() { + let sidebar = document.getElementById("sidebar") as HTMLElement; + let width = sidebar.offsetWidth; + if ($(document.body).hasClass("mobile-improvements")) width = 0; + this.TIMEBAR.style.width = `calc(100vw - ${width}px)`; + } + + get settings() { + return [ + ] + } + } + //@ts-ignore + getGame().modules.get("combatready")?.api?.setupTimer(new LightMeter("CombatReadyLightMeter")); +} \ No newline at end of file diff --git a/themes/light-meter/swords.svg b/themes/light-meter/swords.svg new file mode 100644 index 0000000..5064417 --- /dev/null +++ b/themes/light-meter/swords.svg @@ -0,0 +1 @@ + \ No newline at end of file