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

@@ -10,23 +10,79 @@
  *                                                                         *
  ***************************************************************************/
 
-import { RPEvent } from "../RPEvent";
+import { SubEvent } from "./SubEvent";
+
+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";
 
 
-export class KikaPunishmentEvent extends RPEvent {
+/**
+ * Creates effects for Kika punishment.
+ *
+ * TODO:
+ * - maybe make thunderclap louder
+ * - add some type of beforehand notice, maybe in travel log, about potential punishment
+ * - move to more generic name such as "LightningStrikeEvent" for use by other events
+ */
+export class KikaPunishmentEvent extends SubEvent {
 
-	override execute(entity: any) {
-		// DEBUG:
-		console.log("Kika punishment!");
+	private startTime = 0;
+	private image = store.get(Paths.maps + "/effect/lightning.png");
+	private flash = true;
+	private lightning = true;
 
-		SoundManager.get().playGlobalizedEffect("event/thunderclap", SoundLayer.SFX.value);
 
-		// TODO:
-		// - lightning flash
-		// - maybe make thunderclap louder
+	override execute(entity: any, flags: string[]) {
+		this.startTime = Date.now();
+		this.flash = flags.indexOf("no-flash") < 0;
+		this.lightning = flags.indexOf("no-lightning") < 0;
+		// thunder sound
+		SoundManager.get().playGlobalizedEffect(SoundID["thunderclap"]!, SoundLayer.SFX.value);
+		if (this.flash || this.lightning) {
+			// 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;
+		if (this.flash) {
+			ctx.save();
+			if (timeDiff <= 100 || timeDiff > 200) {
+				ctx.globalAlpha = 0.5;
+			} else {
+				ctx.globalAlpha = 0.75;
+			}
+			ctx.fillStyle = Color.WHITE;
+			ctx.fillRect(offsetX, offsetY, 640, 480);
+			ctx.restore();
+		}
+		if (this.lightning && 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() {