From 2a988427d23cddba0df7a9b922267b1cbe2ced0c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 3 Jun 2018 13:39:52 +0200 Subject: [PATCH] Improvements on Splash Screen --- Images/aa-logo.png | Bin 0 -> 4770 bytes SplashScreen.js | 112 +++++++++++++++++++++------------------------ 2 files changed, 53 insertions(+), 59 deletions(-) create mode 100644 Images/aa-logo.png diff --git a/Images/aa-logo.png b/Images/aa-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9701ee1c0e1858370837bc61930333be69bc4cd6 GIT binary patch literal 4770 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 CP}HCR literal 0 HcmV?d00001 diff --git a/SplashScreen.js b/SplashScreen.js index 2d8e59ca6..d9644e72e 100644 --- a/SplashScreen.js +++ b/SplashScreen.js @@ -34,11 +34,22 @@ function newSplashScreen() { let fadeOutCounter = 0; let opacity = 1; + let logo; + let canDrawLogo = false; + return thisObject; function initialize() { + logo = new Image(); + logo.onload = onImageLoad; + + function onImageLoad() { + canDrawLogo = true; + } + + logo.src = "Images/aa-logo.png"; } @@ -53,28 +64,14 @@ function newSplashScreen() { if (fadeOutCounter > 20) { return; } - opacity = opacity - 0.05; - } + if (canDrawLogo === false) { return; } + thisObject.container.frame.draw(false, false); - let label = '' + Math.trunc(stepsInitializationCounter) + ' %'; - stepsInitializationCounter = stepsInitializationCounter + 1; - - if (stepsInitializationCounter > 99) { - - splashScreenNeeded = false; - stepsInitializationCounter = 99; - } - - let fontSize = 50; - - let labelPoint = { - x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 200 - }; + /* Set the background. */ browserCanvasContext.beginPath(); @@ -85,61 +82,58 @@ function newSplashScreen() { browserCanvasContext.fill(); - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY; - browserCanvasContext.fillStyle = 'rgba(200, 200, 200, ' + opacity + ')'; + /* First the AA Logo. */ + + let imageHeight = 96; + let imageWidth = 480; + + let imagePoint = { + x: thisObject.container.frame.width * 1 / 2 - imageWidth / 2, + y: thisObject.container.frame.height * 1 / 2 - imageHeight / 2 + }; + + imagePoint = thisObject.container.frame.frameThisPoint(imagePoint); + + browserCanvasContext.drawImage(logo, imagePoint.x, imagePoint.y, imageWidth, imageHeight); + + /* Second the % of Advance. */ + + let label = '' + Math.trunc(stepsInitializationCounter) + ' %'; + stepsInitializationCounter = stepsInitializationCounter + 0.2; + + if (stepsInitializationCounter > 99) { + + splashScreenNeeded = false; + stepsInitializationCounter = 99; + } + + + let fontSize = 10; + + let labelPoint = { + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 95 + }; + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY; + browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')'; browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); let title; let titlePoint; - /* Advanced Algos Title */ - - fontSize = 100; - - title = "Advanced" - - titlePoint = { - x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 230, - y: thisObject.container.frame.height / 2 - fontSize * 2 + 50 - }; - - browserCanvasContext.font = fontSize + 'px Verdana'; - browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')'; - browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y); - - title = "A" - - browserCanvasContext.fillStyle = 'rgba(255, 0, 0, ' + opacity + ')'; - browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y); - - title = "Algos" - - titlePoint = { - x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 230, - y: thisObject.container.frame.height / 2 - fontSize * 2 + 50 - }; - - browserCanvasContext.font = fontSize + 'px Verdana'; - browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')'; - browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y); - - title = "A" - - browserCanvasContext.fillStyle = 'rgba(255, 0, 0, ' + opacity + ')'; - browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y); - /* Algo Bots Competitions Sub Title */ - fontSize = 50; + fontSize = 15; title = "Algobots Competitions Platform" titlePoint = { - x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 50, - y: thisObject.container.frame.height / 2 - fontSize * 2 + 150 + x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 20, + y: thisObject.container.frame.height / 2 - fontSize * 2 + 80 }; - browserCanvasContext.font = fontSize + 'px Verdana'; + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY; browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')'; browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y);