1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
define(function (require) {
"use strict";
var activity = require('sugar-web/activity/activity'),
createjs = require('easel'),
Tween = require('tween'),
Preload = require('preload'),
$ = require('jquery'),
prototype = require('prototype'),
GraphicalBoard = require('graphical_board'),
TextZone = require('textzone');
var graphicalBoard,
textZone,
minDimisHeight;
// Manipulate the DOM only when it is ready.
require(['domReady!'], function (doc) {
// Initialize the activity.
activity.setup();
var canvas = doc.getElementById('gameZone'),
stage = new createjs.Stage(canvas),
toolbar_height = $('.toolbar').height(),
win_dim = new Array($(window).width(), $(window).height()),
gameZone_dim = new Array(win_dim[0], win_dim[1]-toolbar_height);
/*
I assume that we won't draw outside game zone.
Removing overflow, even auto, remove size overhead, so that the background is applied to the whole game zone area.
*/
$("#canvas").css("overflow", "hidden");
var canvasContext = $("#gameZone")[0].getContext("2d");
canvasContext.canvas.width = gameZone_dim[0];
canvasContext.canvas.height = gameZone_dim[1];
/*
Computing the least game zone dimension,
and the ratio of pieces images size.
*/
var minDim = gameZone_dim[0] < gameZone_dim[1] ?
gameZone_dim[0] : gameZone_dim[1];
minDimisHeight = gameZone_dim[1] <= gameZone_dim[0] ? true : false;
var boardOffset = 10;
var boardDim = (minDim - 2*boardOffset) * 0.6;
var textZoneMinDim = (minDim - 2*boardOffset) * 0.37;
var gap = (minDim - 2*boardOffset) * 0.03;
var cellDim = boardDim/8;
var picturesSizeRatio = cellDim/1000.0;
graphicalBoard = new GraphicalBoard([boardOffset, boardOffset], cellDim, stage);
if (minDimisHeight) {
textZone = new TextZone(boardOffset, boardOffset + cellDim * 8 + gap, 8 * cellDim, textZoneMinDim, 20 * cellDim / 50, "#2211CC", "#FFF", stage);
}
else {
textZone = new TextZone(boardOffset + cellDim * 8 + gap, boardOffset, textZoneMinDim, 8 * cellDim, 20 * cellDim / 50, "#2211CC", "#FFF", stage);
}
// Load images asynchronously
var piecesImages = {};
var loadingQueue = new createjs.LoadQueue(false);
loadingQueue.on("fileload", handleFileLoaded);
loadingQueue.on("complete", handleLoadingComplete);
loadingQueue.loadManifest([
{id:"wp", src:"../pictures/wp.png"},
{id:"wn", src:"../pictures/wn.png"},
{id:"wb", src:"../pictures/wb.png"},
{id:"wr", src:"../pictures/wr.png"},
{id:"wq", src:"../pictures/wq.png"},
{id:"wk", src:"../pictures/wk.png"},
{id:"bp", src:"../pictures/bp.png"},
{id:"bn", src:"../pictures/bn.png"},
{id:"bb", src:"../pictures/bb.png"},
{id:"br", src:"../pictures/br.png"},
{id:"bq", src:"../pictures/bq.png"},
{id:"bk", src:"../pictures/bk.png"}
]);
function handleFileLoaded(file){
var image = new createjs.Bitmap(file.item.src);
image.scaleX = picturesSizeRatio;
image.scaleY = picturesSizeRatio;
piecesImages[file.item.id] = image;
}
function handleLoadingComplete(){
graphicalBoard.addToStage();
textZone.addToStage();
textZone.changeTextTo("Here the white bishop can eat the black "+
"queen, because the black queen is on the bishop diagonal !");
var img1 = piecesImages.wb.clone();
img1.x = graphicalBoard.getFileX(2);
img1.y = graphicalBoard.getRankY(3);
stage.addChild(img1);
var img2 = piecesImages.bq.clone();
img2.x = graphicalBoard.getFileX(6);
img2.y = graphicalBoard.getRankY(7);
stage.addChild(img2);
stage.update();
}
});
});
|