canvas integer scaling, html lang

L3P3 · Jan 5, 2024 · 3567f30 · 3567f30
1 parent 2df7b4d
commit 3567f30
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 14 deletions.
diff --git a/app-dev.html b/app-dev.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang=de>
 	<head>
 		<meta charset=utf-8>
 		<title>Minicraft (Roh)</title>

diff --git a/app-prod.html b/app-prod.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang=de>
 	<head>
 		<meta charset=utf-8>
 		<title>Minicraft (Gebaut)</title>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "minicraft",
-	"version": "0.9.2",
+	"version": "0.9.3",
 	"description": "voxel-based 3d game, written in javascript",
 	"homepage": "https://l3p3.de/minicraft",
 	"repository": {

diff --git a/src/app.css b/src/app.css
@@ -13,9 +13,9 @@ body {
 	font-family: Minecraft, sans-serif;
 	background: #333;
 	color: #ddd;
-	user-select: none;
 	-webkit-user-select: none;
 	-moz-user-select: none;
+	user-select: none;
 	cursor: default;
 	touch-action: none;
 }

diff --git a/src/game/c_game.js b/src/game/c_game.js
@@ -127,8 +127,9 @@ export default function Game({
 	), [config]);
 
 	hook_effect((width, height, ratio) => (
-		model.resolution_raw_x = Math_max(1, width * ratio),
-		model.resolution_raw_y = Math_max(1, height * ratio),
+		model.resolution_css_ratio = ratio,
+		model.resolution_raw_x = Math_max(1, width),
+		model.resolution_raw_y = Math_max(1, height),
 		game_resolution_update(model)
 	), [
 		frame.offsetWidth,

diff --git a/src/game/c_inventory.js b/src/game/c_inventory.js
@@ -136,7 +136,7 @@ export default function Inventory({
 
 	return tiles_data && [
 		node_dom('div[className=window]', null, [
-			node_dom('div[innerText=Inventory]'),
+			node_dom('div[innerText=Inventar]'),
 			game.player.gamemode === GAMEMODE_CREATIVE &&
 			node(Palette, {
 				slot_hand,

diff --git a/src/game/m_game.js b/src/game/m_game.js
@@ -58,7 +58,6 @@ import {
 	Math_log2,
 	Math_max,
 	Math_PI,
-	Math_round,
 	Number_,
 	setInterval_,
 } from '../etc/helpers.js';
@@ -117,6 +116,7 @@ export const game_create = (actions, frame_element, config) => {
 		messages: [],
 		player,
 		renderer: null,
+		resolution_css_ratio: 1,
 		resolution_raw_x: 1,
 		resolution_raw_y: 1,
 		resolution_x: 0,
@@ -153,8 +153,8 @@ export const game_save = model => {
 
 export const game_resolution_update = model => {
 	const {resolution_scaling} = model.config;
-	const x = Math_max(1, Math_round(model.resolution_raw_x / resolution_scaling));
-	const y = Math_max(1, Math_round(model.resolution_raw_y / resolution_scaling));
+	const x = Math_ceil(model.resolution_raw_x * model.resolution_css_ratio / resolution_scaling);
+	const y = Math_ceil(model.resolution_raw_y * model.resolution_css_ratio / resolution_scaling);
 
 	if (
 		x === model.resolution_x &&
@@ -200,10 +200,10 @@ export const game_mouse_catch = async model => {
 
 export const game_mouse_move = (model, event) => {
 	if (!model.world.flag_paused) {
-		const factor = model.config.mouse_sensitivity * Math_PI / Math_max(
+		const factor = model.config.mouse_sensitivity * Math_PI / (Math_max(
 			model.resolution_raw_x,
 			model.resolution_raw_y
-		);
+		) * model.resolution_css_ratio);
 		player_rotate(
 			model.player,
 			event.movementX * factor,

diff --git a/src/game/m_renderer.js b/src/game/m_renderer.js
@@ -26,6 +26,7 @@ import {
 	Math_floor,
 	Math_min,
 	Math_PI_180d,
+	Math_round,
 	Math_sin,
 	Math_sqrt,
 	number_padStart2,
@@ -490,11 +491,21 @@ export const renderer_render = (model, now) => {
 }
 
 export const renderer_canvas_init = model => {
+	const {
+		canvas_element,
+		game,
+	} = model;
 	(
 		model.canvas_surface = model.canvas_context.createImageData(
-			model.canvas_element.width = model.game.resolution_x,
-			model.canvas_element.height = model.game.resolution_y
+			canvas_element.width = game.resolution_x,
+			canvas_element.height = game.resolution_y
 		)
 	).data.fill(0xff);
+	const canvas_width = game.resolution_x * game.config.resolution_scaling / game.resolution_css_ratio;
+	const canvas_height = game.resolution_y * game.config.resolution_scaling / game.resolution_css_ratio;
+	canvas_element.style.width = canvas_width + 'px';
+	canvas_element.style.height = canvas_height + 'px';
+	canvas_element.style.left = Math_round((game.resolution_raw_x - canvas_width) / 2) + 'px';
+	canvas_element.style.top = Math_round((game.resolution_raw_y - canvas_height) / 2) + 'px';
 	model.canvas_context.fillStyle = 'rgba(255,255,255,.5)';
 }