Jonas_Jones/BingoGenerator
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/BingoGenerator.git synced 2025-10-23 04:39:18 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
J-onasJones 2024-11-08 20:45:02 +01:00
commit 4bbe1d56a2
15 changed files with 1870 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/app.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

12
src/app.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

1
src/lib/index.ts Normal file
View file

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

154
src/routes/+page.svelte Normal file
View file

@ -0,0 +1,154 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
let inputText = `Bingo Item 1
Bingo Item 2
Bingo Item 3
Bingo Item 4
Bingo Item 5
Bingo Item 6
Bingo Item 7
Bingo Item 8
Bingo Item 9
Bingo Item 10
Bingo Item 11
Bingo Item 12
Bingo Item 13
Bingo Item 14
Bingo Item 15
Bingo Item 16
Bingo Item 17
Bingo Item 18
Bingo Item 19
Bingo Item 20
Bingo Item 21
Bingo Item 22
Bingo Item 23
Bingo Item 24
Bingo Item 25`;
let rows = 5;
let cols = 5;
let grid = [];
function generateBingo() {
const inputLines = inputText.split('\n').map(line => line.trim()).filter(Boolean);
grid = Array(rows * cols).fill('');
const shuffledLines = [...inputLines].sort(() => Math.random() - 0.5);
shuffledLines.forEach((line, index) => {
if (index < grid.length) {
grid[index] = line;
}
});
grid = Array.from({ length: rows }, (_, rowIndex) =>
grid.slice(rowIndex * cols, rowIndex * cols + cols)
);
console.log(grid);
}
afterUpdate(() => {
adjustFontSizes();
});
function adjustFontSizes() {
const cells = document.querySelectorAll('.bingo-cell');
cells.forEach(cell => {
let fontSize = 18; // Base font size
cell.style.fontSize = `${fontSize}px`;
while (cell.scrollHeight > cell.clientHeight || cell.scrollWidth > cell.clientWidth) {
fontSize--;
cell.style.fontSize = `${fontSize}px`;
if (fontSize < 8) break; // Minimum font size limit
}
});
}
async function downloadPDF() {
const gridElement = document.querySelector('.bingo-grid');
const canvas = await html2canvas(gridElement, { scale: 2 });
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'landscape',
unit: 'pt',
format: [canvas.width, canvas.height]
});
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
pdf.save('bingo-grid.pdf');
}
onMount(() => {
generateBingo();
});
</script>
<style>
.bingo-grid-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
padding: 20px;
border: 2px solid #333;
border-radius: 8px;
background-color: #f4f4f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.bingo-grid {
display: grid;
gap: 6px;
margin-bottom: 20px;
}
.bingo-cell {
border: 1px solid #333;
width: 150px; /* Bigger size */
height: 150px; /* Bigger size */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 18px; /* Base font size */
background-color: #fff;
border-radius: 4px;
overflow: hidden;
word-wrap: break-word;
}
button {
margin-top: 10px;
padding: 10px 20px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
border-radius: 4px;
font-size: 1em;
}
button:hover {
background-color: #0056b3;
}
</style>
<div class="bingo-grid-container">
<h1>Randomized 5x5 Bingo Generator</h1>
<p>Enter your items below and click the button to generate a random 5x5 bingo grid.</p>
<textarea bind:value={inputText} placeholder="Enter items line by line" style="width: 80%; height: 300px; margin-bottom: 10px;"></textarea>
<p>NOTE: If there are more lines than Bingo cells, not all Items will be in the Bingo. The selection is still randomized.</p>
<button on:click={generateBingo}>Generate Random Bingo</button>
<button on:click={downloadPDF}>Download as PDF</button>
{#if grid.length > 0}
<div class="bingo-grid" style="grid-template-columns: repeat(5, 1fr);">
{#each grid as row}
{#each row as cell}
<div class="bingo-cell">{cell}</div>
{/each}
{/each}
</div>
{/if}
</div>