- [Misc] Edit ESLint config

- [Misc] Update config - [HQ] Minor Client modifications - [Dependencies] Add canvas, discord.js, jsonwebtoken - [Misc] Update package version - [Misc] Add fonts - [HQ] Delete hq-checklives - [CrowdSource] Add crowd client - [Utils] Add image generation - [Utils] Add google - [Utils] Add get tokens
2019-05-15 18:52:55 -04:00
parent 70f55fe8ed
commit cf919231e4
12 changed files with 478 additions and 12 deletions
--- a/src/modules/img.js
+++ b/src/modules/img.js
@@ -0,0 +1,133 @@
+import { createCanvas, registerFont } from 'canvas';
+
+export const genResults = async (game, winners, winnings, accuracy) => {
+  const roundRect = (ctx, x, y, width, height, radius, fill, stroke) => {
+    if (typeof stroke === 'undefined') {
+      stroke = true;
+    }
+    if (typeof radius === 'undefined') {
+      radius = 5;
+    }
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+    if (stroke) {
+      ctx.stroke();
+    }
+    if (fill) {
+      ctx.fill();
+    }
+  };
+
+  const canvas = createCanvas(450, 230);
+  const ctx = canvas.getContext('2d');
+  registerFont('src/utils/CircularStd-Black.ttf', { family: 'Circular' });
+  registerFont('src/utils/CircularStd-Medium.ttf', { family: 'CircularMed', weight: 100 });
+  switch (game) {
+    case 'HQ Trivia':
+      ctx.fillStyle = 'rgba(52, 58, 153, 1)';
+      ctx.strokeStyle = 'rgba(54, 60, 152, 1)';
+      break;
+    case 'Loco Trivia':
+      ctx.fillStyle = 'rgba(39, 32, 69, 1)';
+      ctx.strokeStyle = 'rgba(39, 32, 69, 1)';
+      break;
+    case 'Confetti Trivia':
+      ctx.fillStyle = 'rgba(66, 102, 171, 1)';
+      ctx.strokeStyle = 'rgba(66, 102, 171, 1)';
+      break;
+    default:
+      ctx.fillStyle = 'rgba(52, 58, 153, 1)';
+      ctx.strokeStyle = 'rgba(54, 60, 152, 1)';
+      break;
+  }
+  roundRect(ctx, 0, 0, canvas.width, canvas.height, 40, true, true);
+  ctx.fillStyle = 'white';
+  ctx.font = '45px Circular';
+  ctx.fillText(game, (canvas.width / 2) - (ctx.measureText(game).width / 2), 70);
+  ctx.strokeStyle = 'white';
+  ctx.lineWidth = 5;
+  roundRect(ctx, 2, 2, canvas.width - 4, canvas.height - 4, 40, false, true);
+  ctx.beginPath();
+  ctx.moveTo((canvas.width / 2) - (ctx.measureText(game).width / 2), 80);
+  ctx.lineTo((canvas.width / 2) + (ctx.measureText(game).width / 2), 80);
+  ctx.stroke();
+  ctx.font = '25px CircularMed';
+  ctx.fillText(`${winners.toLocaleString('en')} players won ${winnings}`, (canvas.width / 2) - (ctx.measureText(`${winners.toLocaleString('en')} Players won ${winnings}`).width / 2), 125);
+  ctx.fillText(`Accuracy: ${accuracy}`, (canvas.width / 2) - (ctx.measureText(`Accuracy: ${accuracy}`).width / 2), 165);
+  ctx.font = '15px Circular';
+  ctx.fillText('Trivia Orchard | invite.gg/orchard', (canvas.width / 2) - (ctx.measureText('Trivia Orchard | invite.gg/orchard').width / 2), canvas.height - 20);
+  return canvas.toBuffer();
+};
+
+export const getWordsImage = (puzzleState) => {
+  const puzzleStateLengths = puzzleState.map(i => i.length);
+  const biggestLength = Math.max(...puzzleStateLengths);
+  const canvas = createCanvas(biggestLength * 90 + 100, puzzleState.length * 130 + 75);
+  const ctx = canvas.getContext('2d');
+  registerFont('src/utils/CircularStd-Black.ttf', { family: 'Circular' });
+  registerFont('src/utils/CircularStd-Medium.ttf', { family: 'CircularMed', weight: 100 });
+
+  const roundRect = (ctx, x, y, width, height, radius, fill, stroke) => {
+    if (typeof stroke === 'undefined') {
+      stroke = true;
+    }
+    if (typeof radius === 'undefined') {
+      radius = 5;
+    }
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+    if (stroke) {
+      ctx.stroke();
+    }
+    if (fill) {
+      ctx.fill();
+    }
+  };
+
+  const wordsLetter = (ctx, letter, x, y, scale) => {
+    ctx.fillStyle = 'white';
+    ctx.strokeStyle = 'white';
+    ctx.shadowBlur = 10;
+    ctx.shadowColor = 'black';
+    roundRect(ctx, x, y, scale * 40, scale * 50, 10, true, true);
+    ctx.fillStyle = 'black';
+    const fontSize = 25 * scale;
+    ctx.font = `${fontSize}px Circular`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.shadowBlur = 0;
+    ctx.fillText(letter, x + 20 * scale, y + 25 * scale);
+  };
+
+  let x = 50;
+  let y = 50;
+  // eslint-disable-next-line no-restricted-syntax
+  for (const state of puzzleState) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const letter of state) {
+      wordsLetter(ctx, letter, x, y, 2);
+      x += 90;
+    }
+    x = 50;
+    y += 130;
+  }
+  return canvas.toBuffer();
+};