app.js: Fix wordwrap and make schedule bigger.

1 files changed, 16 insertions, 13 deletions

diff --git a/public/js/app.js b/public/js/app.js
index 826eb42..34c6273 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -68,8 +68,8 @@ window.addEventListener("load", function() {
 
         for (let frag of expl) {
             flen = c.measureText(frag).width
-            llen += flen
-            if (llen >= width) {
+            llen += flen + space + 5
+            if (lpos + llen >= width) {
                 llen = 0
                 lpos = 0
                 y += 15
@@ -85,27 +85,29 @@ window.addEventListener("load", function() {
         c.fillText(text, x + xpos, y)
     }
 
-    let margin = 30;
+    let timestep = 30;
+    let timescale_font_size = 10;
+    let top_margin = 30;
     let xmargin = 50;
 
     function draw_timescale(c, start, end) {
         let dur = Math.ceil((end - start) / 100)
 
-        c.font = '10px sans-serif'
+        c.font = timescale_font_size + 'px sans-serif'
         c.lineWidth = 'thin'
         c.strokeStyle = '#ccc'
 
         let canvas = c.canvas
 
-        for (let y = 0; y <= dur; y += 30) {
-            let ypos = y + margin;
+        for (let y = 0; y <= dur; y += timestep) {
+            let ypos = y + top_margin;
             c.beginPath()
             c.moveTo(35, ypos)
             c.lineTo(canvas.width, ypos)
             c.stroke()
 
-            let label = time_f(new Date(start.valueOf() + y * 30000 + margin))
-            c.fillText(label, 5, ypos + 3)
+            let label = time_f(new Date(start.valueOf() + y * 30000 + top_margin))
+            c.fillText(label, 5, ypos - 1 + Math.floor(timescale_font_size/2))
         }
     }
 
@@ -122,13 +124,13 @@ window.addEventListener("load", function() {
     function draw_screenings(c, screenings, start_time, rooms) {
         let r = [...rooms]
 
-        c.strokeStyle = '#cfc'
+        c.strokeStyle = '#cc8'
 
         for (let s of screenings) {
             let stt = new Date(s.start_time)
             let ett = new Date(s.end_time)
-            let ystart = Math.ceil((stt - start_time) / 30000) + margin;
-            let height = Math.ceil((ett - start_time ) / 30000) + margin - ystart;
+            let ystart = Math.ceil((stt - start_time) / 30000) + top_margin;
+            let height = Math.ceil((ett - start_time ) / 30000) + top_margin - ystart;
             let ri = r.findIndex(el => el == s.room.name)
             let xstart = xmargin + ri * 150
 
@@ -141,7 +143,7 @@ window.addEventListener("load", function() {
             c.fillText(time_f(stt) + " - " + time_f(ett), xstart + 5, ystart + 10)
 
             c.font = '12px sans-serif'
-            break_text(c, s.film.title, xstart + 5, ystart + 25, 85)
+            break_text(c, s.film.title, xstart + 5, ystart + 25, 95)
         }
     }
 
@@ -182,12 +184,13 @@ window.addEventListener("load", function() {
 
             day.id = "program-" + isodate(dateobj)
             day.innerHTML = '<h2>' + date_f(dateobj) + '</h2>'
-                + '<canvas id="canvas-' + isodate(dateobj) + '" height="' + canvas_height + '" width="' + width + '">'
+                + '<canvas id="canvas-' + isodate(dateobj) + '" height="' + canvas_height * 2 + '" width="' + width * 2 + '">'
                 + '</canvas>'
             p.appendChild(day)
 
             let canvas = document.getElementById('canvas-' + isodate(dateobj))
             let c = canvas.getContext('2d');
+            c.scale(2,2)
             c.fillStyle = '#233'
             c.fillRect(0, 0, width, canvas_height);