### App Initialization Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/lifecycle

Demonstrates the onInit function, which is called once when the application starts before any user enters. It's suitable for initial setup tasks.

```jsx
App.onInit.Add(function(){
	App.sayToAll("-- onInit --")
	App.sayToAll("   ready..  ")
	App.sayToAll("------------")
});
```

--------------------------------

### Example: Change Attack Sound on Start

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Demonstrates how to set a custom sound file for the attack action using `App.changeAttackSound` when the application starts.

```javascript
App.onStart.Add(function(){
	App.changeAttackSound("attack.mp3");
})
```

--------------------------------

### App Start Event Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/lifecycle

Illustrates the onStart function, executed once after each player has joined via onJoinPlayer. It's typically used for game setup or state initialization per player.

```jsx
App.onStart.Add(function(){
});
```

--------------------------------

### Enter-Phase Lifecycle Flow Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/lifecycle

Demonstrates the sequence of entry-phase functions: `onInit` for initial setup, `onJoinPlayer` for handling player entry, and `onStart` for the application's commencement. These functions manage the initial state and player interactions.

```javascript
// main.js
App.onInit.Add(function(){
	App.sayToAll("-- onInit --")
	App.sayToAll("   ready..  ")
	App.sayToAll("------------")
});

App.onJoinPlayer.Add(function(player){
	App.sayToAll(`${player.name} has entered.`) 
});

App.onStart.Add(function(){
	App.sayToAll("-- App Start --")
});
```

--------------------------------

### Initialize App on Start

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/lifecycle

The `onStart` function is executed once after players have joined via `onJoinPlayer`. It's used for initial setup or broadcasting messages at the beginning of the application's active state. It takes no parameters.

```javascript
App.onStart.Add(function(){
	App.sayToAll("-- App Start --")
});
```

--------------------------------

### Player showCenterLabel Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptplayer/methods

Example demonstrating how to use the `showCenterLabel` method to display a personalized message to a player upon joining, with custom text color and background color.

```jsx
App.onJoinPlayer.Add(function(player){
	player.showCenterLabel(`${player.name} has entered.`, 0x000000, 0xFFFF00, 500, 2000); // Displays as black text with a yellow background
});
```

--------------------------------

### player.showBuyAlert Function and Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptplayer/methods

Displays a purchase widget to a player, allowing them to buy items. It supports custom messages, timers, and specifies revenue distribution. The example demonstrates purchasing an item, saving its status, and implementing a refund mechanism.

```APIDOC
player.showBuyAlert(itemName: string, price: number, callback: function, payToSpaceOwner?: boolean, option?: { message: string, timer: number })
Parameters:
  itemName: string - Name of the item to display in the purchase widget
  price: number - Price of the item (Currency: ZEM)
  callback: function - Callback functions to execute when a purchase is completed
  payToSpaceOwner: boolean (Optional) - When false: the revenue goes to the app owner. When true: the revenue goes to the map owner. (Default value: false)
  option: Object (Optional) - You can set the following options.
    message: string - Sets the text to be displayed in the purchase widget.
    timer: number - You can set the time (ms) for displaying the purchase widget.
```

```javascript
const itemName = "ITEM";

//Activates function when Q is pressed - Purchase an item and save data in player.storage.
App.addOnKeyDown(81, function (player) {
	let pStorage = JSON.parse(player.storage);
	if (!player.tag) {
		player.tag = {};
	}
	if (pStorage == null) {
		pStorage = {};
	}
	//Displays a message if the item has already been purchased
	if (pStorage[itemName]) {
		player.showCenterLabel(`${itemName} has been already purchased.`);
	} else {
		player.showBuyAlert(itemName, 0, function (success, buyAlertResult) {
			if (success) {
				App.sayToAll(`[Info.] ${player.name} has purchased ${itemName}!`);
				pStorage[itemName] = true;
				player.tag.buyAlertResult = buyAlertResult
				player.storage = JSON.stringify(pStorage);
				player.save();
			}
		}, 
		false,// if false, the revenue goes to the app owner, if true the revenue goes to the Space owner
		{
			message: `${itemName} custom message`,//Highlights a text corresponding to itemName in the message.
			timer: 10000 // 10 seconds - purchase widget display time (ms)
		}
		);
	}
});

// Activates function when W is pressed - Refund
App.addOnKeyDown(87, function (player) {
	let pStorage = JSON.parse(player.storage);
	if( pStorage && player.tag.buyAlertResult ) {	
		if( player.tag.buyAlertResult.Refund() ) {
			App.sayToAll("===== refund success!");
			pStorage[itemName] = false;
		}
		else {
			App.sayToAll("===== refund failed");
		}
		player.tag.buyAlertResult = null;
		player.storage = JSON.stringify(pStorage);
		player.save();
	}
})
```

--------------------------------

### Example: Stop Sound on Key Press

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Provides an example of stopping all active sounds by calling `App.stopSound` when a specific key (e.g., 'q') is pressed.

```jsx
// Activates function when q is pressed
App.addOnKeyDown(81,function(p){
	App.stopSound();
})
```

--------------------------------

### Example: Play Sound File on Player Join

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Shows how to play a specific sound file (`join.mp3`) to all players when a new player joins the session using `App.playSound`.

```jsx
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	App.playSound("join.mp3",false);
});
```

--------------------------------

### App Storage Synchronization Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/storage

An example demonstrating how to initialize, update, and synchronize app storage using `App.setStorage` and `App.getStorage`. It increments a 'count' value and broadcasts it to all players when the 'Q' key is pressed, showing synchronization across different maps.

```javascript
App.onStart.Add(function(){
	// Initialize storage if it's null
	if(App.storage == null){
		App.setStorage(JSON.stringify({count: 0}))
	}
})

// Activates function when 'q' is pressed (key code 81)
App.addOnKeyDown(81,function(player){
	// Updates App.storage and executes a callback function
	App.getStorage(function () {
		let appStorage = JSON.parse(App.storage);
		appStorage.count += 1;
		App.sayToAll(`count: ${appStorage.count}`)
		// Uses App.setStorage to save any changes
		App.setStorage(JSON.stringify(appStorage));
	});
	// Synchronization not guaranteed if you add a code that uses App.storage on the very next line of the App.getStorage function.
	App.sayToAll(App.storage);
})
```

--------------------------------

### Example: Get Player by ID

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Demonstrates retrieving a player object using `App.getPlayerByID` based on the current player's ID, often used to access player-specific properties.

```jsx
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	const myPlayer = App.getPlayerByID(player.id);
});
```

--------------------------------

### Example: Play Sound from URL on Player Join

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Illustrates playing a sound from a URL using `App.playSoundLink` when a player joins, with a note on potential CORS issues.

```jsx
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	App.playSoundLink("https://zep.us/assets/sounds/ring.mp3",false);
});
```

--------------------------------

### Example: Kick Player on Say Command

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Demonstrates how to use the `App.kickPlayer` function in response to a chat command. It parses player nicknames from chat messages to identify and kick specific users.

```jsx
// Executes when a player enters chat
// Command format '!nickname to kick'
App.onSay.Add(function (player, text) {
	let players = App.players;
	if (text.indexOf("!Kick") == 0) {
		let nickname = text.slice(4);
		for (let i in players) {
			let p = players[i];
			if (p.name == nickname) {
				App.kickPlayer(p.id);
				break;
			}
		}
	}
});
```

--------------------------------

### Map.playObjectAnimation API and Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptmap/methods

Activates an object's animation at specified coordinates. Requires the object to be placed first using Map.putObject. The example shows setting up a dancing blueman animation triggered by a key press.

```APIDOC
Map.playObjectAnimation(x: number, y: number, name: string, loop: number = 1)
  - Activates the object animation at the corresponding coordinates.
  - Preceded by Map.putObject function.
  - Parameters:
    - x (Number): The x-coordinate of the tile effect.
    - y (Number): The y-coordinate of the tile effect.
    - name (String): The saved variable name of the sprite, prefixed with '#'. Example: '#'+variable.id.
    - loop (Number, optional): The number of times the animation should loop. Defaults to 1.
  - Example:
    // One frame's size 48x64
    let blueman_dance = App.loadSpritesheet(
	"blueman.png",
	48,
	64,
	[20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37], // Animation comprised of 21st ~ 38th image
	8
    );
    // Activates function when q is pressed 
    App.addOnKeyDown(81, function (player) {
	Map.putObject(5, 5, blueman_dance, { overlap: true });
	Map.playObjectAnimation(5, 5, "#" + blueman_dance.id, -1);
    })
```

```javascript
// One frame's size 48x64
let blueman_dance = App.loadSpritesheet(
	"blueman.png",
	48,
	64,
	[20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37], // Animation comprised of 21st ~ 38th image
	8
);
// Activates function when q is pressed 
App.addOnKeyDown(81, function (player) {
	Map.putObject(5, 5, blueman_dance, { overlap: true });
	Map.playObjectAnimation(5, 5, "#" + blueman_dance.id, -1);
});
```

--------------------------------

### runLater Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/callbacks

Demonstrates how to use the `App.runLater` function to execute a callback after a specified delay in seconds. This is useful for time-based events or delayed feedback.

```jsx
App.onStart.Add(function () {
	App.runLater(function() {
		App.showCenterLabel("message");
	}, 5);
});
```

--------------------------------

### Map.getObjectWithKey API and Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptmap/methods

Retrieves information about a map object using its unique key. Includes a JavaScript example demonstrating how to place an object and then retrieve its data when a key is pressed.

```APIDOC
Map.getObjectWithKey(key: String)
  - Retrieves the information of the object with the corresponding key value.
  - Parameters:
    - key (String): The key value of the object to get information from.
  - Returns: The object associated with the key, or null if not found.
  - Example:
    let blueman = App.loadSpritesheet("blueman.png");
    App.onStart.Add(function() {
	Map.putObjectWithKey(18, 6, blueman, {
		overlap: true,
		movespeed: 80,
		key: "TestBlueMan", // Key value
	});
    });
    // Activates function when q is pressed
    App.addOnKeyDown(81, function (player) {
	let object_blueman = Map.getObjectWithKey("TestBlueMan");
	for(let data in object_blueman){
		App.sayToAll(`${data}: ${object_blueman[data]}`)
	}
    })
```

```javascript
let blueman = App.loadSpritesheet("blueman.png");
App.onStart.Add(function() {
	Map.putObjectWithKey(18, 6, blueman, {
		overlap: true,
		movespeed: 80,
		key: "TestBlueMan", // Key value
	});
});
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	let object_blueman = Map.getObjectWithKey("TestBlueMan");
	for(let data in object_blueman){
		App.sayToAll(`${data}: ${object_blueman[data]}`)
	}
})
```

--------------------------------

### Install Web Portal Tile Effect with ZEP-SCRIPT

Source: https://docs.zep.us/zep-script/zep-script-guide/appendix/tileeffecttype-detailed-explanation

Installs a tile effect that opens a web link in a new tab. The 'link' parameter is mandatory, while 'label' and 'invisible' are optional for customizing the portal's appearance and behavior.

```jsx
Map.putTileEffect(x, y, TileEffectType.WEB_PORTAL, {
	link: "https://zep.us/", // Required
	label: "ZEP-SCRIPT-WEB-PORTAL", // Optional
	invisible: true, // Optional, "false" is default
});
```

--------------------------------

### Player Join Event Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/lifecycle

Shows how to use the onJoinPlayer event, which is triggered when a player enters the application. This is useful for welcoming new players or initializing player-specific data.

```jsx
App.onJoinPlayer.Add(function(player) {
	App.showCenterLabel(`${player.name} has entered.`) 
});
```

--------------------------------

### Create Object with npcProperty

Source: https://docs.zep.us/zep-script/zep-script-guide/appendix/object-npcproperty

Demonstrates how to create a game object using Map.putObjectWithKey and initialize it with npcProperty, setting its name, HP, and color. This example shows basic object placement and animation triggered by a key press.

```javascript
let blueman = App.loadSpritesheet('blueman.png', 48, 64, {
    left: [5, 6, 7, 8, 9],
    up: [15, 16, 17, 18, 19],
    down: [0, 1, 2, 3, 4],
    right: [10, 11, 12, 13, 14],
    dance: [20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],
    down_jump: [38],
    left_jump: [39],
    right_jump: [40],
    up_jump: [41],
}, 8);
App.addOnKeyDown(81, function (player) {
    const objectKey = "TestBlueMan";
    const bluemanObject = Map.putObjectWithKey(18, 6, blueman, {
	npcProperty: { name: "BlueMan", hpColor: 0x03ff03, hp: 100, hpMax: 100 },
	overlap: true,
	movespeed: 100,
	key: objectKey, 
	useDirAnim: true 
    });

    Map.playObjectAnimationWithKey(objectKey, "down", -1);
});
```

--------------------------------

### Publish ZEP Project using CLI

Source: https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/javascript-development-tips

This command initiates the process of creating a compressed file of your ZEP project and publishing it. It requires account verification via email to authenticate the deployment. Ensure you are in the folder containing your main application files before running this command.

```powershell
npx zep-script publish
```

--------------------------------

### Get Player ID and Name

Source: https://docs.zep.us/zep-script/zep-script-api/scriptplayer/field

Retrieves and displays the player's unique ID and nickname when they join the application. This example uses the `App.onJoinPlayer.Add` event to capture player join events and `App.sayToAll` to broadcast the information.

```jsx
App.onJoinPlayer.Add(function(player){
  App.sayToAll(`id: ${player.id} name: ${player.name}`);
})
```

--------------------------------

### Get Player Email Hash with App.onJoinPlayer

Source: https://docs.zep.us/zep-script/zep-script-api/scriptplayer/field

This example shows how to retrieve and display the hash value of a player's email address. It uses the player.emailHash property within the App.onJoinPlayer event to broadcast the player's name and their associated email hash.

```javascript
// Activates function when a player enters 
App.onJoinPlayer.Add(function(player){
  App.sayToAll(`name: ${player.name} emailHash: ${player.emailHash}`);
})
```

--------------------------------

### Initialize ZEP Script Project with TypeScript

Source: https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/typescript-development-tips

Command to create a new ZEP Script project using the ZEP CLI, configured for TypeScript development with npm package management.

```bash
npx zep-script init MyZepApp --npm
```

--------------------------------

### Archive Project using zep-script CLI

Source: https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/javascript-development-tips

This command archives your project into a zip file, which is a crucial step for deployment. Ensure you are in the root directory of your project where the main.js file is located. The zep-script-SDK handles the compression process.

```shell
npx zep-script archive
```

--------------------------------

### Install Embed Tile Effect with ZEP-SCRIPT

Source: https://docs.zep.us/zep-script/zep-script-guide/appendix/tileeffecttype-detailed-explanation

Installs a tile effect that opens a web link in a new window. This effect requires the 'link' and 'align2' parameters, with 'label' being an optional parameter for display text.

```jsx
Map.putTileEffect(x, y, TileEffectType.EMBED, {
	link: "https://zep.us/", // Required
	align2: "top", // Required
	label: "ZEP-SCRIPT-EMBED",  // Optional
});
```

--------------------------------

### Player showCenterLabel Detailed Documentation

Source: https://docs.zep.us/zep-script/zep-script-api/scriptplayer/methods

Detailed documentation for the `player.showCenterLabel` method, explaining its parameters, their types, default values, and usage.

```APIDOC
player.showCenterLabel(text: string, color: uint = 0xFFFFFF, bgColor: uint = 0x000000, offset: int = 0, time: number = 3000)
  - Displays text for 3 seconds at a designated location to the corresponding player.
  - Parameters:
    - text: String - Text to display on label.
    - color: Unit - Color of text to be displayed (HexCode). Defaults to white (0xFFFFFF).
    - bgColor: Unit - Background color of the message to be displayed as the label. Defaults to black (0x000000).
    - offset: Integer - The higher the offset value, the location will be closer to the bottom. Defaults to 0.
    - time: number - Label display time in milliseconds. Defaults to 3000 ms (3 seconds).
  - Example:
    Display the label as yellow.
    App.onJoinPlayer.Add(function(player){
		player.showCenterLabel(`${player.name} has entered.`, 0x000000, 0xFFFF00, 500, 2000);
	});
```

--------------------------------

### Archive ZEP Script Project for Distribution

Source: https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/typescript-development-tips

Creates a compressed zip file of your ZEP Script project, including 'main.js', images, and HTML files, for distribution. Requires Node.js and npm/npx.

```powershell
npx zep-script archive
```

--------------------------------

### Send HTTP GET Request

Source: https://docs.zep.us/zep-script/zep-script-guide/explore-zep-script/tutorials/communicating-with-an-external-api

Demonstrates sending an HTTP GET request to an external API to fetch data. It parses the JSON response and uses the retrieved data to update player names. This function is triggered when a player joins.

```javascript
App.onJoinPlayer.Add(function (player) {
	App.httpGet(
		"https://nickname.hwanmoo.kr/?format=json&count=1&max_length=6&whitespace=_",
		null,
		function (res) {
			// Change the response to a JSON object
			let response = JSON.parse(res);
			player.name = response.words[0];
			player.sendUpdated();
		}
	);
});
```

--------------------------------

### ZEP Script Configuration

Source: https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/typescript-development-tips

Configuration file for ZEP script deployment. It specifies application details such as ID, name, description, and type.

```json
{
    "appId": "Zjkgoj",  // app ID
    "name": "Template", // app name
    "description": "Template application" , // app description
    "type": "normal" // app type( "normal" or "minigame" or "sidebar" )
}
```

--------------------------------

### ZEP Project Deployment Commands

Source: https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/typescript-development-tips

Commands to deploy a ZEP project using the command-line interface. This process involves publishing the project after configuration.

```powershell
npm run deploy
or
npx zep-script publish
```

--------------------------------

### Make HTTP GET Request with ZepScript

Source: https://docs.zep.us/zep-script/zep-script-guide/appendix/communicating-with-an-external-api

Demonstrates how to send a GET request to an external API using `App.httpGet`. It shows how to parse JSON responses and update player names based on the API result. Requires a valid API endpoint and a callback function to process the response.

```jsx
App.onJoinPlayer.Add(function (player) {
	App.httpGet(
		"https://nickname.hwanmoo.kr/?format=json&count=1&max_length=6&whitespace=_",
		null,
		function (res) {
			// Change the response to a json object
			let response = JSON.parse(res);
			player.name = response.words[0];
			player.sendUpdated();
		}
	);
});
```

--------------------------------

### TypeScript vs JavaScript Syntax for App Keywords

Source: https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/typescript-development-tips

Demonstrates the required 'Script' prefix for App, Map, Player, or Widget keywords when developing in TypeScript, contrasting it with standard JavaScript usage.

```JavaScript
// When developing in JavaScript
App.sayToAll("Hello World!");
```

```TypeScript
// When developing in TypeScript
ScriptApp.sayToAll("Hello World!");
```

--------------------------------

### Example: Force Destroy on Key Press

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Shows how to trigger the `App.forceDestroy` function when a specific key (e.g., 'q') is pressed by any player.

```javascript
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	App.forceDestroy();
});
```

--------------------------------

### addOnTileTouched Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/callbacks

Illustrates the usage of `App.addOnTileTouched` to trigger a callback when a player reaches specific X and Y coordinates on the map. It provides player information to the callback.

```jsx
// Calls the function when the player arrives at coordinates 5, 5
App.addOnTileTouched(5, 5, function (player) {
	App.showCenterLabel(`${player.name} arrived at (5, 5)!`);
});
```

--------------------------------

### Configure zep-script.json for Deployment

Source: https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/javascript-development-tips

This JSON file is used to configure your ZEP application for deployment. It requires essential metadata such as appId, name, description, and type. The appId is crucial for identifying the specific app to upload or update.

```json
{
    "appId": "Zjkgoj",  // app ID
    "name": "Template", // app name
    "description": "Template application" , // app description
    "type": "normal" // app type ( "normal" or "minigame" or "sidebar" )
}
```

--------------------------------

### ZEP UI: showBuyAlert

Source: https://docs.zep.us/zep-script/zep-script-api/scriptplayer/methods

Displays a purchase widget to a player and executes a callback upon successful purchase completion. Manages in-app purchase UI flows.

```APIDOC
showBuyAlert:
  Description: Function to display a purchase widget to a player and execute a callback function that runs when a purchase is completed.
  Parameters: (Implicitly requires callback function and potentially item details)
  Returns: void
  Example: showBuyAlert(purchaseCallback)
```

--------------------------------

### addOnLocationTouched Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/callbacks

Shows how to use `App.addOnLocationTouched` to execute a callback when a player enters a designated area defined in the Map Editor. The callback receives the player object.

```jsx
// Executes when a player gets to the area named "myLocation"
App.addOnLocationTouched("myLocation", function(player){
	App.showCenterLabel(`${player.name} has arrived at myLocation.`) 
});
```

--------------------------------

### UI Methods API Documentation

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Details on methods for managing User Interface elements. Includes functions for loading sprite sheets, displaying text labels, and integrating widgets like YouTube players. These methods are designed for in-game or application-level UI presentation.

```jsx
App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource
// Reads a sprite sheet picture file, making it an object

App.showCenterLabel(text: string, color: uint = 0xFFFFFF, bgColor: uint = 0x000000, offset: int = 0)
// Displays text for 1 second at the designated location for all players

App.showCustomLabel(text: string, color: number = 0xFFFFFF, bgColor: number = 0x000000, offset: number = 0, width = 100, opacity = 0.6);
// Displays text for 1 second at the designated location for all players, customizable

App.sayToAll(text: string, color: uint = 0xFFFFFF)
// Displays text in the chat window

App.showWidget(fileName: string, align: string, width: integer, height: integer): ScriptWidget
// Loads the corresponding HTML file as a widget at the align position specified for all players

App.showYoutubeWidget(link: string, align: string, width: integer, height: integer): ScriptWidget
// Plays the video from the YouTube link at the specified align position for all players
```

--------------------------------

### Access Space and Map Identifiers

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/field

Retrieves and displays the unique hash IDs for the current Space and Map where the app is installed. This is useful for context-aware operations.

```jsx
App.onJoinPlayer.Add(function(player){
  // Displays spaceHashID and mapHashID in the chat window
	App.sayToAll(`spaceHashID: ${App.spaceHashID}`); // spaceHashID: Ak42Xz
	App.sayToAll(`mapHashID: ${App.mapHashID}`) // mapHashId: 25g3RQ
})
```

--------------------------------

### Open New Window with JavaScript

Source: https://docs.zep.us/zep-script/zep-script-guide/appendix/grammar-available-for-widgets

This JavaScript code snippet demonstrates how to open a new browser window to a specified URL. It's designed to be placed within a widget's `<script>` tag and uses `window.parent.postMessage` to trigger the action, passing the URL and a system flag.

```javascript
let url = "https://zep.us/";
window.parent.postMessage({
	type: 'ScriptAction:OPEN_WINDOW',
	link: url,
	zepSystem: true
}, '*');
```

--------------------------------

### ZEP ScriptApp Lifecycle Events

Source: https://docs.zep.us/zep-script/zep-script-api/api-summary

Documentation for ZEP ScriptApp lifecycle methods like onInit, onJoinPlayer, onStart, onUpdate, onLeavePlayer, and onDestroy. These functions manage the application's execution flow and player interactions.

```APIDOC
ScriptApp Lifecycle:

onInit()
  - Called once when running the app for the first time.
  - Signature: App.onInit.Add(function(){})

onJoinPlayer(player)
  - Called after onInit, and whenever a new player enters afterward.
  - Parameters:
    - player: Information about the player joining.
  - Signature: App.onJoinPlayer.Add(function(player){})

onStart()
  - Called once after players have entered via onJoinPlayer.
  - Signature: App.onStart.Add(function(){})

onUpdate(dt)
  - Runs periodically about every 20ms.
  - Parameters:
    - dt: Delta time, the time elapsed since the last frame.
  - Signature: App.onUpdate.Add(function(dt){})

onLeavePlayer(player)
  - Called whenever a player exits.
  - Also kicks all players when another app is launched or the Game Block is destroyed.
  - Parameters:
    - player: Information about the player leaving.
  - Signature: App.onLeavePlayer.Add(function(player){})

onDestroy()
  - Called when another app is launched or the installed Game Block is destroyed.
  - Signature: App.onDestroy.Add(function(){})
```

--------------------------------

### Example: Clear Chat on Key Press

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods

Illustrates using the `App.clearChat` function, activated by a key press event (e.g., 'q'), to clear all chat history.

```jsx
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	App.clearChat();
});
```

--------------------------------

### ZEP UI: showPrompt

Source: https://docs.zep.us/zep-script/zep-script-api/scriptplayer/methods

Displays an input window to a player and executes a callback based on their response. Enables user input collection.

```APIDOC
showPrompt:
  Description: Function to display an input window and execute a callback function that runs according to a player's response.
  Parameters: (Implicitly requires prompt message and callback function)
  Returns: void
  Example: showPrompt("Enter your name:", handleNameResponse)
```

--------------------------------

### App Destruction Example

Source: https://docs.zep.us/zep-script/zep-script-api/scriptapp/lifecycle

Illustrates the onDestroy function, the final event called when the application is closing or being replaced. It's used for final cleanup and saving state.

```jsx
App.onDestroy.Add(function(){
});
```

--------------------------------

### showBuyAlert Method

Source: https://docs.zep.us/zep-script/zep-script-api/api-summary

Displays a purchase confirmation widget to a specific player. It includes the item name and price, and executes a callback upon purchase completion.

```JavaScript
player.showBuyAlert(itemName: string, price: number, callback: function)
```