From ab2b3d6573c51b14be489027238126d03b425652 Mon Sep 17 00:00:00 2001
From: SG-SWE073 <160347000+SG-SWE073@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:11:23 -0400
Subject: [PATCH] docs(types.ts): add readd() examples (#838)

* docs(types.ts): add readd() examples

* Update docs(types.ts): shorten readd() examples

Removed some components and text

* Update docs(types.ts) fix pos and area in read()

After removing scale, one of the sprites pos needed to be adjusted to overlap other sprite in demonstration.
Also, area() is needed as well, because without area(), kaboom will throw an error "purpleBean is not a function" when using "purpleBean.onClick()".
Not sure if this is a bug or intended like that, but might explain one of the reasons why people get errors often.

* docs(types.ts) fix identation for readd()

Remove the extra indents
---
 src/types.ts | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/types.ts b/src/types.ts
index 729bdc47..34a16546 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -103,6 +103,41 @@ export interface KaboomCtx {
 	make<T>(comps?: CompList<T>): GameObj<T>,
 	/**
 	 * Remove and re-add the game obj, without triggering add / destroy events.
+	 * @example
+	 * ```js
+	 * // Common way to use this is to have one sprite overlap another sprite, and use readd() to have the bottom sprite on top of the other.
+	 * 
+	 * // Create two sprites.
+	 * const greenBean = add([
+	 * sprite("bean"),
+	 * pos(200,140),
+	 * color(255, 255, 255),
+         * area(),
+	 * ])
+	 * 
+	 * // This bean will overlap the green bean.
+	 * const purpleBean = add([
+	 * sprite("bean"),
+	 * pos(230,140),
+	 * color(255, 0, 255),
+  	 * area(),
+	 * ])
+	 * 
+	 * // Example 1: simply call readd() on the target you want on top.
+	 * readd(greenBean)   
+	 * 
+	 * // Example 2: using onClick() or other functions with readd().
+	 * // If you comment out the first example, and use this readd() with a function like onClick(), you
+	 * can keep switching which sprite is above the other ( click on edge of face ).
+	 * 
+	 * purpleBean.onClick(() => {
+	 * 		readd(greenBean)
+	 * })
+	 *        
+	 * greenBean.onClick(() => {
+	 * 		readd(purpleBean)
+	 * })
+	 * ```
 	 */
 	readd(obj: GameObj): void,
 	/**