Add resolution scaling to canvas.
This commit is contained in:
parent
86e92716be
commit
ca1d661e43
@ -351,8 +351,8 @@ const INTERFACE = {
|
||||
},
|
||||
|
||||
resize() {
|
||||
let width = INTERFACE_DATA.canvas.width = INTERFACE_DATA.canvas.clientWidth;
|
||||
let height = INTERFACE_DATA.canvas.height = INTERFACE_DATA.canvas.clientHeight;
|
||||
let width = INTERFACE_DATA.canvas.width = INTERFACE_DATA.canvas.clientWidth * (window.devicePixelRatio || 1);
|
||||
let height = INTERFACE_DATA.canvas.height = INTERFACE_DATA.canvas.clientHeight * (window.devicePixelRatio || 1);
|
||||
|
||||
INTERFACE_DATA.Render.margin.t = Math.floor(Math.min(width, height) / 96);
|
||||
INTERFACE_DATA.Render.margin.l = 1.75 * INTERFACE_DATA.Render.margin.t;
|
||||
|
69
www/js/ui.js
69
www/js/ui.js
@ -238,28 +238,7 @@ const UI = {
|
||||
let dusk = UI.text(record.dusk);
|
||||
|
||||
let moves = document.createElement("canvas");
|
||||
setTimeout((canvas, moves) => {
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
let ctx = canvas.getContext("2d");
|
||||
|
||||
let size = canvas.height / 2;
|
||||
|
||||
for(let i = 0; i < moves.length; ++i) {
|
||||
let piece = moves[i] & 0x7;
|
||||
let promoted = (moves[i] & 0x8) >> 3;
|
||||
let player = (moves[i] & 0x10) >> 4;
|
||||
|
||||
let color = null;
|
||||
if(player == 0) { color = INTERFACE.Color.Dawn; } else { color = INTERFACE.Color.Dusk; }
|
||||
|
||||
let piece_name = GAME.Const.Piece[piece].name;
|
||||
if(promoted) {
|
||||
GAME_ASSET.Image.Promote.draw(ctx, canvas.height, [size * (1 + (2 * i)), size], INTERFACE.Color.Promote);
|
||||
}
|
||||
GAME_ASSET.Image[piece_name].draw(ctx, canvas.height, [size * (1 + (2 * i)), size], color);
|
||||
}
|
||||
}, 10, moves, record.moves);
|
||||
setTimeout(draw_play_icons, 10, moves, record.moves);
|
||||
|
||||
rows.push([
|
||||
dawn,
|
||||
@ -394,28 +373,7 @@ const UI = {
|
||||
}
|
||||
|
||||
let moves = document.createElement("canvas");
|
||||
setTimeout((canvas, moves) => {
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
let ctx = canvas.getContext("2d");
|
||||
|
||||
let size = canvas.height / 2;
|
||||
|
||||
for(let i = 0; i < moves.length; ++i) {
|
||||
let piece = moves[i] & 0x7;
|
||||
let promoted = (moves[i] & 0x8) >> 3;
|
||||
let player = (moves[i] & 0x10) >> 4;
|
||||
|
||||
let color = null;
|
||||
if(player == 0) { color = INTERFACE.Color.Dawn; } else { color = INTERFACE.Color.Dusk; }
|
||||
|
||||
let piece_name = GAME.Const.Piece[piece].name;
|
||||
if(promoted) {
|
||||
GAME_ASSET.Image.Promote.draw(ctx, canvas.height, [size * (1 + (2 * i)), size], INTERFACE.Color.Promote);
|
||||
}
|
||||
GAME_ASSET.Image[piece_name].draw(ctx, canvas.height, [size * (1 + (2 * i)), size], color);
|
||||
}
|
||||
}, 10, moves, record.moves);
|
||||
setTimeout(draw_play_icons, 10, moves, record.moves);
|
||||
|
||||
rows.push([
|
||||
dawn,
|
||||
@ -494,4 +452,27 @@ const UI = {
|
||||
b_resume.innerText = text;
|
||||
}
|
||||
},
|
||||
|
||||
draw_play_icons(canvas, moves) {
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
let ctx = canvas.getContext("2d");
|
||||
|
||||
let size = canvas.height / 2;
|
||||
|
||||
for(let i = 0; i < moves.length; ++i) {
|
||||
let piece = moves[i] & 0x7;
|
||||
let promoted = (moves[i] & 0x8) >> 3;
|
||||
let player = (moves[i] & 0x10) >> 4;
|
||||
|
||||
let color = null;
|
||||
if(player == 0) { color = INTERFACE.Color.Dawn; } else { color = INTERFACE.Color.Dusk; }
|
||||
|
||||
let piece_name = GAME.Const.Piece[piece].name;
|
||||
if(promoted) {
|
||||
GAME_ASSET.Image.Promote.draw(ctx, canvas.height, [size * (1 + (2 * i)), size], INTERFACE.Color.Promote);
|
||||
}
|
||||
GAME_ASSET.Image[piece_name].draw(ctx, canvas.height, [size * (1 + (2 * i)), size], color);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user