Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix interaction in the Chess example #65

Merged
merged 7 commits into from
Jun 18, 2023
Merged

Fix interaction in the Chess example #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
03f1076
Define the board as one item.
mvanderkamp Jun 18, 2023
5d23272
Spawn pieces as canvas images instead of HTML elements
mvanderkamp Jun 18, 2023
19cfd6c
Simplifications and reorganization
mvanderkamp Jun 18, 2023
69e36d2
Fix inverted player indexes
mvanderkamp Jun 18, 2023
ac90394
Show each player their pieces as upright
mvanderkamp Jun 18, 2023
d4b1b40
Apply some of the same cleanup to the checkers example
mvanderkamp Jun 18, 2023
7391dc7
Fix formatting
mvanderkamp Jun 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 40 additions & 31 deletions examples/checkers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,36 @@ const app = new WAMS.Application({
app.addStaticDirectory(path.join(__dirname, 'img', 'Chips'));

const SQUARE_LENGTH = 64;
function squareSequence(x, y, colour) {
const seq = new WAMS.CanvasSequence();
seq.fillStyle = colour;
seq.fillRect(0, 0, SQUARE_LENGTH, SQUARE_LENGTH);
return seq;
const SQUARES_PER_SIDE = 10;
const TOTAL_BOARD_LENGTH = SQUARE_LENGTH * SQUARES_PER_SIDE;

/**
* Add a square to the canvas.
*/
function addSquare(canvas, x, y, colour) {
canvas.fillStyle = colour;
canvas.fillRect(x, y, SQUARE_LENGTH, SQUARE_LENGTH);
}

const BASE = 0;
for (let i = 0; i < 10; i += 1) {
for (let j = 0; j < 10; j += 1) {
const colour = (i + j) % 2 === 0 ? 'white' : 'black';
const x = BASE + j * SQUARE_LENGTH;
const y = BASE + i * SQUARE_LENGTH;

app.spawn({
x,
y,
type: 'item',
sequence: squareSequence(x, y, colour),
});
function board(x, y) {
const sequence = new WAMS.CanvasSequence();
const base = 0;
for (let i = 0; i < SQUARES_PER_SIDE; ++i) {
for (let j = 0; j < SQUARES_PER_SIDE; ++j) {
const colour = (i + j) % 2 === 0 ? 'white' : 'grey';
const x = base + j * SQUARE_LENGTH;
const y = base + i * SQUARE_LENGTH;
addSquare(sequence, x, y, colour);
}
}
return {
x: 0,
y: 0,
type: 'item',
sequence: sequence,
};
}

const TOTAL_BOARD_LENGTH = SQUARE_LENGTH * 10;

function handleTokenDrag(event, tokenOwnerIdx) {
if (event.view.index === tokenOwnerIdx) {
WAMS.predefined.actions.drag(event);
Expand All @@ -65,17 +70,19 @@ function spawnToken(x, y, userIdx, properties = {}) {
token.on('drag', (e) => handleTokenDrag(e, userIdx));
}

for (let i = 0; i < 10; i += 1) {
for (let j = 0; j < 10; j += 1) {
const colour = (i + j) % 2 === 0 ? 'white' : 'black';
const x = BASE + j * SQUARE_LENGTH;
const y = BASE + i * SQUARE_LENGTH;

if (colour === 'black') {
if (i < 4) {
spawnToken(x, y, 1);
} else if (i > 5) {
spawnToken(x, y, 0);
function spawnTokens() {
for (let i = 0; i < 10; i += 1) {
for (let j = 0; j < 10; j += 1) {
const colour = (i + j) % 2 === 0 ? 'white' : 'black';
const x = j * SQUARE_LENGTH;
const y = i * SQUARE_LENGTH;

if (colour === 'black') {
if (i < 4) {
spawnToken(x, y, 1);
} else if (i > 5) {
spawnToken(x, y, 0);
}
}
}
}
Expand All @@ -100,5 +107,7 @@ function handleConnect({ view }) {
view.on('rotate', WAMS.predefined.actions.rotate);
}

app.spawn(board(0, 0));
spawnTokens();
app.on('connect', handleConnect);
app.listen(9000);
226 changes: 107 additions & 119 deletions examples/chess.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,172 +6,160 @@

'use strict';

const WAMS = require('..');
const path = require('path');
const WAMS = require('..');
const { actions, items } = WAMS.predefined;

const app = new WAMS.Application({
color: 'peru', // background color of the app
clientLimit: 2, // maximum number of devices that can connect to the app
shadows: true, // show shadows of other devices
status: true,
title: 'Chess using Wams', // page title
});
app.addStaticDirectory(path.join(__dirname, 'img', 'chess_pieces'));

const SQUARE_LENGTH = 64; // No. of squares required
const SQUARE_LENGTH = 64;
const SQUARES_PER_SIDE = 8;
const TOTAL_BOARD_LENGTH = SQUARE_LENGTH * SQUARES_PER_SIDE;

/* Function to black white & black squares on the board */
function squareSequence(x, y, colour) {
const seq = new WAMS.CanvasSequence();
seq.fillStyle = colour;
seq.fillRect(0, 0, SQUARE_LENGTH, SQUARE_LENGTH);
return seq;
/**
* Add a square to the canvas.
*/
function addSquare(canvas, x, y, colour) {
canvas.fillStyle = colour;
canvas.fillRect(x, y, SQUARE_LENGTH, SQUARE_LENGTH);
}

const BASE = 0;
for (let i = 0; i < 8; ++i) {
for (let j = 0; j < 8; ++j) {
const colour = (i + j) % 2 === 0 ? 'white' : 'grey';
const x = BASE + j * SQUARE_LENGTH;
const y = BASE + i * SQUARE_LENGTH;

app.spawn({
x,
y,
type: 'item',
sequence: squareSequence(x, y, colour),
});
function board(x, y) {
const sequence = new WAMS.CanvasSequence();
const base = 0;
for (let i = 0; i < SQUARES_PER_SIDE; ++i) {
for (let j = 0; j < SQUARES_PER_SIDE; ++j) {
const colour = (i + j) % 2 === 0 ? 'white' : 'grey';
const x = base + j * SQUARE_LENGTH;
const y = base + i * SQUARE_LENGTH;
addSquare(sequence, x, y, colour);
}
}
return {
x: 0,
y: 0,
type: 'item',
sequence: sequence,
};
}

const TOTAL_BOARD_LENGTH = SQUARE_LENGTH * 8;
const BLACK_PLAYER_IDX = 1;
const WHITE_PLAYER_IDX = 0;

/* Function to handle interaction rights between devices to drag pieces on board */
function handleTokenDrag(e, tokenOwnerIdx) {
if (e.view.index !== tokenOwnerIdx) {
WAMS.predefined.actions.drag(e);
function handleTokenDrag(event, tokenOwnerIdx) {
if (event.view.index === tokenOwnerIdx) {
actions.drag(event);
}
}

const Pieces = {
PAWN: 0,
ROOK: 1,
KNIGHT: 2,
BISHOP: 3,
QUEEN: 4,
KING: 5,
};
const WhitePieceImages = {
[Pieces.PAWN]: 'White_pawn.png',
[Pieces.ROOK]: 'White_Rook.png',
[Pieces.KNIGHT]: 'White_Knight.png',
[Pieces.BISHOP]: 'White_Bishop.png',
[Pieces.QUEEN]: 'White_Queen.png',
[Pieces.KING]: 'White_King.png',
};
const BlackPieceImages = {
[Pieces.PAWN]: 'Black_pawn.png',
[Pieces.ROOK]: 'Black_Rook.png',
[Pieces.KNIGHT]: 'Black_Knight.png',
[Pieces.BISHOP]: 'Black_Bishop.png',
[Pieces.QUEEN]: 'Black_Queen.png',
[Pieces.KING]: 'Black_King.png',
};

/* Function to spawn pieces at right place on board */
function spawnToken(x, y, userIdx, tokenIdx, properties = {}) {
function spawnToken(x, y, userIdx, tokenIdx) {
let imgUrl = null;
let type = null;

// For Black pieces
if (userIdx === 0) {
if (tokenIdx === 0) {
imgUrl = 'Black_pawn.png';
type = 'black-token';
} else if (tokenIdx === 1) {
imgUrl = 'Black_Rook.png';
type = 'black-token';
} else if (tokenIdx === 2) {
imgUrl = 'Black_Knight.png';
type = 'black-token';
} else if (tokenIdx === 3) {
imgUrl = 'Black_Bishop.png';
type = 'black-token';
} else if (tokenIdx === 4) {
imgUrl = 'Black_Queen.png';
type = 'black-token';
} else if (tokenIdx === 5) {
imgUrl = 'Black_King.png';
type = 'black-token';
}
}

// For White pieces
else if (userIdx === 1) {
if (tokenIdx === 0) {
imgUrl = 'White_pawn.png';
type = 'white-token';
} else if (tokenIdx === 1) {
imgUrl = 'White_Rook.png';
type = 'white-token';
} else if (tokenIdx === 2) {
imgUrl = 'White_Knight.png';
type = 'white-token';
} else if (tokenIdx === 3) {
imgUrl = 'White_Bishop.png';
type = 'white-token';
} else if (tokenIdx === 4) {
imgUrl = 'White_Queen.png';
type = 'white-token';
} else if (tokenIdx === 5) {
imgUrl = 'White_King.png';
type = 'white-token';
}
switch (userIdx) {
case BLACK_PLAYER_IDX:
imgUrl = BlackPieceImages[tokenIdx];
// Correct position for rotation
x += SQUARE_LENGTH;
y += SQUARE_LENGTH;
break;
case WHITE_PLAYER_IDX:
imgUrl = WhitePieceImages[tokenIdx];
break;
default:
throw new Error('Invalid user index');
}

const token = app.spawn(
WAMS.predefined.items.html(
`<div><img src="${imgUrl}" width="${SQUARE_LENGTH}" height="${SQUARE_LENGTH}" /></div>`,
SQUARE_LENGTH,
SQUARE_LENGTH,
{
x,
y,
width: SQUARE_LENGTH,
height: SQUARE_LENGTH,
type,
ownerIdx: userIdx,
// rotation: event => handleRotate(event),
...properties,
}
)
items.image(imgUrl, {
x,
y,
width: SQUARE_LENGTH,
height: SQUARE_LENGTH,
ownerIdx: userIdx,
rotation: userIdx === BLACK_PLAYER_IDX ? Math.PI : 0,
})
);
token.on('drag', (e) => handleTokenDrag(e, userIdx));
}

// Spawning all pieces iteratively
for (let i = 0; i < 8; ++i) {
for (let j = 0; j < 8; ++j) {
const x = j * SQUARE_LENGTH;
const y = i * SQUARE_LENGTH;

// spawning black pawns
if (i === 1) spawnToken(x, y, 0, 0);
// spawning white pawns
else if (i === 6) spawnToken(x, y, 1, 0);
// spawning rest of the black pieces
else if (i === 0) {
if (j === 0 || j === 7) spawnToken(x, y, 0, 1); // rooks
else if (j === 1 || j === 6) spawnToken(x, y, 0, 2); // knights
else if (j === 2 || j === 5) spawnToken(x, y, 0, 3); // bishops
else if (j === 3) spawnToken(x, y, 0, 4); // Queen
else spawnToken(x, y, 0, 5); // King
}
// spawning rest of the white pieces
else if (i === 7) {
if (j === 0 || j === 7) spawnToken(x, y, 1, 1); // rooks
else if (j === 1 || j === 6) spawnToken(x, y, 1, 2); // knights
else if (j === 2 || j === 5) spawnToken(x, y, 1, 3); // bishops
else if (j === 3) spawnToken(x, y, 1, 4); // Queen
else spawnToken(x, y, 1, 5); // King
}
function spawnPawns(row, userIdx) {
const y = row * SQUARE_LENGTH;
for (let column = 0; column < SQUARES_PER_SIDE; ++column) {
spawnToken(column * SQUARE_LENGTH, y, userIdx, Pieces.PAWN);
}
}

/* Function to place board at center of the device view */
function spawnPowerPieces(row, userIdx) {
const y = row * SQUARE_LENGTH;
spawnToken(0, y, userIdx, Pieces.ROOK);
spawnToken(7 * SQUARE_LENGTH, y, userIdx, Pieces.ROOK);
spawnToken(1 * SQUARE_LENGTH, y, userIdx, Pieces.KNIGHT);
spawnToken(6 * SQUARE_LENGTH, y, userIdx, Pieces.KNIGHT);
spawnToken(2 * SQUARE_LENGTH, y, userIdx, Pieces.BISHOP);
spawnToken(5 * SQUARE_LENGTH, y, userIdx, Pieces.BISHOP);
spawnToken(3 * SQUARE_LENGTH, y, userIdx, Pieces.QUEEN);
spawnToken(4 * SQUARE_LENGTH, y, userIdx, Pieces.KING);
}

/* Function to place board at center of the view */
function centerViewNormal(view) {
view.moveTo(
-(view.bottomRight.x - view.bottomLeft.x - TOTAL_BOARD_LENGTH) / 2,
-(view.bottomRight.y - view.topRight.y - TOTAL_BOARD_LENGTH) / 2
);
}

/* Function to place board at center of the device view */
/* Function to place board at center of the view */
function handleConnect({ view }) {
if (view.index === 1) {
if (view.index === BLACK_PLAYER_IDX) {
view.rotateBy(Math.PI);
}

centerViewNormal(view);

view.on('drag', WAMS.predefined.actions.drag);
view.on('pinch', WAMS.predefined.actions.pinch);
view.on('rotate', WAMS.predefined.actions.rotate);
view.on('drag', actions.drag);
view.on('pinch', actions.pinch);
view.on('rotate', actions.rotate);
}

app.spawn(board(0, 0));
spawnPowerPieces(0, BLACK_PLAYER_IDX);
spawnPawns(1, BLACK_PLAYER_IDX);
spawnPawns(6, WHITE_PLAYER_IDX);
spawnPowerPieces(7, WHITE_PLAYER_IDX);

app.on('connect', handleConnect);
app.listen(9000);