Merge pull request #26 from League-of-Fabulous-Developers/dev

feat: setting up clocks for testing

README.md

@@ -45,7 +45,7 @@ Major thanks to the following contributors:
 A few assets/code were used from the following projects:
 
 - **game-icons**: [game-icons.net](https://game-icons.net), various icons were used from here, licensed under the  [CC-BY-3.0 license](https://creativecommons.org/licenses/by/3.0/)
-
 - **fultimator**: [fultimator](https://github.com/codeclysm/fultimator) by codeclysm, specifically project/ritual/sp counter code, licensed under the [MIT License](https://github.com/codeclysm/fultimator/blob/main/LICENSE.md)
 - **animate.css**: [animate.css](https://animate.style/) by Daniel Eden, licensed under the [Hippocratic License](https://github.com/animate-css/animate.css/blob/main/LICENSE-HIPPOCRATIC).
 - **RPG-Awesome**: [RPG-Awesome](https://nagoshiashumari.github.io/Rpg-Awesome/) by Daniela Howe and Ivan Montiel, licensed under the [BSD 2-Clause "Simplified" License](https://github.com/NagoshiAshumari/Rpg-Awesome/blob/master/LICENSE).
+- [Savantford](https://github.com/Savantford), specifically for providing code for clocks and helping me set it up.

lang/en.json

@@ -302,6 +302,7 @@
     "Timing": "Timing",
     "Action": "Action",
     "Actions": "Actions",
+    "ActionAbbr": "ACT",
     "Reaction": "Reaction",
     "Free": "Free",
     "BeforeConflict": "Before Conflict Scene",
@@ -325,9 +326,9 @@
     "MainHand": "Main Hand",
     "OffHand": "Off Hand",
     "Twin": "Two Hands",
-    "MainAbbr": "Main",
-    "OffAbbr": "Off",
-    "TwinAbbr": "Twin",
+    "MainAbbr": "MAIN",
+    "OffAbbr": "OFF",
+    "TwinAbbr": "TWIN",
     "HRZero": "HR0",
     "HRZeroStatus": "HR0?",
     "hasCollateral": "Has Collateral Damage?",
@@ -450,6 +451,7 @@
     "Days": "Days",
     "Clock": "Clock",
     "Clocks": "Clocks",
+    "ClockStatus": "Clock?",
     "Target": "Target",
     "Duration": "Duration",
     "Current": "Current",

lang/it.json

@@ -74,7 +74,7 @@
     "Discount": "Sconto",
     "Condition": "Condizione",
     "Stat": "Statistica",
-    "Stats": "Statistiche",
+    "Stats": "Stati",
     "Combattimento": "Combat",
     "Combattimenti": "Combat",
     "Class": "Classe",
@@ -105,7 +105,7 @@
     "Attributes": "Attributi",
     "AttributesKey": "Attributi Principali",
     "Equipped": "Equipaggiato",
-    "EquipStatus": "Equipaggiato?",
+    "EquipStatus": "Equip?",
     "EquipItem": "Equipaggia Oggetto",
     "UnequipItem": "Rimuovi Oggetto",
     "Favorite": "Preferito",
@@ -302,6 +302,7 @@
     "Timing": "Tempistica",
     "Action": "Azione",
     "Actions": "Azioni",
+    "ActionAbbr": "AZI",
     "Reaction": "Reazione",
     "Free": "Gratuita",
     "BeforeConflict": "Prima della Scena di Conflitto",
@@ -325,9 +326,9 @@
     "MainHand": "Mano Principale",
     "OffHand": "Mano Secondaria",
     "Twin": "Mano Doppia",
-    "MainAbbr": "Principale",
-    "OffAbbr": "Secondaria",
-    "TwinAbbr": "Doppia",
+    "MainAbbr": "MAIN",
+    "OffAbbr": "OFF",
+    "TwinAbbr": "TWIN",
     "HRZero": "HR0",
     "HRZeroStatus": "HR0?",
     "HasCollateral": "Ha danni collaterali?",
@@ -450,6 +451,7 @@
     "Days": "Giorni",
     "Clock": "Orologio",
     "Clocks": "Orologi",
+    "ClockStatus": "Orologio?",
     "Target": "Bersaglio",
     "Duration": "Durata",
     "Current": "Attua",

module/documents/item.mjs

@@ -663,6 +663,11 @@ export class FUItem extends Item {
 		return '';
 	}
 
+	getClockString() {
+
+
+	}
+
 	/**
 	 * Handle clickable rolls.
 	 * @param {Event} event The originating click event.

module/helpers/templates.mjs

@@ -17,7 +17,6 @@ export const preloadHandlebarsTemplates = async function () {
 
 		// Actor Component partials.
 		'systems/fabulaultima/templates/actor/partials/actor-study.hbs',
-		'systems/fabulaultima/templates/actor/partials/actor-actions.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-affinities.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-attributes.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-defensive.hbs',
@@ -28,6 +27,7 @@ export const preloadHandlebarsTemplates = async function () {
 
 		'systems/fabulaultima/templates/actor/partials/actor-item-name.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-actions.hbs',
+		'systems/fabulaultima/templates/actor/partials/actor-clocks.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-npc-items.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-npc-skills.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-favorite.hbs',
@@ -36,7 +36,9 @@ export const preloadHandlebarsTemplates = async function () {
 		'systems/fabulaultima/templates/actor/partials/actor-divider.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-equip.hbs',
 		'systems/fabulaultima/templates/actor/partials/actor-control.hbs',
-
+		'systems/fabulaultima/templates/actor/partials/actor-progress-clock.hbs',
+		'systems/fabulaultima/templates/actor/partials/actor-progress-clock-xl.hbs',
+
 		// Item partials
 		'systems/fabulaultima/templates/item/partials/item-effects.hbs',
 		'systems/fabulaultima/templates/item/partials/item-controls.hbs',

module/sheets/actor-standard-sheet.mjs

@@ -178,6 +178,28 @@ export class FUStandardActorSheet extends ActorSheet {
 			i.progressStep = i.system.progress?.step;
 			i.progressMax = i.system.progress?.max;
 
+			for (let i of context.items) {
+				// Prepare progress clock array
+				if (i.type === 'zeroPower' || i.type === 'ritual' || i.type === 'miscAbility' || i.type === 'rule') {
+					const progressArr = [];
+
+					const progress = i.system.progress ? i.system.progress : { current: 0, max: 6 };
+
+					for (let i = 0; i < progress.max; i++) {
+						progressArr.push({
+							id: i + 1,
+							checked: parseInt(progress.current) === i + 1 ? true : false,
+						});
+					}
+
+					if (progress.current === progress.max) {
+						console.log("Clock is completed!")
+					}
+
+					i.progressArr = progressArr.reverse();
+				}
+			}
+
 			if (['armor', 'shield', 'accessory'].includes(i.type)) {
 				i.def = i.isMartial && i.type === 'armor' ? i.system.def.value : `+${i.system.def.value}`;
 				i.mdef = `+${i.system.mdef.value}`;
@@ -352,6 +374,11 @@ export class FUStandardActorSheet extends ActorSheet {
 		 *
 		 */
 
+		// Update Progress
+		html.find('.progress input').click((ev) => this._onProgressUpdate(ev));
+
+		// Update Progress
+		html.find('.progress input').contextmenu((ev) => this._onProgressReset(ev));
 
 		function handleItemClick(ev, isRightClick) {
 			const li = $(ev.currentTarget).parents('.item');
@@ -956,6 +983,39 @@ export class FUStandardActorSheet extends ActorSheet {
 		});
 	}
 
+	// Set progress clock value to the segment clicked
+	_onProgressUpdate(ev) {
+		const input = ev.currentTarget;
+		const segment = input.value;
+
+		const li = $(input).closest('.item');
+
+		if (li.length) {
+			// If the clock is from an item
+			const itemId = li.data('itemId');
+			const item = this.actor.items.get(itemId);
+			item.update({ 'system.progress.current': segment });
+		} else {
+			// If not from an item
+			this.actor.update({ 'system.progress.current': segment });
+		}
+	}
+
+	// Reset Progress Clock
+	_onProgressReset(ev) {
+		const input = ev.currentTarget;
+		const li = $(input).closest('.item');
+		if (li.length) {
+			// If the clock is from an item
+			const itemId = li.data('itemId');
+			const item = this.actor.items.get(itemId);
+			item.update({ 'system.progress.current': 0 });
+		} else {
+			// If not from an item
+			this.actor.update({ 'system.progress.current': 0 });
+		}
+	}
+
 	/**
 	 * Handles clickable rolls based on different roll types.
 	 * @param {Event} event   The originating click event

styles/scss/components/_clocks.scss

@@ -0,0 +1,76 @@
+.progress {
+    --size: 50px;
+    --border-width: 2px;
+    width: var(--size);
+    height: var(--size);
+    position: relative;
+  }
+
+  .progress[data-segments="2"] .pie { clip-path: polygon(50% -25%, 50% 125%, 120% 50%); }
+  .progress[data-segments="3"] .pie { clip-path: polygon(50% -50%, 50% 50%, 140% 100%); }
+  .progress[data-segments="4"] .pie { clip-path: polygon(50% -25%, 50% 50%, 120% 50%); }
+  .progress[data-segments="6"] .pie { clip-path: polygon(50% -10%, 50% 50%, 100% 20%); }
+  .progress[data-segments="8"] .pie { clip-path: polygon(50% 0, 50% 50%, 100% 0); }
+  .progress[data-segments="10"] .pie { clip-path: polygon(50% 0, 50% 50%, 85% 0); }
+  .progress[data-segments="12"] .pie { clip-path: polygon(50% 0, 50% 50%, 80% 0); }
+
+  .progress .foreground {
+    pointer-events: none;
+    position: absolute;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    border: var(--border-width) solid $color-secondary;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+    z-index: 2;
+  }
+
+  .progress .divider {
+    pointer-events: none;
+    position: absolute;
+    width: var(--border-width);
+    height: calc(50% - .5 * var(--border-width));
+    top: calc(.5 * var(--border-width));
+    right: calc(50% - var(--border-width) / 2);
+    background: $color-ternary;
+    transform-origin: center bottom;
+    transform: rotate(calc((var(--index) * 1turn) / var(--segments)));
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+    z-index: 2;
+  }
+
+  .progress input[type="radio"].pie {
+    position: absolute;
+    top: 0;
+    margin: 0;
+    appearance: none;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    transform: rotate(calc(((var(--index) - 1) * 1turn) / var(--segments)));
+    z-index: 1;
+  }
+
+  .progress .pie:hover {
+    cursor: pointer;
+  }
+
+  .progress .pie:checked,
+  .progress .pie:checked ~ .pie {
+    background-color: $color-secondary;
+  }
+
+  .progress .pie:hover,
+  .progress .pie:hover ~ .pie {
+    background-color: $color-secondary-inverted;
+  }
+
+  .progress .pie:checked:hover,
+  .progress .pie:checked:hover ~ .pie,
+  .progress .pie:checked ~ .pie:hover,
+  .progress .pie:checked ~ .pie:hover ~ .pie,
+  .progress .pie:hover ~ .pie:checked,
+  .progress .pie:hover ~ .pie:checked ~ .pie {
+    background-color: $color-secondary;
+  }
+

styles/scss/fabulaultima.scss

@@ -22,6 +22,7 @@
   @import "components/affinity";
   @import "components/barmeter";
   @import "components/buttons";
+  @import "components/clocks";
   @import "components/divider";
   @import "components/effects";
   @import "components/forms";

template.json

@@ -89,7 +89,9 @@
 				"mdef": { "value": 0 },
 				"init": { "value": 0 }
 			},
-			"hasProgress": { "progress": { "current": 0, "step": 1, "max": 6 } },
+			"hasProgress": { 
+				"hasClock": { "value": false },
+				"progress": { "current": 0, "step": 1, "max": 6 } },
 			"hasBehavior": { "isBehavior": false, "weight": { "value": 1 } },
 			"hasLevel": { "level": { "value": 1, "max": 10, "min": 0 } },
 			"hasClass": { "class": { "value": "" } },
@@ -208,7 +210,7 @@
 			"templates": ["base", "equippable", "rollInfo", "hasBehavior", "hasProgress"]
 		},
 		"rule": {
-			"templates": ["base", "hasBehavior"]
+			"templates": ["base", "hasBehavior", "hasProgress"]
 		},
 		"behavior": {
 			"templates": ["base"],

templates/actor/actor-character-sheet.hbs

@@ -35,6 +35,8 @@
 				<aside class="sidebar flex-group-center">
 					{{!-- Action Buttons --}}
 					{{> "systems/fabulaultima/templates/actor/partials/actor-actions.hbs" actor=actor}}
+					{{!-- Clock Section --}}
+					{{> "systems/fabulaultima/templates/actor/partials/actor-clocks.hbs" actor=actor}}
 				</aside>
 
 				{{!-- Favorite Section --}}

templates/actor/actor-npc-sheet.hbs

@@ -71,17 +71,8 @@
 							</select>
 						</div>
 					</section>
-					<section class="align-center desc">
-						<label class="desc-header resource-content flex-group-center form-group"
-							data-label="{{localize 'FU.Clock'}}">
-							<span class="resource-label-l "><span>{{localize 'FU.Clock'}}
-								</span>
-						</label>
-						<div class="resource-content form-fields">
-							<i class="fa-solid fa-rotate-right"></i>1 2 3
-						</div>
-					</section>
-
+					{{!-- Clock Section --}}
+					{{> "systems/fabulaultima/templates/actor/partials/actor-clocks.hbs" actor=actor}}
 				</aside>
 				<div class="stats-container grid-span-2">
 					<section class="npc-border-col desc">