From 22c8519e9fa7c9f07759561f47f73c85e1997fd3 Mon Sep 17 00:00:00 2001 From: KriScg Date: Fri, 16 Nov 2012 22:23:22 +0100 Subject: [PATCH] simple menu progress and better input output markers --- js/draw.js | 16 +++++++++++- js/main.js | 77 ++++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 69 insertions(+), 24 deletions(-) diff --git a/js/draw.js b/js/draw.js index f4479a5190..2a959c7ef9 100644 --- a/js/draw.js +++ b/js/draw.js @@ -98,7 +98,7 @@ var DrawCross = function() var DrawButton = function( button ) { if ( button.enabled ) - { + { DrawRoundedRect( button.posX, button.posY, button.width, button.height, 10, 2, button.focus ? 'red' : 'black', button.background ); ctx.font = '12px Arial'; @@ -151,4 +151,18 @@ var DrawGrid = function() } ctx.closePath(); ctx.stroke(); +} + +var DrawDoneIcon = function( posX, posY ) +{ + ctx.strokeStyle = 'black'; + ctx.fillStyle = 'black'; + ctx.lineCap = 'round'; + ctx.lineWidth = 6; + ctx.beginPath(); + ctx.moveTo( posX, posY ); + ctx.lineTo( posX - 10, posY - 14 ); + ctx.moveTo( posX, posY ); + ctx.lineTo( posX + 15, posY - 25 ); + ctx.stroke(); } \ No newline at end of file diff --git a/js/main.js b/js/main.js index 2699929364..76650c9da9 100644 --- a/js/main.js +++ b/js/main.js @@ -8,18 +8,19 @@ var WIDTH = 600, GRID_OFF_Y = TILE_H, SUBCYCLE_NUM = 40, SUBCYCLE_STABLE_NUM = 20, - c = document.getElementById('c'), - ctx = c.getContext('2d'); - c.width = WIDTH; - c.height = HEIGHT; -var gNodeArray = new Array(); -var gGateArray = new Array(); -var gDirtyNodeArray = new Array(); -var gInputsArray = new Array(); + c = document.getElementById('c'), + ctx = c.getContext('2d'); + c.width = WIDTH; + c.height = HEIGHT; +var gNodeArray = new Array(); +var gGateArray = new Array(); +var gDirtyNodeArray = new Array(); +var gInputsArray = new Array(); var gOutput; -var gSimulator = { cycle:0, subCycle:0, score:0, waveform:new Array() }; -var gCurrLevelID = 0; -var gStateToColor = new Array( '#0000FF', '#FF0000', '#FF00FF' ); +var gSimulator = { cycle:0, subCycle:0, score:0, waveform:new Array() }; +var gCurrLevelID = 0; +var gUnlockedLevelID = 0; +var gStateToColor = new Array( '#0000FF', '#FF0000', '#FF00FF' ); var GameStateEnum = { @@ -156,6 +157,7 @@ var Verify = function() gGameState = GameStateEnum.DESIGN; if ( gSimulator.score == 100 ) { + gUnlockedLevelID = Math.max( gUnlockedLevelID, gCurrLevelID + 1 ); gGameState = GameStateEnum.END_LEVEL; } } @@ -355,37 +357,59 @@ var DrawDesign = function() ctx.fillStyle = 'black'; ctx.font = '12px Arial'; ctx.textAlign = 'right'; - ctx.textBaseline = 'bottom'; + ctx.textBaseline = 'middle'; ctx.lineWidth = 2; var arrLen = gInputsArray.length; for ( var i = 0; i < arrLen; ++i ) { var input = gInputsArray[ i ]; - ctx.fillText( input.name, GRID_OFF_X - 10 + input.nodeX * TILE_W, GRID_OFF_Y + input.nodeY * TILE_H - 3 ); + ctx.fillStyle = 'black'; + ctx.fillText( input.name, GRID_OFF_X - 33 + input.nodeX * TILE_W, GRID_OFF_Y + input.nodeY * TILE_H ); + + ctx.fillStyle = '#FFDD00'; if ( gGameState == GameStateEnum.DEBUG || gGameState == GameStateEnum.VERIFY ) { ctx.strokeStyle = gStateToColor[ gNodeArray[ input.nodeX + input.nodeY * NODE_NUM_X ].state ]; + ctx.fillStyle = gStateToColor[ gNodeArray[ input.nodeX + input.nodeY * NODE_NUM_X ].state ];; } + ctx.beginPath(); - ctx.moveTo( GRID_OFF_X - 40 + input.nodeX * TILE_W, GRID_OFF_Y + input.nodeY * TILE_H ); + ctx.moveTo( GRID_OFF_X - 30 + input.nodeX * TILE_W, GRID_OFF_Y + input.nodeY * TILE_H ); ctx.lineTo( GRID_OFF_X + input.nodeX * TILE_W, GRID_OFF_Y + input.nodeY * TILE_H ); - ctx.closePath(); ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo( GRID_OFF_X + input.nodeX * TILE_W - 5, GRID_OFF_Y + input.nodeY * TILE_H ); + ctx.lineTo( GRID_OFF_X + input.nodeX * TILE_W - 6 - 5, GRID_OFF_Y + input.nodeY * TILE_H - 6 ); + ctx.lineTo( GRID_OFF_X + input.nodeX * TILE_W - 6 - 5, GRID_OFF_Y + input.nodeY * TILE_H + 6 ); + ctx.closePath(); + ctx.fill(); } - ctx.textAlign = 'left'; - ctx.fillText( gOutput.name, GRID_OFF_X + 10 + gOutput.nodeX * TILE_W, GRID_OFF_Y + gOutput.nodeY * TILE_H - 3 ); + ctx.fillStyle = 'black'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; + ctx.fillText( gOutput.name, GRID_OFF_X + 32 + gOutput.nodeX * TILE_W, GRID_OFF_Y + gOutput.nodeY * TILE_H ); + + ctx.fillStyle = '#FFDD00'; if ( gGameState == GameStateEnum.DEBUG || gGameState == GameStateEnum.VERIFY ) { ctx.strokeStyle = gStateToColor[ gNodeArray[ gOutput.nodeX + gOutput.nodeY * NODE_NUM_X ].state ]; + ctx.fillStyle = gStateToColor[ gNodeArray[ gOutput.nodeX + gOutput.nodeY * NODE_NUM_X ].state ]; } ctx.beginPath(); - ctx.moveTo( GRID_OFF_X + 40 + gOutput.nodeX * TILE_W, GRID_OFF_Y + gOutput.nodeY * TILE_H ); + ctx.moveTo( GRID_OFF_X + 30 + gOutput.nodeX * TILE_W, GRID_OFF_Y + gOutput.nodeY * TILE_H ); ctx.lineTo( GRID_OFF_X + gOutput.nodeX * TILE_W, GRID_OFF_Y + gOutput.nodeY * TILE_H ); - ctx.closePath(); ctx.stroke(); + ctx.beginPath(); + ctx.moveTo( GRID_OFF_X + gOutput.nodeX * TILE_W + 31, GRID_OFF_Y + gOutput.nodeY * TILE_H ); + ctx.lineTo( GRID_OFF_X + gOutput.nodeX * TILE_W - 6 + 31, GRID_OFF_Y + gOutput.nodeY * TILE_H - 6 ); + ctx.lineTo( GRID_OFF_X + gOutput.nodeX * TILE_W - 6 + 31, GRID_OFF_Y + gOutput.nodeY * TILE_H + 6 ); + ctx.closePath(); + ctx.fill(); + // draw connections ctx.strokeStyle = '#FFDD00'; @@ -563,9 +587,10 @@ var DrawHUD = function() var DrawDesc = function() { - ctx.font = '12px Arial'; - ctx.fillStyle = 'black'; - ctx.textAlign = 'left'; + ctx.font = '12px Arial'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; var x = 420; var y = 420; @@ -657,11 +682,17 @@ var DrawMainMenu = function() ctx.textBaseline = 'middle'; ctx.fillText( 'WAVEFORM', WIDTH * 0.5, 100 ); ctx.fillText( 'Select level', WIDTH * 0.5, 130 ); + ctx.fillText( 'Progress: ' + gUnlockedLevelID + '/' + gLevels.length, WIDTH * 0.5, 150 ); var len = gMainMenuButtons.length; for ( var i = 0; i < len; ++i ) { + gMainMenuButtons[ i ].background = i <= gUnlockedLevelID ? '#A0E5FF' : '#6C7E84'; DrawButton( gMainMenuButtons[ i ] ); + if ( i < gUnlockedLevelID ) + { + DrawDoneIcon( gMainMenuButtons[ i ].posX + 18, gMainMenuButtons[ i ].posY + gMainMenuButtons[ i ].height * 0.7 ); + } } } @@ -911,7 +942,7 @@ c.onmousedown = function( e ) var len = gMainMenuButtons.length; for ( var i = 0; i < len; ++i ) { - if ( OnButtonMouseDown( gMainMenuButtons[ i ], mousePosX, mousePosY ) ) + if ( OnButtonMouseDown( gMainMenuButtons[ i ], mousePosX, mousePosY ) && i <= gUnlockedLevelID ) { InitLevel( i ); break;