Warmth indicator dots now work

Added tooltips to the indicator dots
Changed jsdoc typings to ts typings

game/03-JavaScript/clothing-shop-v2.js

@@ -21,7 +21,9 @@ function getRevealInfo(reveal) {
 window.getRevealInfo = getRevealInfo;
 
 function getWarmthInfo(warmth) {
-	return [warmth, "warm-" + warmth];
+	// Factor is 1-10. warmth of 7-9 will all have 7 dots, but different colours
+	const factor = (warmth - 5.5) / 4.5;
+	return "background-color:" + ColourUtils.interpolateTripleColor("#62c6ff", "#ffee3b", "#ff481b", factor);
 }
 window.getWarmthInfo = getWarmthInfo;
 

game/03-JavaScript/weather/00-docs/typedefs-weather.js

-/**
- * @typedef {Object<string, ImageLocation>} LocationImages
- */
-
-/**
- * @typedef {object} ImageLocation
- * @property {string} folder The folder path.
- * @property {ImageSetting|Object<string, ImageSetting>} base Base images and conditions.
- * @property {EmissiveSetting|Object<string, EmissiveSetting>} [emissive] Emissive images and settings.
- * @property {ReflectiveSetting|Object<string, ReflectiveSetting>} [reflective] Reflective images and settings.
- */
-
-/**
- * @typedef {object} AnimationSetting
- * @property {number|Function} frameDelay Delay between frames in milliseconds.
- * @property {number|Function} [cycleDelay] Delay between animation cycles in milliseconds.
- * @property {number|Function} [startDelay] Delay before starting the animation in milliseconds.
- * @property {number|Function} [startFrame] Start frame on image load
- */
-
-/**
- * @typedef {object} ImageSetting
- * @property {string} image Image filename.
- * @property {boolean|Function} [condition] Function that determines if the condition is met.
- * @property {string} [waitForAnimation] If set, pauses current delays while selected animation is running.
- * @property {boolean} [alwaysDisplay] When false, hide the first frame while startDelay or cycleDelay is running. If true, always draw the first frame, regardless.
- * @property {string|AnimationSetting} [animation] Animation settings for the image.
- * @property {number|Function} [frame] Selected frame in the spritesheet.
- */
-
-/**
- * @typedef {object} EmissiveSetting
- * @property {string} image Image filename.
- * @property {Function} [condition] Function that determines if the condition is met.
- * @property {string} [waitForAnimation] If set, pauses current delays while selected animation is running.
- * @property {boolean} [alwaysDisplay] When false, hide the first frame while startDelay or cycleDelay is running. If true, always draw the first frame, regardless.
- * @property {string|AnimationSetting} [animation] Animation settings for the image.
- * @property {string} [color] Color for emissive effects.
- * @property {number} [size] Size modifier for the image or effect.
- * @property {number} [strength]
- * @property {number|Function} [alpha]
- */
-
-/**
- * @typedef {object} ReflectiveSetting
- * @property {string} image Image filename.
- * @property {number} [alpha] Optional alpha.
- * @property {Function} [condition] Function that determines if the condition is met.
- */

game/03-JavaScript/weather/00-docs/weather.g.ts

+interface ImageLocation {
+    folder: string;
+    base: ImageSetting | { [key: string]: ImageSetting };
+    emissive?: EmissiveSetting | { [key: string]: EmissiveSetting };
+    reflective?: ReflectiveSetting };
+}
+
+interface AnimationSetting {
+    frameDelay: number | (() => number);
+    cycleDelay?: number | (() => number);
+    startDelay?: number | (() => number);
+    startFrame?: number | (() => number);
+}
+
+interface ImageSetting {
+    image: string;
+    condition?: boolean | (() => boolean);
+    waitForAnimation?: string;
+    alwaysDisplay?: boolean;
+    animation?: string | AnimationSetting;
+    frame?: number | (() => number);
+}
+
+interface EmissiveSetting {
+    image: string;
+    condition?: () => boolean;
+    waitForAnimation?: string;
+    alwaysDisplay?: boolean;
+    animation?: string | AnimationSetting;
+    color?: string;
+    size?: number;
+    strength?: number;
+    alpha?: number | (() => number);
+}
+
+interface ReflectiveSetting {
+    mask: MaskSetting;
+    [key: string]: ImageSetting;
+}
+
+interface MaskSetting {
+    image: string;
+    alpha?: number;
+	horizon?: number;
+}
+
+declare global {
+    interface LocationImages {
+        [locationKey: string]: ImageLocation;
+    }
+}
+export {};

game/overworld-town/loc-shop/clothing-v2.twee

@@ -403,37 +403,43 @@
 						<span class="clothing-price"><<printmoney `getClothingCost(_item, $_realSlot)` true>></span>
 						<!-- Integrity, Reveal and Warmth indicators -->
 						<<if !$shopDefaults.compactMode>>
-							<div class="clothing-integrity">
+							<<set $_intInf = getIntegrityInfo(_item.integrity_max)>>
+							<<set $_tooltip to `<span class="black">Clothing durability:</span> <i class="${$_intInf[1]} normal">${_item.integrity_max}</i>`>>
+							<div class="clothing-integrity" @tooltip="$_tooltip">
 								<<if $options.images is 1>>
 									<img class="clothing-stats-icon" src="img/misc/icon/integrity.png">
 								<<else>>
 									<span class="clothing-stats-text">I.</span>
 								<</if>>
-								<<set _intInf = getIntegrityInfo(_item.integrity_max)>>
+								
 								<<for _i = 0; _i lt 7; _i++>>
-									<span @class="'stats-ball ' + (_i < _intInf[0] ? 'bg-' + _intInf[1] : '')">&nbsp;</span>
+									<span @class="'stats-ball ' + (_i < $_intInf[0] ? 'bg-' + $_intInf[1] : '')">&nbsp;</span>
 								<</for>>
 							</div>
-							<div class="clothing-reveal">
+							<<set $_revInf = getRevealInfo(_item.reveal)>>
+							<<set $_tooltip to `<span class="black">Clothing exposure:</span> <i class="${$_revInf[1]} normal">${_item.reveal}</i>`>>
+							<div class="clothing-reveal" @tooltip="$_tooltip">
 								<<if $options.images is 1>>
 									<img class="clothing-stats-icon" src="img/misc/icon/reveal.png">
 								<<else>>
 									<span class="clothing-stats-text">R.</span>
 								<</if>>
-								<<set _revInf = getRevealInfo(_item.reveal)>>
+								
 								<<for _i = 0; _i lt 7; _i++>>
-									<span @class="'stats-ball ' + (_i < _revInf[0] ? 'bg-' + _revInf[1] : '')">&nbsp;</span>
+									<span @class="'stats-ball ' + (_i < $_revInf[0] ? 'bg-' + $_revInf[1] : '')">&nbsp;</span>
 								<</for>>
 							</div>
-							<div class="clothing-warmth">
+							<<set $_warmth = getTrueWarmth(_item)>>
+							<<set $_warInf = getWarmthInfo($_warmth * 0.5)>>
+							<<set $_tooltip to `<span class="black">Clothing warmth:</span> <i class="orange normal">${$_warmth}</i>`>>
+							<div class="clothing-warmth" @tooltip="$_tooltip">
 								<<if $options.images is 1>>
 									<img class="clothing-stats-icon" src="img/misc/icon/warmth.png">
 								<<else>>
 									<span class="clothing-stats-text">W.</span>
 								<</if>>
-								<<set _warInf = getWarmthInfo(getTrueWarmth(_item))>>
 								<<for _i = 0; _i lt 7; _i++>>
-									<span @class="'stats-ball ' + (_i < _warInf[0] ? _warInf[1] : '')">&nbsp;</span>
+									<span class="stats-ball" @style="(_i < $_warmth * 0.5 ? $_warInf : '')">&nbsp;</span>
 								<</for>>
 							</div>
 						<</if>>