better reachable block calc

+ debug controls change
+ new debug option

README.md

@@ -5,19 +5,22 @@
 https://creelonestudios.github.io/tinymc/
 
 ### Controls
-`  [A] [D]  ` - walk left / right<br>
-`  [Space]  ` - jump / swim<br>
-`    [E]    ` - open / close container<br>
-`    [Q]    ` - drop item (ctrl to drop stack)<br>
-`    [C]    ` - open creative inventory<br>
-`[F1][F11]` - toggle fullscreen<br>
-`    [F3]   ` - toggle debug screen<br>
-`    [M]    ` - toggle hitboxes (shift to show coordinate origin + light levels)<br>
-`[LClick] ` - destroy block (shift to interact with back layer)<br>
-`[RClick] ` - place block or open container (shift to interact with back layer)<br>
-`  [Wheel]  ` - pick block
+- `[A]` `[D]`- walk left / right
+- `[Space]` - jump / swim
+- `[E]` - open / close container
+- `[Q]` - drop item (ctrl to drop stack)
+- `[C]` - open creative inventory
+- `[F1][F11]` - toggle fullscreen
+- `[F3]` - toggle debug screen
+  - +`[M]` - toggle hitboxes + coordinate origin
+  - +`[N]` - toggle player range / distance display
+  - +`[K]` - toggle air light levels
+
+- `[LeftClick]` - destroy block (shift to interact with back layer)
+- `[RightClick]` - place block or open container (shift to interact with back layer)
+- `[WheelClick]` - pick block
 
 #### Inventory Management
-`[LClick]` - pick up / place item<br>
-`[Shift]`+`[LClick]` - move stack between hotbar and container<br>
-`[1-5]` - swap item with specified hotbar slot
+- `[LeftClick]` - pick up / place item
+- `[Shift]`+`[LeftClick]` - move stack between hotbar and container
+- `[1-5]` - swap item with specified hotbar slot

src/block/Block.ts

@@ -89,7 +89,7 @@ export default class Block implements HasData {
 
 	draw(g: Graphics, x: number, y: number, z: number) {
 		if (this.def.id == "tiny:air") {
-			if (debug.showAirLightLevel) {
+			if (debug.showDebugScreen && debug.showAirLightLevel) {
 				overlayLightLevel(g, x, y, this.lightLevel)
 			}
 			return

src/main.ts

@@ -55,7 +55,7 @@ export const world = new World([-20, 20, -20, 20, -1, 1])
 export const player = new Player("jens", "TinyJens", 0)
 export const cam = new Cam(player)
 export const input = new Input()
-export let debug = { showHitboxes: false, showOrigin: false, showDebugScreen: false, showAirLightLevel: false }
+export let debug = { showHitboxes: false, showOrigin: false, showDebugScreen: false, showAirLightLevel: false, showRange: false }
 
 Hotbar.loadTexture()
 Container.loadTexture()
@@ -154,12 +154,12 @@ function draw() {
 	world.draw(graphics)
 
 	// hitboxes
-	if (debug.showHitboxes) {
+	if (debug.showDebugScreen && debug.showHitboxes) {
 		world.drawBoundingBoxes(graphics)
 	}
 
 	// origin / axis
-	if (debug.showOrigin) {
+	if (debug.showDebugScreen && debug.showOrigin) {
 		graphics.ctx.strokeStyle = "lime"
 		graphics.ctx.beginPath()
 		graphics.ctx.moveTo(0, -100)
@@ -170,7 +170,7 @@ function draw() {
 	}
 
 	const mouseBlock = getMouseBlock()
-	const reachable = mouseBlock.distanceTo(player.position) <= player.attributes.get("player.block_interaction_range")!
+	const reachable = isBlockReachable(mouseBlock)
 
 	// block highlight
 	{
@@ -185,6 +185,37 @@ function draw() {
 		graphics.restore()
 	}
 
+	// distance and player range (debug)
+	if (debug.showDebugScreen && debug.showRange) {
+		const range  = (player.attributes.get("player.block_interaction_range") || 0) * blockSize
+		graphics.lineWidth = 2
+		graphics.strokeStyle = "white"
+		graphics.fillStyle = "white"
+
+		const blockpos  = mouseBlock.add(new Dim2(0.5, 0.5))
+		const playerpos = player.position.copy().add(new Dim2(0, 1))
+
+		graphics.save()
+		graphics.translate(blockpos.x + 0.2, blockpos.y)
+		graphics.drawText(blockpos.distanceTo(playerpos).toFixed(2))
+		graphics.restore()
+
+		blockpos.scale(blockSize)
+		playerpos.scale(blockSize)
+		const {x, y} = playerpos
+
+		graphics.ctx.beginPath()
+		graphics.ctx.ellipse(x, -y, range, range, 0, 0, 2 * Math.PI)
+		graphics.ctx.stroke()
+
+		graphics.ctx.beginPath()
+		graphics.ctx.ellipse(blockpos.x,  -blockpos.y,  10, 10, 0, 0, 2 * Math.PI)
+		graphics.ctx.moveTo(blockpos.x,  -blockpos.y)
+		graphics.ctx.lineTo(playerpos.x, -playerpos.y)
+		graphics.ctx.ellipse(playerpos.x, -playerpos.y, 10, 10, 0, 0, 2 * Math.PI)
+		graphics.ctx.stroke()
+	}
+
 	graphics.restore()
 
 	// hotbar
@@ -254,8 +285,11 @@ export function getMousePos() {
 	)
 }
 
+function isBlockReachable(pos: Dim2) {
+	return pos.copy().add(new Dim2(0.5, 0.5)).distanceTo(player.position.copy().add(new Dim2(0, 1))) <= player.attributes.get("player.block_interaction_range")!
+}
+
 input.on("keydown", (key: string) => {
-	//console.log(key)
 	if (Container.showingInventory()) {
 		if (Container.onKey(key)) return
 	}
@@ -266,17 +300,6 @@ input.on("keydown", (key: string) => {
 	if (key == "Digit4") player.selectedItemSlot = 3
 	if (key == "Digit5") player.selectedItemSlot = 4
 
-	if (key == "KeyM") {
-		debug.showHitboxes = !debug.showHitboxes
-
-		// also show origin if shift is pressed
-		if (!debug.showHitboxes) debug.showOrigin = false
-		else if (input.pressed("ShiftLeft")) debug.showOrigin = true
-
-		// temp
-		debug.showAirLightLevel = debug.showOrigin
-	}
-
 	if (key == "KeyQ") {
 		const stack = player.selectedItem
 		const index = player.selectedItemSlot
@@ -318,6 +341,23 @@ input.on("keydown", (key: string) => {
 		debug.showDebugScreen = !debug.showDebugScreen
 	}
 
+	if (input.pressed("F3") && debug.showDebugScreen) {
+
+		if (key == "KeyN") {
+			debug.showRange = !debug.showRange
+		}
+
+		if (key == "KeyM") {
+			debug.showHitboxes = !debug.showHitboxes
+			debug.showOrigin = debug.showHitboxes
+		}
+
+		if (key == "KeyK") {
+			debug.showAirLightLevel = !debug.showAirLightLevel
+		}
+
+	}
+
 	if (key == "Space") {
 		if (!player.inFluid && player.onGround) player.motion.y = 0.35
 	}
@@ -346,7 +386,7 @@ input.on("click", (button: number) => {
 	const {x, y} = mouseBlock
 	let z = input.pressed("ShiftLeft") ? -1 : 0
 	const {block: frontBlock, z: frontZ} = getFirstBlock(world, x, y)
-	const reachable = mouseBlock.distanceTo(player.position) <= player.attributes.get("player.block_interaction_range")!
+	const reachable = isBlockReachable(mouseBlock)
 
 	switch (button) {
 		case 0:

src/texture/Texture.ts

@@ -7,10 +7,12 @@ export default class Texture {
 	static LOADED  = 1
 	static FAILED  = 2
 
-	private image: HTMLImageElement
+	readonly path: string
+	private readonly image: HTMLImageElement
 	#state: number
 
 	constructor(path: string) {
+		this.path = path
 		const img = new Image()
 		img.addEventListener("load", () => {
 			this.#state = Texture.LOADED
@@ -29,6 +31,14 @@ export default class Texture {
 		return this.#state
 	}
 
+	get width() {
+		return this.image.width
+	}
+
+	get height() {
+		return this.image.height
+	}
+
 	ready() {
 		return this.#state == Texture.LOADED
 	}