+{stats.armor.toFixed(0)} armor
\n{/if}\n\n{#if stats.damage > 0}\n+{stats.damage.toFixed(0)} damage
\n{/if}\n\n{#if stats.moveSpeed > 0}\n+{(stats.moveSpeed * 100).toFixed(0)}% movement speed
\n{/if}\n\n{#if stats.attackSpeed > 0}\n+{stats.attackSpeed.toFixed(0)}% attack speed
\n{/if}\n\n{#if stats.health > 0}\n+{stats.health.toFixed(0)} health
\n{/if}\n","\n\n{#if pistol.modifiers.length > 0}\nImproved Pistol
\n\n Ranged weapon. Deals {pistol.damage}{#if stats.damage !== 0}\n +{stats.damage}\n {/if}\n damage. The closer you are to the target, the higher the chance to hit.\n
\n\n
\n\n {#if extra}\n \n {extra}\n
\n {/if}\n{:else}\nPistol
\n\n Ranged weapon. Deals {pistol.damage} damage. The closer you are to the target,\n the higher the chance to hit. Pick up another one to improve it.\n
\n {#if extra}\n {extra}\n
{/if}\n{/if}\n","\n\n{#if knife.modifiers.length > 0}\nImproved Knife
\n\n Melee weapon. Deals {knife.damage}{#if stats.damage !== 0}\n +{stats.damage}\n {/if}\n damage.\n
\n\n
\n\n {#if extra}\n \n {extra}\n
\n {/if}\n{:else}\nKnife
\n\n Melee weapon. Deals {knife.damage} damage. Pick up another one to improve it.\n
\n {#if extra}\n\n {extra}\n
\n {/if}\n{/if}\n","import { writable } from 'svelte/store';\nimport { assets } from './assets';\nimport type { EventEntry } from './backend';\nimport { enumIs } from './enums';\nimport type { ClientGame, Renderer } from './game';\nimport { unreachable } from './unreachable';\n\ntype Step =\n | 'click-the-canvas'\n | 'move-around'\n | 'find-a-weapon'\n | 'pick-up-a-weapon'\n | 'go-in-a-brush'\n | 'attack-an-enemy';\n\ntype Marker =\n | {\n type: 'POI';\n x: number;\n y: number;\n }\n | {\n type: 'HudRegion';\n x: number;\n y: number;\n width: number;\n height: number;\n };\n\nexport class Guide {\n step: Step = 'click-the-canvas';\n\n constructor() {\n this.load();\n }\n\n clear() {\n localStorage.removeItem('guide');\n this.step = 'click-the-canvas';\n this.save();\n }\n\n canvasClicked() {\n if (this.step === 'click-the-canvas') {\n this.step = 'move-around';\n this.save();\n }\n }\n\n load() {\n const stored = localStorage.getItem('guide');\n if (stored) {\n this.step = stored as Step;\n }\n }\n\n save() {\n localStorage.setItem('guide', this.step);\n }\n\n advance(game: ClientGame, events: EventEntry[], renderer: Renderer) {\n switch (this.step) {\n case 'click-the-canvas':\n break;\n case 'move-around':\n if (\n events.find(\n (e) =>\n enumIs(e.data, 'Player') &&\n enumIs(e.data.Player.event, 'PlayerMoved') &&\n e.data.Player.player.toText() == game.ownPlayer.principalText &&\n game.ownPlayer.queue.getQueue().length > 2\n )\n ) {\n this.step = 'find-a-weapon';\n this.save();\n }\n\n break;\n\n case 'find-a-weapon': {\n const tile =\n renderer.map.tiles[Math.floor(game.ownPlayer.loc.y)][\n Math.floor(game.ownPlayer.loc.x)\n ];\n if (enumIs(tile, 'Indoors') || enumIs(tile, 'HouseDoor')) {\n this.step = 'pick-up-a-weapon';\n this.save();\n }\n break;\n }\n\n case 'pick-up-a-weapon':\n if (game.ownPlayer.weapon) {\n this.step = 'go-in-a-brush';\n this.save();\n }\n break;\n\n case 'go-in-a-brush': {\n if (\n events.find(\n (e) =>\n enumIs(e.data, 'Player') &&\n enumIs(e.data.Player.event, 'PlayerMoved') &&\n e.data.Player.player.toText() != game.ownPlayer.principalText\n )\n ) {\n this.step = 'attack-an-enemy';\n this.save();\n }\n\n break;\n }\n }\n }\n\n /*\n Draw guide in the bottom left corner, on a 200x200 white rectangle\n\n The rect should have top header with the name \"Guide\"\n\n Inside the rect there should be the name of the Step, and a paragraph about what to do next.\n\n Some steps can include an image\n */\n draw(ctx: CanvasRenderingContext2D, game: ClientGame, renderer: Renderer) {\n let markers: Marker[] = [];\n switch (this.step) {\n case 'click-the-canvas':\n this.drawClickTheCanvas(ctx, game);\n break;\n case 'move-around':\n this.drawMoveAround(ctx, game);\n break;\n case 'find-a-weapon':\n markers.push(...this.drawFindAWeapon(ctx, game));\n break;\n\n case 'pick-up-a-weapon':\n markers.push(...this.drawPickUpWeapon(ctx, renderer));\n break;\n\n case 'go-in-a-brush':\n markers.push(...this.drawGoToABrush(ctx, renderer));\n break;\n\n case 'attack-an-enemy':\n this.killTheEnemy(ctx, renderer);\n break;\n }\n\n for (const marker of markers) {\n if (marker.type === 'POI') {\n const canvasCoords = renderer.toCanvasCoords(marker.x, marker.y);\n\n // draw assets.images.flag at coords\n ctx.drawImage(\n assets.images.flag,\n canvasCoords.x - renderer.tileSize / 2,\n canvasCoords.y - renderer.tileSize,\n renderer.tileSize,\n renderer.tileSize\n );\n } else if (marker.type === 'HudRegion') {\n // draw red rectangle\n\n ctx.strokeStyle = 'rgba(255,0,0,0.5)';\n ctx.lineWidth = 2;\n ctx.strokeRect(marker.x, marker.y, marker.width, marker.height);\n } else {\n unreachable(marker);\n }\n }\n }\n\n private static drawMultiLineText(\n ctx: CanvasRenderingContext2D,\n text: string,\n x: number,\n y: number,\n lineHeight: number\n ) {\n const lines = text.split('\\n');\n lines.forEach((line, i) => {\n ctx.fillText(line, x, y + i * lineHeight);\n });\n }\n\n private static drawBox(\n ctx: CanvasRenderingContext2D,\n x: number,\n y: number,\n width: number,\n height: number,\n margin: number,\n padding: number,\n title: string,\n text: string\n ) {\n ctx.fillStyle = 'rgba(255,255,255,0.8)';\n ctx.fillRect(x, y, width, height);\n\n ctx.fillStyle = 'black';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'top';\n ctx.font = 'bold 16px sans-serif';\n ctx.fillText(title, x + width / 2, y + padding);\n\n ctx.font = '16px sans-serif';\n Guide.drawMultiLineText(ctx, text, x + width / 2, y + 50, 20);\n }\n\n private drawClickTheCanvas(ctx: CanvasRenderingContext2D, game: ClientGame) {\n const width = 300,\n height = 120,\n margin = 20,\n padding = 20,\n x = ctx.canvas.width / 2 - width / 2,\n y = ctx.canvas.height / 2 - height - margin;\n\n Guide.drawBox(\n ctx,\n x,\n y,\n width,\n height,\n margin,\n padding,\n 'Welcome to the game!',\n 'Click on the screen to\\nstart moving your character.'\n );\n }\n\n private drawMoveAround(ctx: CanvasRenderingContext2D, game: ClientGame) {\n const width = 300,\n height = 140,\n margin = 20,\n padding = 20,\n x = ctx.canvas.width / 2 - width / 2,\n y = ctx.canvas.height - 120 - height;\n\n Guide.drawBox(\n ctx,\n x,\n y,\n width,\n height,\n margin,\n padding,\n 'Move around!',\n `Click around to start moving.\\nPlan your path ahead to move\\nefficiently.`\n );\n }\n\n private drawFindAWeapon(\n ctx: CanvasRenderingContext2D,\n game: ClientGame\n ): Marker[] {\n const markers: Marker[] = [];\n\n const width = 300,\n height = 150,\n margin = 20,\n padding = 20,\n x = ctx.canvas.width / 2 - width / 2,\n y = ctx.canvas.height - 120 - height;\n\n Guide.drawBox(\n ctx,\n x,\n y,\n width,\n height,\n margin,\n padding,\n 'Find a weapon!',\n `Very good!\\nNow go find a weapon as soon as\\npossible. A pistol or a knife will do.\\nYou can find one in a house.`\n );\n\n markers.push({\n type: 'POI',\n x: 36,\n y: 10,\n });\n\n return markers;\n }\n\n private drawPickUpWeapon(\n ctx: CanvasRenderingContext2D,\n renderer: Renderer\n ): Marker[] {\n const markers: Marker[] = [];\n\n const width = 300,\n height = 150,\n margin = 20,\n padding = 20,\n x = ctx.canvas.width / 2 - width / 2,\n y = ctx.canvas.height - 120 - height;\n\n Guide.drawBox(\n ctx,\n x,\n y,\n width,\n height,\n margin,\n padding,\n 'Pick up the pistol!',\n `Quickly! Pick up the pistol and\\nget out of there!`\n );\n\n const canvasCoords = renderer.toCanvasCoords(34, 9);\n\n markers.push({\n type: 'HudRegion',\n x: canvasCoords.x - (renderer.tileSize * 1.5) / 2,\n y: canvasCoords.y - (renderer.tileSize * 1.5) / 2,\n width: renderer.tileSize * 1.5,\n height: renderer.tileSize * 1.5,\n });\n\n return markers;\n }\n\n private drawGoToABrush(\n ctx: CanvasRenderingContext2D,\n renderer: Renderer\n ): Marker[] {\n const markers: Marker[] = [];\n\n const width = 300,\n height = 150,\n margin = 20,\n padding = 20,\n x = ctx.canvas.width / 2 - width / 2,\n y = ctx.canvas.height - 120 - height;\n\n Guide.drawBox(\n ctx,\n x,\n y,\n width,\n height,\n margin,\n padding,\n 'Hide in a brush',\n `Go hide in a brush and wait for\\nan enemy to come by. As long as\\nyou are in a brush, enemies outside\\ncannot see you.`\n );\n\n markers.push({\n type: 'POI',\n x: 38,\n y: 30,\n });\n\n return markers;\n }\n\n private killTheEnemy(ctx: CanvasRenderingContext2D, renderer: Renderer) {\n const width = 300,\n height = 55,\n margin = 20,\n padding = 20,\n x = ctx.canvas.width - padding - width,\n y = padding;\n\n Guide.drawBox(\n ctx,\n x,\n y,\n width,\n height,\n margin,\n padding,\n 'Kill the enemy!',\n ``\n );\n }\n}\n\nexport const guide = writable(new Guide());\n","\n\n{#if armor.modifiers.length > 0}\nImproved Armor
\n\n Provides {armor.armor.toFixed(0)}{#if stats.armor !== 0}\n +{stats.armor.toFixed(0)}\n {/if}\n armor, which reduces incoming damage.\n
\n\n
\n\n {#if extra}\n \n {extra}\n
\n {/if}\n{:else}\nArmor
\nReduces incoming damage.
\n {#if extra}\n\n {extra}\n
\n {/if}\n{/if}\n","\n\n{#if boots.modifiers.length > 0}\nImproved Boots
\n\n Increases movement speed by {boots.speed.toFixed(\n 0\n )}{#if stats.moveSpeed !== 0}\n +{stats.moveSpeed.toFixed(0)}\n {/if}\n points.\n
\n\n
\n\n {#if extra}\n \n {extra}\n
\n {/if}\n{:else}\nBoots
\n\n Increases movement speed by {(boots.speed * 100).toFixed(0)} points.\n
\n {#if extra}\n\n {extra}\n
\n {/if}\n{/if}\n","\n\n\n\n\n\n\n leaveGame()}\n class=\"btn btn-xs btn-primary {leaving && 'loading'}\"\n disabled={leaving}>Leave game \n
\n\n{#if $tooltip}\n MedKit
\n\n Restores {$tooltip.item.item_type.MedKit.health} health.\n
\n {#if $tooltip.extra}\n {$tooltip.extra}\n
{/if}\n {:else if enumIs($tooltip.item.item_type, 'Pistol')}\nGrenade
\n\n Explodes after throwing at a target location, dealing {$tooltip.item.item_type.Grenade.damage.toFixed(\n 0\n )} damage.\n
\n {#if $tooltip.extra}\n {$tooltip.extra}\n
{/if}\n {:else if enumIs($tooltip.item.item_type, 'Armor')}\nEnergy Drink
\n\n Temporarily increases movement and attack speed.\n
\n\n {#if $tooltip.extra}\n {$tooltip.extra}\n
{/if}\n {:else}\n {unreachable($tooltip.item.item_type)}\n {/if}\n {:else if $tooltip.type === 'stance'}\n {#if enumIs($tooltip.stance, 'Defensive')}\nDefensive Stance
\n\n Move without attacking enemies. Use when you need to reposition\n quickly or flee to safety.\n
\n {#if $tooltip.extra}\n {$tooltip.extra}\n
{/if}\n {:else if enumIs($tooltip.stance, 'Offensive')}\nOffensive Stance
\n\n Attack enemies on sight. Use to ambush enemies, defend a position, or\n chase down a fleeing enemy.\n
\n {#if $tooltip.extra}\n {$tooltip.extra}\n
{/if}\n {:else}\n {unreachable($tooltip.stance)}\n {/if}\n {:else}\n {unreachable($tooltip)}\n {/if}\n \n{/if}\n","\n
\n\n\n
\n \n A fast-paced 2D multiplayer shooter. Outwit, outgear, and outlast your\n opponents. It's all about thinking a few steps ahead. Upgrade weapons,\n toss grenades, and pull off sneaky ambushes.\n
\n\n
\nHow to play
\n\n\n
\n \n
\n\n \n ![\"\"](\"/images/tutorial/plan.jpg\")
\n
\n \n \n
\n Plan your moves ahead
\n\n Plan ahead and anticipate the movements of your enemies to ensure\n your actions land as intended. Switch to offensive stance when\n you're ready to attack enemies on sight, or switch to defensive\n stance to avoid combat and focus on exploring the environment.\n
\n\n
\n\n \n
\n Gear up quickly
\n\n The map is filled with randomly placed items that will help you\n survive and outplay your opponents. Prioritize finding a weapon as\n soon as you spawn. Also, don't forget to look for utility items. The\n more boots you pick up, the faster you move. Medkits will restore\n your health. Houses often contain a lot of these items, so don't\n hesitate to venture inside!\n\n
\n\n Collecting more of the same items will upgrade them to a more\n powerful version.\n
\n ![\"\"](\"/images/tutorial/items.webp\")
\n
\n \n \n
\n \n ![\"\"](\"/images/tutorial/ambush.webp\")
\n
\n \n \n
\n \n Use the environment to your advantage\n
\n\n Stealth is key in this game. Hide in brushes to ambush unsuspecting\n enemies. Remember to adapt your strategy based on the weapon you\n find and your spawn location on the map. Exploit the environment and\n play smart to outmaneuver your opponents.\n
\n\n
\n \n
\n \n Survive the constricting battlefield\n
\n\n As the game progresses, the map will start to shrink, Battle Royale\n style. Stay clear of the toxic zone that forms at the map edges.\n Make sure to keep moving towards the center of the map while keeping\n a close eye on your enemies. Your ultimate goal is to be the last\n survivor.\n
\n\n
\n \n created by @olaszakos\n
\n","\n\n\n {#if state.gameInProgress}\n \n {:else if state.players.length < 2}\n
\n \n \n {#each state.players as player}\n {player.name} \n {/each}\n \n
\n \n \n Players\n \n Leave Lobby \n
\n \n \n Chat\n \n \n \n {#each state.chat as msg}\n
\n \n
\n {/each}\n \n {new Date(Number(msg.timestamp / 1000000n)).toLocaleTimeString()}\n
\n {msg.name}
\n {msg.message}
\n \n Join lobby \n\n
\n \n\n \n playTutorial()}\n class=\"btn btn-outline {startingTutorial && 'loading'} flex-1\"\n disabled={startingTutorial}>Play the tutorial \n
\n\n Or play the tutorial
\n\n You're logged in as {auth.client.getIdentity().getPrincipal().toString()}\n
\n