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