/* ============================================= TECHNODOM SHOP GAME Level 1: Warehouse sorting Level 2: Cashier calculator ============================================= */ (function () { 'use strict'; /* ─── AUDIO ─────────────────────────────────── */ let audioCtx = null; function getAudio() { if (!audioCtx) { try { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } catch(e) {} } return audioCtx; } function playTone(freq, dur, type='sine', vol=0.18) { const ctx = getAudio(); if (!ctx) return; const o = ctx.createOscillator(), g = ctx.createGain(); o.connect(g); g.connect(ctx.destination); o.type = type; o.frequency.value = freq; g.gain.setValueAtTime(vol, ctx.currentTime); g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur); o.start(); o.stop(ctx.currentTime + dur); } function sfxCorrect() { playTone(520,0.12); setTimeout(()=>playTone(660,0.15),100); } function sfxWrong() { playTone(180,0.25,'sawtooth',0.15); } function sfxPickup() { playTone(440,0.08,'square',0.1); } function sfxDrop() { playTone(350,0.1,'sine',0.12); } function sfxCash() { playTone(880,0.05); setTimeout(()=>playTone(1100,0.1),60); } function sfxKey() { playTone(600,0.05,'square',0.08); } /* ─── PRODUCTS ───────────────────────────────── */ const PRODUCTS = [ { id:'ac', name:'Кондиционер AVA', nameKz:'AVA кондиционері', cat:'climate', catIcon:'❄️', catName:'Климат', catNameKz:'Климат', price:89990, img:'ac.webp', emoji:'❄️' }, { id:'kettle', name:'Чайник стеклянный', nameKz:'Шыны шәйнек', cat:'small', catIcon:'🔌', catName:'Мелкая БТ', catNameKz:'Кіші тұрмыс', price:29990, img:'kettle.webp', emoji:'☕' }, { id:'tv', name:'Телевизор LG UHD', nameKz:'LG UHD теледидар', cat:'tv', catIcon:'📺', catName:'Телевизоры', catNameKz:'Теледидарлар', price:256000, img:'tv.webp', emoji:'📺' }, { id:'fryer', name:'Аэрофритюрница Polaris', nameKz:'Polaris аэрофритюрниця',cat:'small', catIcon:'🔌', catName:'Мелкая БТ', catNameKz:'Кіші тұрмыс', price:57000, img:'fryer.webp', emoji:'🍗' }, { id:'phone', name:'Смартфон Huawei', nameKz:'Huawei смартфоны', cat:'phones', catIcon:'📱', catName:'Смартфоны', catNameKz:'Смартфондар', price:343990, img:'phone.webp', emoji:'📱' }, ]; const SHELVES = [ { id:'phones', icon:'📱', name:'Смартфоны', nameKz:'Смартфондар', color:'#4d96ff' }, { id:'tv', icon:'📺', name:'Телевизоры', nameKz:'Теледидарлар', color:'#845ec2' }, { id:'climate', icon:'❄️', name:'Климат', nameKz:'Климат', color:'#00c9ff' }, { id:'small', icon:'🔌', name:'Мелкая БТ', nameKz:'Кіші тұрмыс', color:'#f46b3f' }, ]; /* ─── CUSTOMER TYPES ──────────────────────────── */ const CUSTOMER_TYPES = [ { type:'man_blonde', hair:'#f0d060', skinTone:'#f5c5a0', gender:'m', age:'adult', label:'Блондин' }, { type:'man_dark', hair:'#2a1a0a', skinTone:'#e8a87c', gender:'m', age:'adult', label:'Брюнет' }, { type:'woman_blonde', hair:'#f0d060', skinTone:'#f5c5a0', gender:'f', age:'adult', label:'Блондинка' }, { type:'woman_dark', hair:'#1a0a0a', skinTone:'#c68642', gender:'f', age:'adult', label:'Брюнетка' }, { type:'teen', hair:'#8B4513', skinTone:'#f5c5a0', gender:'m', age:'teen', label:'Подросток' }, { type:'elder', hair:'#d0d0d0', skinTone:'#d4956a', gender:'m', age:'elder', label:'Пожилой' }, ]; /* ─── TEXTS ──────────────────────────────────── */ const T = { ru: { startTitle:'Technodom: Менеджер магазина', startDesc:'Управляй работником, расставляй товары и обслуживай покупателей!', startBtn:'Начать игру', lvl1:'Уровень 1 — Склад', lvl2:'Уровень 2 — Касса', score:'Счёт', time:'Время', controls:'← → движение | ↑ или Пробел — взять/положить', controlsMobile:'Кнопки ← → для движения, ⬆ для взятия/укладки', pickupHint:'⬆ Взять', placeHint:'⬆ Положить', transition1:'Уровень 1 пройден!', transition1sub:'Отличная сортировка! Теперь к кассе.', toLvl2:'К кассе →', enterPrice:'Введите цену:', confirm:'✓', clear:'C', backspace:'←', correct:'✅ Верно!', wrong:'❌ Неверно!', winTitle:'Поздравляем!', winDesc:'Вы прошли оба уровня! Держите промокод на скидку 10%', promoLabel:'Ваш промокод', copyBtn:'📋 Скопировать', copied:'✅ Скопировано!', loseTitle:'Время вышло!', loseDesc:'Попробуйте ещё раз!', retryBtn:'Играть снова', lvl1lose:'Не хватило сортировки', lvl2lose:'Не хватило времени у кассы', happyCustomer:'😊 Спасибо!', angryCustomer:'😠 Неверно!', sortInstruction:'Подбери товар и неси на нужную полку!', }, kz: { startTitle:'Technodom: Дүкен менеджері', startDesc:'Жұмысшыны басқар, тауарларды орналастыр және сатып алушыларды қызмет ет!', startBtn:'Ойынды бастау', lvl1:'1-деңгей — Қойма', lvl2:'2-деңгей — Касса', score:'Ұпай', time:'Уақыт', controls:'← → жылжу | ↑ немесе Бос орын — алу/қою', controlsMobile:'← → қозғалу үшін, ⬆ алу/қою үшін', pickupHint:'⬆ Алу', placeHint:'⬆ Қою', transition1:'1-деңгей өтілді!', transition1sub:'Тамаша сұрыптама! Енді кассаға.', toLvl2:'Кассаға →', enterPrice:'Бағаны енгізіңіз:', confirm:'✓', clear:'C', backspace:'←', correct:'✅ Дұрыс!', wrong:'❌ Қате!', winTitle:'Құттықтаймыз!', winDesc:'Екі деңгейді өттіңіз! 10% жеңілдік промокод алыңыз', promoLabel:'Промокодыңыз', copyBtn:'📋 Көшіру', copied:'✅ Көшірілді!', loseTitle:'Уақыт бітті!', loseDesc:'Қайтадан көріңіз!', retryBtn:'Қайта ойнау', lvl1lose:'Сұрыптама жетіспеді', lvl2lose:'Кассада уақыт жетіспеді', happyCustomer:'😊 Рахмет!', angryCustomer:'😠 Қате!', sortInstruction:'Тауарды алып, дұрыс сөреге апар!', } }; function t(k) { return (T[lang]||T.ru)[k]||k; } /* ─── STATE ──────────────────────────────────── */ let lang = 'ru'; let canvas, ctx, W, H; let gameState = 'intro'; // intro|level1|transition|level2|win|lose let score = 0; let timer = 0; let timerInterval = null; let animFrame = null; /* ─── WORKER ─────────────────────────────────── */ let worker = { x: 0, y: 0, w: 32, h: 56, vx: 0, speed: 220, carrying: null, // product walkFrame: 0, walkTimer: 0, facing: 1, // 1=right, -1=left feedback: null, feedbackTimer: 0, }; /* ─── LEVEL 1 ────────────────────────────────── */ let shelves = []; let conveyorItems = []; let shelfCounts = {}; let sortScore = 0; let sortCorrect = 0; let productImages = {}; let imagesLoaded = false; /* ─── LEVEL 2 ────────────────────────────────── */ let customers = []; let currentCustomer = null; let cashInput = ''; let cashFeedback = null; let cashFeedbackTimer = 0; let cashCorrect = 0; let customerQueue = []; /* ─── INPUT ──────────────────────────────────── */ let keys = {}; /* ═══════════════════════════════════════════════ SETUP ═══════════════════════════════════════════════ */ function init() { canvas = document.getElementById('shopCanvas'); if (!canvas) return; ctx = canvas.getContext('2d'); lang = document.querySelector('[data-lang]')?.dataset.lang || 'ru'; resizeCanvas(); window.addEventListener('resize', resizeCanvas); // Load product images loadImages(() => { imagesLoaded = true; drawIntro(); }); // Input window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', e => { keys[e.key] = false; }); canvas.setAttribute('tabindex', '0'); canvas.style.outline = 'none'; canvas.addEventListener('click', e => { canvas.focus(); onCanvasClick(e); }); canvas.addEventListener('touchstart', onTouch, {passive:false}); canvas.addEventListener('touchmove', e=>e.preventDefault(), {passive:false}); // Also handle keydown on canvas itself canvas.addEventListener('keydown', onKeyDown); // Mobile buttons — use delegation on document to survive CMS re-renders function bindBtn(id, onDown, onUp) { // Try immediate bind, also re-try after short delay for CMS function tryBind() { const el = document.getElementById(id); if (!el) return; if (el._bound) return; el._bound = true; if (onDown) { el.addEventListener('mousedown', onDown); el.addEventListener('touchstart', e=>{e.preventDefault();onDown(e);}, {passive:false}); } if (onUp) { el.addEventListener('mouseup', onUp); el.addEventListener('mouseleave',onUp); el.addEventListener('touchend', onUp); } } tryBind(); setTimeout(tryBind, 300); setTimeout(tryBind, 800); } bindBtn('btnLeft', ()=>keys['ArrowLeft']=true, ()=>keys['ArrowLeft']=false); bindBtn('btnRight', ()=>keys['ArrowRight']=true, ()=>keys['ArrowRight']=false); bindBtn('btnUp', ()=>onActionKey(), null); } function loadImages(cb) { let loaded = 0; const total = PRODUCTS.length; PRODUCTS.forEach(p => { const img = new Image(); img.onload = () => { loaded++; if (loaded===total) cb(); }; img.onerror = () => { loaded++; if (loaded===total) cb(); }; img.src = p.img; productImages[p.id] = img; }); } function resizeCanvas() { if (!canvas) return; const parent = canvas.parentElement; W = parent.clientWidth; H = Math.min(Math.floor(W * (window.innerWidth < 600 ? 1.4 : 0.9)), 600); canvas.width = W; canvas.height = H; canvas.style.height = H + 'px'; if (gameState === 'intro') drawIntro(); } /* ═══════════════════════════════════════════════ INTRO ═══════════════════════════════════════════════ */ function drawIntro() { if (!ctx) return; ctx.clearRect(0,0,W,H); // BG gradient const bg = ctx.createLinearGradient(0,0,0,H); bg.addColorStop(0,'#fff8f5'); bg.addColorStop(1,'#f5f6fa'); ctx.fillStyle = bg; ctx.fillRect(0,0,W,H); // Title ctx.fillStyle = '#202020'; ctx.font = `bold ${clamp(22,W*0.045,32)}px Museo, sans-serif`; ctx.textAlign = 'center'; ctx.fillText(t('startTitle'), W/2, H*0.2); // Subtitle ctx.fillStyle = '#737171'; ctx.font = `${clamp(13,W*0.028,16)}px Museo, sans-serif`; wrapText(ctx, t('startDesc'), W/2, H*0.3, W*0.75, 22); // Draw mini worker preview const pw = {x:W/2, y:H*0.52, w:36, h:64, facing:1, walkFrame:0, carrying:null}; drawWorker(pw); // Draw shelves preview const sw = W*0.13; SHELVES.forEach((s,i) => { const sx = W*0.12 + i*(W*0.2); ctx.fillStyle = s.color+'33'; ctx.strokeStyle = s.color; ctx.lineWidth = 2; roundRect(ctx, sx-sw/2, H*0.38, sw, H*0.12, 8); ctx.fill(); ctx.stroke(); ctx.font = `${clamp(14,W*0.032,20)}px sans-serif`; ctx.textAlign = 'center'; ctx.fillText(s.icon, sx, H*0.38+H*0.07); ctx.fillStyle = '#202020'; ctx.font = `bold ${clamp(9,W*0.018,12)}px Museo,sans-serif`; ctx.fillText(lang==='kz'?s.nameKz:s.name, sx, H*0.38+H*0.1); }); // Start button const bw=180, bh=48, bx=W/2-bw/2, by=H*0.72; const btnGrad = ctx.createLinearGradient(bx,by,bx+bw,by+bh); btnGrad.addColorStop(0,'#fc6b3f'); btnGrad.addColorStop(1,'#f4902a'); ctx.fillStyle = btnGrad; roundRect(ctx,bx,by,bw,bh,14); ctx.fill(); ctx.fillStyle='#fff'; ctx.font=`bold ${clamp(14,W*0.03,17)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(t('startBtn'), W/2, by+bh/2+6); // Store start button bounds canvas._startBtn = {x:bx,y:by,w:bw,h:bh}; } /* ═══════════════════════════════════════════════ LEVEL 1 SETUP ═══════════════════════════════════════════════ */ function startLevel1() { gameState = 'level1'; score = 0; sortCorrect = 0; sortScore = 0; timer = 60; shelfCounts = {phones:0, tv:0, climate:0, small:0}; // Layout shelves across top const margin = W*0.06; const sw = (W - margin*2) / 4 - 8; const sh = H*0.13; shelves = SHELVES.map((s,i) => ({ ...s, x: margin + i*(sw+8), y: H*0.08, w: sw, h: sh, highlight: false, flash: 0, })); // Worker starts center bottom worker = { x: W/2, y: H*0.72, w: 32, h: 56, vx: 0, speed: W*0.45, carrying: null, walkFrame: 0, walkTimer: 0, facing: 1, feedback: null, feedbackTimer: 0, }; // Conveyor items — shuffle products const shuffled = shuffle([...PRODUCTS]); conveyorItems = []; shuffled.forEach((p,i) => { conveyorItems.push({ ...p, x: W*0.15 + i*(W*0.18), y: H*0.86, w: 52, h: 52, active: i===0, collected: false, }); }); setupMobileControls(true); canvas.focus(); canvas.setAttribute('tabindex','0'); clearInterval(timerInterval); timerInterval = setInterval(tickTimer, 1000); if (animFrame) cancelAnimationFrame(animFrame); loop1(); } function tickTimer() { timer--; if (timer <= 0) { clearInterval(timerInterval); if (gameState === 'level1') { if (sortCorrect >= 3) showTransition(); else showLose(t('lvl1lose')); } else if (gameState === 'level2') { if (cashCorrect >= 3) showWin(); else showLose(t('lvl2lose')); } } } /* ═══════════════════════════════════════════════ LEVEL 1 LOOP ═══════════════════════════════════════════════ */ let lastTime = 0; function loop1(ts=0) { if (gameState !== 'level1') return; const dt = Math.min((ts - lastTime)/1000, 0.05); lastTime = ts; updateWorker(dt); draw1(); animFrame = requestAnimationFrame(loop1); } function updateWorker(dt) { // Move if (keys['ArrowLeft']) { worker.vx = -worker.speed; worker.facing = -1; } else if (keys['ArrowRight']) { worker.vx = worker.speed; worker.facing = 1; } else worker.vx = 0; worker.x += worker.vx * dt; worker.x = Math.max(worker.w/2, Math.min(W - worker.w/2, worker.x)); // Walk animation if (worker.vx !== 0) { worker.walkTimer += dt; if (worker.walkTimer > 0.12) { worker.walkFrame = (worker.walkFrame+1)%4; worker.walkTimer=0; } } else { worker.walkFrame = 0; } // Feedback timer if (worker.feedbackTimer > 0) worker.feedbackTimer -= dt; // Highlight shelves when carrying if (worker.carrying) { shelves.forEach(s => { s.highlight = Math.abs(worker.x - (s.x + s.w/2)) < s.w*0.7; }); } else { shelves.forEach(s => s.highlight = false); } // Highlight conveyor item if (!worker.carrying) { conveyorItems.forEach(item => { if (!item.collected && item.active) { item.highlight = Math.abs(worker.x - item.x) < item.w; } else { item.highlight = false; } }); } // Shelf flash decay shelves.forEach(s => { if (s.flash > 0) s.flash -= dt*3; }); } function draw1() { ctx.clearRect(0,0,W,H); // BG const bg = ctx.createLinearGradient(0,0,0,H); bg.addColorStop(0,'#1a1a2e'); bg.addColorStop(1,'#16213e'); ctx.fillStyle=bg; ctx.fillRect(0,0,W,H); // Floor ctx.fillStyle='#0f0f1f'; ctx.fillRect(0, H*0.78, W, H*0.22); // Floor tiles ctx.strokeStyle='rgba(255,255,255,0.04)'; ctx.lineWidth=1; for(let x=0;x drawShelf(s)); // Conveyor items conveyorItems.forEach(item => { if (item.collected) return; drawConveyorItem(item); }); // Worker drawWorker(worker); // HUD drawHUD1(); // Feedback popup if (worker.feedbackTimer > 0 && worker.feedback) { ctx.globalAlpha = Math.min(1, worker.feedbackTimer); ctx.font=`bold ${clamp(14,W*0.03,18)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillStyle = worker.feedback.ok ? '#4caf50' : '#ff5555'; ctx.fillText(worker.feedback.text, worker.x, worker.y - worker.h*0.8); ctx.globalAlpha=1; } } function drawShelf(s) { const alpha = s.flash > 0 ? 0.5 + s.flash*0.5 : (s.highlight ? 0.35 : 0.18); const col = s.flash > 0 ? (s.flashOk ? '#4caf50' : '#ff5555') : s.color; ctx.fillStyle = col + Math.round(alpha*255).toString(16).padStart(2,'0'); roundRect(ctx, s.x, s.y, s.w, s.h, 10); ctx.fill(); ctx.strokeStyle = col; ctx.lineWidth = s.highlight ? 2.5 : 1.5; roundRect(ctx, s.x, s.y, s.w, s.h, 10); ctx.stroke(); // Icon ctx.font = `${clamp(18,s.w*0.3,28)}px sans-serif`; ctx.textAlign='center'; ctx.fillText(s.icon, s.x+s.w/2, s.y+s.h*0.48); // Name ctx.fillStyle='#fff'; ctx.font=`bold ${clamp(8,s.w*0.12,11)}px Museo,sans-serif`; ctx.fillText(lang==='kz'?s.nameKz:s.name, s.x+s.w/2, s.y+s.h*0.78); // Count badge const cnt = shelfCounts[s.id]||0; if (cnt > 0) { ctx.fillStyle='#f46b3f'; ctx.beginPath(); ctx.arc(s.x+s.w-10, s.y+10, 10, 0, Math.PI*2); ctx.fill(); ctx.fillStyle='#fff'; ctx.font=`bold 10px sans-serif`; ctx.fillText(cnt, s.x+s.w-10, s.y+14); } // Hint when worker near if (s.highlight && worker.carrying) { ctx.fillStyle='rgba(255,255,255,0.9)'; ctx.font=`bold ${clamp(10,W*0.022,13)}px Museo,sans-serif`; ctx.fillText(t('placeHint'), s.x+s.w/2, s.y-8); } } function drawConveyorItem(item) { const glow = item.active && item.highlight; if (glow) { ctx.shadowColor='#f46b3f'; ctx.shadowBlur=16; } // Box ctx.fillStyle = item.active ? '#fff' : 'rgba(255,255,255,0.35)'; roundRect(ctx, item.x-item.w/2, item.y-item.h/2, item.w, item.h, 8); ctx.fill(); // Product image const img = productImages[item.id]; if (img && img.complete && img.naturalWidth) { ctx.drawImage(img, item.x-item.w/2+4, item.y-item.h/2+4, item.w-8, item.h-8); } else { ctx.font=`${clamp(20,item.w*0.4,28)}px sans-serif`; ctx.textAlign='center'; ctx.fillText(item.emoji, item.x, item.y+8); } ctx.shadowBlur=0; ctx.shadowColor='transparent'; // Category label if (item.active) { ctx.fillStyle='rgba(13,13,26,0.85)'; const lw = clamp(80, W*0.22, 130); roundRect(ctx, item.x-lw/2, item.y+item.h/2+4, lw, 22, 6); ctx.fill(); ctx.fillStyle='#fff'; ctx.font=`bold ${clamp(9,W*0.018,11)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(item.catIcon+' '+(lang==='kz'?item.catNameKz:item.catName), item.x, item.y+item.h/2+18); // Pickup hint if (Math.abs(worker.x - item.x) < item.w*1.2 && !worker.carrying) { ctx.fillStyle='rgba(255,255,255,0.9)'; ctx.font=`bold ${clamp(10,W*0.022,13)}px Museo,sans-serif`; ctx.fillText(t('pickupHint'), item.x, item.y-item.h/2-8); } } } function drawWorker(w) { const x=w.x, y=w.y, f=w.facing||1; const scale = w.h/56; const wf = w.walkFrame||0; // Shadow ctx.fillStyle='rgba(0,0,0,0.2)'; ctx.beginPath(); ctx.ellipse(x, y+w.h/2*scale, 14*scale, 5*scale, 0, 0, Math.PI*2); ctx.fill(); ctx.save(); ctx.translate(x, y); ctx.scale(f*scale, scale); // Legs (animated) const legSwing = Math.sin(wf*Math.PI/2)*8; // Left leg ctx.fillStyle='#1a237e'; ctx.beginPath(); ctx.roundRect(-8, 20, 7, 20+legSwing, 3); ctx.fill(); // Right leg ctx.beginPath(); ctx.roundRect(1, 20, 7, 20-legSwing, 3); ctx.fill(); // Shoes ctx.fillStyle='#333'; ctx.beginPath(); ctx.roundRect(-10, 38+legSwing, 10, 5, 2); ctx.fill(); ctx.beginPath(); ctx.roundRect(1, 38-legSwing, 10, 5, 2); ctx.fill(); // Body (orange uniform) const bodyGrad = ctx.createLinearGradient(-14, -5, 14, 25); bodyGrad.addColorStop(0,'#fc6b3f'); bodyGrad.addColorStop(1,'#e85520'); ctx.fillStyle=bodyGrad; ctx.beginPath(); ctx.roundRect(-14, -5, 28, 28, 5); ctx.fill(); // Technodom "T" logo on shirt ctx.fillStyle='rgba(255,255,255,0.7)'; ctx.font='bold 10px sans-serif'; ctx.textAlign='center'; ctx.fillText('T', 0, 12); // Arms const armSwing = Math.sin(wf*Math.PI/2)*6; ctx.fillStyle='#fc6b3f'; // Left arm ctx.beginPath(); ctx.roundRect(-20, -2, 7, 18+armSwing, 3); ctx.fill(); // Right arm ctx.beginPath(); ctx.roundRect(13, -2, 7, 18-armSwing, 3); ctx.fill(); // Hands ctx.fillStyle='#f5c5a0'; ctx.beginPath(); ctx.arc(-17, 18+armSwing, 4, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(17, 18-armSwing, 4, 0, Math.PI*2); ctx.fill(); // Head ctx.fillStyle='#f5c5a0'; ctx.beginPath(); ctx.arc(0, -18, 14, 0, Math.PI*2); ctx.fill(); // Hair ctx.fillStyle='#8B4513'; ctx.beginPath(); ctx.arc(0, -24, 10, Math.PI, 0); ctx.fill(); ctx.beginPath(); ctx.roundRect(-10, -26, 20, 8, 4); ctx.fill(); // Eyes ctx.fillStyle='#333'; ctx.beginPath(); ctx.arc(-5, -18, 2, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(5, -18, 2, 0, Math.PI*2); ctx.fill(); // Eye shine ctx.fillStyle='#fff'; ctx.beginPath(); ctx.arc(-4, -19, 0.8, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(6, -19, 0.8, 0, Math.PI*2); ctx.fill(); // Smile ctx.strokeStyle='#c0774a'; ctx.lineWidth=1.5; ctx.beginPath(); ctx.arc(0, -15, 5, 0.2, Math.PI-0.2); ctx.stroke(); // Helmet / cap ctx.fillStyle='#e85520'; ctx.beginPath(); ctx.roundRect(-12, -30, 24, 10, [6,6,0,0]); ctx.fill(); ctx.fillStyle='rgba(255,255,255,0.3)'; ctx.font='bold 7px sans-serif'; ctx.textAlign='center'; ctx.fillText('TD', 0, -23); // Carrying box if (w.carrying) { ctx.fillStyle='#fff'; roundRect(ctx, -18, -48, 36, 32, 6); ctx.fill(); ctx.strokeStyle='#ddd'; ctx.lineWidth=1.5; roundRect(ctx, -18, -48, 36, 32, 6); ctx.stroke(); const cimg = productImages[w.carrying.id]; if (cimg && cimg.complete && cimg.naturalWidth) { ctx.drawImage(cimg, -15, -46, 30, 28); } else { ctx.font='16px sans-serif'; ctx.textAlign='center'; ctx.fillText(w.carrying.emoji, 0, -28); } } ctx.restore(); } function drawHUD1() { // HUD bar ctx.fillStyle='rgba(255,255,255,0.96)'; roundRect(ctx,0,0,W,H*0.065,0); ctx.fill(); ctx.strokeStyle='#f0f0f0'; ctx.lineWidth=1; ctx.beginPath(); ctx.moveTo(0,H*0.065); ctx.lineTo(W,H*0.065); ctx.stroke(); ctx.fillStyle='#f46b3f'; ctx.font=`bold ${clamp(10,W*0.022,13)}px Museo,sans-serif`; ctx.textAlign='left'; ctx.fillText(t('lvl1'), 12, H*0.042); ctx.fillStyle='#202020'; ctx.font=`bold ${clamp(12,W*0.026,15)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(`${t('score')}: ${score}`, W/2, H*0.042); // Timer circle const tr = clamp(14,W*0.03,18); const tx = W-tr-12, ty = H*0.033; ctx.strokeStyle='#f0f0f0'; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(tx,ty,tr,0,Math.PI*2); ctx.stroke(); const ang = (timer/60)*Math.PI*2 - Math.PI/2; ctx.strokeStyle = timer<10 ? '#ff4444' : '#f46b3f'; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(tx,ty,-Math.PI/2,ang,false); ctx.stroke(); ctx.fillStyle = timer<10 ? '#ff4444' : '#202020'; ctx.font=`bold ${clamp(10,W*0.022,13)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(timer, tx, ty+4); // Sort instruction if (!worker.carrying) { ctx.fillStyle='rgba(255,255,255,0.7)'; ctx.font=`${clamp(10,W*0.02,12)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(t('sortInstruction'), W/2, H*0.97); } } /* ═══════════════════════════════════════════════ INPUT HANDLERS ═══════════════════════════════════════════════ */ function onKeyDown(e) { keys[e.key] = true; if (e.key === ' ' || e.key === 'ArrowUp') { e.preventDefault(); onActionKey(); } } function onActionKey() { if (gameState !== 'level1') return; if (!worker.carrying) { // Try to pick up item from conveyor const item = conveyorItems.find(i => !i.collected && i.active && Math.abs(worker.x - i.x) < i.w*1.2); if (item) { worker.carrying = item; item.collected = true; sfxPickup(); // Activate next item const next = conveyorItems.find(i => !i.collected && !i.active); if (next) next.active = true; } } else { // Try to place on shelf const shelf = shelves.find(s => Math.abs(worker.x - (s.x+s.w/2)) < s.w*0.7); if (shelf) { const correct = shelf.id === worker.carrying.cat; sfxDrop(); if (correct) { sfxCorrect(); score += 20; sortCorrect++; shelfCounts[shelf.id] = (shelfCounts[shelf.id]||0)+1; shelf.flash=1; shelf.flashOk=true; worker.feedback = {text:'✅ +20', ok:true}; } else { sfxWrong(); score = Math.max(0, score-5); shelf.flash=1; shelf.flashOk=false; worker.feedback = {text:'❌ -5', ok:false}; } worker.feedbackTimer = 1.2; worker.carrying = null; // Check if all sorted const allDone = conveyorItems.every(i => i.collected); if (allDone) { clearInterval(timerInterval); setTimeout(() => { if (sortCorrect >= 3) showTransition(); else showLose(t('lvl1lose')); }, 800); } } } } function onCanvasClick(e) { const r = canvas.getBoundingClientRect(); const mx = (e.clientX-r.left)*(W/r.width); const my = (e.clientY-r.top)*(H/r.height); if (gameState === 'intro' && canvas._startBtn) { const b = canvas._startBtn; if (mx>=b.x && mx<=b.x+b.w && my>=b.y && my<=b.y+b.h) { sfxKey(); startLevel1(); } } else if (gameState === 'transition' && canvas._nextBtn) { const b = canvas._nextBtn; if (mx>=b.x && mx<=b.x+b.w && my>=b.y && my<=b.y+b.h) { sfxKey(); startLevel2(); } } else if (gameState === 'level2') { handleCashClick(mx, my); } else if (gameState === 'win' || gameState === 'lose') { const b = canvas._actionBtn; if (b && mx>=b.x && mx<=b.x+b.w && my>=b.y && my<=b.y+b.h) { sfxKey(); if (gameState === 'lose') { gameState='intro'; drawIntro(); } else { gameState='intro'; drawIntro(); } } if (gameState === 'win' && canvas._copyBtn) { const c = canvas._copyBtn; if (mx>=c.x && mx<=c.x+c.w && my>=c.y && my<=c.y+c.h) { sfxCash(); copyPromoCode(); } } } } function onTouch(e) { e.preventDefault(); const r = canvas.getBoundingClientRect(); const t0 = e.touches[0]; const mx = (t0.clientX-r.left)*(W/r.width); const my = (t0.clientY-r.top)*(H/r.height); onCanvasClick({clientX:t0.clientX, clientY:t0.clientY}); } /* ═══════════════════════════════════════════════ TRANSITION ═══════════════════════════════════════════════ */ function showTransition() { gameState = 'transition'; cancelAnimationFrame(animFrame); clearInterval(timerInterval); setupMobileControls(false); ctx.clearRect(0,0,W,H); const bg = ctx.createLinearGradient(0,0,0,H); bg.addColorStop(0,'#fff8f5'); bg.addColorStop(1,'#f5f6fa'); ctx.fillStyle=bg; ctx.fillRect(0,0,W,H); ctx.fillStyle='#202020'; ctx.textAlign='center'; ctx.font=`bold ${clamp(28,W*0.055,42)}px Museo,sans-serif`; ctx.fillText('🎯', W/2, H*0.3); ctx.font=`bold ${clamp(20,W*0.04,28)}px Museo,sans-serif`; ctx.fillText(t('transition1'), W/2, H*0.42); ctx.fillStyle='#737171'; ctx.font=`${clamp(13,W*0.028,16)}px Museo,sans-serif`; ctx.fillText(t('transition1sub'), W/2, H*0.52); ctx.fillStyle='#f46b3f'; ctx.font=`bold ${clamp(15,W*0.03,18)}px Museo,sans-serif`; ctx.fillText(`${t('score')}: ${score}`, W/2, H*0.62); // Button const bw=180,bh=48,bx=W/2-90,by=H*0.72; const g=ctx.createLinearGradient(bx,by,bx+bw,by); g.addColorStop(0,'#fc6b3f'); g.addColorStop(1,'#f4902a'); ctx.fillStyle=g; roundRect(ctx,bx,by,bw,bh,14); ctx.fill(); ctx.fillStyle='#fff'; ctx.font=`bold ${clamp(14,W*0.03,17)}px Museo,sans-serif`; ctx.fillText(t('toLvl2'), W/2, by+bh/2+6); canvas._nextBtn={x:bx,y:by,w:bw,h:bh}; } /* ═══════════════════════════════════════════════ LEVEL 2 — CASHIER ═══════════════════════════════════════════════ */ function startLevel2() { gameState='level2'; timer=90; cashCorrect=0; cashInput=''; cashFeedback=null; // Generate customer queue customerQueue = shuffle([...PRODUCTS]).map((p,i) => { const ct = CUSTOMER_TYPES[i % CUSTOMER_TYPES.length]; return { product:p, type:ct, state:'waiting', x:W+60+i*70, y:0, animX:0 }; }); customers = customerQueue.map((c,i) => ({ ...c, x: W*0.05 + i*clamp(48,W*0.1,72), y: H*0.35, targetX: 0, scale: c.type.age==='teen'?0.75:c.type.age==='elder'?0.85:0.92, mood: 'neutral', // neutral|happy|angry moodTimer:0, cane: c.type.age==='elder', })); currentCustomer = null; nextCustomer(); clearInterval(timerInterval); timerInterval = setInterval(tickTimer, 1000); if (animFrame) cancelAnimationFrame(animFrame); setupMobileControls(false); loop2(); } function nextCustomer() { if (customers.length === 0) { clearInterval(timerInterval); setTimeout(() => { if (cashCorrect >= 3) showWin(); else showLose(t('lvl2lose')); }, 600); return; } currentCustomer = customers.shift(); cashInput = ''; cashFeedback = null; } let loop2LastTime = 0; function loop2(ts=0) { if (gameState !== 'level2') return; const dt = Math.min((ts-loop2LastTime)/1000, 0.05); loop2LastTime = ts; // Update customer moods if (currentCustomer && currentCustomer.moodTimer > 0) currentCustomer.moodTimer -= dt; if (cashFeedbackTimer > 0) cashFeedbackTimer -= dt; draw2(); animFrame = requestAnimationFrame(loop2); } function draw2() { ctx.clearRect(0,0,W,H); // BG ctx.fillStyle='#f5f5f5'; ctx.fillRect(0,0,W,H); // Store floor ctx.fillStyle='#e8e8e8'; for(let x=0;x { const cx = W*0.08 + i*clamp(44,W*0.09,64); const cy = H*0.32; drawCustomer(cx, cy, c, c.scale*0.65); }); // Cashier desk const deskX=W*0.5, deskY=H*0.3, deskW=W*0.47, deskH=H*0.5; const deskGrad=ctx.createLinearGradient(deskX,deskY,deskX,deskY+deskH); deskGrad.addColorStop(0,'#fff'); deskGrad.addColorStop(1,'#f5f5f5'); ctx.fillStyle=deskGrad; roundRect(ctx,deskX,deskY,deskW,deskH,12); ctx.fill(); ctx.strokeStyle='#ddd'; ctx.lineWidth=1.5; roundRect(ctx,deskX,deskY,deskW,deskH,12); ctx.stroke(); // Desk label ctx.fillStyle='#f46b3f'; ctx.font=`bold ${clamp(9,W*0.018,11)}px Museo,sans-serif`; ctx.textAlign='left'; ctx.fillText('КАССА', deskX+12, deskY+H*0.06); // Current customer at desk if (currentCustomer) { drawCustomerAtDesk(); drawCashRegister(deskX+10, deskY+H*0.08, deskW-20, deskH-H*0.12); } // Cashier worker (small, behind desk) const cw = {x:deskX-18, y:deskY+H*0.12, w:24,h:42, facing:-1, walkFrame:0, carrying:null}; drawWorker(cw); // HUD drawHUD2(); // Feedback if (cashFeedbackTimer > 0 && cashFeedback) { ctx.globalAlpha=Math.min(1,cashFeedbackTimer); ctx.font=`bold ${clamp(16,W*0.035,22)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillStyle = cashFeedback.ok ? '#4caf50' : '#ff5555'; ctx.fillText(cashFeedback.text, W*0.74, H*0.26); ctx.globalAlpha=1; } } function drawCustomerAtDesk() { if (!currentCustomer) return; const cx = W*0.5-30, cy = H*0.35; drawCustomer(cx, cy, currentCustomer, currentCustomer.scale*0.85); // Product they're holding const p = currentCustomer.product; const img = productImages[p.id]; const ix = cx+20, iy = cy-clamp(30,H*0.08,50); ctx.fillStyle='#fff'; roundRect(ctx, ix-18, iy-18, 36, 36, 6); ctx.fill(); ctx.strokeStyle='#ddd'; ctx.lineWidth=1; roundRect(ctx, ix-18, iy-18, 36, 36, 6); ctx.stroke(); if (img && img.complete && img.naturalWidth) { ctx.drawImage(img, ix-15, iy-15, 30, 30); } else { ctx.font='18px sans-serif'; ctx.textAlign='center'; ctx.fillText(p.emoji, ix, iy+6); } // Speech bubble with product name const pname = lang==='kz' ? p.nameKz : p.name; ctx.fillStyle='rgba(255,255,255,0.95)'; const bw = clamp(80, pname.length*clamp(5,W*0.012,7)+16, 150); roundRect(ctx, cx-bw/2, cy-clamp(70,H*0.18,100), bw, 22, 8); ctx.fill(); ctx.strokeStyle='#ddd'; ctx.lineWidth=1; roundRect(ctx, cx-bw/2, cy-clamp(70,H*0.18,100), bw, 22, 8); ctx.stroke(); ctx.fillStyle='#333'; ctx.font=`${clamp(8,W*0.016,10)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(pname, cx, cy-clamp(70,H*0.18,100)+14); // Mood emoji if (currentCustomer.moodTimer > 0) { ctx.font=`${clamp(20,W*0.04,28)}px sans-serif`; ctx.textAlign='center'; ctx.fillText(currentCustomer.mood==='happy'?'😊':'😠', cx, cy-clamp(90,H*0.22,120)); } } function drawCustomer(x, y, c, scale=1) { const ct = c.type; ctx.save(); ctx.translate(x,y); ctx.scale(scale,scale); const sh = 48; // body height // Shadow ctx.fillStyle='rgba(0,0,0,0.1)'; ctx.beginPath(); ctx.ellipse(0,sh/2+8,12,4,0,0,Math.PI*2); ctx.fill(); // Legs ctx.fillStyle='#455a64'; ctx.beginPath(); ctx.roundRect(-8,sh*0.42,7,sh*0.4,3); ctx.fill(); ctx.beginPath(); ctx.roundRect(1,sh*0.42,7,sh*0.4,3); ctx.fill(); // Shoes ctx.fillStyle='#212121'; ctx.beginPath(); ctx.roundRect(-10,sh*0.8,10,5,2); ctx.fill(); ctx.beginPath(); ctx.roundRect(1,sh*0.8,10,5,2); ctx.fill(); // Body const bodyColors = ['#e3f2fd','#e8f5e9','#fce4ec','#fff3e0','#f3e5f5','#e0f2f1']; ctx.fillStyle = bodyColors[CUSTOMER_TYPES.indexOf(ct)%bodyColors.length]; ctx.beginPath(); ctx.roundRect(-12,sh*0.1,24,sh*0.35,5); ctx.fill(); // Head ctx.fillStyle = ct.skinTone; ctx.beginPath(); ctx.arc(0,-sh*0.08,12,0,Math.PI*2); ctx.fill(); // Hair ctx.fillStyle = ct.hair; if (ct.gender==='f') { // Long hair ctx.beginPath(); ctx.arc(0,-sh*0.08,12,Math.PI,0); ctx.fill(); ctx.beginPath(); ctx.roundRect(-12,-sh*0.08,5,16,3); ctx.fill(); ctx.beginPath(); ctx.roundRect(7,-sh*0.08,5,16,3); ctx.fill(); } else { ctx.beginPath(); ctx.arc(0,-sh*0.08,10,Math.PI,0); ctx.fill(); ctx.beginPath(); ctx.roundRect(-10,-sh*0.22,20,8,4); ctx.fill(); } // Eyes ctx.fillStyle='#333'; ctx.beginPath(); ctx.arc(-4,-sh*0.08,1.8,0,Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(4,-sh*0.08,1.8,0,Math.PI*2); ctx.fill(); // Cane for elder if (c.cane) { ctx.strokeStyle='#8d6e63'; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(14,sh*0.15); ctx.lineTo(18,sh*0.85); ctx.stroke(); ctx.beginPath(); ctx.arc(14,sh*0.12,3,0,Math.PI*2); ctx.stroke(); } // Arms ctx.fillStyle = bodyColors[CUSTOMER_TYPES.indexOf(ct)%bodyColors.length]; ctx.beginPath(); ctx.roundRect(-18,sh*0.1,6,sh*0.25,3); ctx.fill(); ctx.beginPath(); ctx.roundRect(12,sh*0.1,6,sh*0.25,3); ctx.fill(); ctx.restore(); } function drawCashRegister(x, y, w, h) { // Screen const sH = h*0.28; ctx.fillStyle='#1a1a2e'; roundRect(ctx,x+w*0.05,y,w*0.9,sH,8); ctx.fill(); // Display ctx.fillStyle='#0d2b0d'; roundRect(ctx,x+w*0.08,y+sH*0.1,w*0.84,sH*0.5,4); ctx.fill(); // Price on screen const price = currentCustomer?.product?.price || 0; ctx.fillStyle='#00ff41'; ctx.font=`bold ${clamp(14,w*0.1,20)}px monospace`; ctx.textAlign='right'; ctx.fillText(fmtPrice(price)+' ₸', x+w*0.88, y+sH*0.5); // Input display ctx.fillStyle='#fff'; ctx.font=`bold ${clamp(12,w*0.09,16)}px monospace`; ctx.textAlign='right'; const displayVal = cashInput || '—'; ctx.fillText(displayVal, x+w*0.88, y+sH*0.82); // "Введите цену" label ctx.fillStyle='rgba(255,255,255,0.5)'; ctx.font=`${clamp(8,w*0.065,10)}px Museo,sans-serif`; ctx.textAlign='left'; ctx.fillText(t('enterPrice'), x+w*0.1, y+sH*0.78); // Keypad const kpY = y + sH + h*0.06; const kpH = h - sH - h*0.08; const btnW = w/4-4, btnH = kpH/4-4; const keys2 = [ ['7','8','9','C'], ['4','5','6','←'], ['1','2','3',''], ['','0','','✓'], ]; canvas._cashKeys = []; keys2.forEach((row,ri) => { row.forEach((k,ci) => { if (!k) return; const bx = x + ci*(btnW+4); const by = kpY + ri*(btnH+4); const isConfirm = k==='✓'; const isClear = k==='C'; const isBack = k==='←'; // Button bg if (isConfirm) { const g=ctx.createLinearGradient(bx,by,bx+btnW,by+btnH); g.addColorStop(0,'#fc6b3f'); g.addColorStop(1,'#f4902a'); ctx.fillStyle=g; } else if (isClear||isBack) { ctx.fillStyle='#ffebee'; } else { ctx.fillStyle='#f8f8f8'; } roundRect(ctx,bx,by,btnW,btnH,8); ctx.fill(); ctx.strokeStyle=isConfirm?'#e85520':'#ddd'; ctx.lineWidth=1; roundRect(ctx,bx,by,btnW,btnH,8); ctx.stroke(); // Button label ctx.fillStyle = isConfirm?'#fff':isClear||isBack?'#f44336':'#202020'; ctx.font=`bold ${clamp(12,btnW*0.28,18)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(k, bx+btnW/2, by+btnH/2+6); canvas._cashKeys.push({k, x:bx, y:by, w:btnW, h:btnH}); }); }); } function handleCashClick(mx,my) { if (!canvas._cashKeys || !currentCustomer) return; const key = canvas._cashKeys.find(b => mx>=b.x&&mx<=b.x+b.w&&my>=b.y&&my<=b.y+b.h); if (!key) return; sfxKey(); if (key.k === 'C') { cashInput=''; return; } if (key.k === '←') { cashInput=cashInput.slice(0,-1); return; } if (key.k === '✓') { confirmCashInput(); return; } if (cashInput.length < 7) cashInput += key.k; } function confirmCashInput() { if (!currentCustomer) return; const entered = parseInt(cashInput||'0'); const correct = currentCustomer.product.price; const ok = entered === correct; if (ok) { sfxCash(); sfxCorrect(); score += 30; cashCorrect++; cashFeedback={text:t('correct'),ok:true}; currentCustomer.mood='happy'; currentCustomer.moodTimer=1.2; } else { sfxWrong(); score=Math.max(0,score-10); cashFeedback={text:`${t('wrong')} ${fmtPrice(correct)}₸`,ok:false}; currentCustomer.mood='angry'; currentCustomer.moodTimer=1.2; } cashFeedbackTimer=1.5; cashInput=''; setTimeout(nextCustomer, 1400); } function drawHUD2() { ctx.fillStyle='rgba(255,255,255,0.97)'; roundRect(ctx,0,0,W,H*0.065,0); ctx.fill(); ctx.strokeStyle='#f0f0f0'; ctx.lineWidth=1; ctx.beginPath(); ctx.moveTo(0,H*0.065); ctx.lineTo(W,H*0.065); ctx.stroke(); ctx.fillStyle='#f46b3f'; ctx.font=`bold ${clamp(10,W*0.022,13)}px Museo,sans-serif`; ctx.textAlign='left'; ctx.fillText(t('lvl2'), 12, H*0.042); ctx.fillStyle='#202020'; ctx.font=`bold ${clamp(12,W*0.026,15)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(`${t('score')}: ${score}`, W/2, H*0.042); const tr=clamp(14,W*0.03,18), tx=W-tr-12, ty=H*0.033; ctx.strokeStyle='#f0f0f0'; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(tx,ty,tr,0,Math.PI*2); ctx.stroke(); const ang=(timer/90)*Math.PI*2-Math.PI/2; ctx.strokeStyle=timer<15?'#ff4444':'#f46b3f'; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(tx,ty,-Math.PI/2,ang,false); ctx.stroke(); ctx.fillStyle=timer<15?'#ff4444':'#202020'; ctx.font=`bold ${clamp(10,W*0.022,13)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(timer, tx, ty+4); } /* ═══════════════════════════════════════════════ WIN / LOSE ═══════════════════════════════════════════════ */ function showWin() { gameState='win'; cancelAnimationFrame(animFrame); clearInterval(timerInterval); setupMobileControls(false); drawWin(); } function drawWin() { ctx.clearRect(0,0,W,H); const bg=ctx.createLinearGradient(0,0,0,H); bg.addColorStop(0,'#fff8f5'); bg.addColorStop(1,'#f5f6fa'); ctx.fillStyle=bg; ctx.fillRect(0,0,W,H); // Confetti const cols=['#f46b3f','#ffa45c','#4caf50','#2196f3','#9c27b0','#ffd93d']; for(let i=0;i<18;i++){ ctx.fillStyle=cols[i%cols.length]; const cx=W*0.1+Math.random()*W*0.8, cy=Math.random()*H*0.3; ctx.save(); ctx.translate(cx,cy); ctx.rotate(Math.random()*Math.PI); ctx.fillRect(-5,-3,10,6); ctx.restore(); } ctx.textAlign='center'; ctx.font=`${clamp(40,W*0.1,60)}px sans-serif`; ctx.fillText('🎉', W/2, H*0.22); ctx.fillStyle='#202020'; ctx.font=`bold ${clamp(22,W*0.045,32)}px Museo,sans-serif`; ctx.fillText(t('winTitle'), W/2, H*0.35); ctx.fillStyle='#737171'; ctx.font=`${clamp(12,W*0.026,15)}px Museo,sans-serif`; wrapText(ctx, t('winDesc'), W/2, H*0.44, W*0.8, 22); ctx.fillStyle='#f46b3f'; ctx.font=`bold ${clamp(15,W*0.03,18)}px Museo,sans-serif`; ctx.fillText(`${t('score')}: ${score}`, W/2, H*0.55); // Promo box ctx.fillStyle='#1a1a2e'; roundRect(ctx,W*0.1,H*0.6,W*0.8,H*0.17,12); ctx.fill(); ctx.fillStyle='rgba(255,255,255,0.35)'; ctx.font=`${clamp(9,W*0.018,11)}px Museo,sans-serif`; ctx.fillText(t('promoLabel'), W/2, H*0.65); // Placeholder ctx.fillStyle='rgba(255,255,255,0.1)'; roundRect(ctx,W*0.2,H*0.67,W*0.6,H*0.07,6); ctx.fill(); ctx.strokeStyle='rgba(255,255,255,0.2)'; ctx.lineWidth=1.5; roundRect(ctx,W*0.2,H*0.67,W*0.6,H*0.07,6); ctx.stroke(); // Copy button const cbw=160,cbh=38,cbx=W/2-80,cby=H*0.79; ctx.fillStyle='#fff'; roundRect(ctx,cbx,cby,cbw,cbh,10); ctx.fill(); ctx.fillStyle='#202020'; ctx.font=`bold ${clamp(11,W*0.024,14)}px Museo,sans-serif`; ctx.fillText(t('copyBtn'), W/2, cby+cbh/2+5); canvas._copyBtn={x:cbx,y:cby,w:cbw,h:cbh}; // Retry const bw2=160,bh2=42,bx2=W/2-80,by2=H*0.89; const g2=ctx.createLinearGradient(bx2,by2,bx2+bw2,by2); g2.addColorStop(0,'#fc6b3f'); g2.addColorStop(1,'#f4902a'); ctx.fillStyle=g2; roundRect(ctx,bx2,by2,bw2,bh2,12); ctx.fill(); ctx.fillStyle='#fff'; ctx.font=`bold ${clamp(13,W*0.027,16)}px Museo,sans-serif`; ctx.fillText('🔄 '+t('retryBtn'), W/2, by2+bh2/2+5); canvas._actionBtn={x:bx2,y:by2,w:bw2,h:bh2}; } function showLose(reason='') { gameState='lose'; cancelAnimationFrame(animFrame); clearInterval(timerInterval); setupMobileControls(false); ctx.clearRect(0,0,W,H); const bg=ctx.createLinearGradient(0,0,0,H); bg.addColorStop(0,'#fff8f5'); bg.addColorStop(1,'#f5f6fa'); ctx.fillStyle=bg; ctx.fillRect(0,0,W,H); ctx.textAlign='center'; ctx.font=`${clamp(40,W*0.1,60)}px sans-serif`; ctx.fillText('😅', W/2, H*0.28); ctx.fillStyle='#202020'; ctx.font=`bold ${clamp(20,W*0.04,28)}px Museo,sans-serif`; ctx.fillText(t('loseTitle'), W/2, H*0.42); ctx.fillStyle='#737171'; ctx.font=`${clamp(13,W*0.028,16)}px Museo,sans-serif`; ctx.fillText(t('loseDesc'), W/2, H*0.52); if (reason) { ctx.font=`${clamp(11,W*0.024,14)}px Museo,sans-serif`; ctx.fillText(reason, W/2, H*0.6); } ctx.fillStyle='#f46b3f'; ctx.font=`bold ${clamp(14,W*0.03,17)}px Museo,sans-serif`; ctx.fillText(`${t('score')}: ${score}`, W/2, H*0.68); const bw=160,bh=48,bx=W/2-80,by=H*0.78; const g=ctx.createLinearGradient(bx,by,bx+bw,by); g.addColorStop(0,'#fc6b3f'); g.addColorStop(1,'#f4902a'); ctx.fillStyle=g; roundRect(ctx,bx,by,bw,bh,14); ctx.fill(); ctx.fillStyle='#fff'; ctx.font=`bold ${clamp(14,W*0.03,17)}px Museo,sans-serif`; ctx.fillText(t('retryBtn'), W/2, by+bh/2+6); canvas._actionBtn={x:bx,y:by,w:bw,h:bh}; } function copyPromoCode() { try { navigator.clipboard.writeText(''); } catch(e){} // Flash copy button const old = t('copyBtn'); canvas._copyBtnCopied = true; // Redraw with copied state ctx.fillStyle='#4caf50'; roundRect(ctx,canvas._copyBtn.x,canvas._copyBtn.y,canvas._copyBtn.w,canvas._copyBtn.h,10); ctx.fill(); ctx.fillStyle='#fff'; ctx.font=`bold ${clamp(11,W*0.024,14)}px Museo,sans-serif`; ctx.textAlign='center'; ctx.fillText(t('copied'), W/2, canvas._copyBtn.y+canvas._copyBtn.h/2+5); setTimeout(drawWin, 2000); } /* ═══════════════════════════════════════════════ MOBILE CONTROLS ═══════════════════════════════════════════════ */ function setupMobileControls(show) { const ctrl = document.getElementById('shopControls'); if (!ctrl) return; ctrl.style.display = show ? 'flex' : 'none'; // Re-bind buttons each time controls are shown if (show) { ['btnLeft','btnRight','btnUp'].forEach(id => { const el = document.getElementById(id); if (el) el._bound = false; }); setTimeout(() => { const l = document.getElementById('btnLeft'); const r = document.getElementById('btnRight'); const u = document.getElementById('btnUp'); if (l && !l._bound2) { l._bound2=true; l.addEventListener('mousedown', ()=>keys['ArrowLeft']=true); l.addEventListener('touchstart', e=>{e.preventDefault();keys['ArrowLeft']=true;},{passive:false}); l.addEventListener('mouseup', ()=>keys['ArrowLeft']=false); l.addEventListener('mouseleave', ()=>keys['ArrowLeft']=false); l.addEventListener('touchend', ()=>keys['ArrowLeft']=false); } if (r && !r._bound2) { r._bound2=true; r.addEventListener('mousedown', ()=>keys['ArrowRight']=true); r.addEventListener('touchstart', e=>{e.preventDefault();keys['ArrowRight']=true;},{passive:false}); r.addEventListener('mouseup', ()=>keys['ArrowRight']=false); r.addEventListener('mouseleave', ()=>keys['ArrowRight']=false); r.addEventListener('touchend', ()=>keys['ArrowRight']=false); } if (u && !u._bound2) { u._bound2=true; u.addEventListener('click', ()=>onActionKey()); u.addEventListener('touchstart', e=>{e.preventDefault();onActionKey();},{passive:false}); } }, 50); } } /* ═══════════════════════════════════════════════ UTILS ═══════════════════════════════════════════════ */ function clamp(min,val,max) { return Math.min(max,Math.max(min,val)); } function fmtPrice(n) { return n.toLocaleString('ru-RU'); } 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 roundRect(ctx,x,y,w,h,r) { if (ctx.roundRect) { ctx.beginPath(); ctx.roundRect(x,y,w,h,r); return; } ctx.beginPath(); ctx.moveTo(x+r,y); ctx.lineTo(x+w-r,y); ctx.quadraticCurveTo(x+w,y,x+w,y+r); ctx.lineTo(x+w,y+h-r); ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h); ctx.lineTo(x+r,y+h); ctx.quadraticCurveTo(x,y+h,x,y+h-r); ctx.lineTo(x,y+r); ctx.quadraticCurveTo(x,y,x+r,y); ctx.closePath(); } function wrapText(ctx,text,x,y,maxW,lineH) { const words=text.split(' '); let line=''; words.forEach((w,i) => { const test=line+w+' '; if (ctx.measureText(test).width>maxW && i>0) { ctx.fillText(line, x, y); line=w+' '; y+=lineH; } else { line=test; } }); ctx.fillText(line, x, y); } /* ═══════════════════════════════════════════════ BOOT ═══════════════════════════════════════════════ */ function boot() { lang = document.querySelector('[data-lang]')?.dataset.lang || 'ru'; init(); } if (document.readyState==='loading') document.addEventListener('DOMContentLoaded', boot); else boot(); })();