3772 lignes
111 KiB
JavaScript
3772 lignes
111 KiB
JavaScript
function saveKeyHandler(newHandler)
|
|
{
|
|
var keyHandler, clickState;
|
|
|
|
keyHandler = document.onkeydown;
|
|
clickState = disableStageClickEvent();
|
|
document.onkeydown = newHandler;
|
|
|
|
return { keyHandler: keyHandler, clickState: clickState };
|
|
}
|
|
|
|
function restoreKeyHandler(stateObj)
|
|
{
|
|
document.onkeydown = stateObj.keyHandler;
|
|
if(stateObj.clickState) enableStageClickEvent();
|
|
}
|
|
|
|
function helpMenuClass(_stage, _bitmap, _editBitmap, _scale)
|
|
{
|
|
var HELP_BORDER_SIZE = 24;
|
|
|
|
var saveStateObj;
|
|
var playScale, curScale;
|
|
var stage, helpBitmap = [], bitmapId;
|
|
var helpBorder, helpBackground, versionText;
|
|
var startX, startY, menuX, menuY;
|
|
var closeBoxSize;
|
|
var callBackFun, callBackArgs;
|
|
var coverBackgroundObj, closeIcon;
|
|
|
|
stage = _stage;
|
|
helpBitmap[0] = _bitmap;
|
|
helpBitmap[1] = _editBitmap;
|
|
bitmapId = 0;
|
|
playScale = _scale;
|
|
|
|
this.showHelp = function(id, callback, scale, args)
|
|
{
|
|
curScale = scale;
|
|
if(typeof args == "undefined") args = null;
|
|
callBackFun = callback;
|
|
callBackArgs = args;
|
|
closeBoxSize = 12*curScale+2;
|
|
closeIcon = null;
|
|
bitmapId = id;
|
|
|
|
drawBackground();
|
|
drawHelpMenu();
|
|
drawCloseIcon(0);
|
|
stage.update();
|
|
|
|
saveStateObj = saveKeyHandler(helpKeyDown);
|
|
}
|
|
|
|
function drawBackground()
|
|
{
|
|
coverBackgroundObj = new createjs.Shape();
|
|
coverBackgroundObj.graphics.beginFill("black").drawRect(0, 0, stage.canvas.width, stage.canvas.height).endFill();
|
|
coverBackgroundObj.alpha = 0.3;
|
|
stage.addChild(coverBackgroundObj);
|
|
}
|
|
|
|
function removeBackground()
|
|
{
|
|
stage.removeChild(coverBackgroundObj);
|
|
}
|
|
|
|
function drawHelpMenu()
|
|
{
|
|
var borderSize = HELP_BORDER_SIZE * curScale;
|
|
var halfBorder = borderSize/2;
|
|
var bitmapW = helpBitmap[bitmapId].getBounds().width * curScale;
|
|
var bitmapH = helpBitmap[bitmapId].getBounds().height * curScale;
|
|
|
|
menuX = bitmapW + borderSize;
|
|
menuY = bitmapH + borderSize;
|
|
startX = (stage.canvas.width - menuX)/2;
|
|
startY = (stage.canvas.height - menuY)/2;
|
|
|
|
if(startX < 0) startX = 0;
|
|
if(startY < 0) startY = 0;
|
|
|
|
helpBorder = new createjs.Shape();
|
|
helpBackground = new createjs.Shape();
|
|
versionText = new createjs.Text(
|
|
"Ver " + VERSION + "." + AI_VERSION + "." + playScale
|
|
, (16*curScale) + "px Helvetica", "#FFF");
|
|
|
|
var helpG = helpBorder.graphics;
|
|
|
|
helpBorder.alpha = 0.8;
|
|
helpG.beginFill("#FF0").drawRoundRect(startX, startY, menuX, menuY, halfBorder).endFill();
|
|
|
|
|
|
var helpB = helpBackground.graphics;
|
|
|
|
helpBackground.alpha = 0.6;
|
|
helpB.beginFill("#190218")
|
|
.drawRoundRect(startX + halfBorder, startY + halfBorder, bitmapW, bitmapH, halfBorder/2).endFill();
|
|
|
|
|
|
helpBitmap[bitmapId].setTransform(startX + halfBorder, startY + halfBorder, curScale, curScale);
|
|
//helpBitmap.set({alpha:0.8});
|
|
|
|
versionText.x = startX + (menuX - versionText.getBounds().width-borderSize);
|
|
versionText.y = startY + (menuY - versionText.getBounds().height*2.5);
|
|
|
|
stage.addChild(helpBorder);
|
|
stage.addChild(helpBackground);
|
|
stage.addChild(helpBitmap[bitmapId]);
|
|
stage.addChild(versionText);
|
|
}
|
|
|
|
function removeHelpMenu()
|
|
{
|
|
stage.removeChild(versionText);
|
|
stage.removeChild(helpBitmap[bitmapId]);
|
|
stage.removeChild(helpBackground);
|
|
stage.removeChild(helpBorder);
|
|
}
|
|
|
|
function helpKeyDown(event)
|
|
{
|
|
if(!event){ event = window.event; } //cross browser issues exist
|
|
if(event.key == "Escape") {
|
|
closeHelpMenu();
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function drawCloseIcon(mouseOver)
|
|
{
|
|
var cycle, cross;
|
|
var alpha, cycColor, crosColor;
|
|
if(closeIcon == null) {
|
|
closeIcon = new createjs.Container();
|
|
cross = new createjs.Shape();
|
|
cycle = new createjs.Shape();
|
|
closeIcon.addChild(cycle, cross);
|
|
closeIcon.on("mouseover", handleMouseOver);
|
|
closeIcon.on("mouseout", handleMouseOut);
|
|
closeIcon.on("click", closeHelpMenu);
|
|
closeIcon.x = startX+menuX - closeBoxSize*3;
|
|
closeIcon.y = startY + closeBoxSize*2;
|
|
stage.enableMouseOver(30);
|
|
stage.addChild(closeIcon);
|
|
} else {
|
|
cycle = closeIcon.getChildAt(0);
|
|
cross = closeIcon.getChildAt(1);
|
|
}
|
|
if(mouseOver) {
|
|
alpha = 0.6;
|
|
cycColor = "red";
|
|
crosColor = "white";
|
|
} else {
|
|
alpha = 0.01;
|
|
cycColor = "gold";
|
|
crosColor = "white";
|
|
}
|
|
|
|
var g = cycle.graphics;
|
|
g.clear();
|
|
cycle.alpha = alpha;
|
|
g.beginFill(cycColor).dc(closeBoxSize/2, closeBoxSize/2, closeBoxSize*5/4);
|
|
|
|
g = cross.graphics;
|
|
g.clear();
|
|
//cross.alpha = 1;
|
|
g.setStrokeStyle(closeBoxSize/4).beginStroke(crosColor).moveTo(0,0)
|
|
.lineTo(closeBoxSize,closeBoxSize).closePath();
|
|
|
|
g.moveTo(closeBoxSize,0).lineTo(0,closeBoxSize).closePath();
|
|
|
|
stage.update();
|
|
}
|
|
|
|
function removeCloseIcon()
|
|
{
|
|
stage.removeChild(closeIcon);
|
|
}
|
|
|
|
function handleMouseOver(event)
|
|
{
|
|
stage.cursor = 'pointer';
|
|
drawCloseIcon(1);
|
|
}
|
|
|
|
function handleMouseOut(event)
|
|
{
|
|
stage.cursor = 'default';
|
|
drawCloseIcon(0);
|
|
}
|
|
|
|
function closeHelpMenu()
|
|
{
|
|
firstPlay = 0; // 01/12/2015
|
|
removeCloseIcon();
|
|
removeHelpMenu();
|
|
removeBackground();
|
|
stage.cursor = 'default';
|
|
stage.update();
|
|
stage.enableMouseOver(0);
|
|
restoreKeyHandler(saveStateObj);
|
|
if(callBackFun) setTimeout(function() { callBackFun(callBackArgs);}, 10); //add setTimeout just don't cause mouse event (click) cascade!
|
|
}
|
|
}
|
|
|
|
|
|
function closeIconClass(_width, _height, _stage, _scale, _activeColor, _callBack, _args)
|
|
{
|
|
var closeBoxSize = 12*_scale+2;
|
|
var closeIcon = null;;
|
|
|
|
drawCloseIcon(0);
|
|
return closeIcon; //must remove by contractor
|
|
|
|
function drawCloseIcon(mouseOver)
|
|
{
|
|
var cycle, cross;
|
|
var alpha, cycColor, crosColor;
|
|
if(closeIcon == null) {
|
|
closeIcon = new createjs.Container();
|
|
cross = new createjs.Shape();
|
|
cycle = new createjs.Shape();
|
|
closeIcon.addChild(cycle, cross);
|
|
closeIcon.on("mouseover", handleMouseOver);
|
|
closeIcon.on("mouseout", handleMouseOut);
|
|
closeIcon.on("click", handleMouseClick);
|
|
closeIcon.x = _width - closeBoxSize*3;
|
|
closeIcon.y = _height + closeBoxSize*2;
|
|
//_stage.enableMouseOver(30);
|
|
_stage.addChild(closeIcon);
|
|
} else {
|
|
cycle = closeIcon.getChildAt(0);
|
|
cross = closeIcon.getChildAt(1);
|
|
}
|
|
if(mouseOver) {
|
|
alpha = 1;
|
|
cycColor = _activeColor;
|
|
crosColor = "white";
|
|
} else {
|
|
alpha = 0.01;
|
|
cycColor = _activeColor;
|
|
crosColor = "white";
|
|
}
|
|
|
|
var g = cycle.graphics;
|
|
g.clear();
|
|
cycle.alpha = alpha;
|
|
g.beginFill(cycColor).dc(closeBoxSize/2, closeBoxSize/2, closeBoxSize*5/4);
|
|
|
|
g = cross.graphics;
|
|
g.clear();
|
|
//cross.alpha = 1;
|
|
g.setStrokeStyle(closeBoxSize/4).beginStroke(crosColor).moveTo(0,0)
|
|
.lineTo(closeBoxSize,closeBoxSize).closePath();
|
|
|
|
g.moveTo(closeBoxSize,0).lineTo(0,closeBoxSize).closePath();
|
|
|
|
_stage.update();
|
|
|
|
}
|
|
|
|
function handleMouseOver(event)
|
|
{
|
|
_stage.cursor = 'pointer';
|
|
drawCloseIcon(1);
|
|
}
|
|
|
|
function handleMouseOut(event)
|
|
{
|
|
_stage.cursor = 'default';
|
|
drawCloseIcon(0);
|
|
}
|
|
|
|
function handleMouseClick(event)
|
|
{
|
|
_stage.cursor = 'default';
|
|
if(_callBack) setTimeout(function(){_callBack(_args);},10);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// -+-- +-------------------------------------------------------------+
|
|
// TOP_BORDER1 | | Lode Runner 1 |
|
|
// | | |
|
|
// -+-- | #-----------+-----------+ |
|
|
// TOP_BORDER2 | | | 001 - 030 | 031 - 060 | |
|
|
// -+-- | +-----------+-----------+-----------------------------+ |
|
|
// BORDER2 | | | | |
|
|
// -+-- | | +---------------------------------------------+ | |
|
|
// | | | 001 002 003 | | |
|
|
// | | | +----------+ +----------+ +----------+ | | |
|
|
// | | | | | | | | | | | |
|
|
// | | | | | | | | | | | |
|
|
// | | | +----------+ +----------+ +----------+ | | |
|
|
// | | | 004 005 006 | | |
|
|
// | | | +----------+ +----------+ +----------+ | | |
|
|
// | | | | | | | | | | | |
|
|
// | | | | | | | | | | | |
|
|
// | | | +----------+ +----------+ +----------+ | | |
|
|
// -+-- | | +---------------------------------------------+ | |
|
|
// BORDER2 | | | | |
|
|
// -+-- | +-----------------------------------------------------+ |
|
|
// BORDER1 | | |
|
|
// -+-- +-------------------------------------------------------------+
|
|
// |<1>|<2>|
|
|
//
|
|
// # : (TABS_START_X, TABS_START_Y)
|
|
// <1> : BORDER1
|
|
// <2> : BORDER2
|
|
//
|
|
//
|
|
//
|
|
// |< 3 >| |<4>|<4>|
|
|
// -+- +--------------------------------------------------------+ -+-
|
|
// SLIDE_GAP_Y | | 001 | 002 | 003 | |
|
|
// -+- | +----------+ +----------+ +----------+ |
|
|
// SELECT_SIZE_Y | | | | | | | | | | |
|
|
// | | | | | | | | |
|
|
// -+- | +----------+ | +----------+ | +----------+ |
|
|
// SLIDE_GAP_Y1 | | |
|
|
// -+- | - - - - - - - - | - - - - - - - - | - - - - - - - - | SLIDE_AREA_Y
|
|
// | 004 005 006 |
|
|
// | +----------+ | +----------+ | +----------+ |
|
|
// | | | | | | | |
|
|
// | | | | | | | | | |
|
|
// | +----------+ +----------+ +----------+ |
|
|
// | | | | |
|
|
// +--------------------------------------------------------+ -+-
|
|
//
|
|
// |< SLIDE_AREA_X >|
|
|
//
|
|
//
|
|
// < 3 > : SELECT_SIZE_X
|
|
// < 4 > : SLIDE_GAP_X
|
|
|
|
|
|
function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _screenX1, _screenY1,
|
|
_parentStage, _scale, _activeFun, _closeFun, _postFun)
|
|
{
|
|
var TITLE_TEXT_SIZE = 36 * _scale;
|
|
var TABS_TEXT_SIZE = 20 * _scale;
|
|
|
|
var TOP_BORDER1 = TITLE_TEXT_SIZE * 2 | 0; //new: *2, old: *3/2
|
|
var TOP_BORDER2 = TABS_TEXT_SIZE * 3/2 | 0;
|
|
var BORDER1 = 20 * _scale;
|
|
var BORDER2 = 16 * _scale;
|
|
var TABS_START_X = BORDER1;
|
|
var TABS_START_Y = TOP_BORDER1;
|
|
|
|
var MAP_SCALE = _scale * 0.2;
|
|
var SELECT_SIZE_X = NO_OF_TILES_X*BASE_TILE_X*MAP_SCALE;
|
|
var SELECT_SIZE_Y = NO_OF_TILES_Y*BASE_TILE_Y*MAP_SCALE;
|
|
var SLIDE_PAGE_ITEMS = 3 * 10;
|
|
var SLIDE_GAP_X = BASE_TILE_X * _scale * 3/5; //new: 3/5, old: 3/4
|
|
var SLIDE_GAP_Y = BASE_TILE_Y * _scale * 3/4;
|
|
var SLIDE_GAP_Y1 = BASE_TILE_Y * _scale * 2/4; //new: 2/4, old: 3/4
|
|
|
|
var SLIDE_ITEM_X = 3;
|
|
var SLIDE_ITEM_Y = 3;
|
|
var SLIDE_AREA_X = (SLIDE_GAP_X*2+SELECT_SIZE_X)*SLIDE_ITEM_X;
|
|
var SLIDE_AREA_Y = (SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y)*SLIDE_ITEM_Y;
|
|
|
|
var CANVAS_SIZE_X = (BORDER1+BORDER2)*2 + SLIDE_AREA_X;
|
|
var CANVAS_SIZE_Y = TOP_BORDER1 + TOP_BORDER2 + BORDER2 + SLIDE_AREA_Y +BORDER1+BORDER2;
|
|
|
|
var BACKGROUND_COLOR = "#ff5050";
|
|
var BORDER1_COLOR = BACKGROUND_COLOR;
|
|
var BORDER2_COLOR = "white";
|
|
var TABS_ACTIVE_FILL_COLOR = BORDER2_COLOR;
|
|
var TABS_ACTIVE_LINE_COLOR = BORDER2_COLOR;
|
|
var TABS_ACTIVE_TEXT_COLOR = "black";
|
|
var TABS_INACTIVE_FILL_COLOR = "#ccc";
|
|
var TABS_INACTIVE_LINE_COLOR = "#aaa";
|
|
var TABS_INACTIVE_TEXT_COLOR = "#888";
|
|
|
|
var SLIDE_BACKGROUND = "#EEEEFF";
|
|
var SLIDE_BOUNDLINE_COLOR = "red";
|
|
|
|
var SELECT_TEXT_COLOR = "black";
|
|
var SELECT_TEXT_ACTIVE_COLOR = "red";
|
|
var SELECT_TEXT_SIZE = 20 * _scale;
|
|
|
|
var SELECT_MOUSE_OVER_COLOR = "gold";
|
|
var SELECT_MAP_BACKGROUND_COLOR = "black";
|
|
var SELECT_SCORE_COLOR = "white";
|
|
var SELECT_SCORE_SHADOW = "black";
|
|
var SELECT_CHECK_SHADOW_COLOR = "white";
|
|
|
|
var TITLE_TEXT_COLOR = "white";
|
|
var TITLE_TEXT_SHADOW_COLOR = "gold";
|
|
|
|
var CLOSE_ICON_ACTIVE_COLOR = "#8080ff";
|
|
|
|
//////////////////////////////////////////////////
|
|
|
|
var canvas1;
|
|
var coverBackgroundObj;
|
|
var dialogStage;
|
|
var slider;
|
|
var boundLine1, boundLine2;
|
|
|
|
var tabs = [], tabsLine;
|
|
|
|
var maxPages, activePage; //0 -
|
|
var lastWheelFun = null;
|
|
|
|
var activeState = 0; //for edit mode only (1: active level shift, -1: active level deleted)
|
|
var levelDeleted = 0; //for edit mode only
|
|
var saveKeyStateObj;
|
|
|
|
init();
|
|
|
|
function init()
|
|
{
|
|
saveKeyState();
|
|
createCanvas1();
|
|
createDialogStage();
|
|
setBackground();
|
|
|
|
initVariable();
|
|
drawCoverBackground();
|
|
createSliderPage();
|
|
createSliderBoundLine();
|
|
createBorder1();
|
|
createBorder2();
|
|
createTabs(0);
|
|
createTitle();
|
|
new closeIconClass(CANVAS_SIZE_X, 0, dialogStage, _scale, CLOSE_ICON_ACTIVE_COLOR, closeBox, null);
|
|
dialogStage.update();
|
|
}
|
|
|
|
function initVariable()
|
|
{
|
|
maxPages = Math.ceil(_levelData.length / SLIDE_PAGE_ITEMS);
|
|
|
|
if(playMode == PLAY_EDIT && _activeLevel <= 0) {
|
|
_activeLevel = activePage = 0;
|
|
} else {
|
|
if(_activeLevel <= 0 || _activeLevel > _levelData.length) _activeLevel = 1;
|
|
activePage = Math.ceil(_activeLevel / SLIDE_PAGE_ITEMS)-1;
|
|
}
|
|
}
|
|
|
|
function drawCoverBackground()
|
|
{
|
|
coverBackgroundObj = new createjs.Shape();
|
|
coverBackgroundObj.graphics.beginFill("black")
|
|
.drawRect(0, 0, _parentStage.canvas.width, _parentStage.canvas.height).endFill();
|
|
coverBackgroundObj.alpha = 0.6;
|
|
_parentStage.addChild(coverBackgroundObj);
|
|
_parentStage.update();
|
|
}
|
|
|
|
function removeCoverBackground()
|
|
{
|
|
_parentStage.removeChild(coverBackgroundObj);
|
|
}
|
|
|
|
function createCanvas1()
|
|
{
|
|
canvas1 = document.createElement('canvas');
|
|
canvas1.id = "canvas1";
|
|
canvas1.width = CANVAS_SIZE_X;
|
|
canvas1.height = CANVAS_SIZE_Y;
|
|
|
|
var left = ((_screenX1 - canvas1.width)/2|0),
|
|
top = ((_screenY1 - canvas1.height)/2|0);
|
|
canvas1.style.left = (left>0?left:0) + "px";
|
|
canvas1.style.top = (top>0?top:0) + "px";
|
|
canvas1.style.position = "absolute";
|
|
document.body.appendChild(canvas1);
|
|
}
|
|
|
|
function saveKeyState()
|
|
{
|
|
saveKeyStateObj = saveKeyHandler(handleEscKeyDown);
|
|
}
|
|
|
|
function restoreKeyState()
|
|
{
|
|
restoreKeyHandler(saveKeyStateObj);
|
|
}
|
|
|
|
function handleEscKeyDown(event)
|
|
{
|
|
if(!event){ event = window.event; } //cross browser issues exist
|
|
|
|
if(event.shiftKey || event.ctrlKey) return false;
|
|
|
|
switch(event.key) {
|
|
case "Escape":
|
|
closeBox();
|
|
break;
|
|
default:
|
|
//debug("keycode = " + code);
|
|
break;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function closeBox()
|
|
{
|
|
removeCanvas1();
|
|
removeCoverBackground();
|
|
restoreKeyState();
|
|
if(_postFun) _postFun();
|
|
if(_closeFun) _closeFun(levelDeleted, _activeLevel, activeState); //for edit mode
|
|
}
|
|
|
|
function removeCanvas1()
|
|
{
|
|
dialogStage.removeAllChildren();
|
|
dialogStage.enableMouseOver(0);
|
|
dialogStage.cursor ="default";
|
|
createjs.Ticker.removeEventListener(dialogStage);
|
|
document.body.removeChild(canvas1);
|
|
}
|
|
|
|
function createDialogStage()
|
|
{
|
|
dialogStage = new createjs.Stage(canvas1);
|
|
dialogStage.enableMouseOver(60);
|
|
createjs.Ticker.setFPS(60);
|
|
createjs.Ticker.addEventListener("tick", dialogStage);
|
|
}
|
|
|
|
function setBackground()
|
|
{
|
|
var background = new createjs.Shape();
|
|
background.graphics.beginFill(BACKGROUND_COLOR).drawRoundRect(0, 0, CANVAS_SIZE_X, CANVAS_SIZE_Y, 8*_scale)
|
|
.endFill();
|
|
dialogStage.addChild(background);
|
|
}
|
|
|
|
|
|
function createSliderPage()
|
|
{
|
|
slider = new createjs.Container();
|
|
dialogStage.addChild(slider);
|
|
}
|
|
|
|
function createSliderBoundLine()
|
|
{
|
|
boundLine1 = new createjs.Shape();
|
|
boundLine2 = new createjs.Shape();
|
|
|
|
boundLine1.graphics.setStrokeStyle(2).beginStroke(SLIDE_BOUNDLINE_COLOR)
|
|
.moveTo(BORDER1+BORDER2, TOP_BORDER1+TOP_BORDER2+BORDER2+1)
|
|
.lineTo(SLIDE_AREA_X+BORDER1+BORDER2, TOP_BORDER1+TOP_BORDER2+BORDER2+1).endStroke();
|
|
boundLine1.alpha = 0;
|
|
|
|
boundLine2.graphics.setStrokeStyle(2).beginStroke(SLIDE_BOUNDLINE_COLOR)
|
|
.moveTo(BORDER1+BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-1)
|
|
.lineTo(SLIDE_AREA_X+BORDER1+BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-1).endStroke();
|
|
boundLine2.alpha = 0;
|
|
|
|
dialogStage.addChild(boundLine2, boundLine1);
|
|
}
|
|
|
|
function createBorder1()
|
|
{
|
|
var border1 = new createjs.Container();
|
|
var vBorder1 = new createjs.Shape();
|
|
var vBorder2 = new createjs.Shape();
|
|
|
|
vBorder1.graphics.beginFill(BORDER1_COLOR)
|
|
.drawRect(BORDER1+BORDER2-1, 0, SLIDE_AREA_X+2, TOP_BORDER1+TOP_BORDER2).endFill();
|
|
|
|
vBorder2.graphics.beginFill(BORDER1_COLOR)
|
|
.drawRect(BORDER1+BORDER2-1, CANVAS_SIZE_Y-BORDER1, SLIDE_AREA_X+2, BORDER1).endFill();
|
|
|
|
border1.addChild(vBorder1, vBorder2);
|
|
border1.on("mouseover", function() { dialogStage.cursor ="default"; });
|
|
dialogStage.addChild(border1);
|
|
}
|
|
|
|
function createBorder2()
|
|
{
|
|
var border2 = new createjs.Container();
|
|
var vBorder1 = new createjs.Shape();
|
|
var vBorder2 = new createjs.Shape();
|
|
var hBorder1 = new createjs.Shape();
|
|
var hBorder2 = new createjs.Shape();
|
|
|
|
|
|
vBorder1.graphics.beginFill(BORDER2_COLOR)
|
|
.drawRect(BORDER1, TOP_BORDER1+TOP_BORDER2,
|
|
CANVAS_SIZE_X-2*BORDER1, BORDER2+1).endFill();
|
|
|
|
vBorder2.graphics.beginFill(BORDER2_COLOR)
|
|
.drawRect(BORDER1, CANVAS_SIZE_Y-BORDER1-BORDER2-1,
|
|
CANVAS_SIZE_X-2*(BORDER1)-BORDER2,BORDER2+1).endFill();
|
|
|
|
hBorder1.graphics.beginFill(BORDER2_COLOR)
|
|
.drawRect(BORDER1, TOP_BORDER1+TOP_BORDER2+BORDER2,
|
|
BORDER2+2, CANVAS_SIZE_Y-BORDER1-BORDER2-TOP_BORDER1-TOP_BORDER2).endFill();
|
|
|
|
hBorder2.graphics.beginFill(BORDER2_COLOR)
|
|
.drawRect(CANVAS_SIZE_X-BORDER1-BORDER2-1, TOP_BORDER1+TOP_BORDER2+BORDER2,
|
|
BORDER2+1, CANVAS_SIZE_Y-BORDER1-BORDER2-TOP_BORDER1-TOP_BORDER2).endFill();
|
|
|
|
border2.addChild(vBorder1, vBorder2, hBorder1, hBorder2);
|
|
dialogStage.addChild(border2);
|
|
}
|
|
|
|
function clearTabs()
|
|
{
|
|
for(var i = 0; i < tabs.length; i++) {
|
|
dialogStage.removeChild(tabs[i]);
|
|
}
|
|
dialogStage.removeChild(tabsLine);
|
|
}
|
|
|
|
function createTabs(tabsOnly)
|
|
{
|
|
var tabBackground, tabText;
|
|
var textWidth, textHeight;
|
|
var tabsStartX = BORDER1;
|
|
|
|
for(var i = 0; i < maxPages; i++) {
|
|
var tabsName = ("00" + (i * SLIDE_PAGE_ITEMS + 1)).slice(-3) + " - " +
|
|
("00" + (i==maxPages-1?_levelData.length:((i+1) * SLIDE_PAGE_ITEMS))).slice(-3);
|
|
//debug(tabsName);
|
|
|
|
tabs[i] = new createjs.Container();
|
|
tabBackground = new createjs.Shape();
|
|
tabText = new createjs.Text(tabsName, TABS_TEXT_SIZE + "px Arial", TABS_INACTIVE_TEXT_COLOR);
|
|
textHeight = tabText.getBounds().height+4*_scale;
|
|
textWidth = tabText.getBounds().width+textHeight;
|
|
|
|
tabText.x = textHeight;
|
|
tabs[i].x = tabsStartX;
|
|
tabs[i].y = TOP_BORDER1+TOP_BORDER2 - textHeight;
|
|
tabsStartX += (textHeight/2+textWidth);
|
|
tabs[i].addChild(tabBackground, tabText);
|
|
tabsActive(i);
|
|
dialogStage.addChild(tabs[i]);
|
|
|
|
tabs[i].tabId = i;
|
|
|
|
tabs[i].on("mouseover", function(){ dialogStage.cursor = 'pointer'; dialogStage.update();});
|
|
tabs[i].on("mouseout", function() { dialogStage.cursor = 'default'; dialogStage.update();});
|
|
|
|
tabs[i].on("click", tabMouseClick);
|
|
}
|
|
|
|
tabsLine = new createjs.Shape();
|
|
tabsLine.graphics.setStrokeStyle(2).beginStroke(TABS_ACTIVE_LINE_COLOR)
|
|
.moveTo(BORDER1, TOP_BORDER1+TOP_BORDER2)
|
|
.lineTo(SLIDE_AREA_X+BORDER1+2*BORDER2, TOP_BORDER1+TOP_BORDER2).endStroke();
|
|
dialogStage.addChild(tabsLine);
|
|
|
|
tabsInActiveAll();
|
|
tabsActive(activePage);
|
|
if(!tabsOnly) setSlidePage(activePage);
|
|
|
|
function tabsActive(id)
|
|
{
|
|
tabBackground = tabs[id].getChildAt(0);
|
|
tabText = tabs[id].getChildAt(1);
|
|
|
|
tabBackground.graphics.clear().setStrokeStyle(1)
|
|
.beginStroke(TABS_ACTIVE_LINE_COLOR).beginFill(TABS_ACTIVE_FILL_COLOR)
|
|
.moveTo(0, textHeight).lineTo(textHeight/2, 0)
|
|
.lineTo(textHeight/2+textWidth, 0).lineTo(textHeight+textWidth, textHeight)
|
|
.lineTo(0, textHeight).endFill();
|
|
tabText.color = TABS_ACTIVE_TEXT_COLOR;
|
|
moveChild2Top(dialogStage, tabs[id]);
|
|
dialogStage.update();
|
|
}
|
|
|
|
function tabsInActive(id)
|
|
{
|
|
tabBackground = tabs[id].getChildAt(0);
|
|
tabText = tabs[id].getChildAt(1);
|
|
|
|
tabBackground.graphics.clear().setStrokeStyle(1)
|
|
.beginStroke(TABS_INACTIVE_LINE_COLOR).beginFill(TABS_INACTIVE_FILL_COLOR)
|
|
.moveTo(0, textHeight).lineTo(textHeight/2, 0)
|
|
.lineTo(textHeight/2+textWidth, 0).lineTo(textHeight+textWidth, textHeight)
|
|
.lineTo(0, textHeight).endFill();
|
|
tabText.color = TABS_INACTIVE_TEXT_COLOR;
|
|
moveChild2Top(dialogStage, tabs[id]);
|
|
}
|
|
|
|
function tabsInActiveAll()
|
|
{
|
|
for(var i = maxPages; i > 0; i--) {
|
|
tabsInActive(i-1);
|
|
moveChild2Top(dialogStage, tabs[i-1]);
|
|
}
|
|
moveChild2Top(dialogStage, tabsLine);
|
|
}
|
|
|
|
function tabMouseClick() {
|
|
if(activePage != this.tabId) {
|
|
tabsInActiveAll();
|
|
tabsActive(this.tabId);
|
|
setSlidePage(this.tabId);
|
|
activePage = this.tabId;
|
|
}
|
|
}
|
|
}
|
|
|
|
function setSlidePage(pages)
|
|
{
|
|
var startLevel = SLIDE_PAGE_ITEMS * pages+1;
|
|
var endLevel = (pages == maxPages-1)?_levelData.length:SLIDE_PAGE_ITEMS * (pages+1);
|
|
|
|
var pageItems = endLevel - startLevel+1;
|
|
var selectItemX = SLIDE_ITEM_X;
|
|
var selectItemY = Math.ceil(pageItems/SLIDE_ITEM_X);
|
|
|
|
var slideX = SLIDE_AREA_X;
|
|
var slideY = (SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y) * (selectItemY < SLIDE_ITEM_Y?SLIDE_ITEM_Y:selectItemY);
|
|
var slideStartX = BORDER1 + BORDER2;
|
|
var slideStartY = TOP_BORDER1 + TOP_BORDER2 + BORDER2;
|
|
|
|
var maxSliderY = slideStartY;
|
|
var minSliderY = slideStartY + SLIDE_AREA_Y - slideY;
|
|
|
|
var background = new createjs.Shape();
|
|
var selectRect = [], selectText = [];
|
|
var delSelectObj = [];
|
|
|
|
var sliderMoved = 0; //while move ths silder don't active mouse click
|
|
var firstPressMoveY = 0; //keep Y position while first press move
|
|
var closeClicked = 0, closeOver = 0;
|
|
|
|
var activeItemY = -1; //for scroll to active Item
|
|
|
|
|
|
init();
|
|
|
|
function init()
|
|
{
|
|
var diffY;
|
|
|
|
slider.removeAllChildren();
|
|
slider.removeAllEventListeners();
|
|
|
|
background.graphics.beginFill(SLIDE_BACKGROUND).drawRect(0, 0, slideX, slideY);
|
|
slider.addChild(background);
|
|
|
|
var id = -1;
|
|
|
|
levelLoop:
|
|
for(var y = 0; y < selectItemY; y++) {
|
|
for(var x = 0; x < selectItemX; x++) {
|
|
if(++id >= pageItems) break levelLoop;
|
|
createSelectLevel(x, y);
|
|
}
|
|
}
|
|
background.on("mouseover", function() {
|
|
dialogStage.cursor = "url('cursor/openhand.cur'), auto";}
|
|
);
|
|
background.on("mouseout", function() {
|
|
dialogStage.cursor = "default";}
|
|
);
|
|
|
|
slider.on("mousedown", function(evt) {
|
|
diffY = evt.currentTarget.y - evt.stageY;
|
|
});
|
|
|
|
slider.on("pressmove",function(evt) {
|
|
debug("pressmove (1) x=" + evt.stageX + ", y=" + evt.stageY);
|
|
if(sliderMoved++ <= 0) firstPressMoveY = evt.stageY;
|
|
|
|
boundLine1.alpha = boundLine2.alpha = 0;
|
|
dialogStage.cursor = "url('cursor/closedhand.cur'), auto";
|
|
|
|
evt.currentTarget.y = evt.stageY + diffY;
|
|
if(evt.currentTarget.y > maxSliderY) {
|
|
evt.currentTarget.y = maxSliderY;
|
|
boundLine1.alpha = 1;
|
|
} else
|
|
if(evt.currentTarget.y < minSliderY ) {
|
|
evt.currentTarget.y = minSliderY;
|
|
boundLine2.alpha = 1;
|
|
}
|
|
dialogStage.update();
|
|
});
|
|
|
|
slider.on("pressup", function(evt) {
|
|
debug("press-up (0)");
|
|
sliderMoved = firstPressMoveY = 0;
|
|
dialogStage.cursor = "url('cursor/openhand.cur'), auto";
|
|
boundLine1.alpha = boundLine2.alpha = 0;
|
|
|
|
//---------------------
|
|
// move to block bound
|
|
//---------------------
|
|
var blockSizeY = (SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y);
|
|
var startY = maxSliderY
|
|
var mod = (maxSliderY - slider.y) % blockSizeY; //division remainder value to block bound
|
|
|
|
if(blockSizeY/2 > mod) {
|
|
evt.currentTarget.y += mod; //shift down
|
|
} else {
|
|
evt.currentTarget.y -= (blockSizeY - mod); //shift up
|
|
}
|
|
|
|
dialogStage.update();
|
|
});
|
|
|
|
slider.x = slideStartX;
|
|
slider.y = slideStartY;
|
|
if(activeItemY > 0) { //scroll to active level
|
|
slider.y -= activeItemY*(SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y);
|
|
}
|
|
|
|
dialogStage.update();
|
|
enableMouseWheel();
|
|
}
|
|
|
|
function createSelectLevel(x, y)
|
|
{
|
|
var id = y*selectItemX+x;
|
|
var textColor = SELECT_TEXT_COLOR, level = startLevel+id;;
|
|
|
|
if(_activeLevel == level) {
|
|
activeItemY = y;
|
|
if(activeItemY + SLIDE_ITEM_Y > selectItemY) {
|
|
activeItemY = selectItemY - SLIDE_ITEM_Y;
|
|
}
|
|
textColor = SELECT_TEXT_ACTIVE_COLOR;
|
|
}
|
|
|
|
selectText[id] = new createjs.Text(("00"+level).slice(-3), SELECT_TEXT_SIZE + "px Arial",
|
|
textColor);
|
|
|
|
selectText[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
|
|
selectText[id].y = (SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y) * y + SLIDE_GAP_Y - SELECT_TEXT_SIZE*4/3;
|
|
slider.addChild(selectText[id]);
|
|
|
|
selectRect[id] = buildSelectMap(level, id);
|
|
selectRect[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
|
|
selectRect[id].y = (SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y) * y + SLIDE_GAP_Y;
|
|
slider.addChild(selectRect[id]);
|
|
|
|
if(playMode != PLAY_DEMO || (playMode == PLAY_DEMO && (typeof demoData[level-1] != "undefined"))) {
|
|
selectRect[id].on('click', selectClick);
|
|
selectRect[id].on('mouseover', selectMouseOver);
|
|
selectRect[id].on('mouseout', selectMouseOut);
|
|
}
|
|
|
|
selectRect[id].myId = id;
|
|
selectRect[id].myLevel = level;
|
|
}
|
|
|
|
function delSelectLevel(level)
|
|
{
|
|
var id = level - startLevel; //level = startLevel + id
|
|
var x, y;
|
|
var tabsOnly = 1;
|
|
|
|
//(1) remove deleted level
|
|
slider.removeChild(selectText[id]);
|
|
slider.removeChild(selectRect[id]);
|
|
|
|
//(2) remove close icon object
|
|
delSelectObj.splice(id,1);
|
|
|
|
//(3) shift level+1 - endLevel
|
|
while(level < endLevel) {
|
|
id = level - startLevel;
|
|
y = id /selectItemX|0;
|
|
x = id - y * selectItemX;
|
|
selectText[id] = selectText[id+1];
|
|
selectText[id].text = ("00"+level).slice(-3);
|
|
selectText[id].color = (_activeLevel == level)?SELECT_TEXT_ACTIVE_COLOR:SELECT_TEXT_COLOR;
|
|
selectText[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
|
|
selectText[id].y = (SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y) * y + SLIDE_GAP_Y - SELECT_TEXT_SIZE*4/3;
|
|
|
|
selectRect[id] = selectRect[id+1];
|
|
selectRect[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
|
|
selectRect[id].y = (SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y) * y + SLIDE_GAP_Y;
|
|
selectRect[id].myLevel = level;
|
|
selectRect[id].myId = level - startLevel;
|
|
|
|
level++;
|
|
}
|
|
|
|
//(3) add one if could add
|
|
if(level <= editLevels) {
|
|
// add new level
|
|
id = level - startLevel;
|
|
y = id /selectItemX|0;
|
|
x = id - y * selectItemX;
|
|
createSelectLevel(x,y);
|
|
maxPages = Math.ceil(_levelData.length / SLIDE_PAGE_ITEMS);
|
|
} else {
|
|
// no more level (remove last level)
|
|
if(level == startLevel) { //end pages and no more levels in this pages
|
|
maxPages--;
|
|
if(maxPages > 0) {
|
|
tabsOnly = 0;
|
|
activePage = maxPages-1;
|
|
//move to previous page
|
|
} else {
|
|
//no any level in select menu !!! ==> close it (maxPages < 0)
|
|
}
|
|
}
|
|
endLevel--;
|
|
|
|
pageItems = endLevel - startLevel+1;
|
|
selectItemY = Math.ceil(pageItems/SLIDE_ITEM_X);
|
|
slideY = (SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y) * (selectItemY < SLIDE_ITEM_Y?SLIDE_ITEM_Y:selectItemY);
|
|
minSliderY = slideStartY + SLIDE_AREA_Y - slideY;
|
|
if(slider.y < minSliderY) slider.y = minSliderY; //shift slider
|
|
}
|
|
|
|
//(3) redraw tabs page
|
|
clearTabs()
|
|
createTabs(tabsOnly);
|
|
|
|
if(maxPages <= 0) closeBox();
|
|
}
|
|
|
|
|
|
function buildSelectMap(level, id)
|
|
{
|
|
var levelMap = _levelData[level-1];
|
|
var selectMap = new createjs.Container();
|
|
var border = new createjs.Shape();
|
|
var background = new createjs.Shape();
|
|
|
|
var borderSize = _scale*4+2;
|
|
|
|
border.graphics.beginFill(SELECT_MOUSE_OVER_COLOR)
|
|
.drawRoundRect(-borderSize, -borderSize, SELECT_SIZE_X+2*borderSize, SELECT_SIZE_Y+2*borderSize, borderSize);
|
|
border.alpha = 0;
|
|
background.graphics.beginFill(SELECT_MAP_BACKGROUND_COLOR).drawRect(0, 0, SELECT_SIZE_X, SELECT_SIZE_Y);
|
|
|
|
selectMap.addChild(border, background);
|
|
selectMap.addChild(level2Bitmap(levelMap));
|
|
|
|
switch(playMode) {
|
|
case PLAY_EDIT:
|
|
if(editLevelData == _levelData) { //del box only for "custom levels", NOT for "LOAD" button
|
|
delSelectObj[id] = new delIcon();
|
|
selectMap.addChild(delSelectObj[id].getCloseObj());
|
|
}
|
|
break;
|
|
case PLAY_DEMO:
|
|
setDemoLevelInfo(selectMap, level);
|
|
break;
|
|
default:
|
|
setLevelInfo(selectMap, level);
|
|
break;
|
|
}
|
|
|
|
return selectMap;
|
|
}
|
|
|
|
function level2Bitmap(levelMap)
|
|
{
|
|
var container = new createjs.Container();
|
|
var guardCount = 0, runner = 0;
|
|
var bitmap;
|
|
|
|
//--------------------------------------------
|
|
// Parser map from right-bottom to left-top
|
|
// for drop guards if too manys
|
|
//--------------------------------------------
|
|
var index = NO_OF_TILES_Y * NO_OF_TILES_X - 1;
|
|
for(var y = NO_OF_TILES_Y-1; y >= 0; y--) {
|
|
for(var x = NO_OF_TILES_X-1; x >= 0; x--) {
|
|
var id = levelMap.charAt(index--);
|
|
|
|
var curTile;
|
|
switch(id) {
|
|
default:
|
|
case ' ': //empty
|
|
continue;
|
|
case '#': //Normal Brick
|
|
curTile = getThemeBitmap("brick");
|
|
break;
|
|
case '@': //Solid Brick
|
|
curTile = getThemeBitmap("solid");
|
|
break;
|
|
case 'H': //Ladder
|
|
curTile = getThemeBitmap("ladder");
|
|
break;
|
|
case '-': //Line of rope
|
|
curTile = getThemeBitmap("rope");
|
|
break;
|
|
case 'X': //False brick
|
|
curTile = getThemeBitmap("brick");
|
|
break;
|
|
case 'S': //Ladder appears at end of level
|
|
continue;
|
|
case '$': //Gold chest
|
|
curTile = getThemeBitmap("gold");
|
|
break;
|
|
case '0': //Guard
|
|
if(++guardCount > MAX_NEW_GUARD) {
|
|
continue; //too many guard , set this tile as empty
|
|
}
|
|
curTile = new createjs.Sprite(guardData, "runLeft");
|
|
curTile.stop();
|
|
break;
|
|
case '&': //Player
|
|
if(++runner > 1) {
|
|
continue; //too many runner, set this tile as empty
|
|
}
|
|
curTile = new createjs.Sprite(runnerData, "runRight");
|
|
curTile.stop();
|
|
break;
|
|
}
|
|
curTile.setTransform(x * BASE_TILE_X*MAP_SCALE, y * BASE_TILE_Y*MAP_SCALE,MAP_SCALE, MAP_SCALE);
|
|
container.addChild(curTile);
|
|
}
|
|
}
|
|
container.cache(0, 0, SELECT_SIZE_X, SELECT_SIZE_Y);
|
|
bitmap = new createjs.Bitmap( container.cacheCanvas); //change "cont.getCacheDataURL()" to "cont.cacheCanvas"
|
|
container.removeAllChildren();
|
|
return bitmap;
|
|
}
|
|
|
|
//for demo mode
|
|
function setDemoLevelInfo(selectObj, level)
|
|
{
|
|
if( typeof demoData[level-1] != "undefined") {
|
|
var bitmap = _checkBitmap.clone();
|
|
var startX = (SELECT_SIZE_X - _checkBitmap.getBounds().width*_scale)/2|0;
|
|
var startY = (SELECT_SIZE_Y - _checkBitmap.getBounds().height*_scale)/4|0;
|
|
|
|
bitmap.setTransform(startX, startY, _scale, _scale);
|
|
bitmap.set({alpha:0.9});
|
|
bitmap.shadow = new createjs.Shadow(SELECT_CHECK_SHADOW_COLOR, 2, 2, 5);
|
|
selectObj.addChild(bitmap);
|
|
}
|
|
}
|
|
|
|
function setLevelInfo(selectObj, level)
|
|
{
|
|
if(modernScoreInfo[level-1] >= 0) {
|
|
var bitmap = _checkBitmap.clone();
|
|
var scoreText = new createjs.Text(modernScoreInfo[level-1],
|
|
"bold "+SELECT_TEXT_SIZE +"px Helvetica",SELECT_SCORE_COLOR);
|
|
var startX = (SELECT_SIZE_X - _checkBitmap.getBounds().width*_scale)/2|0;
|
|
var startY = (SELECT_SIZE_Y - _checkBitmap.getBounds().height*_scale)/4|0;
|
|
|
|
bitmap.setTransform(startX, startY, _scale, _scale);
|
|
bitmap.set({alpha:0.9});
|
|
bitmap.shadow = new createjs.Shadow(SELECT_CHECK_SHADOW_COLOR, 2, 2, 5);
|
|
selectObj.addChild(bitmap);
|
|
|
|
scoreText.x = (SELECT_SIZE_X - scoreText.getBounds().width)/2|0;
|
|
scoreText.y = SELECT_SIZE_Y - scoreText.getBounds().height;
|
|
scoreText.shadow = new createjs.Shadow( SELECT_SCORE_SHADOW, 2, 2, 3);
|
|
selectObj.addChild(scoreText);
|
|
}
|
|
}
|
|
|
|
function selectClick(evt)
|
|
{
|
|
debug("selectClick(0) x=" + evt.stageX + ", y=" + evt.stageY + "(" + Math.abs(firstPressMoveY-evt.stageY) +")");
|
|
|
|
//=============================================================================================================
|
|
// BUG FIX: This is not a root solution !!! 6/16/2014
|
|
// sometime when click on slect map level, also will do "pressmove" command
|
|
// (1) pressmove => (2) select click ==> (3) pressup
|
|
// so currently use sliderMoved count > 10 or (click Y-pos not equal to pressmove Y-pos ) acts as move slider
|
|
// otherwise acts as click the selection!
|
|
//=============================================================================================================
|
|
if(sliderMoved > 10 || (sliderMoved && firstPressMoveY != evt.stageY) || closeClicked) {
|
|
//while move the silder or click on delete level icon don't active mouse click
|
|
debug("sliderMoved = " + sliderMoved + " closeClicked = " + closeClicked);
|
|
sliderMoved = firstPressMoveY = closeClicked = 0;
|
|
return;
|
|
}
|
|
debug("selectClick");
|
|
removeCanvas1();
|
|
removeCoverBackground();
|
|
restoreKeyState();
|
|
if(_postFun) _postFun();
|
|
_activeFun(this.myLevel);
|
|
}
|
|
|
|
function selectMouseOver()
|
|
{
|
|
var border = this.getChildAt(0);
|
|
|
|
if(playMode == PLAY_EDIT && editLevelData == _levelData) { //del box only for "custom levels", NOT for "LOAD"
|
|
delSelectObj[this.myId].selectOver();
|
|
}
|
|
|
|
border.alpha = 1;
|
|
dialogStage.cursor = 'pointer';
|
|
dialogStage.update();
|
|
}
|
|
|
|
function selectMouseOut()
|
|
{
|
|
var border = this.getChildAt(0);
|
|
|
|
if(playMode == PLAY_EDIT && editLevelData == _levelData) { //del box only for "custom levels", NOT for "LOAD"
|
|
if(this.myId < delSelectObj.length) delSelectObj[this.myId].selectOut();
|
|
////else debug("mouse out: select deleted");
|
|
}
|
|
|
|
border.alpha = 0;
|
|
dialogStage.cursor = "url('cursor/openhand.cur'), auto";
|
|
dialogStage.update();
|
|
}
|
|
|
|
function wheelScroll(e)
|
|
{
|
|
var direction = e.detail?-e.detail:e.wheelDelta; //e.detail: for fireFox, e.wheelDelta: for chrome, IE
|
|
direction = (direction>0)?1: -1;
|
|
|
|
|
|
slider.y += ((SLIDE_GAP_Y+SLIDE_GAP_Y1+SELECT_SIZE_Y)) * direction;
|
|
//boundLine1.alpha = boundLine2.alpha = 0;
|
|
if(slider.y > maxSliderY) {
|
|
slider.y = maxSliderY;
|
|
//boundLine1.alpha = 1;
|
|
} else if(slider.y < minSliderY ) {
|
|
slider.y = minSliderY;
|
|
//boundLine2.alpha = 1;
|
|
}
|
|
dialogStage.update();
|
|
}
|
|
|
|
function enableMouseWheel()
|
|
{
|
|
if(lastWheelFun) {
|
|
canvas1.removeEventListener("mousewheel", lastWheelFun, false);
|
|
canvas1.removeEventListener('DOMMouseScroll', lastWheelFun, false);
|
|
}
|
|
lastWheelFun = wheelScroll;
|
|
//for chrome
|
|
canvas1.addEventListener("mousewheel", wheelScroll, false);
|
|
//for firefox
|
|
canvas1.addEventListener('DOMMouseScroll', wheelScroll, false);
|
|
}
|
|
|
|
function delIcon()
|
|
{
|
|
var closeBoxSize = 12*_scale+1;
|
|
var cross, cycle, delIconObj;
|
|
|
|
createCloseIcon();
|
|
|
|
this.getCloseObj = function ()
|
|
{
|
|
return delIconObj;
|
|
}
|
|
|
|
|
|
this.selectOver = function ()
|
|
{
|
|
////debug("select over");
|
|
if(closeOver) return;
|
|
drawIcon(1);
|
|
}
|
|
|
|
this.selectOut = function ()
|
|
{
|
|
////debug("select out");
|
|
drawIcon(0);
|
|
}
|
|
|
|
function createCloseIcon()
|
|
{
|
|
cross = new createjs.Shape();
|
|
cycle = new createjs.Shape();
|
|
delIconObj = new createjs.Container();
|
|
delIconObj.addChild(cycle, cross);
|
|
delIconObj.on("mouseover", handleMouseOver);
|
|
delIconObj.on("mouseout", handleMouseOut);
|
|
delIconObj.on("click", handleMouseClick);
|
|
delIconObj.x = SELECT_SIZE_X - closeBoxSize*2;
|
|
delIconObj.y = closeBoxSize;
|
|
|
|
drawIcon(0);
|
|
}
|
|
|
|
function drawIcon(state)
|
|
{
|
|
var cycAlpha, crosAlpha, cycColor, crosColor;
|
|
|
|
crosColor = "white";
|
|
|
|
switch(state) {
|
|
case 0:
|
|
cycColor = "#888";
|
|
cycAlpha = crosAplha = 0;
|
|
break;
|
|
case 1:
|
|
cycColor = "#888";
|
|
crosAlpha = 1;
|
|
cycAlpha = 0.7;
|
|
break;
|
|
case 2:
|
|
cycColor = "red";
|
|
crosAlpha = cycAlpha = 1;
|
|
break;
|
|
}
|
|
|
|
var g = cycle.graphics;
|
|
g.clear();
|
|
cycle.alpha = cycAlpha;
|
|
g.beginFill(cycColor).dc(closeBoxSize/2, closeBoxSize/2, closeBoxSize*7/6);
|
|
//g.beginFill(cycColor).dr(-closeBoxSize/2, - closeBoxSize/2, closeBoxSize*2, closeBoxSize*2);
|
|
|
|
g = cross.graphics;
|
|
g.clear();
|
|
cross.alpha = crosAlpha;
|
|
g.setStrokeStyle(closeBoxSize/4).beginStroke(crosColor).moveTo(0,0)
|
|
.lineTo(closeBoxSize,closeBoxSize).closePath();
|
|
|
|
g.moveTo(closeBoxSize,0).lineTo(0,closeBoxSize).closePath();
|
|
}
|
|
|
|
function handleMouseOver(event)
|
|
{
|
|
////debug("close over");
|
|
closeOver = 1;
|
|
drawIcon(2);
|
|
}
|
|
|
|
function handleMouseOut(event)
|
|
{
|
|
////debug("close out");
|
|
closeOver = 0;
|
|
drawIcon(1);
|
|
}
|
|
|
|
function handleMouseClick(event)
|
|
{
|
|
closeClicked = 1;
|
|
////debug("delete level = " + delIconObj.parent.myLevel);
|
|
delLevel(delIconObj.parent.myLevel); //get level from parent's property
|
|
}
|
|
}
|
|
|
|
//-------------------------------
|
|
// for edit mode to delete level
|
|
//-------------------------------
|
|
|
|
function delLevel(level)
|
|
{
|
|
//(1) remove from local storage & variable
|
|
delEditLevel(level);
|
|
levelDeleted = 1;
|
|
|
|
//(2) shift or delete active level
|
|
if(_activeLevel == level) {
|
|
_activeLevel = 0;
|
|
activeState = -1; //active level deleted
|
|
|
|
clearTestLevel(); //test level deleted
|
|
|
|
} else if( _activeLevel > level) {
|
|
_activeLevel--;
|
|
activeState = 1; //active level shift
|
|
|
|
getTestLevel(testLevelInfo);
|
|
testLevelInfo.level = _activeLevel; // change level no
|
|
setTestLevel(testLevelInfo);
|
|
|
|
} else if (_activeLevel == 0) { //0 meaings test level is new level
|
|
|
|
if(testLevelInfo.modified == 1) {
|
|
testLevelInfo.level = editLevels+1;
|
|
setTestLevel(testLevelInfo);
|
|
}
|
|
}
|
|
|
|
//(3) shift or delete playInfo of user created
|
|
playData = PLAY_DATA_USERDEF;
|
|
if(editLevels > 0) {
|
|
getModernInfo();
|
|
if(curLevel == level) { //play level deleted
|
|
curLevel = 1;
|
|
setModernInfo();
|
|
} else if ( curLevel > level) { //level shift
|
|
curLevel--;
|
|
setModernInfo();
|
|
}
|
|
} else {
|
|
clearModernInfo();
|
|
}
|
|
|
|
//(4) remove from slider
|
|
delSelectLevel(level);
|
|
|
|
////debug("delete level = " + level);
|
|
}
|
|
}
|
|
|
|
function createTitle()
|
|
{
|
|
var titleText = new createjs.Text(_titleName,
|
|
"italic bold " + TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
|
|
titleText.x = (CANVAS_SIZE_X - titleText.getBounds().width)/2|0;
|
|
titleText.y = (TOP_BORDER1 - titleText.getBounds().height)/2|0;
|
|
titleText.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 2, 2, 10 );
|
|
dialogStage.addChild(titleText);
|
|
}
|
|
|
|
}
|
|
|
|
function handleMenuKeyDown(event)
|
|
{
|
|
if(!event){ event = window.event; } //cross browser issues exist
|
|
|
|
if(event.shiftKey || event.ctrlKey) return false;
|
|
|
|
switch(event.key) {
|
|
case "ArrowUp":
|
|
keyAction = ACT_UP;
|
|
break;
|
|
case "ArrowDown":
|
|
keyAction = ACT_DOWN;
|
|
break;
|
|
case "Enter":
|
|
break;
|
|
case "Escape":
|
|
break;
|
|
default:
|
|
keyAction = ACT_UNKNOWN;
|
|
//debug("keycode = " + code);
|
|
break;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
//==============
|
|
// select menu
|
|
//==============
|
|
function menuDialog(_titleName, _itemList, _stage, _scale, _closeIconEnable, _closeCallBack, _args)
|
|
{
|
|
var TITLE_TEXT_SIZE = 48 * _scale;
|
|
var ITEM_TEXT_SIZE = 40 * _scale;
|
|
|
|
var TITLE_TEXT_COLOR = "white";
|
|
var TITLE_TEXT_SHADOW_COLOR = "gold";
|
|
|
|
var ITEM_TEXT_COLOR = "white";
|
|
var ITEM_TEXT_SHADOW_COLOR = "gold";
|
|
|
|
var TITLE_AREA_Y = TITLE_TEXT_SIZE * 2.5 | 0;
|
|
|
|
var ITEM_AREA_Y = ITEM_TEXT_SIZE * 3/2 | 0;
|
|
var ITEM_GAP_Y = ITEM_TEXT_SIZE * 2/3 | 0;
|
|
|
|
var BOTTOM_AREA_Y = ITEM_AREA_Y/2|0;
|
|
|
|
var BUTTON_BORDER_SIZE = 8 * _scale;
|
|
var BUTTON_ROUND_RADIUD = 2+ 4 * _scale;
|
|
|
|
var COVER_BACKGROUND_COLOR = "black";
|
|
|
|
var BUTTON_BACKGROUND_BORDER_COLOR = "white";
|
|
var BUTTON_BACKGROUND_COLOR = "#5b0680"; //"#890ee0";
|
|
var BUTTON_BACKGROUND_SHADOW = "gold";
|
|
var BUTTON_BACKGROUND_BORDER_SIZE = 8 * _scale;;
|
|
|
|
var BUTTON_BORDER_COLOR = "gold";
|
|
var BUTTON_COLOR = "#5d7cff";
|
|
|
|
var CLOSE_ICON_ACTIVE_COLOR = "#ff5050";
|
|
|
|
var screenX1 = _stage.canvas.width;
|
|
var screenY1 = _stage.canvas.height;
|
|
|
|
var titleTextObj, titleWidth, titleHeight;
|
|
var itemText = [], maxItemTextWidth, itemTextHeight;
|
|
var menuX, menuY;
|
|
var startX, startY;
|
|
|
|
var coverBackgroundObj, background1Obj, background2Obj, menuButtonObj;
|
|
var closeIconObj = null;
|
|
var saveKeyStateObj;
|
|
var activeItemBackup = _itemList[0].activeItem; //recover menu active item if press ESC or close
|
|
|
|
init();
|
|
|
|
function init()
|
|
{
|
|
createText();
|
|
coverParentStage();
|
|
creatBackground();
|
|
createTitle();
|
|
createItemList();
|
|
if(_closeIconEnable) {
|
|
closeIconObj = new closeIconClass(startX+menuX, startY, _stage, _scale, CLOSE_ICON_ACTIVE_COLOR, closeBox, null);
|
|
}
|
|
|
|
_stage.enableMouseOver(120);
|
|
_stage.update();
|
|
|
|
saveKeyStateObj = saveKeyHandler(handleMenuKeyDown);
|
|
}
|
|
|
|
function coverParentStage()
|
|
{
|
|
coverBackgroundObj = new createjs.Shape();
|
|
coverBackgroundObj.graphics.beginFill(COVER_BACKGROUND_COLOR).drawRect(0, 0, screenX1, screenY1).endFill();
|
|
coverBackgroundObj.alpha = 0.6;
|
|
_stage.addChild(coverBackgroundObj);
|
|
}
|
|
|
|
function createText()
|
|
{
|
|
var textLength;
|
|
|
|
titleTextObj = new createjs.Text(_titleName,
|
|
"bold " + TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
|
|
titleWidth = titleTextObj.getBounds().width;
|
|
titleHeight = titleTextObj.getBounds().height;
|
|
|
|
maxItemTextWidth =0;
|
|
for(var i = 1; i < _itemList.length; i++) {
|
|
itemText[i-1] = new createjs.Text(_itemList[i].name,
|
|
"bold " + ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
|
|
textLength = itemText[i-1].getBounds().width;
|
|
if(maxItemTextWidth < textLength) maxItemTextWidth = textLength;
|
|
}
|
|
maxItemTextWidth += ITEM_TEXT_SIZE;
|
|
menuX = (maxItemTextWidth > titleWidth? maxItemTextWidth: titleWidth) + TITLE_TEXT_SIZE * 2;
|
|
menuY = TITLE_AREA_Y + BOTTOM_AREA_Y + (ITEM_AREA_Y+ITEM_GAP_Y)*(_itemList.length-1);
|
|
|
|
startX = (screenX1-menuX)/2|0;
|
|
startY = (screenY1-menuY)/2|0;
|
|
}
|
|
|
|
function creatBackground()
|
|
{
|
|
background1Obj = new createjs.Shape();
|
|
background1Obj.graphics.beginFill(BUTTON_BACKGROUND_BORDER_COLOR)
|
|
.drawRoundRect(startX, startY, menuX, menuY, 8*_scale).endFill();
|
|
background1Obj.shadow = new createjs.Shadow(BUTTON_BACKGROUND_SHADOW, 3, 3, 5 );
|
|
|
|
background2Obj = new createjs.Shape();
|
|
background2Obj.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(startX+BUTTON_BACKGROUND_BORDER_SIZE, startY+BUTTON_BACKGROUND_BORDER_SIZE,
|
|
menuX-BUTTON_BACKGROUND_BORDER_SIZE*2, menuY-BUTTON_BACKGROUND_BORDER_SIZE*2, 8*_scale).endFill();
|
|
_stage.addChild(background1Obj, background2Obj);
|
|
}
|
|
|
|
function createTitle()
|
|
{
|
|
titleTextObj.x = startX + (menuX - titleWidth)/2|0;
|
|
titleTextObj.y = startY + (TITLE_AREA_Y - titleHeight)/2|0;
|
|
titleTextObj.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 0, 0, 10 );
|
|
_stage.addChild(titleTextObj);
|
|
}
|
|
|
|
function createItemList()
|
|
{
|
|
menuButtonObj = []
|
|
for(var i = 0; i < itemText.length; i++) {
|
|
menuButtonObj[i] = new createjs.Container();
|
|
|
|
//child id = 0
|
|
var border = new createjs.Shape();
|
|
border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE,
|
|
maxItemTextWidth+BUTTON_BORDER_SIZE*2, ITEM_AREA_Y+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
//child id = 1
|
|
var button = new createjs.Shape();
|
|
button.graphics.beginFill(BUTTON_COLOR).drawRoundRect(0, 0,
|
|
maxItemTextWidth, ITEM_AREA_Y,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
//child id = 2
|
|
itemText[i].textAlign = "center";
|
|
itemText[i].x = maxItemTextWidth/2|0;
|
|
itemText[i].y = (ITEM_AREA_Y - itemText[i].getBounds().height)/2|0;
|
|
|
|
menuButtonObj[i].addChild(border, button,itemText[i]);
|
|
menuButtonObj[i].x = startX+(menuX - maxItemTextWidth)/2|0;
|
|
menuButtonObj[i].y = startY+TITLE_AREA_Y+(ITEM_AREA_Y+ITEM_GAP_Y) * i;
|
|
menuButtonObj[i].myId = i;
|
|
|
|
menuButtonObj[i].on('click', buttonClick);
|
|
menuButtonObj[i].on('mouseover', buttonMouseOver);
|
|
menuButtonObj[i].on('mouseout', buttonMouseOut);
|
|
_stage.addChild(menuButtonObj[i]);
|
|
}
|
|
buttonActive(menuButtonObj[_itemList[0].activeItem]);
|
|
}
|
|
|
|
function closeBox()
|
|
{
|
|
_itemList[0].activeItem = activeItemBackup; //recover menu active item
|
|
restoreKeyHandler(saveKeyStateObj);
|
|
removeAllObj();
|
|
_stage.cursor = 'default';
|
|
_stage.enableMouseOver(0);
|
|
if(_closeCallBack) _closeCallBack(_args);
|
|
}
|
|
|
|
function removeAllObj()
|
|
{
|
|
_stage.removeChild(coverBackgroundObj, titleTextObj, background1Obj, background2Obj);
|
|
for(var i = 0; i < itemText.length; i++) {
|
|
_stage.removeChild(menuButtonObj[i]);
|
|
}
|
|
if(closeIconObj) _stage.removeChild(closeIconObj);
|
|
_stage.update();
|
|
}
|
|
|
|
function buttonClick()
|
|
{
|
|
restoreKeyHandler(saveKeyStateObj);
|
|
removeAllObj();
|
|
_stage.cursor = 'default';
|
|
_stage.enableMouseOver(0);
|
|
if(_itemList[_itemList[0].activeItem+1].activeFun) {
|
|
_itemList[_itemList[0].activeItem+1].activeFun(_itemList[0].activeItem, _args);
|
|
}
|
|
}
|
|
|
|
function buttonActive(buttonObj)
|
|
{
|
|
var border = buttonObj.getChildAt(0);
|
|
var text = buttonObj.getChildAt(2);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BORDER_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE,
|
|
maxItemTextWidth+BUTTON_BORDER_SIZE*2, ITEM_AREA_Y+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
text.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 2, 2, 10 );
|
|
}
|
|
|
|
function buttonInactive(buttonObj)
|
|
{
|
|
var border = buttonObj.getChildAt(0);
|
|
var text = buttonObj.getChildAt(2);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE,
|
|
maxItemTextWidth+BUTTON_BORDER_SIZE*2, ITEM_AREA_Y+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
text.shadow = null;
|
|
}
|
|
|
|
function buttonMouseOver()
|
|
{
|
|
if(this.myId != _itemList[0].activeItem) {
|
|
buttonInactive(menuButtonObj[_itemList[0].activeItem]);
|
|
buttonActive(this);
|
|
_itemList[0].activeItem = this.myId;
|
|
}
|
|
_stage.cursor = 'pointer';
|
|
_stage.update();
|
|
}
|
|
|
|
function buttonMouseOut()
|
|
{
|
|
_stage.cursor = 'default';
|
|
_stage.update();
|
|
}
|
|
|
|
function handleMenuKeyDown(event)
|
|
{
|
|
if(!event){ event = window.event; } //cross browser issues exist
|
|
|
|
if(event.shiftKey || event.ctrlKey) return false;
|
|
|
|
switch(event.key) {
|
|
case "ArrowUp":
|
|
buttonInactive(menuButtonObj[_itemList[0].activeItem]);
|
|
if(--_itemList[0].activeItem < 0) _itemList[0].activeItem = menuButtonObj.length-1;
|
|
buttonActive(menuButtonObj[_itemList[0].activeItem]);
|
|
_stage.update();
|
|
break;
|
|
case "ArrowDown":
|
|
buttonInactive(menuButtonObj[_itemList[0].activeItem]);
|
|
if(++_itemList[0].activeItem > (menuButtonObj.length-1)) _itemList[0].activeItem = 0;
|
|
buttonActive(menuButtonObj[_itemList[0].activeItem]);
|
|
_stage.update();
|
|
break;
|
|
case "Enter":
|
|
buttonClick();
|
|
break;
|
|
case "Escape":
|
|
if(closeIconObj != null) closeBox();
|
|
break;
|
|
default:
|
|
//debug("keycode = " + code);
|
|
break;
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function mainMenuClose(callbackFun)
|
|
{
|
|
if(callbackFun) callbackFun();
|
|
}
|
|
|
|
var playVersionInfo = [
|
|
{ id:1, verData: classicData, name: gameVersionName[0], info: classicInfo },
|
|
{ id:3, verData: proData, name: gameVersionName[2], info: proInfo },
|
|
{ id:4, verData: revengeData, name: gameVersionName[3], info: revengeInfo },
|
|
{ id:5, verData: fanBookData, name: gameVersionName[4], info: fanBookInfo },
|
|
{ id:2, verData: championData, name: gameVersionName[1], info: championInfo }
|
|
];
|
|
|
|
//var customItemInfo = { id:999, name:" Custom Levels " };
|
|
var customItemIdx = -1;
|
|
var maxPlayId;
|
|
|
|
var gameVersionMenuList = [
|
|
{ activeItem: 0 } //game version menu ID
|
|
];
|
|
|
|
function getCustomItemInfo(withLevel)
|
|
{
|
|
var customItemName = " Custom Levels ";
|
|
if(withLevel) {
|
|
if (editLevels == 1) {
|
|
return customItemName + "(1 Level)";
|
|
} else if(editLevels > 1) {
|
|
return customItemName + "(" + editLevels + " Levels)";
|
|
}
|
|
}
|
|
return customItemName;
|
|
}
|
|
|
|
function initMenuVariable()
|
|
{
|
|
maxPlayId = 0;
|
|
|
|
for(var i = 0; i < playVersionInfo.length; i++) {
|
|
//ex: { name: "Classic Lode Runner (150 Levels) ", activeFun: subGameMenu },
|
|
gameVersionMenuList.push(
|
|
{ name: playVersionInfo[i].name + " (" + playVersionInfo[i].verData.length + " Levels) ",
|
|
activeFun: subGameMenu
|
|
}
|
|
);
|
|
if(maxPlayId < playVersionInfo[i].id) maxPlayId = playVersionInfo[i].id;
|
|
}
|
|
var customItemName = getCustomItemInfo(1);
|
|
gameVersionMenuList.push({name: customItemName, activeFun: subEditMenu});
|
|
customItemIdx = gameVersionMenuList.length-1;
|
|
}
|
|
|
|
function getPlayVerData(id)
|
|
{
|
|
for(var i = 0; i < playVersionInfo.length; i++) {
|
|
if(playVersionInfo[i].id == id) return playVersionInfo[i].verData;
|
|
}
|
|
|
|
error("Error: versionData can not find, id = " + id );
|
|
return playVersionInfo[0].verData;
|
|
}
|
|
|
|
function getPlayVerInfo(id)
|
|
{
|
|
for(var i = 0; i < playVersionInfo.length; i++) {
|
|
if(playVersionInfo[i].id == id) return playVersionInfo[i].info;
|
|
}
|
|
|
|
error("Error: version info can not find, id = " + id );
|
|
return playVersionInfo[0].info;
|
|
}
|
|
|
|
function defaultLevelData()
|
|
{
|
|
return playVersionInfo[0].verData;
|
|
}
|
|
|
|
function menuIdToPlayData(menuId)
|
|
{
|
|
if(menuId == playVersionInfo.length) return PLAY_DATA_USERDEF; //user created
|
|
else if (menuId < playVersionInfo.length) return playVersionInfo[menuId].id;
|
|
|
|
error("design error, menuId =" + menuId );
|
|
|
|
return playVersionInfo[0].id;
|
|
}
|
|
|
|
var playDataNameUserDef = "Custom Levels";
|
|
function playDataToTitleName(verId)
|
|
{
|
|
if(verId == PLAY_DATA_USERDEF) return playDataNameUserDef;
|
|
|
|
for(var i = 0; i < playVersionInfo.length; i++) {
|
|
if(playVersionInfo[i].id == verId) return playVersionInfo[i].name;
|
|
}
|
|
|
|
error("design error, id =" + verId );
|
|
return "Unknown";
|
|
}
|
|
|
|
function mainMenu(callbackFun)
|
|
{
|
|
gameVersionMenuList[customItemIdx].name = getCustomItemInfo(1);
|
|
menuDialog(" Select Game Version ", gameVersionMenuList, mainStage, tileScale, 0, mainMenuClose, callbackFun);
|
|
}
|
|
|
|
function gameVersionMenu(id, callbackFun)
|
|
{
|
|
gameVersionMenuList[customItemIdx].name = getCustomItemInfo(1);
|
|
menuDialog(" Select Game Version ", gameVersionMenuList, mainStage, tileScale, 1, mainMenuClose, callbackFun);
|
|
}
|
|
|
|
//set main menu id from playData
|
|
function playData2GameVersionMenuId()
|
|
{
|
|
if(playData == PLAY_DATA_USERDEF) {
|
|
gameVersionMenuList[0].activeItem = playVersionInfo.length;
|
|
return gameVersionMenuList[0].activeItem;
|
|
} else {
|
|
for(var i = 0; i < playVersionInfo.length; i++) {
|
|
if(playVersionInfo[i].id == playData) {
|
|
gameVersionMenuList[0].activeItem = i;
|
|
return i;
|
|
}
|
|
}
|
|
}
|
|
|
|
error("design error, value =" + playData );
|
|
gameVersionMenuList[0].activeItem = 0;
|
|
return 0;
|
|
}
|
|
|
|
//=========================================
|
|
// Add menu item if the item is not exist
|
|
//=========================================
|
|
function addMenuItem(menuList, addItemObj, addPosition)
|
|
{
|
|
if(addPosition >= 0) {
|
|
menuList.splice(addPosition, 0, addItemObj); //add item to position
|
|
} else {
|
|
menuList.push(addItemObj); //append
|
|
}
|
|
}
|
|
|
|
function gameMenu(callbackFun)
|
|
{
|
|
var titleName;
|
|
|
|
var demoItemObj = { name: " Demo Mode ", activeFun: demoPlay };
|
|
var editPlayItemObj = { name: " Play Mode ", activeFun: editPlay };
|
|
var editBackupItemObj = { name: " Backup ", activeFun: backupDialog };
|
|
var editRestoreItemObj = { name: " Restore ", activeFun: restoreDialog };
|
|
|
|
var gameMenuList = [
|
|
{ activeItem: 0 },
|
|
{ name: " Challenge Mode ", activeFun: classicPlay },
|
|
{ name: " Training Mode ", activeFun: modernPlay },
|
|
// { name: " Demo Mode ", activeFun: demoPlay },
|
|
{ name: " Change Game Version ", activeFun: gameVersionMenu }
|
|
];
|
|
|
|
var editMenuList = [
|
|
{ activeItem: 0 }, //[0]
|
|
{ name: " Edit Mode", activeFun: editEdit }, //[1]
|
|
// { name: " Play ", activeFun: editPlay },
|
|
{ name: " Change Game Version ", activeFun: gameVersionMenu } //[2]
|
|
];
|
|
|
|
switch(true) {
|
|
case (gameVersionMenuList[0].activeItem == playVersionInfo.length):
|
|
titleName = getCustomItemInfo(0);
|
|
if(playMode == PLAY_EDIT || playMode == PLAY_TEST) {
|
|
editMenuList[0].activeItem = 0; //edit.edit
|
|
} else
|
|
editMenuList[0].activeItem = 1; // edit.play
|
|
|
|
addMenuItem(editMenuList, editRestoreItemObj, 2);
|
|
|
|
if(editLevels > 0) {
|
|
addMenuItem(editMenuList, editBackupItemObj, 2);
|
|
addMenuItem(editMenuList, editPlayItemObj, 2);
|
|
}
|
|
menuDialog(titleName, editMenuList, mainStage, tileScale, 1, mainMenuClose, callbackFun);
|
|
return;
|
|
case (gameVersionMenuList[0].activeItem < playVersionInfo.length):
|
|
titleName = playVersionInfo[gameVersionMenuList[0].activeItem].name;
|
|
if(playerDemoData.length > 0) addMenuItem(gameMenuList, demoItemObj, 3);
|
|
break
|
|
default:
|
|
error("design error, value =" + gameVersionMenuList[0].activeItem );
|
|
return;
|
|
}
|
|
|
|
//set active menu id for play mode
|
|
switch(playMode) {
|
|
case PLAY_CLASSIC:
|
|
gameMenuList[0].activeItem = 0;
|
|
break;
|
|
case PLAY_MODERN:
|
|
case PLAY_DEMO_ONCE:
|
|
gameMenuList[0].activeItem = 1;
|
|
break;
|
|
case PLAY_DEMO:
|
|
gameMenuList[0].activeItem = 2;
|
|
break;
|
|
}
|
|
|
|
menuDialog(" " + titleName + " ", gameMenuList, mainStage, tileScale, 1, mainMenuClose, callbackFun);
|
|
return;
|
|
}
|
|
|
|
function subGameMenu(id, callbackFun)
|
|
{
|
|
gameVersionMenuList[0].activeItem = id;
|
|
|
|
playData = menuIdToPlayData(gameVersionMenuList[0].activeItem);
|
|
|
|
//================================================
|
|
// get demo data for current playData from server
|
|
//------------------------------------------------
|
|
if(demoPlayData != playData) initDemoData();
|
|
//================================================
|
|
|
|
classicPlay(id, callbackFun); //set as classic mode
|
|
}
|
|
|
|
function subEditMenu(id, callbackFun)
|
|
{
|
|
gameVersionMenuList[0].activeItem = id;
|
|
//menuDialog(" Your Own Levels ", editMenuList, mainStage, tileScale, 1, mainMenu, callbackFun);
|
|
editEdit(id, callbackFun); //set as edit mode
|
|
}
|
|
|
|
function classicPlay(id, callbackFun)
|
|
{
|
|
if(callbackFun != null) callbackFun();
|
|
if(playMode == PLAY_EDIT) canvasReSize();
|
|
playMode = PLAY_CLASSIC;
|
|
|
|
soundStop(soundDig);
|
|
soundStop(soundFall);
|
|
disableStageClickEvent();
|
|
document.onkeydown = handleKeyDown;
|
|
setLastPlayMode();
|
|
selectIconObj.disable(1);
|
|
demoIconObj.disable(1);
|
|
pasteIconObj.disable();
|
|
initShowDataMsg();
|
|
startGame();
|
|
}
|
|
|
|
function modernPlay(id, callbackFun)
|
|
{
|
|
if(callbackFun != null) callbackFun();
|
|
if(playMode == PLAY_EDIT) canvasReSize();
|
|
playMode = PLAY_MODERN;
|
|
|
|
soundStop(soundDig);
|
|
soundStop(soundFall);
|
|
disableStageClickEvent();
|
|
document.onkeydown = handleKeyDown;
|
|
pasteIconObj.disable();
|
|
setLastPlayMode();
|
|
initShowDataMsg();
|
|
startGame();
|
|
}
|
|
|
|
function demoPlay(id, callbackFun)
|
|
{
|
|
if(callbackFun != null) callbackFun();
|
|
if(playMode == PLAY_EDIT) canvasReSize();
|
|
|
|
playMode = PLAY_DEMO;
|
|
|
|
soundStop(soundDig);
|
|
soundStop(soundFall);
|
|
demoSoundOff = 1; //always sound off when start demo
|
|
anyKeyStopDemo();
|
|
initShowDataMsg();
|
|
demoIconObj.disable(1);
|
|
pasteIconObj.disable();
|
|
startGame();
|
|
}
|
|
|
|
function editPlay(id, callbackFun)
|
|
{
|
|
if(callbackFun != null) callbackFun();
|
|
if(playMode == PLAY_EDIT) canvasReSize();
|
|
playMode = PLAY_MODERN;
|
|
playData = PLAY_DATA_USERDEF;
|
|
|
|
disableStageClickEvent();
|
|
document.onkeydown = handleKeyDown;
|
|
setLastPlayMode();
|
|
//selectIconObj.disable(1);
|
|
demoIconObj.disable(1);
|
|
pasteIconObj.disable();
|
|
if (id < 0) { //id < 0 ==> means call from restore custom levels
|
|
initShowDataMsg(0); //no tips message
|
|
setTimeout(function() { showTipsText("RESTORE COMPLETE", 2500);}, 50);
|
|
startGame(1); // no cycle
|
|
} else {
|
|
initShowDataMsg();
|
|
startGame();
|
|
}
|
|
}
|
|
|
|
function editEdit(id, callbackFun)
|
|
{
|
|
if(callbackFun != null) callbackFun();
|
|
disableStageClickEvent();
|
|
demoIconObj.disable(1);
|
|
pasteIconObj.disable();
|
|
if (id < 0) { //id < 0 ==> means call from restore custom levels
|
|
initShowDataMsg(0);
|
|
setTimeout(function() { showTipsText("RESTORE COMPLETE", 2500);}, 50);
|
|
} else {
|
|
initShowDataMsg();
|
|
}
|
|
startEditMode();
|
|
}
|
|
|
|
function helpMenu(callbackFun)
|
|
{
|
|
var id = 0;
|
|
if(playMode == PLAY_EDIT) id = 1;
|
|
|
|
if(playMode == PLAY_DEMO || playMode == PLAY_DEMO_ONCE) {
|
|
infoObj.showInfo(demoHelp, callbackFun, null);
|
|
} else {
|
|
helpObj.showHelp(id, callbackFun, tileScale, null);
|
|
}
|
|
}
|
|
|
|
function activeSelectMenu(activeFun, postFun)
|
|
{
|
|
if(playMode == PLAY_EDIT) {
|
|
var editLevel = testLevelInfo.level> editLevels?0:testLevelInfo.level;
|
|
|
|
selectDialog(playDataNameUserDef, checkBitmap, editLevelData, editLevel, screenX1, screenY1,
|
|
mainStage, tileScale, activeFun, editSelectMenuClose, postFun)
|
|
} else {
|
|
|
|
var titleName = playDataToTitleName(playData);
|
|
|
|
if(playMode == PLAY_DEMO) titleName = "DEMO: " + titleName;
|
|
|
|
selectDialog(titleName, checkBitmap, levelData, curLevel, screenX1, screenY1,
|
|
mainStage, tileScale, activeFun, null, postFun)
|
|
}
|
|
}
|
|
|
|
// if _level < 0 means "share level" pass dialog
|
|
function levelPassDialog(_level, _getGold, _guardDead, _time, _hiScore,
|
|
_button1Bitmap, _button2Bitmap, _button3Bitmap,
|
|
_stage, _scale, _callBack)
|
|
{
|
|
var TITLE_TEXT_SIZE = 48 * _scale;
|
|
var ITEM_TEXT_SIZE = 40 * _scale;
|
|
var GOLD_X = 32 * _scale;
|
|
|
|
var TITLE_TEXT_COLOR = "white";
|
|
var TITLE_SHADOW_COLOR = "yellow";
|
|
|
|
var ITEM_TEXT_COLOR = "white";
|
|
var TIME_NAME_COLOR = "#fad292";
|
|
var SCORE_NAME_COLOR = TIME_NAME_COLOR;
|
|
var HISCORE_NAME_COLOR = TIME_NAME_COLOR;
|
|
|
|
var TEXT_GAP_Y = ITEM_TEXT_SIZE * 2/3 | 0;
|
|
|
|
var COVER_BACKGROUND_COLOR = "black";
|
|
|
|
var BACKGROUND_BORDER_COLOR = "white"
|
|
var BACKGROUND_COLOR = "#5b0680";
|
|
var BACKGROUND_SHADOW = "gold";
|
|
var BACKGROUND_BORDER_SIZE = 8 * _scale;
|
|
|
|
var BUTTON_BORDER_SIZE = 8 * _scale;
|
|
var BUTTON_ROUND_RADIUD = 2+ 4 * _scale;
|
|
var BUTTON_BORDER_COLOR = "gold";
|
|
var BUTTON_COLOR = "#eeffff"
|
|
var BUTTON_BACKGROUND_COLOR = BACKGROUND_COLOR;
|
|
|
|
var buttonX = _button1Bitmap.getBounds().width * _scale,
|
|
buttonY = _button1Bitmap.getBounds().height * _scale;
|
|
|
|
var titleTextObj, goldTextObj, guardTextObj, timeTextObj;
|
|
var goldObj, guardObj, timeNameObj;
|
|
var scoreNameObj, scoreTextObj,
|
|
hiScoreNameObj, hiScoreTextObj;
|
|
|
|
var coverBackgroundObj, background1Obj, background2Obj, menuButtonObj;
|
|
var screenX1 = _stage.canvas.width;
|
|
var screenY1 = _stage.canvas.height;
|
|
|
|
var menuX, menuY, startX, startY
|
|
var timeNameX, maxTextSize;
|
|
var menuButton = [];
|
|
var bitmap = [ _button1Bitmap, _button2Bitmap, _button3Bitmap ];
|
|
|
|
var centerX, xOffset, yOffset;
|
|
|
|
var levelScore = 0, goldPoint = 0, guardPoint = 0, timePoint = MAX_TIME_COUNT;
|
|
var countTime = 85, onePointValue = 100, countAddValue = 47;
|
|
|
|
init();
|
|
|
|
function init()
|
|
{
|
|
initContent();
|
|
coverParentStage();
|
|
creatBackground();
|
|
createContent();
|
|
_stage.enableMouseOver(120);
|
|
_stage.update();
|
|
setTimeout(function() { goldScoreCounting(1);}, 200);
|
|
}
|
|
|
|
function initContent()
|
|
{
|
|
titleTextObj = new createjs.Text("LEVEL " + ("00"+_level).slice(-3),
|
|
"bold "+TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
|
|
titleTextObj.shadow = new createjs.Shadow(TITLE_SHADOW_COLOR, 0, 0, 10 );
|
|
|
|
goldTextObj = new createjs.Text("000", ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
|
|
|
|
guardTextObj = new createjs.Text("000", ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
|
|
|
|
timeTextObj = new createjs.Text(("00"+MAX_TIME_COUNT).slice(-3), ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
|
|
|
|
timeNameObj = new createjs.Text("TIME", "bold " + ITEM_TEXT_SIZE + "px Helvetica", TIME_NAME_COLOR);
|
|
|
|
scoreNameObj = new createjs.Text("SCORE", "bold " + ITEM_TEXT_SIZE + "px Helvetica", SCORE_NAME_COLOR);
|
|
scoreTextObj = new createjs.Text("000000", ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
|
|
|
|
hiScoreNameObj = new createjs.Text("HI-SCORE", "bold " + ITEM_TEXT_SIZE + "px Helvetica", HISCORE_NAME_COLOR);
|
|
hiScoreTextObj = new createjs.Text( ("00000"+_hiScore).slice(-6),
|
|
ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
|
|
|
|
timeNameX = timeNameObj.getBounds().width;
|
|
maxTextSize = hiScoreNameObj.getBounds().width + hiScoreTextObj.getBounds().width;
|
|
menuX = maxTextSize + TITLE_TEXT_SIZE * 5;
|
|
menuY = TITLE_TEXT_SIZE * 2 + (ITEM_TEXT_SIZE+TEXT_GAP_Y) * 5 + buttonY*3;
|
|
|
|
startX = (screenX1-menuX)/2|0;
|
|
startY = (screenY1-menuY)/2|0;
|
|
}
|
|
|
|
function coverParentStage()
|
|
{
|
|
coverBackgroundObj = new createjs.Shape();
|
|
coverBackgroundObj.graphics.beginFill(COVER_BACKGROUND_COLOR).drawRect(0, 0, screenX1, screenY1).endFill();
|
|
coverBackgroundObj.alpha = 0.6;
|
|
_stage.addChild(coverBackgroundObj);
|
|
}
|
|
|
|
function creatBackground()
|
|
{
|
|
background1Obj = new createjs.Shape();
|
|
background1Obj.graphics.beginFill(BACKGROUND_BORDER_COLOR)
|
|
.drawRoundRect(startX, startY, menuX, menuY, 8*_scale).endFill();
|
|
background1Obj.shadow = new createjs.Shadow(BACKGROUND_SHADOW, 3, 3, 5 );
|
|
|
|
background2Obj = new createjs.Shape();
|
|
background2Obj.graphics.beginFill(BACKGROUND_COLOR)
|
|
.drawRoundRect(startX+BACKGROUND_BORDER_SIZE, startY+BACKGROUND_BORDER_SIZE,
|
|
menuX-BACKGROUND_BORDER_SIZE*2, menuY-BACKGROUND_BORDER_SIZE*2, 8*_scale).endFill();
|
|
_stage.addChild(background1Obj, background2Obj);
|
|
}
|
|
|
|
function createContent()
|
|
{
|
|
titleTextObj.x = startX + (menuX - titleTextObj.getBounds().width)/2|0;
|
|
titleTextObj.y = startY + TITLE_TEXT_SIZE;
|
|
_stage.addChild(titleTextObj);
|
|
|
|
var centerGap = 8*_scale;
|
|
|
|
centerX = startX+ menuX/2|0;
|
|
xOffset = centerX;
|
|
yOffset = startY+TITLE_TEXT_SIZE*3;
|
|
|
|
goldObj = drawText(xOffset, yOffset-TEXT_GAP_Y/3, "@", _stage); //@: gold
|
|
var xOffset = centerX - GOLD_X - centerGap;
|
|
goldObj[0].x = xOffset;
|
|
goldObj[0].alpha = 0;
|
|
|
|
goldTextObj.x = centerX + centerGap;
|
|
goldTextObj.y = yOffset;
|
|
goldTextObj.alpha = 0;
|
|
_stage.addChild(goldTextObj);
|
|
|
|
yOffset += (ITEM_TEXT_SIZE + TEXT_GAP_Y);
|
|
guardObj = drawText(xOffset, yOffset-TEXT_GAP_Y/3, "#", _stage); //#: trap (陷井)
|
|
guardObj[0].alpha = 0;
|
|
|
|
guardTextObj.x =centerX + centerGap;
|
|
guardTextObj.y = yOffset;
|
|
guardTextObj.alpha = 0;
|
|
_stage.addChild(guardTextObj);
|
|
|
|
var xOffset = centerX - timeNameX - centerGap;
|
|
yOffset += (ITEM_TEXT_SIZE + TEXT_GAP_Y);
|
|
timeNameObj.x = xOffset;
|
|
timeNameObj.y = yOffset;
|
|
timeNameObj.alpha = 0;
|
|
|
|
timeTextObj.x = centerX + centerGap;
|
|
timeTextObj.y = yOffset;
|
|
timeTextObj.alpha = 0;
|
|
_stage.addChild(timeNameObj, timeTextObj);
|
|
|
|
xOffset = centerX - scoreNameObj.getBounds().width - centerGap;
|
|
yOffset += (ITEM_TEXT_SIZE + TEXT_GAP_Y);
|
|
scoreNameObj.x = xOffset;
|
|
scoreNameObj.y = yOffset;
|
|
scoreTextObj.x = centerX + centerGap;
|
|
scoreTextObj.y = yOffset;
|
|
_stage.addChild(scoreNameObj, scoreTextObj);
|
|
|
|
xOffset = centerX - hiScoreNameObj.getBounds().width - centerGap;
|
|
yOffset += (ITEM_TEXT_SIZE+ TEXT_GAP_Y/3);
|
|
hiScoreNameObj.x = xOffset;
|
|
hiScoreNameObj.y = yOffset;
|
|
hiScoreTextObj.x = centerX + centerGap;
|
|
hiScoreTextObj.y = yOffset;
|
|
_stage.addChild(hiScoreNameObj, hiScoreTextObj);
|
|
|
|
yOffset += (ITEM_TEXT_SIZE + buttonY); //yOffset for menu button
|
|
}
|
|
|
|
function updateHiScore()
|
|
{
|
|
if(_hiScore < levelScore) {
|
|
hiScoreTextObj.text = ("00000" + (levelScore)).slice(-6);
|
|
hiScoreTextObj.color = "gold";
|
|
}
|
|
}
|
|
|
|
function goldScoreCounting(firstTime)
|
|
{
|
|
var endCount = 0;
|
|
if(firstTime) {
|
|
goldObj[0].alpha = 1;
|
|
goldTextObj.alpha = 1;
|
|
soundPlay("scoreBell");
|
|
if(_getGold <= 0) {
|
|
endCount = 1;
|
|
} else {
|
|
setTimeout(function() { goldScoreCounting(0); }, countTime );
|
|
}
|
|
} else {
|
|
var addCount = countAddValue, endCount = 0;
|
|
if(goldPoint + addCount >= _getGold) {
|
|
endCount = 1;
|
|
addCount = _getGold - goldPoint;
|
|
}
|
|
soundPlay("scoreCount");
|
|
goldPoint += addCount;
|
|
levelScore += (addCount * onePointValue);
|
|
goldTextObj.text = ("00" + (goldPoint)).slice(-3);
|
|
scoreTextObj.text = ("00000" + (levelScore)).slice(-6);
|
|
updateHiScore();
|
|
|
|
if(!endCount) {
|
|
setTimeout(function() { goldScoreCounting(0); }, countTime );
|
|
}
|
|
}
|
|
|
|
if(endCount) {
|
|
setTimeout(function() { guardScoreCounting(1); }, countTime*4);
|
|
}
|
|
_stage.update();
|
|
}
|
|
|
|
function guardScoreCounting(firstTime)
|
|
{
|
|
var endCount = 0;
|
|
if(firstTime) {
|
|
guardObj[0].alpha = 1;
|
|
guardTextObj.alpha = 1;
|
|
soundPlay("scoreBell");
|
|
if(_guardDead <= 0) {
|
|
endCount = 1;
|
|
} else {
|
|
setTimeout(function() { guardScoreCounting(0); }, countTime );
|
|
}
|
|
} else {
|
|
var addCount = countAddValue, endCount = 0;
|
|
if(guardPoint + addCount >= _guardDead) {
|
|
endCount = 1;
|
|
addCount = _guardDead - guardPoint;
|
|
}
|
|
soundPlay("scoreCount");
|
|
guardPoint += addCount;
|
|
levelScore += (addCount * onePointValue);
|
|
guardTextObj.text = ("00" + (guardPoint)).slice(-3);
|
|
scoreTextObj.text = ("00000" + (levelScore)).slice(-6);
|
|
updateHiScore();
|
|
|
|
if(!endCount) {
|
|
setTimeout(function() { guardScoreCounting(0); }, countTime );
|
|
}
|
|
}
|
|
|
|
if(endCount) {
|
|
setTimeout(function() { timeScoreCounting(1); }, countTime*4 );
|
|
}
|
|
_stage.update();
|
|
}
|
|
|
|
function timeScoreCounting(firstTime)
|
|
{
|
|
var endCount = 0;
|
|
if(firstTime) {
|
|
timeNameObj.alpha = 1;
|
|
timeTextObj.alpha = 1;
|
|
soundPlay("scoreBell");
|
|
if(_time >= MAX_TIME_COUNT) {
|
|
endCount = 1;
|
|
} else {
|
|
setTimeout(function() { timeScoreCounting(0); }, countTime );
|
|
}
|
|
} else {
|
|
var addCount = countAddValue, endCount = 0;
|
|
if(timePoint - addCount <= _time) {
|
|
endCount = 1;
|
|
addCount = timePoint - _time;
|
|
}
|
|
soundPlay("scoreCount");
|
|
timePoint -= addCount;
|
|
levelScore += (addCount * onePointValue);
|
|
timeTextObj.text = ("00" + (timePoint)).slice(-3);
|
|
scoreTextObj.text = ("00000" + (levelScore)).slice(-6);
|
|
updateHiScore();
|
|
|
|
if(!endCount) {
|
|
setTimeout(function() { timeScoreCounting(0); }, countTime );
|
|
}
|
|
}
|
|
|
|
if(endCount) {
|
|
soundPlay("scoreEnding");
|
|
setTimeout(function() { createButton(); }, 100 );
|
|
}
|
|
_stage.update();
|
|
}
|
|
|
|
function createButton()
|
|
{
|
|
var border, button;
|
|
|
|
for(var i = 0; i < 3; i++ ) {
|
|
menuButton[i] = new createjs.Container();
|
|
border = new createjs.Shape();
|
|
button = new createjs.Shape();
|
|
|
|
xOffset = centerX - buttonX*3 + (buttonX *5/2*i)|0;
|
|
|
|
//id = 0
|
|
border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2,
|
|
buttonX+4*BUTTON_BORDER_SIZE, buttonY+4*BUTTON_BORDER_SIZE,BUTTON_ROUND_RADIUD).endFill();
|
|
//id = 1
|
|
button.graphics.beginFill(BUTTON_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE,
|
|
buttonX+BUTTON_BORDER_SIZE*2, buttonY+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
//id = 2
|
|
bitmap[i].setTransform(0, 0, _scale, _scale);
|
|
|
|
menuButton[i].x = xOffset;
|
|
menuButton[i].y = yOffset;
|
|
menuButton[i].addChild(border, button, bitmap[i]);
|
|
|
|
menuButton[i].on('click', buttonClick);
|
|
menuButton[i].on('mouseover', buttonMouseOver);
|
|
menuButton[i].on('mouseout', buttonMouseOut);
|
|
menuButton[i].myId = i;
|
|
_stage.addChild(menuButton[i]);
|
|
|
|
}
|
|
_stage.update();
|
|
}
|
|
|
|
function buttonClick()
|
|
{
|
|
removeAllObj();
|
|
_stage.cursor = 'default';
|
|
_stage.enableMouseOver(0);
|
|
if(_callBack) _callBack(this.myId);
|
|
//debug(this.myId);
|
|
}
|
|
|
|
function buttonMouseOver()
|
|
{
|
|
var border = this.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BORDER_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2,
|
|
buttonX+BUTTON_BORDER_SIZE*4, buttonY+BUTTON_BORDER_SIZE*4,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
_stage.cursor = 'pointer';
|
|
_stage.update();
|
|
}
|
|
|
|
function buttonMouseOut()
|
|
{
|
|
var border = this.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2,
|
|
buttonX+BUTTON_BORDER_SIZE*4, buttonY+BUTTON_BORDER_SIZE*4,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
_stage.cursor = 'default';
|
|
_stage.update();
|
|
}
|
|
|
|
function removeAllObj()
|
|
{
|
|
_stage.removeChild(coverBackgroundObj, background1Obj, background2Obj, titleTextObj);
|
|
|
|
_stage.removeChild(goldObj[0], goldTextObj);
|
|
_stage.removeChild(guardObj[0], guardTextObj);
|
|
_stage.removeChild(timeNameObj, timeTextObj);
|
|
_stage.removeChild(scoreNameObj, scoreTextObj);
|
|
_stage.removeChild(hiScoreNameObj, hiScoreTextObj);
|
|
|
|
for(var i = 0; i < 3; i++) {
|
|
_stage.removeChild(menuButton[i]);
|
|
}
|
|
_stage.update();
|
|
}
|
|
|
|
}
|
|
|
|
function yesNoDialog(_txtMsg, _yesBitmap, _noBitmap, _stage, _scale, _callBack)
|
|
{
|
|
var TEXT_MSG_SIZE = 48 * _scale;
|
|
var TEXT_GAP_Y = TEXT_MSG_SIZE * 3/4 | 0;
|
|
|
|
var TEXT_MSG_COLOR = "white";
|
|
var TEXT_MSG_SHADOW_COLOR = "yellow";
|
|
|
|
var COVER_BACKGROUND_COLOR = "black";
|
|
|
|
var BACKGROUND_BORDER_COLOR = "white"
|
|
var BACKGROUND_COLOR = "#5b0680";
|
|
var BACKGROUND_SHADOW = "gold";
|
|
var BACKGROUND_BORDER_SIZE = 8 * _scale;
|
|
|
|
var BUTTON_BORDER_SIZE = 8 * _scale;
|
|
var BUTTON_ROUND_RADIUD = 2+ 4 * _scale;
|
|
var BUTTON_BORDER_COLOR = "gold";
|
|
var BUTTON_COLOR = "#eeffff"
|
|
var BUTTON_BACKGROUND_COLOR = BACKGROUND_COLOR;
|
|
|
|
var saveStateObj;
|
|
var textObj;
|
|
|
|
var coverBackgroundObj, background1Obj, background2Obj;
|
|
var screenX1 = _stage.canvas.width;
|
|
var screenY1 = _stage.canvas.height;
|
|
|
|
var buttonX = _yesBitmap.getBounds().width * _scale,
|
|
buttonY = _yesBitmap.getBounds().height * _scale;
|
|
|
|
var menuX, menuY, startX, startY
|
|
var menuButton = [];
|
|
var bitmap = [ _yesBitmap, _noBitmap ];
|
|
|
|
init();
|
|
|
|
function init()
|
|
{
|
|
saveKeyState();
|
|
initTxtMsg();
|
|
coverParentStage();
|
|
creatBackground();
|
|
createTxtMsg();
|
|
createButton();
|
|
|
|
_stage.enableMouseOver(60);
|
|
_stage.update();
|
|
}
|
|
|
|
function saveKeyState()
|
|
{
|
|
saveStateObj = saveKeyHandler(noKeyDown);
|
|
}
|
|
|
|
function restoreKeyState()
|
|
{
|
|
restoreKeyHandler(saveStateObj);
|
|
}
|
|
|
|
function initTxtMsg()
|
|
{
|
|
var maxTextSize = 0, tmpTextSize;
|
|
|
|
textObj = [];
|
|
for(var i = 0; i < _txtMsg.length; i++) {
|
|
textObj[i] = new createjs.Text(_txtMsg[i], "bold " + TEXT_MSG_SIZE + "px Helvetica",TEXT_MSG_COLOR);
|
|
if( i == 0 ) //only first line message has shadow
|
|
textObj[i].shadow = new createjs.Shadow(TEXT_MSG_SHADOW_COLOR, 0, 0, 10 );
|
|
tmpTextSize = textObj[i].getBounds().width;
|
|
if(maxTextSize < tmpTextSize) maxTextSize = tmpTextSize;
|
|
}
|
|
if(maxTextSize < buttonX * 4) maxTextSize = buttonX * 4;
|
|
|
|
menuY = (TEXT_GAP_Y + TEXT_MSG_SIZE) * _txtMsg.length + TEXT_MSG_SIZE * 2 + buttonY;
|
|
menuX = maxTextSize + TEXT_MSG_SIZE * 2;
|
|
|
|
startX = (screenX1-menuX)/2|0;
|
|
startY = (screenY1-menuY)/2|0;
|
|
}
|
|
|
|
function coverParentStage()
|
|
{
|
|
coverBackgroundObj = new createjs.Shape();
|
|
coverBackgroundObj.graphics.beginFill(COVER_BACKGROUND_COLOR).drawRect(0, 0, screenX1, screenY1).endFill();
|
|
coverBackgroundObj.alpha = 0.6;
|
|
_stage.addChild(coverBackgroundObj);
|
|
}
|
|
|
|
function creatBackground()
|
|
{
|
|
background1Obj = new createjs.Shape();
|
|
background1Obj.graphics.beginFill(BACKGROUND_BORDER_COLOR)
|
|
.drawRoundRect(startX, startY, menuX, menuY, 8*_scale).endFill();
|
|
background1Obj.shadow = new createjs.Shadow(BACKGROUND_SHADOW, 3, 3, 5 );
|
|
|
|
background2Obj = new createjs.Shape();
|
|
background2Obj.graphics.beginFill(BACKGROUND_COLOR)
|
|
.drawRoundRect(startX+BACKGROUND_BORDER_SIZE, startY+BACKGROUND_BORDER_SIZE,
|
|
menuX-BACKGROUND_BORDER_SIZE*2, menuY-BACKGROUND_BORDER_SIZE*2, 8*_scale).endFill();
|
|
_stage.addChild(background1Obj, background2Obj);
|
|
}
|
|
|
|
function createTxtMsg()
|
|
{
|
|
for(var i = 0; i < textObj.length; i++) {
|
|
textObj[i].x = startX + (menuX - textObj[i].getBounds().width)/2|0
|
|
textObj[i].y = startY + (TEXT_GAP_Y + TEXT_MSG_SIZE) * i + TEXT_GAP_Y;
|
|
_stage.addChild(textObj[i]);
|
|
}
|
|
}
|
|
|
|
function createButton()
|
|
{
|
|
var border, button;
|
|
var centerX = startX+ menuX/2|0;
|
|
|
|
for(var i = 0; i < 2; i++ ) {
|
|
menuButton[i] = new createjs.Container();
|
|
border = new createjs.Shape();
|
|
button = new createjs.Shape();
|
|
|
|
//id = 0
|
|
border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2,
|
|
buttonX+4*BUTTON_BORDER_SIZE, buttonY+4*BUTTON_BORDER_SIZE,BUTTON_ROUND_RADIUD).endFill();
|
|
//id = 1
|
|
button.graphics.beginFill(BUTTON_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE,
|
|
buttonX+BUTTON_BORDER_SIZE*2, buttonY+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
//id = 2
|
|
bitmap[i].setTransform(0, 0, _scale, _scale);
|
|
|
|
menuButton[i].x = centerX - buttonX*2.5 + (buttonX*4*i);
|
|
menuButton[i].y = textObj[textObj.length-1].y + TEXT_MSG_SIZE*2;
|
|
menuButton[i].addChild(border, button, bitmap[i]);
|
|
|
|
menuButton[i].on('click', buttonClick);
|
|
menuButton[i].on('mouseover', buttonMouseOver);
|
|
menuButton[i].on('mouseout', buttonMouseOut);
|
|
menuButton[i].myId = i;
|
|
_stage.addChild(menuButton[i]);
|
|
|
|
}
|
|
_stage.update();
|
|
}
|
|
|
|
function buttonClick()
|
|
{
|
|
restoreKeyState();
|
|
removeAllObj();
|
|
_stage.cursor = 'default';
|
|
_stage.enableMouseOver(0);
|
|
if(_callBack) _callBack(!this.myId+0);
|
|
//debug(this.myId);
|
|
}
|
|
|
|
function buttonMouseOver()
|
|
{
|
|
var border = this.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BORDER_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2,
|
|
buttonX+BUTTON_BORDER_SIZE*4, buttonY+BUTTON_BORDER_SIZE*4,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
_stage.cursor = 'pointer';
|
|
_stage.update();
|
|
}
|
|
|
|
function buttonMouseOut()
|
|
{
|
|
var border = this.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2,
|
|
buttonX+BUTTON_BORDER_SIZE*4, buttonY+BUTTON_BORDER_SIZE*4,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
_stage.cursor = 'default';
|
|
_stage.update();
|
|
}
|
|
|
|
function removeAllObj()
|
|
{
|
|
_stage.removeChild(coverBackgroundObj, background1Obj, background2Obj);
|
|
|
|
for(var i = 0; i < textObj.length; i++) {
|
|
_stage.removeChild(textObj[i]);
|
|
}
|
|
|
|
for(var i = 0; i < menuButton.length; i++) {
|
|
_stage.removeChild(menuButton[i]);
|
|
}
|
|
|
|
_stage.update();
|
|
}
|
|
}
|
|
|
|
|
|
function backupDialog(id, _callBackFun)
|
|
{
|
|
var _stage = mainStage;
|
|
var _scale = tileScale;
|
|
|
|
var TITLE_TEXT_SIZE = 48 * _scale;
|
|
var MSG_TEXT_SIZE = 40 * _scale;
|
|
var BUTTON_TEXT_SIZE = 40 * _scale;
|
|
|
|
var BUTTON_BORDER_SIZE = 8 * _scale;
|
|
var BUTTON_ROUND_RADIUD = 2+ 4 * _scale;
|
|
|
|
var COVER_BACKGROUND_COLOR = "black";
|
|
|
|
var BUTTON_BACKGROUND_BORDER_COLOR = "white";
|
|
var BUTTON_BACKGROUND_SHADOW = "gold";
|
|
var BUTTON_BACKGROUND_COLOR = "#5b0680"; //"#890ee0";
|
|
var BUTTON_BACKGROUND_BORDER_SIZE = 8 * _scale;;
|
|
|
|
var TITLE_TEXT_COLOR = "white";
|
|
var TITLE_TEXT_SHADOW_COLOR = "gold";
|
|
|
|
var MSG_TEXT_COLOR = "white";
|
|
|
|
var BUTTON_TEXT_COLOR = "white"
|
|
var BUTTON_TEXT_SHADOW_COLOR = "gold";
|
|
|
|
var BUTTON_BORDER0_COLOR = "white"; //"#890ee0";
|
|
var BUTTON_COLOR = "#5d7cff";
|
|
var BUTTON_BORDER1_COLOR = "gold";
|
|
|
|
var CLOSE_ICON_ACTIVE_COLOR = "#ff5050";
|
|
|
|
var MSG_AREA_Y = MSG_TEXT_SIZE * 3/2 | 0;
|
|
var MSG_GAP_Y = MSG_TEXT_SIZE * 2/3 | 0;
|
|
|
|
var coverBackgroundObj;
|
|
var background1Obj, background2Obj;
|
|
var titleTextObj, msgTextObj;
|
|
|
|
var buttonTextObj, buttonObj;
|
|
|
|
var closeIconObj;
|
|
var saveKeyStateObj;
|
|
|
|
var buttonSizeX;
|
|
var menuX, menuY;
|
|
var startX, startY;
|
|
|
|
var screenX1 = _stage.canvas.width;
|
|
var screenY1 = _stage.canvas.height;
|
|
|
|
init();
|
|
|
|
function init()
|
|
{
|
|
saveKeyState();
|
|
coverParentStage();
|
|
initContent();
|
|
creatBackground();
|
|
createContent();
|
|
closeIconObj = new closeIconClass(startX+menuX, startY, _stage, _scale, CLOSE_ICON_ACTIVE_COLOR, closeDialog, null);
|
|
|
|
_stage.enableMouseOver(120);
|
|
_stage.update();
|
|
}
|
|
|
|
function saveKeyState()
|
|
{
|
|
saveKeyStateObj = saveKeyHandler(handleEscKeyDown);
|
|
}
|
|
|
|
function restoreKeyState()
|
|
{
|
|
restoreKeyHandler(saveKeyStateObj);
|
|
}
|
|
|
|
function coverParentStage()
|
|
{
|
|
coverBackgroundObj = new createjs.Shape();
|
|
coverBackgroundObj.graphics.beginFill(COVER_BACKGROUND_COLOR).drawRect(0, 0, screenX1, screenY1).endFill();
|
|
coverBackgroundObj.alpha = 0.6;
|
|
_stage.addChild(coverBackgroundObj);
|
|
}
|
|
|
|
function initContent()
|
|
{
|
|
titleTextObj = new createjs.Text(" Backup ", "bold "+TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
|
|
titleTextObj.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 0, 0, 10 );
|
|
|
|
msgTextObj = new createjs.Text("Back up all custom levels to a file", "bold " + MSG_TEXT_SIZE + "px Helvetica", MSG_TEXT_COLOR);
|
|
|
|
buttonTextObj = new createjs.Text("Backup", "bold " + BUTTON_TEXT_SIZE + "px Helvetica", BUTTON_TEXT_COLOR);
|
|
|
|
buttonSizeX = buttonTextObj.getBounds().width + BUTTON_TEXT_SIZE;
|
|
menuX = msgTextObj.getBounds().width + TITLE_TEXT_SIZE * 2;
|
|
menuY = TITLE_TEXT_SIZE * 2.5 + (MSG_TEXT_SIZE *2) + MSG_GAP_Y * 4|0;
|
|
|
|
startX = (screenX1-menuX)/2|0;
|
|
startY = (screenY1-menuY)/2|0;
|
|
}
|
|
|
|
function creatBackground()
|
|
{
|
|
background1Obj = new createjs.Shape();
|
|
background1Obj.graphics.beginFill(BUTTON_BACKGROUND_BORDER_COLOR)
|
|
.drawRoundRect(startX, startY, menuX, menuY, 8*_scale).endFill();
|
|
background1Obj.shadow = new createjs.Shadow(BUTTON_BACKGROUND_SHADOW, 3, 3, 5 );
|
|
|
|
background2Obj = new createjs.Shape();
|
|
background2Obj.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(startX+BUTTON_BACKGROUND_BORDER_SIZE, startY+BUTTON_BACKGROUND_BORDER_SIZE,
|
|
menuX-BUTTON_BACKGROUND_BORDER_SIZE*2, menuY-BUTTON_BACKGROUND_BORDER_SIZE*2, 8*_scale).endFill();
|
|
_stage.addChild(background1Obj, background2Obj);
|
|
}
|
|
|
|
function createContent()
|
|
{
|
|
titleTextObj.x = startX + (menuX - titleTextObj.getBounds().width)/2|0;
|
|
titleTextObj.y = startY + TITLE_TEXT_SIZE*3/4;
|
|
_stage.addChild(titleTextObj);
|
|
|
|
var yOffset = (TITLE_TEXT_SIZE*2.2)|0;
|
|
|
|
msgTextObj.x = startX + (menuX - msgTextObj.getBounds().width)/2|0;
|
|
msgTextObj.y = startY + yOffset;
|
|
_stage.addChild(msgTextObj);
|
|
|
|
buttonObj = new createjs.Container();
|
|
|
|
//child id = 0
|
|
var border = new createjs.Shape();
|
|
border.graphics.beginFill(BUTTON_BORDER0_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE/2, -BUTTON_BORDER_SIZE/2, buttonSizeX+BUTTON_BORDER_SIZE, MSG_AREA_Y+BUTTON_BORDER_SIZE ,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
//child id = 1
|
|
var button = new createjs.Shape();
|
|
button.graphics.beginFill(BUTTON_COLOR).drawRoundRect(0, 0, buttonSizeX, MSG_AREA_Y,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
//child id = 2
|
|
buttonTextObj.textAlign = "center";
|
|
buttonTextObj.x = buttonSizeX/2|0;
|
|
buttonTextObj.y = (MSG_AREA_Y - msgTextObj.getBounds().height)/2|0;
|
|
|
|
yOffset += (MSG_GAP_Y*2 + TITLE_TEXT_SIZE/2)|0;
|
|
buttonObj.addChild(border, button, buttonTextObj);
|
|
buttonObj.x = startX + (menuX - buttonSizeX)/2|0;
|
|
buttonObj.y = startY+ yOffset;
|
|
|
|
buttonObj.on('click', buttonClick);
|
|
buttonObj.on('mouseover', buttonMouseOver);
|
|
buttonObj.on('mouseout', buttonMouseOut);
|
|
_stage.addChild(buttonObj);
|
|
}
|
|
|
|
function buttonClick()
|
|
{
|
|
var downloadfileName = downloadCustomLevelData();
|
|
restoreKeyState();
|
|
removeAllObj();
|
|
_stage.cursor = 'default';
|
|
_stage.enableMouseOver(0);
|
|
if(_callBackFun) _callBackFun();
|
|
|
|
setTimeout(function() { showTipsText("BACKUP IS COMPLETE", 2500);}, 50);
|
|
}
|
|
|
|
function removeAllObj()
|
|
{
|
|
_stage.removeChild(coverBackgroundObj, background1Obj, background2Obj);
|
|
_stage.removeChild(titleTextObj, msgTextObj, buttonObj);
|
|
_stage.removeChild(closeIconObj);
|
|
_stage.update();
|
|
}
|
|
|
|
function buttonMouseOver()
|
|
{
|
|
var border = buttonObj.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BORDER1_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE, buttonSizeX+BUTTON_BORDER_SIZE*2, MSG_AREA_Y+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
buttonTextObj.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 2, 2, 10 );
|
|
_stage.cursor = 'pointer';
|
|
_stage.update();
|
|
}
|
|
|
|
function buttonMouseOut()
|
|
{
|
|
var border = buttonObj.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BORDER0_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE/2, -BUTTON_BORDER_SIZE/2, buttonSizeX+BUTTON_BORDER_SIZE, MSG_AREA_Y+BUTTON_BORDER_SIZE, BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
buttonTextObj.shadow = null;
|
|
_stage.cursor = 'default';
|
|
_stage.update();
|
|
}
|
|
|
|
function closeDialog()
|
|
{
|
|
restoreKeyState();
|
|
removeAllObj();
|
|
_stage.cursor = 'default';
|
|
_stage.enableMouseOver(0);
|
|
if(_callBackFun) _callBackFun();
|
|
}
|
|
|
|
function getBackupFileName(d)
|
|
{
|
|
//var d = new Date();
|
|
|
|
//LR-05.10.21.141804.lrwg
|
|
return 'LR'+ ('0'+(d.getMonth()+1)).slice(-2) + ('0'+d.getDate()).slice(-2) + ('0'+d.getFullYear()).slice(-2) + '-'+ ('0'+d.getHours()).slice(-2) + ('0'+d.getMinutes()).slice(-2) + ('0'+d.getSeconds()).slice(-2) + '-' + ('00'+editLevels).slice(-3) + '.lrwg';
|
|
}
|
|
|
|
function downloadCustomLevelData()
|
|
{
|
|
var date = new Date();
|
|
var fileName = getBackupFileName(date);
|
|
|
|
download(fileName, backupCustomLevelData(date));
|
|
|
|
return fileName;
|
|
|
|
function download(filename, text) {
|
|
//reference: https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
|
|
var element = document.createElement('a');
|
|
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
|
element.setAttribute('download', filename);
|
|
|
|
element.style.display = 'none';
|
|
document.body.appendChild(element);
|
|
|
|
element.click();
|
|
|
|
document.body.removeChild(element);
|
|
}
|
|
|
|
}
|
|
|
|
function handleEscKeyDown(event)
|
|
{
|
|
if(!event){ event = window.event; } //cross browser issues exist
|
|
|
|
if(event.shiftKey || event.ctrlKey) return false;
|
|
|
|
switch(event.key) {
|
|
case "Escape":
|
|
closeDialog();
|
|
break;
|
|
default:
|
|
//debug("keycode = " + code);
|
|
break;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
}
|
|
|
|
function restoreDialog(id, _callBackFun)
|
|
{
|
|
//LODE RUNNER WEB GAME.Wed May 12 2021 19:04:16 GMT+0800 (台北標準時間).PLAYER.XXXXX\n
|
|
|
|
var _scale = tileScale;
|
|
|
|
var MAX_DISPLAY_FILENAME_LEN = 26;
|
|
|
|
var TITLE_TEXT_SIZE = 48 * _scale;
|
|
var MSG_TEXT_SIZE = 40 * _scale;
|
|
var BUTTON_TEXT_SIZE = 40 * _scale;
|
|
var FILEINFO_TEXT_SIZE = 36 * _scale;
|
|
var MAPNO_TEXT_SIZE = 20 * _scale;
|
|
var TOTALLEVEL_TEXT_SIZE = 28 * _scale;
|
|
|
|
var BUTTON_BORDER_SIZE = 8 * _scale;
|
|
var BUTTON_ROUND_RADIUD = 2+ 4 * _scale;
|
|
|
|
var COVER_BACKGROUND_COLOR = "black";
|
|
|
|
var BUTTON_BACKGROUND_BORDER_COLOR = "white";
|
|
var BUTTON_BACKGROUND_SHADOW = "gold";
|
|
var BUTTON_BACKGROUND_COLOR = "#5b0680"; //"#890ee0";
|
|
var BUTTON_BACKGROUND_BORDER_SIZE = 8 * _scale;
|
|
|
|
var PREVIEWMAP_BUTTON_COLOR = "white";
|
|
var PREVIEWMAP_BUTTON_BORDER_SIZE = 4 * _scale;
|
|
var PREVIEWMAP_BUTTON_GRAY_ALPHA = 0.2;
|
|
|
|
var TITLE_TEXT_COLOR = "white";
|
|
var TITLE_TEXT_SHADOW_COLOR = "gold";
|
|
|
|
var MSG_TEXT_COLOR = "white";
|
|
|
|
var WRONG_TEXT_COLOR = "#f54B42";
|
|
var WRONG_TEXT_OUTLINE_COLOR = "#FFFFB0";
|
|
var WRONG_TEXT_SHADOW_COLOR = "#404040";
|
|
|
|
var BUTTON_TEXT_COLOR = "white"
|
|
var BUTTON_TEXT_SHADOW_COLOR = "gold";
|
|
|
|
var BUTTON_BORDER0_COLOR = "white";
|
|
var BUTTON_COLOR = "#5d7cff";
|
|
var BUTTON_BORDER1_COLOR = "gold";
|
|
|
|
var OPENBUTTON_BACKGROUND_COLOR = BUTTON_BACKGROUND_COLOR,
|
|
OPENBUTTON_COLOR = "#FFFFFF",
|
|
OPENBUTTON_BORDER_COLOR = "gold";
|
|
|
|
var OPENBUTTON_BORDER_SIZE = 8 * _scale,
|
|
OPENBUTTON_ROUND_RADIUD = 2+ 4 * _scale;
|
|
|
|
var FILEINFO_TEXT_COLOR = "#EEEEEE";
|
|
|
|
var CLOSE_ICON_ACTIVE_COLOR = "#ff5050";
|
|
|
|
var MSG_AREA_Y = MSG_TEXT_SIZE * 3/2 | 0;
|
|
var MSG_GAP_Y = MSG_TEXT_SIZE * 2/3 | 0;
|
|
|
|
var PREVIEW_MAP_SCALE = tileScale * 0.13;
|
|
var previewMapX = NO_OF_TILES_X*BASE_TILE_X*PREVIEW_MAP_SCALE,
|
|
previewMapY = NO_OF_TILES_Y*BASE_TILE_Y*PREVIEW_MAP_SCALE;
|
|
var previewMapGapX = 16*tileScale,
|
|
previewMapPerLine = 5;
|
|
|
|
var coverBackgroundObj;
|
|
|
|
var restoreCanvas;
|
|
var dialogStage;
|
|
|
|
var background1Obj, background2Obj;
|
|
var titleTextObj, msgTextObj;
|
|
var fileTextObj, fileNameTextObj, fileNameBackgroundObj;
|
|
var openFolderButtonObj;
|
|
var wrongText1Obj, wrongText2Obj;
|
|
var fileInfoTextObj;
|
|
var buttonTextObj, buttonObj;
|
|
var fileNameObj = null;
|
|
|
|
var closeIconObj;
|
|
var saveKeyStateObj;
|
|
|
|
var maxFileNameSize, totalFileNameSizeX, totalPreviewMapSizeX;
|
|
var previewNoYOffset, previewMapYOffset;
|
|
|
|
var buttonSizeX;
|
|
var menuX, menuY;
|
|
var fileNameX, fileNameY;
|
|
var wrongMsgEnable = 0;
|
|
|
|
var openFolderButtonScale = 0.9;
|
|
var openFolderButtonX = openFolderBitmap.getBounds().width * tileScale * openFolderButtonScale,
|
|
openFolderButtonY = openFolderBitmap.getBounds().height * tileScale * openFolderButtonScale;
|
|
|
|
var nextButtonX = nextBitmap.getBounds().width * tileScale,
|
|
nextButtonY = nextBitmap.getBounds().height * tileScale;
|
|
|
|
var inputFileElement = null;
|
|
|
|
var tmpCustomLevels;
|
|
var levelMapNoObj = levelMapObjs = [];
|
|
var totalLevelTextObj = null;
|
|
var nextMapButtonObj, prevMapButtonObj;
|
|
var previewvMapFirst = previewMapLast = -1;
|
|
|
|
init();
|
|
|
|
function init()
|
|
{
|
|
saveKeyState();
|
|
coverParentStage();
|
|
createInputFileElement();
|
|
initContent();
|
|
createCanvas();
|
|
createDialogStage();
|
|
|
|
creatBackground();
|
|
createContent();
|
|
closeIconObj = new closeIconClass(menuX, 0, dialogStage, _scale, CLOSE_ICON_ACTIVE_COLOR, closeDialog, null);
|
|
}
|
|
|
|
function saveKeyState()
|
|
{
|
|
saveKeyStateObj = saveKeyHandler(handleEscKeyDown);
|
|
}
|
|
|
|
function restoreKeyState()
|
|
{
|
|
restoreKeyHandler(saveKeyStateObj);
|
|
}
|
|
|
|
function coverParentStage()
|
|
{
|
|
coverBackgroundObj = new createjs.Shape();
|
|
coverBackgroundObj.graphics.beginFill(COVER_BACKGROUND_COLOR).drawRect(0, 0, mainStage.canvas.width, mainStage.canvas.height).endFill();
|
|
coverBackgroundObj.alpha = 0.6;
|
|
mainStage.addChild(coverBackgroundObj); // mainStage
|
|
mainStage.update();
|
|
}
|
|
|
|
function createInputFileElement()
|
|
{
|
|
inputFileElement = document.createElement('input');
|
|
inputFileElement.type = 'file';
|
|
inputFileElement.accept = '.lrwg';
|
|
inputFileElement.style.display = 'none';
|
|
document.body.appendChild(inputFileElement);
|
|
inputFileElement.addEventListener('change', readRestoreFile);
|
|
}
|
|
|
|
function initContent()
|
|
{
|
|
titleTextObj = new createjs.Text("Restore", "bold "+TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
|
|
titleTextObj.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 0, 0, 10 );
|
|
|
|
msgTextObj = new createjs.Text("Restore custom levels from backup files", "bold " + MSG_TEXT_SIZE + "px Helvetica", MSG_TEXT_COLOR);
|
|
|
|
fileTextObj = new createjs.Text("File:", "bold " + MSG_TEXT_SIZE + "px Helvetica", MSG_TEXT_COLOR);
|
|
|
|
wrongText1Obj = new createjs.Text("Wrong file format !", "bold " + MSG_TEXT_SIZE + "px Helvetica", WRONG_TEXT_OUTLINE_COLOR);
|
|
wrongText1Obj.outline = _scale;
|
|
wrongText2Obj = new createjs.Text("Wrong file format !", "bold " + MSG_TEXT_SIZE + "px Helvetica", WRONG_TEXT_COLOR);
|
|
wrongText2Obj.shadow = new createjs.Shadow(WRONG_TEXT_SHADOW_COLOR, _scale, _scale*2, 1);
|
|
|
|
//get maximun file name text size (width)
|
|
var tmpObj = new createjs.Text("X", "bold "+ MSG_TEXT_SIZE + "px Courier New", MSG_TEXT_COLOR);
|
|
maxFileNameSize = tmpObj.getBounds().width * MAX_DISPLAY_FILENAME_LEN;
|
|
|
|
fileInfoTextObj = new createjs.Text("Preview","bold " + FILEINFO_TEXT_SIZE + "px Helvetica", FILEINFO_TEXT_COLOR);
|
|
|
|
totalFileNameSizeX = fileTextObj.getBounds().width + maxFileNameSize + (tileWScale*2/3) + openFolderButtonX;
|
|
totalPreviewMapSizeX = (previewMapX+previewMapGapX) * previewMapPerLine + previewMapGapX;
|
|
|
|
menuX = TITLE_TEXT_SIZE * 2 + (totalFileNameSizeX > totalPreviewMapSizeX?totalFileNameSizeX:totalPreviewMapSizeX) |0;
|
|
menuY = (TITLE_TEXT_SIZE * 2.5 + (MSG_TEXT_SIZE+MSG_GAP_Y)*2) + ((MSG_TEXT_SIZE+MSG_GAP_Y)*2+ previewMapY + TITLE_TEXT_SIZE) + (MSG_GAP_Y*3 + BUTTON_TEXT_SIZE) |0;
|
|
|
|
buttonTextObj = new createjs.Text(" Restore ", "bold " + BUTTON_TEXT_SIZE + "px Helvetica", BUTTON_TEXT_COLOR);
|
|
|
|
buttonSizeX = buttonTextObj.getBounds().width + BUTTON_TEXT_SIZE;
|
|
}
|
|
|
|
function createCanvas()
|
|
{
|
|
restoreCanvas = document.createElement('canvas');
|
|
restoreCanvas.id = "restoreDialog";
|
|
restoreCanvas.width = menuX+10; //10 px for shadow
|
|
restoreCanvas.height = menuY+10; //10 px for shadow
|
|
|
|
var left = (screenX1 - restoreCanvas.width)/2|0,
|
|
top = (screenY1 - restoreCanvas.height)/2|0;
|
|
|
|
restoreCanvas.style.left = left + "px";
|
|
restoreCanvas.style.top = top + "px";
|
|
restoreCanvas.style.position = "absolute";
|
|
document.body.appendChild(restoreCanvas);
|
|
}
|
|
|
|
function createDialogStage()
|
|
{
|
|
dialogStage = new createjs.Stage(restoreCanvas);
|
|
dialogStage.enableMouseOver(60);
|
|
//createjs.Ticker.setFPS(20);
|
|
createjs.Ticker.addEventListener("tick", dialogStage);
|
|
}
|
|
|
|
function creatBackground()
|
|
{
|
|
background1Obj = new createjs.Shape();
|
|
background1Obj.graphics.beginFill(BUTTON_BACKGROUND_BORDER_COLOR)
|
|
.drawRoundRect(0, 0, menuX, menuY, 8*_scale).endFill();
|
|
background1Obj.shadow = new createjs.Shadow(BUTTON_BACKGROUND_SHADOW, 3, 3, 5 );
|
|
|
|
background2Obj = new createjs.Shape();
|
|
background2Obj.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(BUTTON_BACKGROUND_BORDER_SIZE, BUTTON_BACKGROUND_BORDER_SIZE,
|
|
menuX-BUTTON_BACKGROUND_BORDER_SIZE*2, menuY-BUTTON_BACKGROUND_BORDER_SIZE*2, 8*_scale).endFill();
|
|
dialogStage.addChild(background1Obj, background2Obj);
|
|
}
|
|
|
|
function createContent()
|
|
{
|
|
titleTextObj.x = (menuX - titleTextObj.getBounds().width)/2|0;
|
|
titleTextObj.y = TITLE_TEXT_SIZE*3/4|0;
|
|
dialogStage.addChild(titleTextObj);
|
|
|
|
var yOffset = TITLE_TEXT_SIZE*2.2|0;
|
|
|
|
msgTextObj.x = (menuX - msgTextObj.getBounds().width)/2|0;
|
|
msgTextObj.y = yOffset;
|
|
dialogStage.addChild(msgTextObj);
|
|
|
|
yOffset += (MSG_TEXT_SIZE+MSG_GAP_Y)|0;
|
|
fileTextObj.x = (menuX - totalFileNameSizeX)/2|0;
|
|
fileTextObj.y = yOffset;
|
|
dialogStage.addChild(fileTextObj);
|
|
|
|
fileNameX = fileTextObj.x + fileTextObj.getBounds().width + (tileWScale/3)|0;
|
|
fileNameY = yOffset;
|
|
|
|
fileNameBackgroundObj = new createjs.Shape();
|
|
fileNameBackgroundObj.graphics.beginFill("white").drawRect(
|
|
fileNameX, fileNameY, maxFileNameSize, MSG_TEXT_SIZE).endFill();
|
|
fileNameBackgroundObj.alpha = 0.2;
|
|
|
|
dialogStage.addChild(fileNameBackgroundObj);
|
|
|
|
addOpenButton(fileNameX+maxFileNameSize+(tileWScale*1/3)|0, fileNameY+(MSG_TEXT_SIZE-openFolderButtonY)/2|0);
|
|
|
|
yOffset += (MSG_TEXT_SIZE+MSG_GAP_Y)|0; // fileInfo Box yOffset
|
|
|
|
var fileInfoBackgroundObj = new createjs.Shape();
|
|
var fileInfoTextBarObj = new createjs.Shape();
|
|
var fileInfoBoxSizeY = (MSG_TEXT_SIZE+MSG_GAP_Y)*2 + previewMapY + MSG_TEXT_SIZE | 0;
|
|
var fileInfoBoxYOffset = yOffset;
|
|
|
|
fileInfoBackgroundObj.graphics.beginFill("white").drawRoundRect(TITLE_TEXT_SIZE, yOffset, menuX-TITLE_TEXT_SIZE*2, fileInfoBoxSizeY, 16*_scale).endFill();
|
|
fileInfoBackgroundObj.alpha = 0.5;
|
|
dialogStage.addChild(fileInfoBackgroundObj);
|
|
|
|
fileInfoTextObj.x = (menuX-fileInfoTextObj.getBounds().width)/2;
|
|
fileInfoTextObj.y = yOffset+ (MSG_GAP_Y/2)|0; // prevew text yOffset
|
|
dialogStage.addChild(fileInfoTextObj);
|
|
|
|
previewNoYOffset = fileInfoTextObj.y + (MSG_TEXT_SIZE+MSG_GAP_Y/2)|0;
|
|
previewMapYOffset = previewNoYOffset + MSG_GAP_Y;
|
|
|
|
//set Wrong file format x,y
|
|
wrongText1Obj.x = wrongText2Obj.x = (menuX-wrongText1Obj.getBounds().width)/2|0;
|
|
wrongText1Obj.y = wrongText2Obj.y = fileInfoBoxYOffset + (fileInfoBoxSizeY- wrongText1Obj.getBounds().height)/2; //Y center of preview box Y shift title
|
|
|
|
createPreviewMapButton();
|
|
|
|
// create Restore button
|
|
buttonObj = new createjs.Container();
|
|
|
|
//child id = 0
|
|
var border = new createjs.Shape();
|
|
border.graphics.beginFill(BUTTON_BORDER0_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE/2, -BUTTON_BORDER_SIZE/2, buttonSizeX+BUTTON_BORDER_SIZE, MSG_AREA_Y+BUTTON_BORDER_SIZE ,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
//child id = 1
|
|
var button = new createjs.Shape();
|
|
button.graphics.beginFill(BUTTON_COLOR).drawRoundRect(0, 0, buttonSizeX, MSG_AREA_Y,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
//child id = 2
|
|
buttonTextObj.textAlign = "center";
|
|
buttonTextObj.x = buttonSizeX/2|0;
|
|
buttonTextObj.y = (MSG_AREA_Y - msgTextObj.getBounds().height)/2|0;
|
|
|
|
buttonObj.addChild(border, button, buttonTextObj);
|
|
buttonObj.x = (menuX - buttonSizeX)/2|0;
|
|
buttonObj.y = fileInfoBoxYOffset + fileInfoBoxSizeY + MSG_GAP_Y|0;
|
|
|
|
buttonObj.on('click', buttonClick);
|
|
buttonObj.on('mouseover', buttonMouseOver);
|
|
buttonObj.on('mouseout', buttonMouseOut);
|
|
buttonObj.alpha = 0;
|
|
dialogStage.addChild(buttonObj);
|
|
}
|
|
|
|
function createPreviewMapButton()
|
|
{
|
|
var nextMapX = nextMapBitmap.getBounds().width*_scale,
|
|
nextMapY = nextMapBitmap.getBounds().height*_scale*2/3;
|
|
var borderNext = new createjs.Shape();
|
|
var borderPrev = new createjs.Shape();
|
|
|
|
nextMapButtonObj = new createjs.Container();
|
|
prevMapButtonObj = new createjs.Container();
|
|
|
|
//Preview Map Next button
|
|
borderNext.graphics.beginFill(PREVIEWMAP_BUTTON_COLOR)
|
|
.drawRoundRect(-PREVIEWMAP_BUTTON_BORDER_SIZE/2|0, -PREVIEWMAP_BUTTON_BORDER_SIZE/2|0, nextMapX+PREVIEWMAP_BUTTON_BORDER_SIZE, nextMapY+PREVIEWMAP_BUTTON_BORDER_SIZE, BUTTON_ROUND_RADIUD).endFill();
|
|
borderNext.alpha =PREVIEWMAP_BUTTON_GRAY_ALPHA;
|
|
nextMapBitmap.setTransform(0, 0, _scale, _scale*2/3);
|
|
nextMapButtonObj.x = TITLE_TEXT_SIZE + (previewMapGapX + previewMapX)*previewMapPerLine - nextMapX-PREVIEWMAP_BUTTON_BORDER_SIZE/2;
|
|
nextMapButtonObj.y = previewMapYOffset + previewMapY + previewMapGapX/2;
|
|
nextMapButtonObj.myId = 1;
|
|
nextMapButtonObj.addChild(borderNext, nextMapBitmap);
|
|
nextMapButtonObj.on('click', PreviewButtonClick);
|
|
nextMapButtonObj.on('mouseover', PreviewButtonMouseOver);
|
|
nextMapButtonObj.on('mouseout', PreviewButtonMouseOut);
|
|
nextMapButtonObj.alpha = 0;
|
|
dialogStage.addChild(nextMapButtonObj);
|
|
|
|
//Preview Map Prev Button
|
|
borderPrev.graphics.beginFill(PREVIEWMAP_BUTTON_COLOR)
|
|
.drawRoundRect(-PREVIEWMAP_BUTTON_BORDER_SIZE/2|0, -PREVIEWMAP_BUTTON_BORDER_SIZE/2|0, nextMapX+PREVIEWMAP_BUTTON_BORDER_SIZE, nextMapY+PREVIEWMAP_BUTTON_BORDER_SIZE, BUTTON_ROUND_RADIUD).endFill();
|
|
borderPrev.alpha =PREVIEWMAP_BUTTON_GRAY_ALPHA;
|
|
prevMapBitmap.setTransform(0, 0, _scale, _scale*2/3);
|
|
prevMapButtonObj.x = TITLE_TEXT_SIZE + previewMapGapX + PREVIEWMAP_BUTTON_BORDER_SIZE/2;
|
|
prevMapButtonObj.y = previewMapYOffset + previewMapY + previewMapGapX/2;
|
|
prevMapButtonObj.myId = 2;
|
|
prevMapButtonObj.addChild(borderPrev, prevMapBitmap);
|
|
prevMapButtonObj.on('click', PreviewButtonClick);
|
|
prevMapButtonObj.on('mouseover', PreviewButtonMouseOver);
|
|
prevMapButtonObj.on('mouseout', PreviewButtonMouseOut);
|
|
prevMapButtonObj.alpha = 0;
|
|
dialogStage.addChild(prevMapButtonObj);
|
|
|
|
function PreviewButtonClick()
|
|
{
|
|
var myId = this.myId;
|
|
var totalLevels = tmpCustomLevels.length;
|
|
switch(myId) {
|
|
case 1: //next page
|
|
previewMapFirst += previewMapPerLine;
|
|
previewMapLast += previewMapPerLine;
|
|
if (previewMapLast >= totalLevels) previewMapLast = totalLevels-1;
|
|
break;
|
|
case 2: //previous page
|
|
previewMapFirst -= previewMapPerLine;
|
|
previewMapLast = previewMapFirst + previewMapPerLine-1;
|
|
if (previewMapLast >= totalLevels) previewMapLast = totalLevels-1;
|
|
break;
|
|
default:
|
|
error("Error: Design Error myId = " + myId );
|
|
return;
|
|
}
|
|
removePreviewMap();
|
|
displayPreviewMap(myId);
|
|
}
|
|
|
|
function PreviewButtonMouseOver()
|
|
{
|
|
var backgroundObj = this.getChildAt(0);
|
|
|
|
backgroundObj.alpha = 1;
|
|
dialogStage.cursor = 'pointer';
|
|
dialogStage.update();
|
|
}
|
|
|
|
function PreviewButtonMouseOut()
|
|
{
|
|
var backgroundObj = this.getChildAt(0);
|
|
|
|
backgroundObj.alpha = PREVIEWMAP_BUTTON_GRAY_ALPHA;
|
|
dialogStage.cursor = 'default';
|
|
dialogStage.update();
|
|
}
|
|
|
|
}
|
|
|
|
function removePreviewObj()
|
|
{
|
|
if (wrongMsgEnable) {
|
|
dialogStage.removeChild(wrongText1Obj, wrongText2Obj);
|
|
//dialogStage.removeChild(wrongText2Obj);
|
|
wrongMsgEnable = 0;
|
|
}
|
|
removePreviewMap();
|
|
disableMapButton();
|
|
dialogStage.removeChild(totalLevelTextObj);
|
|
dialogStage.update();
|
|
}
|
|
|
|
function readRestoreFile(e)
|
|
{
|
|
var file;
|
|
var readFiler;
|
|
var fileSize, totalLevels, fileChecksum;
|
|
|
|
removePreviewObj();
|
|
buttonObj.alpha = 0; //disable restore button (hide)
|
|
|
|
if (e.target.files.length <= 0) {
|
|
displayFileName("");
|
|
return;
|
|
}
|
|
file = e.target.files[0];
|
|
displayFileName(file.name);
|
|
|
|
// (1) First only read header for check file format
|
|
readHeaderInfo();
|
|
|
|
//reference: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
|
|
function readHeaderInfo()
|
|
{
|
|
var readHeader = new FileReader();
|
|
var blob = file.slice(0, 150); //read 0 - 150 bytes
|
|
|
|
readHeader.onloadend = function(e) {
|
|
if (e.target.readyState == FileReader.DONE) {
|
|
checkHeaderInfo(e.target.result);
|
|
}
|
|
};
|
|
|
|
readHeader.readAsText(blob);
|
|
}
|
|
|
|
function checkHeaderInfo(headerInfo)
|
|
{
|
|
//LODE RUNNER WEB GAME.Sun May 16 2021 11:12:20 GMT+0800 (台北標準時間).SISS.MTAyMDAwNDA5YTg1NExS
|
|
var maxFileSize = 150 + NO_OF_TILES_X * NO_OF_TILES_Y * 256;
|
|
var newLinePos = headerInfo.indexOf('\n');
|
|
if(newLinePos < 0) {
|
|
displayAlertMsg("wrong header");
|
|
return;
|
|
}
|
|
|
|
var lastDotPos = headerInfo.substr(0, newLinePos).lastIndexOf('.');
|
|
if (lastDotPos < 0 || newLinePos - lastDotPos != 21) {
|
|
displayAlertMsg("wrong fileInfo");
|
|
return;
|
|
} else {
|
|
try {
|
|
var fileInfo = atob(headerInfo.substr(lastDotPos+1, newLinePos-lastDotPos-1));
|
|
} catch(e) {
|
|
// wrong base64
|
|
displayAlertMsg("wrong base64");
|
|
return;
|
|
}
|
|
var verInfo = fileInfo.charAt(0);
|
|
if ( verInfo != '1' && verInfo != '2') {
|
|
displayAlertMsg("wrong fileInfo.version (" + verInfo + ")");
|
|
return;
|
|
}
|
|
if (headerInfo.indexOf(LRWG_FILE_START_INFO) != 0) {
|
|
displayAlertMsg("wrong startInfo");
|
|
return;
|
|
}
|
|
totalLevels = parseInt(fileInfo.substr(1,2), 16);
|
|
fileSize = parseInt(fileInfo.substr(3,6), 16);
|
|
fileChecksum = parseInt(fileInfo.substr(9,4), 16);
|
|
if (totalLevels > MAX_EDIT_LEVEL || totalLevels <= 0) {
|
|
displayAlertMsg("wrong edit levels (" + totalLevels + ")");
|
|
return;
|
|
}
|
|
if (file.size > maxFileSize) {
|
|
displayAlertMsg("Error: file size too large (" + file.size + ")");
|
|
return;
|
|
}
|
|
if (fileSize != file.size) {
|
|
displayAlertMsg("wrong file size");
|
|
return;
|
|
}
|
|
|
|
// (2) Read all file
|
|
readAllFile = new FileReader();
|
|
|
|
readAllFile.onloadend = function(e) {
|
|
if (e.target.readyState == FileReader.DONE) {
|
|
readCustomLevels(e.target.result, verInfo);
|
|
}
|
|
}
|
|
readAllFile.readAsText(file);
|
|
}
|
|
}
|
|
|
|
function readCustomLevels(fileData, verInfo)
|
|
{
|
|
var firstNewLinePos = fileData.indexOf('\n');
|
|
var dataChecksum = 0;
|
|
var levelData = fileData.substr(firstNewLinePos); //skip header
|
|
|
|
for(var i = 0; i < levelData.length; i++) {
|
|
dataChecksum += levelData.charCodeAt(i);
|
|
}
|
|
if (fileChecksum != (dataChecksum & 0xFFFF)) {
|
|
displayAlertMsg("wrong file checksum");
|
|
return;
|
|
}
|
|
|
|
tmpCustomLevels = [];
|
|
|
|
if (verInfo == '1') {
|
|
// v1: level format
|
|
// -------------------------------
|
|
// level map format:
|
|
//
|
|
// +----- startLevelPos
|
|
// V
|
|
// \n tile * NO_OF_TILES_X
|
|
// \n tile * NO_OF_TILES_X
|
|
// ....
|
|
// \n tile * NO_OF_TILES_X
|
|
// \n checksum
|
|
// ------------------------------
|
|
var oneLevelSize = (NO_OF_TILES_X+1) * NO_OF_TILES_Y+2; // +2: checksum + '\n'
|
|
|
|
if(levelData.length != totalLevels * oneLevelSize) {
|
|
displayAlertMsg("wrong levels data size (1)");
|
|
return;
|
|
}
|
|
|
|
for(var curLevel = 0; curLevel < totalLevels; curLevel++) {
|
|
var startLevelPos = curLevel * oneLevelSize + 1; // +1: skip first '\n'
|
|
var curLevelMap = '';
|
|
for(var tileY = 0; tileY < NO_OF_TILES_Y; tileY++) {
|
|
// (startLevelPos+1), +1 : skip \n
|
|
curLevelMap += levelData.substr(startLevelPos+tileY*(NO_OF_TILES_X+1), NO_OF_TILES_X);
|
|
}
|
|
var checksum = levelData.charAt(startLevelPos+oneLevelSize-2);
|
|
var levelChecksum = getShareChecksum(curLevelMap);
|
|
if (checksum != levelChecksum) {
|
|
displayAlertMsg("wrong level checksum (" + (curLevel+1) + ")");
|
|
return;
|
|
}
|
|
tmpCustomLevels.push(curLevelMap);
|
|
}
|
|
} else {
|
|
// v2: level format
|
|
// -----------------------------
|
|
// \n zipLevelData
|
|
// \n zipLevelData
|
|
// .......
|
|
// \n zipLevelData
|
|
// -----------------------------
|
|
var startLevelPos = 1; // begin from pos = 1
|
|
var nextNewLinePos;
|
|
var zipLevelData, curLevelMap;
|
|
for(var curLevel = 0; curLevel < totalLevels; curLevel++) {
|
|
nextNewLinePos = levelData.indexOf('\n', startLevelPos);
|
|
if (nextNewLinePos < 0) {
|
|
displayAlertMsg("wrong level data @" + (curLevel+1));
|
|
return;
|
|
}
|
|
curLevelMap = unzipLevelMap(levelData.substr(startLevelPos, nextNewLinePos-startLevelPos));
|
|
if (!curLevelMap) {
|
|
displayAlertMsg("wrong ziplevel data @" + (curLevel+1));
|
|
return;
|
|
}
|
|
tmpCustomLevels.push(curLevelMap);
|
|
startLevelPos = nextNewLinePos+1;
|
|
}
|
|
if (levelData.length != startLevelPos) {
|
|
displayAlertMsg("wrong levels data size (2)");
|
|
return;
|
|
}
|
|
}
|
|
|
|
// SUCCESS
|
|
displayFileInfo();
|
|
buttonObj.alpha = 1; //enable restore button
|
|
}
|
|
|
|
function displayAlertMsg(errMsg)
|
|
{
|
|
debug(errMsg);
|
|
wrongMsgEnable = 1;
|
|
dialogStage.addChild(wrongText1Obj, wrongText2Obj);
|
|
dialogStage.update();
|
|
}
|
|
}
|
|
|
|
function displayFileName(fileName)
|
|
{
|
|
if (fileNameObj) {
|
|
dialogStage.removeChild(fileNameObj);
|
|
fileNameObj = null;
|
|
}
|
|
if (fileName.length <= 0) {
|
|
dialogStage.update();
|
|
return;
|
|
}
|
|
|
|
if (stringDisplayWidth(fileName) > MAX_DISPLAY_FILENAME_LEN) {
|
|
fileName = cutFileName(fileName);
|
|
}
|
|
fileNameObj = new createjs.Text(fileName, "bold " + MSG_TEXT_SIZE + "px Helvetica", MSG_TEXT_COLOR);
|
|
|
|
if(fileNameObj.getBounds().width > maxFileNameSize) {
|
|
fileNameObj = new createjs.Text(fileName, "bold " + MSG_TEXT_SIZE + "px Courier New", MSG_TEXT_COLOR);
|
|
}
|
|
|
|
fileNameObj.x = fileNameX;
|
|
fileNameObj.y = fileNameY;
|
|
dialogStage.addChild(fileNameObj);
|
|
dialogStage.update();
|
|
|
|
function stringDisplayWidth(str)
|
|
{
|
|
// 0x00-0xFF assume 1 char others assume 2 chars
|
|
//reference: https://blog.typeart.cc/JavaScript計算含中英文字的字串長度/
|
|
return str.replace(/[^\x00-\xff]/g,"xx").length;
|
|
}
|
|
|
|
function cutFileName(str)
|
|
{
|
|
var oneSideSize = (MAX_DISPLAY_FILENAME_LEN - 3)/2|0;
|
|
var leftName = '', rightName = '';
|
|
|
|
for(var i = 0, width=0; width < oneSideSize; i++, width++) {
|
|
var charCode = str.charCodeAt(i);
|
|
if (charCode <= 0xFF) {
|
|
leftName += str.charAt(i);
|
|
} else {
|
|
if(++width < oneSideSize) {
|
|
leftName += str.charAt(i);
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
for(var i = str.length-1, width=0; width < oneSideSize; i--, width++) {
|
|
var charCode = str.charCodeAt(i);
|
|
if (charCode <= 0xFF) {
|
|
rightName = str.charAt(i) + rightName;
|
|
} else {
|
|
if(++width < oneSideSize) {
|
|
rightName = str.charAt(i) + rightName;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return leftName + "...." + rightName;
|
|
}
|
|
}
|
|
|
|
function addOpenButton(xOffset, yOffset)
|
|
{
|
|
openFolderButtonObj = new createjs.Container();
|
|
border = new createjs.Shape();
|
|
button = new createjs.Shape();
|
|
|
|
//id = 0
|
|
border.graphics.beginFill(OPENBUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(-OPENBUTTON_BORDER_SIZE, -OPENBUTTON_BORDER_SIZE, openFolderButtonX+OPENBUTTON_BORDER_SIZE*2, openFolderButtonY+OPENBUTTON_BORDER_SIZE*2, OPENBUTTON_ROUND_RADIUD).endFill();
|
|
//id = 1
|
|
button.graphics.beginFill(OPENBUTTON_COLOR)
|
|
.drawRect(-OPENBUTTON_BORDER_SIZE/3, -OPENBUTTON_BORDER_SIZE/3, openFolderButtonX+OPENBUTTON_BORDER_SIZE*2/3, openFolderButtonY+OPENBUTTON_BORDER_SIZE*2/3).endFill();
|
|
button.alpha = 0.9;
|
|
|
|
//id = 2
|
|
openFolderBitmap.setTransform(0, 0, _scale*openFolderButtonScale, _scale*openFolderButtonScale);
|
|
|
|
openFolderButtonObj.x = xOffset;
|
|
openFolderButtonObj.y = yOffset;
|
|
openFolderButtonObj.addChild(border, button, openFolderBitmap);
|
|
|
|
openFolderButtonObj.on('click', openButtonClick);
|
|
openFolderButtonObj.on('mouseover', openButtonMouseOver);
|
|
openFolderButtonObj.on('mouseout', openButtonMouseOut);
|
|
dialogStage.addChild(openFolderButtonObj);
|
|
|
|
function openButtonClick()
|
|
{
|
|
inputFileElement.click();
|
|
openButtonMouseOut();
|
|
}
|
|
|
|
function openButtonMouseOver()
|
|
{
|
|
var border = openFolderButtonObj.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(OPENBUTTON_BORDER_COLOR)
|
|
.drawRoundRect(-OPENBUTTON_BORDER_SIZE, -OPENBUTTON_BORDER_SIZE,
|
|
openFolderButtonX+OPENBUTTON_BORDER_SIZE*2, openFolderButtonY+OPENBUTTON_BORDER_SIZE*2, OPENBUTTON_ROUND_RADIUD).endFill();
|
|
|
|
dialogStage.cursor = 'pointer';
|
|
dialogStage.update();
|
|
}
|
|
|
|
function openButtonMouseOut()
|
|
{
|
|
var border = openFolderButtonObj.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(OPENBUTTON_BACKGROUND_COLOR)
|
|
.drawRoundRect(-OPENBUTTON_BORDER_SIZE, -OPENBUTTON_BORDER_SIZE,
|
|
openFolderButtonX+OPENBUTTON_BORDER_SIZE*2, openFolderButtonY+OPENBUTTON_BORDER_SIZE*2, OPENBUTTON_ROUND_RADIUD).endFill();
|
|
|
|
dialogStage.cursor = 'default';
|
|
dialogStage.update();
|
|
}
|
|
|
|
}
|
|
|
|
function removePreviewMap()
|
|
{
|
|
for(var i=0 ; i < levelMapObjs.length; i++) {
|
|
dialogStage.removeChild(levelMapObjs[i]);
|
|
}
|
|
|
|
for(var i=0 ; i < levelMapNoObj.length; i++) {
|
|
dialogStage.removeChild(levelMapNoObj[i]);
|
|
}
|
|
}
|
|
|
|
function disableMapButton()
|
|
{
|
|
prevMapButtonObj.alpha = 0; //disable next map button (hide)
|
|
nextMapButtonObj.alpha = 0; //disable prev map button (hide)
|
|
}
|
|
|
|
function displayPreviewMap(myId=0)
|
|
{
|
|
var borderSize = _scale < 1?1:_scale;
|
|
var scaleX = scaleY = PREVIEW_MAP_SCALE;
|
|
|
|
levelMapObjs = [];
|
|
levelMapNoObj = [];
|
|
for(var level=previewMapFirst, i=0; level <= previewMapLast; level++, i++) {
|
|
var levelMap = new createjs.Container();
|
|
var border = new createjs.Shape();
|
|
var background = new createjs.Shape();
|
|
var mapOffsetX = TITLE_TEXT_SIZE + previewMapGapX + (previewMapX+previewMapGapX) * i;
|
|
|
|
levelMapNoObj[i] = new createjs.Text(("00"+(level+1)).slice(-3), "bold " + MAPNO_TEXT_SIZE + "px Helvetica", "black");
|
|
levelMapNoObj[i].x = mapOffsetX;
|
|
levelMapNoObj[i].y = previewNoYOffset;
|
|
levelMapNoObj[i].alpha = 0.6;
|
|
dialogStage.addChild(levelMapNoObj[i]);
|
|
|
|
border.graphics.beginFill("white")
|
|
.drawRoundRect(-borderSize, -borderSize, previewMapX+2*borderSize, previewMapY+2*borderSize, borderSize);
|
|
background.graphics.beginFill("black").drawRect(0, 0, previewMapX, previewMapY);
|
|
|
|
levelMap.addChild(border, background, level2Bitmap(tmpCustomLevels[level], scaleX, scaleY));
|
|
levelMapObjs[i] = levelMap;
|
|
levelMapObjs[i].x = mapOffsetX;
|
|
levelMapObjs[i].y = previewMapYOffset|0;
|
|
dialogStage.addChild(levelMapObjs[i]);
|
|
}
|
|
|
|
if (previewMapFirst <= 0) {
|
|
prevMapButtonObj.alpha = 0; //disable
|
|
} else prevMapButtonObj.alpha = 1; //enable
|
|
|
|
if (previewMapLast+1 >= tmpCustomLevels.length) {
|
|
nextMapButtonObj.alpha = 0; //disable
|
|
} else nextMapButtonObj.alpha = 1; //enable
|
|
dialogStage.update();
|
|
}
|
|
|
|
function displayFileInfo()
|
|
{
|
|
var totalLevels = tmpCustomLevels.length;
|
|
var levelText = totalLevels > 1? " Levels": " Level";
|
|
|
|
previewMapFirst = 0;
|
|
previewMapLast = previewMapPerLine-1;
|
|
if(previewMapLast+1 >= totalLevels) previewMapLast = totalLevels-1;
|
|
displayPreviewMap();
|
|
|
|
totalLevelTextObj = new createjs.Text("Total: " + tmpCustomLevels.length + levelText, "bold " + TOTALLEVEL_TEXT_SIZE + "px Helvetica", "black");
|
|
totalLevelTextObj.x = (menuX-totalLevelTextObj.getBounds().width)/2|0;
|
|
totalLevelTextObj.y = previewMapYOffset + previewMapY + previewMapGapX*2;
|
|
totalLevelTextObj.alpha = 0.6;
|
|
dialogStage.addChild(totalLevelTextObj);
|
|
|
|
dialogStage.update();
|
|
}
|
|
|
|
function level2Bitmap(levelMap, scaleX, scaleY)
|
|
{
|
|
var container = new createjs.Container();
|
|
var guardCount = 0, runner = 0;
|
|
var bitmap;
|
|
|
|
//--------------------------------------------
|
|
// Parser map from right-bottom to left-top
|
|
// for drop guards if too manys
|
|
//--------------------------------------------
|
|
var index = NO_OF_TILES_Y * NO_OF_TILES_X - 1;
|
|
for(var y = NO_OF_TILES_Y-1; y >= 0; y--) {
|
|
for(var x = NO_OF_TILES_X-1; x >= 0; x--) {
|
|
var id = levelMap.charAt(index--);
|
|
|
|
var curTile;
|
|
switch(id) {
|
|
default:
|
|
case ' ': //empty
|
|
continue;
|
|
case '#': //Normal Brick
|
|
curTile = getThemeBitmap("brick");
|
|
break;
|
|
case '@': //Solid Brick
|
|
curTile = getThemeBitmap("solid");
|
|
break;
|
|
case 'H': //Ladder
|
|
curTile = getThemeBitmap("ladder");
|
|
break;
|
|
case '-': //Line of rope
|
|
curTile = getThemeBitmap("rope");
|
|
break;
|
|
case 'X': //False brick
|
|
curTile = getThemeBitmap("brick");
|
|
break;
|
|
case 'S': //Ladder appears at end of level
|
|
continue;
|
|
case '$': //Gold chest
|
|
curTile = getThemeBitmap("gold");
|
|
break;
|
|
case '0': //Guard
|
|
if(++guardCount > MAX_NEW_GUARD) {
|
|
continue; //too many guard , set this tile as empty
|
|
}
|
|
curTile = new createjs.Sprite(guardData, "runLeft");
|
|
curTile.stop();
|
|
break;
|
|
case '&': //Player
|
|
if(++runner > 1) {
|
|
continue; //too many runner, set this tile as empty
|
|
}
|
|
curTile = new createjs.Sprite(runnerData, "runRight");
|
|
curTile.stop();
|
|
break;
|
|
}
|
|
curTile.setTransform(x*BASE_TILE_X*scaleX, y*BASE_TILE_Y*scaleX, scaleX, scaleY);
|
|
container.addChild(curTile);
|
|
}
|
|
}
|
|
container.cache(0, 0, previewMapX, previewMapY);
|
|
bitmap = new createjs.Bitmap( container.cacheCanvas); // change "cont.getCacheDataURL()" to "cont.cacheCanvas"
|
|
container.removeAllChildren();
|
|
return bitmap;
|
|
}
|
|
|
|
function restoreConfirm(rc)
|
|
{
|
|
var tmpTestInfo = {level: 1}; // "level:1" for data safe
|
|
var oldEditLevels = editLevels; // 1 -
|
|
|
|
if(rc) { //yes restore custom levels
|
|
|
|
//------------------------------------------------------------------------------------
|
|
//(1) clear edit levels
|
|
getTestLevel(tmpTestInfo);
|
|
clearEditLevelInfo(); //clear edit level info
|
|
clearStorage(STORAGE_USER_SCORE_INFO); //clear user score info
|
|
clearTestLevel(); //clear test level
|
|
initEditLevelInfo();
|
|
|
|
//(2) add levelmap to storage
|
|
editLevelData = [];
|
|
for(var i=0; i < tmpCustomLevels.length; i++) {
|
|
setEditLevel(++editLevels, tmpCustomLevels[i]); //editLevels: 1 - MAX_EDIT_LEVEL
|
|
}
|
|
|
|
//(3) save edit info
|
|
setEditLevelInfo();
|
|
if(tmpTestInfo.level > oldEditLevels && editLevels < MAX_EDIT_LEVEL && !levelMapIsEmpty(tmpTestInfo.levelMap)) {
|
|
//still have space for save new editing level
|
|
tmpTestInfo.level = editLevels+1;
|
|
setTestLevel(tmpTestInfo);
|
|
}
|
|
//-----------------------------------------------------------------------------------
|
|
|
|
restoreKeyState();
|
|
curLevel = 1;
|
|
setModernInfo(); // set current level = 1 for play mode
|
|
if(playMode == PLAY_EDIT) {
|
|
editEdit(-1, _callBackFun);
|
|
} else {
|
|
editPlay(-1, _callBackFun);
|
|
}
|
|
} else {
|
|
restoreKeyState();
|
|
if(_callBackFun) _callBackFun();
|
|
|
|
}
|
|
}
|
|
|
|
//restore button click
|
|
function buttonClick()
|
|
{
|
|
removeCanvas();
|
|
removeCoverBackground();
|
|
yesNoDialog(["Warning", "Overwrite existing custom levels ?"], yesBitmap, noBitmap, mainStage, tileScale, restoreConfirm);
|
|
}
|
|
|
|
//restore button mouse over
|
|
function buttonMouseOver()
|
|
{
|
|
var border = buttonObj.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BORDER1_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE, buttonSizeX+BUTTON_BORDER_SIZE*2, MSG_AREA_Y+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
buttonTextObj.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 2, 2, 10 );
|
|
dialogStage.cursor = 'pointer';
|
|
dialogStage.update();
|
|
}
|
|
|
|
//restore button mouse out
|
|
function buttonMouseOut()
|
|
{
|
|
var border = buttonObj.getChildAt(0);
|
|
|
|
border.graphics.clear();
|
|
border.graphics.beginFill(BUTTON_BORDER0_COLOR)
|
|
.drawRoundRect(-BUTTON_BORDER_SIZE/2, -BUTTON_BORDER_SIZE/2, buttonSizeX+BUTTON_BORDER_SIZE, MSG_AREA_Y+BUTTON_BORDER_SIZE, BUTTON_ROUND_RADIUD).endFill();
|
|
|
|
buttonTextObj.shadow = null;
|
|
dialogStage.cursor = 'default';
|
|
dialogStage.update();
|
|
}
|
|
|
|
function removeCanvas()
|
|
{
|
|
dialogStage.removeAllChildren();
|
|
dialogStage.enableMouseOver(0);
|
|
createjs.Ticker.removeEventListener(dialogStage);
|
|
document.body.removeChild(restoreCanvas);
|
|
}
|
|
|
|
function removeCoverBackground()
|
|
{
|
|
mainStage.removeChild(coverBackgroundObj);
|
|
}
|
|
|
|
function closeDialog()
|
|
{
|
|
restoreKeyState();
|
|
removeCanvas();
|
|
removeCoverBackground();
|
|
if(_callBackFun) _callBackFun();
|
|
}
|
|
|
|
function handleEscKeyDown(event)
|
|
{
|
|
if(!event){ event = window.event; } //cross browser issues exist
|
|
|
|
if(event.shiftKey || event.ctrlKey) return false;
|
|
|
|
switch(event.key) {
|
|
case "Escape":
|
|
closeDialog();
|
|
break;
|
|
default:
|
|
//debug("keycode = " + code);
|
|
break;
|
|
}
|
|
return false;
|
|
}
|
|
}
|