First implementation of ScreenDrawer

Gerike · Jan 5, 2017 · f898da1 · f898da1
1 parent 0985b1d
commit f898da1
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/public/framework.js b/public/framework.js
@@ -241,6 +241,27 @@ framework.other = {
   },
 };
 
+framework.drawer = {
+  secondaryCanvas : undefined,
+  secondaryCanvasCtx : undefined,
+  positions : {'CENTER' : 0, 'RIGHT' : 1, 'LEFT' : 2, 'TOP': 3, 'BOTTOM': 4},
+  setDrawingCanvas : function (canvas){
+    framework.drawer.secondaryCanvas = canvas;
+    framework.drawer.secondaryCanvasCtx = canvas.getContext('2d');
+  },
+
+  isSecondaryCanvasSet : function () {
+    return !framework.drawer.secondaryCanvas === undefined;
+  },
+
+  drawText(text, position){
+      if(!framework.drawer.isSecondaryCanvasSet())
+        return;
+      if (Array.isArray(position))
+        framework.drawer.secondaryCanvasCtx.fillText(text, position[0], position[1]);
+  }
+};
+
 //Shortcuts
 framework.getImageData = framework.maskHandler.getImageData;
 framework.createMask = framework.maskHandler.createMask;

diff --git a/public/game.css b/public/game.css
@@ -1,4 +1,5 @@
 .game_field {
+  position: relative;
   margin: auto;
   margin-top: 50px;
   width: 800px;
@@ -8,7 +9,10 @@
 }
 
 canvas {
+  position: absolute;
   width: 100%;
   height: 100%;
   border: 1px solid white;
+  top: 0;
+  left: 0;
 }
diff --git a/public/game.js b/public/game.js
@@ -59,3 +59,18 @@ function stop() {
 function cont() {
   pause = false;
 }
+
+function startTutorial() { //TODO: extract screen writer into a different class with its own methods
+  let special_message_canvas = document.getElementById('special_messages');
+
+  special_message_canvas.width = canvasWidth;
+  special_message_canvas.height = canvasHeight;
+
+  let special_message_context = special_message_canvas.getContext('2d');
+  special_message_context.textAlign = 'center';
+  special_message_context.fillStyle = 'white';
+  special_message_context.font = '60px Georgia';
+  special_message_context.textBaseline = 'middle';
+  special_message_context.fillText('Tutorial level', canvasWidth/2, canvasHeight/2);
+
+}
diff --git a/resources/views/game.njk b/resources/views/game.njk
@@ -2,6 +2,7 @@
 {% block content %}
 <link rel="stylesheet" type="text/css" href="game.css">
 <div class="game_field">
+  <canvas id="special_messages"></canvas>
   <canvas id="game_canvas"></canvas>
 </div>
 <script src="/game_classes/Base/Entity.js"></script>