ビンゴカード手作り PDF出力 A4用紙に2個

/**
 * bingo card pdf
 *
 * author ao-system, Inc.
 * date 2024-05-06
 *
 * PDF-LIB が必要
 * https://pdf-lib.js.org/
 */
(() => {
	'use strict';
	new class {
		#URL_PDF = './file/bingocard2.pdf';
		#generate = document.getElementById('generate');
		#pdf = document.getElementById('pdf');
		#cardArea = document.getElementById('cardArea');
		#printPositions = [
			{x:0.286, y:0.796},
			{x:0.286, y:0.367},
		];
		#printStep = {x:0.090, y:-0.063};
		#printSingleSpace = 0.021;
		#numbers = [
			Array.from({length: 15}, (_, i) => i + 1),
			Array.from({length: 15}, (_, i) => i + 16),
			Array.from({length: 15}, (_, i) => i + 31),
			Array.from({length: 15}, (_, i) => i + 46),
			Array.from({length: 15}, (_, i) => i + 61),
		];
		#results = [];
		constructor() {
			this.#init();
			this.#generate.addEventListener('click',() => {
				this.#init();
			});
			this.#pdf.addEventListener('click',() => {
				this.#pdfOut();
			});
		}
		#init() {
			this.#createNumbers();
			this.#displayCard();
		}
		#createNumbers() {
			this.#results = [];
			for (let n = 0; n < 2; n++) {
				for (let k = 0; k < 5; k++) {
					for (let i = this.#numbers[k].length - 1; i > 0; i--) {
						const j = Math.floor(Math.random() * (i + 1));
						[this.#numbers[k][i], this.#numbers[k][j]] = [this.#numbers[k][j], this.#numbers[k][i]];
					}
				}
				const ary = this.#numbers.map(array => array.slice(0, 5));
				this.#results.push(ary);
			}
		}
		#displayCard() {
			this.#cardArea.innerHTML = '';
			for (let i = 0; i < this.#results.length; i++) {
				this.#bingoCard(this.#results[i]);
			}
		}
		#bingoCard(cardAry) {
			const table = document.createElement('table');
			const thead = document.createElement('thead');
			thead.innerHTML = '<tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th></tr>';
			table.appendChild(thead);
			const tbody = document.createElement('tbody');
			for (let y = 0; y < 5; y++) {
				const tr = document.createElement('tr');
				for (let x = 0; x < 5; x++) {
					const td = document.createElement('td');
					td.textContent = (y == 2 && x == 2) ? 'F' : cardAry[x][y];
					tr.appendChild(td);
				}
				tbody.appendChild(tr);
			}
			table.appendChild(tbody);
			this.#cardArea.appendChild(table);
		}
		#pdfOut() {
			const { PDFDocument, rgb } = PDFLib;
			(async (_this) => {
				const existingPdfBytes = await fetch(_this.#URL_PDF).then(res => res.arrayBuffer());
				const pdfDoc = await PDFDocument.load(existingPdfBytes);
				const pages = pdfDoc.getPages();
				const page = pages[0];
				const { width, height } = page.getSize();
				for (let n = 0; n < _this.#printPositions.length; n++) {
					for (let y = 0; y < 5; y++) {
						for (let x = 0; x < 5; x++) {
							if (y != 2 || x != 2) {
								const num = _this.#results[n][x][y];
								const singleChar = num < 10;
								const str = String(num);
								page.drawText(str, {
									x: (_this.#printPositions[n].x * width) + (x * _this.#printStep.x * width) + (singleChar ? _this.#printSingleSpace * width : 0),
									y: (_this.#printPositions[n].y * height) + (y * _this.#printStep.y * height),
									size: 35,
								});
							}
						}
					}
				}
				const pdfBlob = new Blob([await pdfDoc.save()],{type: 'application/pdf'});
				const url = URL.createObjectURL(pdfBlob);
				const fileName = 'bingo' + String(Math.floor(Date.now() / 1000)) + '.pdf';
				const a = document.createElement('a');
				a.href = url;
				a.download = fileName;
				a.click();
			})(this);
		}
	}
})();