Add tooltips
This commit is contained in:
parent
a3b2061743
commit
124f40942f
92
game.js
92
game.js
@ -93,6 +93,7 @@ const TITLE = 7;
|
||||
const STARTUP = 8;
|
||||
|
||||
var ISTESTING = false;
|
||||
var MOUSEOVERTIME = -1
|
||||
|
||||
const UP = 0;
|
||||
const RIGHT = 1;
|
||||
@ -198,24 +199,24 @@ var KEY_ROTATION_UP = ["W","K","w","k","8","ArrowUp"]
|
||||
var KEY_ROTATION_DOWN = ["S","J","s","j","2","ArrowDown"]
|
||||
var KEY_BRIDGED_BELT = ["Shift"]
|
||||
|
||||
var CONVEYOR_BUILD_BUTTON = {img:ID_CONVEYOR,x:-1,y:-1,w:-1,h:-1,lastselected:DEF_CONVEYOR}
|
||||
var BRANCH_BUILD_BUTTON = {img:ID_BRANCH,x:-1,y:-1,w:-1,h:-1,submenu_buttons:[DEF_BRANCHUP_RB,DEF_BRANCHUP_BR,DEF_BRANCHUP_GY,DEF_BRANCHUP_YG,DEF_BRANCHUP_PPI,DEF_BRANCHUP_PIP,DEF_BRANCHUP_BLGR,DEF_BRANCHUP_GRBL],lastselected:undefined,default:DEF_BRANCHUP_RB}
|
||||
var WRITER_BUILD_BUTTON = {img:ID_WRITER,x:-1,y:-1,w:-1,h:-1,submenu_buttons:[DEF_WRITERRIGHT_R,DEF_WRITERRIGHT_B,DEF_WRITERRIGHT_G,DEF_WRITERRIGHT_Y,DEF_WRITERRIGHT_P,DEF_WRITERRIGHT_PI,DEF_WRITERRIGHT_BL,DEF_WRITERRIGHT_GR],lastselected:undefined,default:DEF_WRITERRIGHT_R}
|
||||
var ROTATE_CLOCKWISE_BUTTON = {img:ID_ROTATE_CLOCKWISE,x:-1,y:-1,w:-1,h:-1,cb:rotateClockwise
|
||||
var CONVEYOR_BUILD_BUTTON = {img:ID_CONVEYOR,x:-1,y:-1,w:-1,h:-1,lastselected:DEF_CONVEYOR,tooltip:"Conveyor Belt\nMoves bots in a direction.\n\nHold (Shift) to bridge over other belts",mobileTooltip:"Conveyor Belt\nMoves bots in a direction.\n\nHold button down to toggle bridge mode. Used to bridge over other belts"}
|
||||
var BRANCH_BUILD_BUTTON = {img:ID_BRANCH,x:-1,y:-1,w:-1,h:-1,submenu_buttons:[DEF_BRANCHUP_RB,DEF_BRANCHUP_BR,DEF_BRANCHUP_GY,DEF_BRANCHUP_YG,DEF_BRANCHUP_PPI,DEF_BRANCHUP_PIP,DEF_BRANCHUP_BLGR,DEF_BRANCHUP_GRBL],lastselected:undefined,default:DEF_BRANCHUP_RB,tooltip:"Branch\nReads next tape and moves bot in the\nmatching color direction.\n\nMoves bot forward and does not consume\ntape if no match found."}
|
||||
var WRITER_BUILD_BUTTON = {img:ID_WRITER,x:-1,y:-1,w:-1,h:-1,submenu_buttons:[DEF_WRITERRIGHT_R,DEF_WRITERRIGHT_B,DEF_WRITERRIGHT_G,DEF_WRITERRIGHT_Y,DEF_WRITERRIGHT_P,DEF_WRITERRIGHT_PI,DEF_WRITERRIGHT_BL,DEF_WRITERRIGHT_GR],lastselected:undefined,default:DEF_WRITERRIGHT_R,tooltip:"Writer\nWrites a color to the end of the tape."}
|
||||
var ROTATE_CLOCKWISE_BUTTON = {img:ID_ROTATE_CLOCKWISE,x:-1,y:-1,w:-1,h:-1,cb:rotateClockwise,tooltip:"Rotate selection clockwise."
|
||||
}
|
||||
var ROTATE_COUNTERCLOCKWISE_BUTTON = {img:ID_ROTATE_COUNTERCLOCKWISE,x:-1,y:-1,w:-1,h:-1,cb:rotateCounterClockwise
|
||||
var ROTATE_COUNTERCLOCKWISE_BUTTON = {img:ID_ROTATE_COUNTERCLOCKWISE,x:-1,y:-1,w:-1,h:-1,cb:rotateCounterClockwise,tooltip:"Rotate selection counter-clockwise."
|
||||
}
|
||||
|
||||
|
||||
var PLAY_BUTTON = {img:ID_PLAY,x:-1,y:-1,w:-1,h:-1,cb:runGameSimulation
|
||||
var PLAY_BUTTON = {img:ID_PLAY,x:-1,y:-1,w:-1,h:-1,cb:runGameSimulation,tooltip:"Test your great machine.\n\nConvert all the bots!"
|
||||
}
|
||||
var PAUSE_BUTTON = {img:ID_PAUSE,x:-1,y:-1,w:-1,h:-1,cb:pauseGameSimulation
|
||||
var PAUSE_BUTTON = {img:ID_PAUSE,x:-1,y:-1,w:-1,h:-1,cb:pauseGameSimulation,tooltip:"Pause the great machine."
|
||||
}
|
||||
var RESET_BUTTON = {img:ID_RESET,x:-1,y:-1,w:-1,h:-1,cb:resetSimulation
|
||||
var RESET_BUTTON = {img:ID_RESET,x:-1,y:-1,w:-1,h:-1,cb:resetSimulation,tooltip:"Reset the great machine."
|
||||
}
|
||||
var DELETE_BUTTON = {img:ID_DELETE,x:-1,y:-1,w:-1,h:-1,cb:toggleDeleteMode
|
||||
var DELETE_BUTTON = {img:ID_DELETE,x:-1,y:-1,w:-1,h:-1,cb:toggleDeleteMode,tooltip:"Remove a piece on the field."
|
||||
}
|
||||
var HOME_BUTTON = {img:ID_HOME,x:-1,y:-1,w:-1,h:-1,cb:goHome
|
||||
var HOME_BUTTON = {img:ID_HOME,x:-1,y:-1,w:-1,h:-1,cb:goHome,tooltip:"Go back to the level selection menu."
|
||||
}
|
||||
|
||||
var MENU = {
|
||||
@ -830,6 +831,8 @@ function clickEvent(e) {
|
||||
LAST_MOUSE_X=mousepos.x
|
||||
LAST_MOUSE_Y=mousepos.y
|
||||
|
||||
MOUSEDOWN=true
|
||||
|
||||
if (gameState===STARTUP) {
|
||||
currentSound.play()
|
||||
setupTitleScreen()
|
||||
@ -846,7 +849,7 @@ function clickEvent(e) {
|
||||
if (mouseOverButton(canvas,e,button)) {
|
||||
if (MOBILE&&button===CONVEYOR_BUILD_BUTTON) {
|
||||
setTimeout(()=>{
|
||||
if (!MOUSEDOWN&&
|
||||
if (MOUSEDOWN&&
|
||||
LAST_MOUSE_X>=CONVEYOR_BUILD_BUTTON.x&&
|
||||
LAST_MOUSE_X<=CONVEYOR_BUILD_BUTTON.x+CONVEYOR_BUILD_BUTTON.w&&
|
||||
LAST_MOUSE_Y>=CONVEYOR_BUILD_BUTTON.y&&
|
||||
@ -893,8 +896,6 @@ function clickEvent(e) {
|
||||
//console.log(gameGrid)
|
||||
}
|
||||
}
|
||||
|
||||
MOUSEDOWN=true
|
||||
}
|
||||
|
||||
function coordsInBounds(coords) {
|
||||
@ -924,7 +925,6 @@ function placeObject(coords,def) {
|
||||
if (notAForbiddenObject(coords)) {
|
||||
if (gameGrid[coords.y][coords.x].direction!==undefined&&gameGrid[coords.y][coords.x].type&&gameGrid[coords.y][coords.x].type==="BELT"&&BRIDGEDBELT) {
|
||||
gameGrid[coords.y][coords.x]={...gameGrid[coords.y][coords.x],direction2:ITEM_DIRECTION}
|
||||
console.log(gameGrid)
|
||||
} else {
|
||||
var newObj={...def,direction:ITEM_DIRECTION}
|
||||
gameGrid[coords.y][coords.x]=newObj
|
||||
@ -959,7 +959,7 @@ function releaseEvent(e) {
|
||||
SUBMENU.visible=false
|
||||
}
|
||||
DRAGGING = false
|
||||
MOUSEDOWN=false
|
||||
MOUSEDOWN = false
|
||||
}
|
||||
|
||||
function loadLevel(level,botx,boty) {
|
||||
@ -1858,26 +1858,80 @@ function ButtonIsUnlocked(button) {
|
||||
return gameStage.locked===undefined||(!gameStage.locked.includes(button))
|
||||
}
|
||||
|
||||
function isMouseOverButton(button) {
|
||||
return LAST_MOUSE_X>=button.x&&
|
||||
LAST_MOUSE_X<=button.x+button.w&&
|
||||
LAST_MOUSE_Y>=button.y&&
|
||||
LAST_MOUSE_Y<=button.y+button.h
|
||||
}
|
||||
|
||||
function DisplayTooltip(button,ctx) {
|
||||
//240x(20*lines) (16pt font)
|
||||
var tooltipSplit=button.tooltip.split("\n")
|
||||
var tooltipBounds = {
|
||||
x:Math.min(Math.max(LAST_MOUSE_X-120,0),canvas.width*0.75-240),
|
||||
y:LAST_MOUSE_Y-tooltipSplit.length*20-4,
|
||||
w:240,
|
||||
h:tooltipSplit.length*16+8
|
||||
}
|
||||
ctx.globalAlpha=0.9
|
||||
ctx.fillStyle="#20424a"
|
||||
ctx.fillRect(tooltipBounds.x,tooltipBounds.y,tooltipBounds.w,tooltipBounds.h)
|
||||
ctx.strokeStyle="white"
|
||||
ctx.lineWidth=1
|
||||
ctx.setLineDash([])
|
||||
ctx.strokeRect(tooltipBounds.x,tooltipBounds.y,tooltipBounds.w,tooltipBounds.h)
|
||||
ctx.fillStyle="white"
|
||||
ctx.textAlign = "left"
|
||||
for (var i=0;i<tooltipSplit.length;i++) {
|
||||
if (i===0) {
|
||||
ctx.font="bold 12px 'Zilla Slab', serif"
|
||||
} else {
|
||||
ctx.font="12px 'Zilla Slab', serif"
|
||||
}
|
||||
ctx.fillText(tooltipSplit[i],tooltipBounds.x+8,tooltipBounds.y+i*16+16)
|
||||
}
|
||||
ctx.globalAlpha=1
|
||||
}
|
||||
|
||||
function RenderMenu(ctx) {
|
||||
if (MENU.visible) {
|
||||
ctx.fillStyle="#20424a"
|
||||
ctx.fillRect(0,canvas.height*0.8,canvas.width,canvas.height*0.2)
|
||||
var buttonX = 16
|
||||
var buttonY = canvas.height*0.8+16
|
||||
var mouseOverButton = undefined
|
||||
var mousedOver = false
|
||||
|
||||
for (var button of MENU.buttons) {
|
||||
button.x=buttonX
|
||||
button.y=buttonY
|
||||
button.w=32
|
||||
button.h=32
|
||||
if (ButtonIsUnlocked(button)) {
|
||||
if (mouseOverButton===undefined&&isMouseOverButton(button)) {
|
||||
mousedOver=true
|
||||
if (MOUSEOVERTIME===-1) {
|
||||
MOUSEOVERTIME=new Date().getTime()
|
||||
} else
|
||||
if (new Date().getTime()-MOUSEOVERTIME>=500) {
|
||||
mouseOverButton = button
|
||||
}
|
||||
}
|
||||
if (button.lastselected) {
|
||||
RenderIcon(buttonX,buttonY,ctx,button.lastselected,(button.cb===undefined)?ITEM_DIRECTION:0,"#b5b5b5")
|
||||
} else {
|
||||
AddButton(button.img,buttonX,buttonY,ctx,button,(button.cb===undefined)?ITEM_DIRECTION:0)
|
||||
}
|
||||
}
|
||||
button.x=buttonX
|
||||
button.y=buttonY
|
||||
button.w=32
|
||||
button.h=32
|
||||
buttonX+=47
|
||||
}
|
||||
if (mouseOverButton!==undefined) {
|
||||
DisplayTooltip(mouseOverButton,ctx)
|
||||
}
|
||||
if (!mousedOver) {
|
||||
MOUSEOVERTIME=-1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user