jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

table => tabletop

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-30 15:03:43 -08:00
parent e8f26a977a
commit d4993dbc62
3 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/public/assets/gfx/table.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 385 KiB

BIN
client/public/assets/original/table.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

60
client/src/Board.js
View File

@ -188,8 +188,8 @@ const Border = (board, border) => {
return border; return border;
}; };
const Table = (board) => { const Tabletop = (board) => {
const file = "table.png", const file = "tabletop.png",
image = loadImage(board, file); image = loadImage(board, file);
return image; return image;
@ -492,7 +492,7 @@ class Board extends React.Component {
this.pips = []; this.pips = [];
this.tiles = []; this.tiles = [];
this.borders = []; this.borders = [];
this.table = null; this.tabletop = null;
this.closest = { this.closest = {
info: {}, info: {},
tile: null, tile: null,
@ -937,7 +937,7 @@ class Board extends React.Component {
} }
drawFrame() { drawFrame() {
if (!this.canvas || !this.table) { if (!this.canvas || !this.tabletop) {
return; return;
} }
@ -954,55 +954,55 @@ class Board extends React.Component {
this.minSize = Math.min(this.canvas.height, this.canvas.width); this.minSize = Math.min(this.canvas.height, this.canvas.width);
/* /*
* Table tiling: * Tabletop tiling:
* Image width: 1080 * Image width: 1080
* Left start: 32 * Left start: 32
* Right edge: 1010 (1010 - 32 = 978) * Right edge: 1010 (1010 - 32 = 978)
* *
* If the view is wider than taller, then * If the view is wider than taller, then
*/ */
const tableLeft = 32 * this.table.width / 1080, const tabletopLeft = 32 * this.tabletop.width / 1080,
tableRight = 1010 * this.table.width / 1080, tabletopRight = 1010 * this.tabletop.width / 1080,
tableLeaf = 978 * this.table.width / 1080; tabletopLeaf = 978 * this.tabletop.width / 1080;
/* If view is taller than wide, tile the table vertically */ /* If view is taller than wide, tile the tabletop vertically */
ctx.save(); ctx.save();
if (this.canvas.height > this.canvas.width) { if (this.canvas.height > this.canvas.width) {
const tableHeight = this.canvas.width * this.table.height / this.table.width; const tabletopHeight = this.canvas.width * this.tabletop.height / this.tabletop.width;
for (let top = 0, step = 0; top < this.canvas.height; top += tableHeight, step++) { for (let top = 0, step = 0; top < this.canvas.height; top += tabletopHeight, step++) {
if (step % 2) { if (step % 2) {
ctx.save(); ctx.save();
ctx.translate(0, tableHeight - 1); ctx.translate(0, tabletopHeight - 1);
ctx.transform(1, 0, 0, -1, 0, 0); ctx.transform(1, 0, 0, -1, 0, 0);
ctx.drawImage(this.table, ctx.drawImage(this.tabletop,
0, 0, 0, 0,
this.table.width, this.table.height, this.tabletop.width, this.tabletop.height,
0, 0, this.canvas.width, this.canvas.width * this.table.height / this.table.width); 0, 0, this.canvas.width, this.canvas.width * this.tabletop.height / this.tabletop.width);
ctx.restore(); ctx.restore();
} else { } else {
ctx.drawImage(this.table, ctx.drawImage(this.tabletop,
0, 0, 0, 0,
this.table.width, this.table.height, this.tabletop.width, this.tabletop.height,
0, 0, 0, 0,
this.canvas.width, this.canvas.width * this.table.height / this.table.width); this.canvas.width, this.canvas.width * this.tabletop.height / this.tabletop.width);
} }
ctx.translate(0, tableHeight); ctx.translate(0, tabletopHeight);
} }
} else { } else {
//const tableWidth = this.canvas.height * this.table.width / this.table.height; //const tabletopWidth = this.canvas.height * this.tabletop.width / this.tabletop.height;
ctx.drawImage(this.table, ctx.drawImage(this.tabletop,
0, 0, 0, 0,
tableRight, this.table.height, tabletopRight, this.tabletop.height,
0, 0, 0, 0,
this.canvas.height * tableRight / this.table.height, this.canvas.height); this.canvas.height * tabletopRight / this.tabletop.height, this.canvas.height);
let left = this.canvas.height * tableRight / this.table.height; let left = this.canvas.height * tabletopRight / this.tabletop.height;
while (left < this.canvas.width) { while (left < this.canvas.width) {
ctx.drawImage(this.table, ctx.drawImage(this.tabletop,
tableLeft, 0, tabletopLeft, 0,
tableLeaf, this.table.height, tabletopLeaf, this.tabletop.height,
left, 0, left, 0,
this.canvas.height * tableLeaf / this.table.height, this.canvas.height); this.canvas.height * tabletopLeaf / this.tabletop.height, this.canvas.height);
left += this.canvas.height * tableLeaf / this.table.height; left += this.canvas.height * tabletopLeaf / this.tabletop.height;
} }
} }
ctx.restore(); ctx.restore();
@ -1307,7 +1307,7 @@ class Board extends React.Component {
this.pips = Pips(this); this.pips = Pips(this);
this.tiles = Tiles(this); this.tiles = Tiles(this);
this.table = Table(this); this.tabletop = Tabletop(this);
this.borders = this.game.borders.map((file) => { this.borders = this.game.borders.map((file) => {
return Border(this, file); return Border(this, file);