Pokemon GO Invitation

by Luis Velito

HTML

<script src="https://fonts.googleapis.com/css?family=Lato"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto+Condensed"></script>
<h1>EX Raid Invitation Generator</h1>
<canvas id="invitation"></canvas>
<div class="controls">
  <textarea class="json-info">{
  "trainerId" : "TRAINER",
  "date" : "MM/DD",
  "duration" : {
    "start" : "00:00AM",
    "end" : "23:59PM"
  },
  "gym" : {
    "name" : "Gym Name",
    "location" : "Gym Location"
  }
}</textarea><br/>
  <p><input type="button" class="update-btn" value="Update" /></p>
  <div>
    <p class="p-lato">This is "Lato" font.</p>
    <p class="p-robo">This is "Roboto Condensed" font.</p>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
.p-lato { font-family: 'Lato', sans-serif; }
.p-robo { font-family: 'Roboto Condensed', sans-serif; }
.controls { float: left; }
.controls > p { text-align: center; }
.json-info { width: 20em; height: 20em; margin-right: 1em; }
#invitation { /* letter-spacing: 0.02em; */ }

JavaScript

var info = obtainInfo();
console.log(info);
//const fontLato = loadFont('Lato', 'lato/v13/1YwB1sO8YE1Lyjf12WNiUA');
//const fontRobo = loadFont('Roboto+Condensed', 'robotocondensed/v14/Zd2E9abXLFGSr9G3YK2MsDAdhzWOYhqHvOZMRGaEyPo');
var imgPath = 'http://i.imgur.com/MZkij8b.png';
var fontsToLoad = 2;
var hasImageRendered = false, hasRenderedText = false;
var imgWidth, imgHeight;
var cvs = document.getElementById('invitation');
var ctx = cvs.getContext('2d');
var img = new Image;

img.onload = onImageLoad;
img.src = imgPath;

$('.update-btn').on('click', redraw);

function obtainInfo() {
  return JSON.parse($('.json-info').val());
}

function redraw(e) {
  try {
    info = obtainInfo();
    ctx.drawImage(img, 0, 0);
    hasRenderedText = false;
    drawText();
  } catch(e) {
		console.log('Error: Invalid JSON object...');
  }
}

function onImageLoad() {
  imgWidth = cvs.width = img.width;
  imgHeight = cvs.height = img.height;
  ctx.drawImage(img, 0, 0);
  hasImageRendered = true;
  fontsToLoad = 0; // Disabled fonts from loading...
  drawText();
}

function drawText() {
  if (fontsToLoad === 0 && hasImageRendered === true && hasRenderedText === false) {
    console.log('Drawing text...');
    var x = Math.floor(imgWidth / 2);
    ctx.textAlign = 'center';
    applyText(ctx, 'INVITATION', x, 83, true, 'bold 21px Lato', '#2dcb96');
    applyText(ctx, info.date + '  ' + info.duration.start + '  -  ' + info.duration.end, x, 166, true, 'bold 26px Lato', '#44696c');
    applyText(ctx, info.gym.name, x, 248, true);
    applyText(ctx, info.gym.location, x, 283, false, 'normal 24px Lato', '#838383');
    applyText(ctx, 'Get directions', x, 325, false, 'bold 28px Lato', '#1eccb5');
    applyText(ctx, 'Congratulations, ' + info.trainerId + '!', x, 602, false, 'bold 24px Lato', '#fb6c88');
    applyText(ctx, 'You\'re invited to field-test for an EX Raid.', x, 652, true, 'bold 20px Lato', '#678386');
    applyText(ctx, 'Here\'s your EX Raid Pass.', x, 678, false);
   ...