212 lines
8.4 KiB
JavaScript
212 lines
8.4 KiB
JavaScript
/**
|
||
* Generate space-exploration-4.template.html — 9-page worksheet with
|
||
* addition and subtraction crossing 10 and 20.
|
||
*
|
||
* Usage: node tasks/space-exploration/scripts/generate-crossing.mjs
|
||
* Output: tasks/space-exploration/docs/space-exploration-4.template.html
|
||
*/
|
||
|
||
import fs from 'fs';
|
||
import path from 'path';
|
||
import { fileURLToPath } from 'url';
|
||
|
||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||
const ROOT = path.resolve(__dirname, '../../..');
|
||
|
||
const pack1Icons = fs.readdirSync(path.join(ROOT, 'assets/themes/nms/icons/pack1'))
|
||
.filter(f => f.endsWith('.png'))
|
||
.map(f => `assets/themes/nms/icons/pack1/${f}`);
|
||
|
||
const pack2Icons = fs.readdirSync(path.join(ROOT, 'assets/themes/nms/icons/pack2'))
|
||
.filter(f => f.endsWith('.png'))
|
||
.map(f => `assets/themes/nms/icons/pack2/${f}`);
|
||
|
||
function shuffle(arr) {
|
||
const a = [...arr];
|
||
for (let i = a.length - 1; i > 0; i--) {
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
[a[i], a[j]] = [a[j], a[i]];
|
||
}
|
||
return a;
|
||
}
|
||
|
||
function randInt(min, max) {
|
||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||
}
|
||
|
||
function pickAlignment() {
|
||
const opts = ['justify-start', 'justify-center', 'justify-end'];
|
||
return opts[Math.floor(Math.random() * opts.length)];
|
||
}
|
||
|
||
// Generate 20 unique crossing problems (A ± B crosses 10 or 20)
|
||
function genCrossingProblems() {
|
||
const problems = [];
|
||
const seen = new Set();
|
||
|
||
while (problems.length < 20) {
|
||
const isAdd = Math.random() < 0.5;
|
||
const crossAt = Math.random() < 0.5 ? 10 : 20;
|
||
let a, b;
|
||
|
||
if (isAdd) {
|
||
if (crossAt === 10) {
|
||
// A ∈ [1,9], A+B ∈ [11,min(29,A+10)]
|
||
a = randInt(1, 9);
|
||
const minB = 11 - a;
|
||
const maxB = Math.min(10, 29 - a);
|
||
if (minB > maxB) continue;
|
||
b = randInt(minB, maxB);
|
||
} else {
|
||
// A ∈ [11,19], A+B ∈ [21,min(29,A+10)]
|
||
a = randInt(11, 19);
|
||
const minB = 21 - a;
|
||
const maxB = Math.min(10, 29 - a);
|
||
if (minB > maxB) continue;
|
||
b = randInt(minB, maxB);
|
||
}
|
||
const result = a + b;
|
||
if (result < 1 || result > 29) continue;
|
||
const expr = `${a} + ${b}`;
|
||
if (!seen.has(expr)) { seen.add(expr); problems.push(expr); }
|
||
} else {
|
||
if (crossAt === 10) {
|
||
// A ∈ [11,19], A−B ∈ [1,9]
|
||
a = randInt(11, 19);
|
||
const minB = a - 9;
|
||
const maxB = Math.min(10, a - 1);
|
||
if (minB > maxB || minB < 1) continue;
|
||
b = randInt(Math.max(1, minB), maxB);
|
||
} else {
|
||
// A ∈ [21,29], A−B ∈ [11,19]
|
||
a = randInt(21, 29);
|
||
const minB = a - 19;
|
||
const maxB = Math.min(10, a - 11);
|
||
if (minB > maxB || minB < 1) continue;
|
||
b = randInt(Math.max(1, minB), maxB);
|
||
}
|
||
const result = a - b;
|
||
if (result < 1 || result > 29) continue;
|
||
const expr = `${a} − ${b}`;
|
||
if (!seen.has(expr)) { seen.add(expr); problems.push(expr); }
|
||
}
|
||
}
|
||
|
||
return problems;
|
||
}
|
||
|
||
const pages = [
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship1.jpeg', footer: 'assets/themes/nms/footers/planet1.jpeg', dir: 'flex-row-reverse', pack: 'pack1' },
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship2.jpeg', footer: 'assets/themes/nms/footers/planet2.jpeg', dir: '', pack: 'pack1' },
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship3.png', footer: 'assets/themes/nms/footers/planet3.jpeg', dir: 'flex-row-reverse', pack: 'pack1' },
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship4.jpeg', footer: 'assets/themes/nms/footers/planet4.jpeg', dir: '', pack: 'pack1' },
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship5.jpeg', footer: 'assets/themes/nms/footers/planet5.jpeg', dir: 'flex-row-reverse', pack: 'pack1' },
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship6.jpeg', footer: 'assets/themes/nms/footers/planet6.jpeg', dir: '', pack: 'pack1' },
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship7.jpeg', footer: 'assets/themes/nms/footers/planet7.jpeg', dir: 'flex-row-reverse', pack: 'pack2' },
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship8.jpeg', footer: 'assets/themes/nms/footers/planet8.jpeg', dir: '', pack: 'pack2' },
|
||
{ hero: 'assets/themes/nms/hero-images/spaceship9.jpeg', footer: 'assets/themes/nms/footers/planet9.jpeg', dir: 'flex-row-reverse', pack: 'pack2' },
|
||
];
|
||
|
||
// Icons: pages 0-5 → pack1 (shuffled twice across 3-page sections), pages 6-8 → pack2
|
||
const iconSections = [
|
||
shuffle(pack1Icons), // pages 0-2
|
||
shuffle(pack1Icons), // pages 3-5
|
||
shuffle(pack2Icons), // pages 6-8
|
||
];
|
||
|
||
function buildProblemCard(icon, expression, alignment) {
|
||
return ` <div class="flex ${alignment}">
|
||
<div class="flex items-center gap-1">
|
||
<img src="../../../${icon}" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
|
||
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">${expression} = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
function buildPage(pageIdx, isLast) {
|
||
const pg = pages[pageIdx];
|
||
const sectionIdx = Math.floor(pageIdx / 3);
|
||
const posInSection = pageIdx % 3;
|
||
const sectionIcons = iconSections[sectionIdx];
|
||
const pageIcons = sectionIcons.slice(posInSection * 20, posInSection * 20 + 20);
|
||
|
||
const problems = genCrossingProblems();
|
||
const dirClass = pg.dir ? ` ${pg.dir}` : '';
|
||
const breakStyle = isLast ? '' : ' style="break-after: page;"';
|
||
|
||
const cards = problems.map((expr, i) =>
|
||
buildProblemCard(pageIcons[i], expr, pickAlignment())
|
||
).join('\n\n');
|
||
|
||
return ` <!-- PAGE ${pageIdx + 1} -->
|
||
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white"${breakStyle}>
|
||
|
||
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
|
||
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
|
||
<img src="../../../${pg.footer}" class="w-full h-full object-cover object-top" alt="">
|
||
</div>
|
||
|
||
<div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
|
||
<div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
|
||
<span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано ресурсов: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
|
||
|
||
<div class="flex items-center gap-4 mb-4${dirClass}">
|
||
<img src="../../../${pg.hero}" class="w-[48%] shrink-0 object-contain" alt="">
|
||
<div class="flex-1 flex flex-col items-center justify-center text-center">
|
||
<h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
|
||
<p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-x-3 gap-y-[3px] flex-1 content-start">
|
||
|
||
${cards}
|
||
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
const htmlPages = pages.map((_, i) => buildPage(i, i === pages.length - 1)).join('\n\n');
|
||
|
||
const html = `<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||
<title>Исследуй Планету</title>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: { nunito: ['Nunito', 'sans-serif'] },
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
@page { size: A4; margin: 0; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-200 font-nunito">
|
||
|
||
${htmlPages}
|
||
|
||
</body>
|
||
</html>
|
||
`;
|
||
|
||
const outPath = path.join(__dirname, '..', 'docs', 'space-exploration-4.template.html');
|
||
fs.writeFileSync(outPath, html, 'utf-8');
|
||
console.log(`Generated: ${outPath} (${pages.length} pages, ${pages.length * 20} problems)`);
|