Web client effect for Kika punishment

buildtools/ant_modules/dist.xml

@@ -132,6 +132,9 @@
 				<exclude name="logic/layer/"/>
 			</fileset>
 		</copy>
+		<copy todir="${build_client_data}/${maps}/effect">
+			<fileset dir="${maps}/effect"/>
+		</copy>
 		<copy todir="${build_client_data}/data/font">
 			<fileset dir="data/font"/>
 		</copy>

doc/contributors.md

@@ -998,6 +998,7 @@ The following people released their work to the public with a suitable license f
 * [Inchadney](http://inchadney.com/sounds.html)
 * [Gniffelbaf](https://freesound.org/people/Gniffelbaf/)
 * [Kevin Luce (kevp888)](https://freesound.org/people/kevp888/)
+* [Gordon Dylan Johnson (GDJ)](https://openclipart.org/artist/GDJ)
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->

doc/contributors/contributors.json

@@ -4772,6 +4772,11 @@
 			"name": "kevp888",
 			"fullname": "Kevin Luce",
 			"link": "https://freesound.org/people/kevp888/"
+		},
+		{
+			"name": "GDJ",
+			"fullname": "Gordon Dylan Johnson",
+			"link": "https://openclipart.org/artist/GDJ"
 		}
 	]
 }

doc/sources/graphics-misc.txt

@@ -63,6 +63,10 @@ rotate*    rg1024; CC0; https://openclipart.org/detail/20247
 settings*  ben; CC0; https://openclipart.org/detail/192629
 sound*     mightyman; CC0; https://openclipart.org/detail/165992
 
+data/maps/effect/
+
+lightning  Gordon Dylan Johnson (GDJ); CC0; https://openclipart.org/detail/268835
+
 data/sprites/
 
 baby_dragon.png           Kimmo Rundelin (kiheru); CC BY-SA 3.0; Stendhal

src/js/stendhal/data/Paths.ts

@@ -22,7 +22,8 @@ export class Paths {
 	public static readonly sprites = Paths.data + "/sprites";
 	public static readonly weather = Paths.sprites + "/weather";
 	public static readonly achievements = Paths.sprites + "/achievements";
-	public static readonly tileset = Paths.data + "/maps/tileset";
+	public static readonly maps = Paths.data + "/maps";
+	public static readonly tileset = Paths.maps + "/tileset";
 	public static readonly ws = Paths.extractPath("data-ws");
 
 	/**

src/js/stendhal/event/generic/KikaPunishmentEvent.ts

@@ -12,21 +12,65 @@
 
 import { RPEvent } from "../RPEvent";
 
+import { Paths } from "../../data/Paths";
+import { store } from "../../data/SpriteStore";
+
 import { SoundLayer } from "../../data/enum/SoundLayer";
 
+import { SoundID } from "../../data/sound/SoundID";
+
 import { SoundManager } from "../../ui/SoundManager";
+import { ViewPort } from "../../ui/ViewPort";
 
+import { Color } from "../../util/Color";
 
+
+/**
+ * Creates effects for Kika punishment.
+ *
+ * TODO:
+ * - maybe make thunderclap louder
+ * - add some type of beforehand notice, maybe in travel log, about potential punishment
+ */
 export class KikaPunishmentEvent extends RPEvent {
 
-	override execute(entity: any) {
-		// DEBUG:
-		console.log("Kika punishment!");
+	private startTime = 0;
+	private image = store.get(Paths.maps + "/effect/lightning.png");
 
-		SoundManager.get().playGlobalizedEffect("event/thunderclap", SoundLayer.SFX.value);
 
-		// TODO:
-		// - lightning flash
-		// - maybe make thunderclap louder
+	override execute(entity: any) {
+		this.startTime = Date.now();
+		// thunder sound
+		SoundManager.get().playGlobalizedEffect(SoundID["thunderclap"]!, SoundLayer.SFX.value);
+		// lightning visual effect
+		const viewport = ViewPort.get();
+		viewport.onDrawComplete = (ctx: CanvasRenderingContext2D, offsetX: number, offsetY: number) => {
+			this.drawLightning(ctx, offsetX, offsetY);
+		}
+		window.setTimeout(function() { viewport.onDrawComplete = undefined; }, 300);
+	}
+
+	/**
+	 * Draws a lighning effect on the viewport.
+	 *
+	 * @param ctx {CanvasRenderingContext2D}
+	 *   Canvas drawing context.
+	 * @param offsetX {number}
+	 *   Canvas horizontal offset.
+	 * @param offsetY {number}
+	 *   Canvas vertical offset.
+	 */
+	private drawLightning(ctx: CanvasRenderingContext2D, offsetX: number, offsetY: number) {
+		const timeDiff = Date.now() - this.startTime;
+		ctx.save();
+		if (timeDiff <= 100 || timeDiff > 200) {
+			ctx.globalAlpha = 0.75;
+		}
+		ctx.fillStyle = Color.WHITE;
+		ctx.fillRect(offsetX, offsetY, 640, 480);
+		if (this.image.height) {
+			ctx.drawImage(this.image, offsetX, offsetY);
+		}
+		ctx.restore();
 	}
 }

src/js/stendhal/ui/ViewPort.ts

@@ -74,6 +74,14 @@ export class ViewPort {
 	/** Styles to be applied when chat panel is not floating. */
 	private readonly initialStyle: {[prop: string]: string};
 
+	/**
+	 * Callback for instructions to execute when a drawing cycle on the viewport is complete.
+	 *
+	 * The function is called with the parameters `ctx` (CanvasRenderingContext2D), `offsetX`,
+	 * and `offsetY`.
+	 */
+	public onDrawComplete?: Function;
+
 	/** Singleton instance. */
 	private static instance: ViewPort;
 
@@ -153,6 +161,10 @@ export class ViewPort {
 				// redraw inventory sprites
 				stendhal.ui.equip.update();
 				(ui.get(UIComponentEnum.PlayerEquipment) as PlayerEquipmentComponent).update();
+
+				if (this.onDrawComplete) {
+					this.onDrawComplete(this.ctx, this.offsetX, this.offsetY);
+				}
 			}
 		}
 		window.setTimeout(function() {