diff --git a/app-dev.html b/app-dev.html index 344b577..fa79ed8 100755 --- a/app-dev.html +++ b/app-dev.html @@ -1,5 +1,5 @@ - + Minicraft (Roh) diff --git a/app-prod.html b/app-prod.html index f24f0f2..462b54a 100755 --- a/app-prod.html +++ b/app-prod.html @@ -1,5 +1,5 @@ - + Minicraft (Gebaut) diff --git a/package.json b/package.json index 44ffcff..3e4bab4 100644 --- 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 index 0464a8d..5a2500c 100644 --- 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 index 0b9f6c7..76882a0 100644 --- 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 index 1e9bda4..6b54eab 100644 --- 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 index d705089..b09a54a 100644 --- 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 index 128d293..397167b 100644 --- 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)'; }