Tetris Fishing

Score: 0

Caught: ...

\n \n \n \n \n

\n \n

\n \n\n\n```\n\nBut need manage two canvases. Fishing canvas and well canvas. On mobile we can use CSS grid: water top, well middle, controls bottom. Maybe small. Need fit one screen. \n\nAlternative: Single canvas rendering both water and well with layout. But separate canvases easier. However need coordinate scaling.\n\nLet's decide screen layout for mobile:\n- Header with score/level/next minimal height.\n- Water (fishing area) maybe 35% height.\n- Well (Tetris grid) maybe 45% height.\n- Controls at bottom ~20% height with large buttons.\nNo scrolling.\n\nOn desktop side by side.\n\nCould use CSS flex/grid and scale canvas with `width:100%; height:100%; object-fit: contain`? Canvas internal resolution fixed; CSS stretches. Need maintain aspect? For Tetris well, blocks square. We can compute block size based on canvas CSS size each frame by reading clientWidth/Height. Or just fill. We can use CSS `width:100%; height:100%; display:block` and drawing based on canvas.width/height. Canvas internal resolution set to clientWidth*DPR. \n\nFor water canvas: we can draw shapes and fish. No grid.\n\nTetris well: 10 columns x maybe 15 rows. To fit, block size ~responsive. If container width = 100% of phone width ~360px, block size 36px. 15 rows -> 540px high. That's too tall. Maybe 10x10 or 10x12? Standard Tetris 10x20 too tall. For mobile, use 10x12. With block size based on width 36, height 432. Water area 200. Total maybe fits ~700 plus UI/controls. Hmm typical mobile screen ~700 CSS px. Could be okay if we reduce rows to 10 and block size. Let's use 10x10 for compactness? But too easy. Use 8 columns x 14 rows? Tetris standard 10. Maybe well 10x14, block size derived from width (min 20px). On small screen 360 width => 36px block, 14 rows = 504. Too tall. Use 10x12 => 432. Add water 180 => 612. Controls 70 => 682. Score 30 => 712. Might be borderline. We can make water 25% and well flexible. Use 10x12. On desktop larger. \n\nActually we can set well grid block size based on available height not width, and columns fixed. E.g., container height = 45vh. Block size = floor(h / rows) ~ if 45vh ~300px => 25px. Width = 250. Then width less than screen. That's fine. Water above can be full width. We'll draw well centered. \n\nWe can have a single `canvas id=\"gameCanvas\"` with entire scene drawn programmatically, responsive. Maybe simpler: one canvas fills screen, we draw water top, well bottom, UI overlay. Then we can control layout precisely. Let's do single full-screen canvas. Use CSS: `#gameCanvas { position:fixed; inset:0; width:100%; height:100%; }` and overlay UI with pointer-events none. Then we calculate layout each frame. Controls as HTML overlay at bottom, pointer-events auto. That fits mobile one screen. \n\nWe can use `canvas-confetti` for celebration. Import map for it. \n\nUse modules:\n- constants.js\n- fishing.js\n- tetris.js\n- input.js (keyboard/touch)\n- main.js\n\nNeed decide game loop: requestAnimationFrame.\n\nDetailed mechanics:\n\nFishing area at top ~30% of canvas. It contains swimming fish representing upcoming Tetromino pieces. A hook can be cast by tapping anywhere in the water. Hook descends from top center (or from tap x?) to fish. Maybe horizontal position of hook = tap x. On cast, hook lowers. When it reaches a fish, fish is caught: set next Tetris piece to that shape, add to queue. If it reaches bottom without hitting fish, no piece (cooldown). Could also be auto-fishing: if no upcoming piece, tap water to catch.\n\nTetris mechanics: Active piece falls from top of well. Player controls left/right/rotate/drop. Next piece shown. When piece locks, clear full rows, score. The piece queue is filled by fishing. If queue empty, active piece doesn't spawn; prompt \"Tap water to fish\".\n\nBut we can make it continuous: Tetris pieces spawn automatically from a queue; when queue low, player must fish to refill. This encourages interaction.\n\nImplementation plan:\n- Have an array `queue` of tetromino shapes/colors.\n- Auto spawn active piece from queue if exists and no active.\n- If queue length < 2, prompt to fish (maybe water fish spawn more).\n- Fish swimming generate randomly; when caught, push their type to queue.\n\nFish representation: For each shape, a fish sprite is a group of blocks drawn side-by-side in the shape. It swims horizontally, bouncing or wrapping. When hook collides with bounding box or simple distance, catch.\n\nSimpler: Represent fish as colored tetromino shapes composed of cells; swim. Collision with hook point (hook x, y). Hook has a small radius. If point inside fish cell, catch. \n\nControls:\n- Desktop: arrow keys / WASD: left/right/down, up/W to rotate, space to hard drop, click/tap water to cast.\n- Mobile: D-pad buttons for Tetris and tap water to cast. We need not add instructions unless requested. But maybe a small overlay \"Tap water to fish\" is okay? It says do not add instructions unless explicitly requested. Hmm. It says \"do not add instructions (like 'Click to start', 'How to play', tips) unless explicitly requested.\" Maybe avoid textual instructions. However we need some indication. Could use iconography? Maybe a bobber icon? But to obey, avoid instructions. The user can infer. But \"Tap water to fish\" is an instruction. We can avoid text by not showing it; maybe the water has fish and tapping is intuitive. But for Tetris controls, mobile buttons are clear. We can include a title? It says do not add page titles unless explicitly requested. So no title. Maybe no instructions. Good.\n\nBut we need some visual cue: fishing hook line visible? We can draw a hook at top of water moving with mouse/trag? Actually hook only appears when casting. Maybe always a rod and line? Let's draw a small hook/bobber at water surface following finger x (or mouse). On tap, drops. That gives feedback.\n\nGame flow:\n1. init: generate 3 fish, queue with maybe 1 piece.\n2. Loop:\n - update fish positions, hook.\n - update Tetris gravity, lock delay.\n - draw water area (background gradient, fish, hook, line).\n - draw Tetris well area (grid, locked blocks, active piece, next piece preview).\n - draw UI score.\n - handle input.\n3. On line clear: confetti burst.\n\nCollision and grid: Well array 2D [rows][cols] storing colors or null. Standard.\n\nRotation: simple wall kicks (try shifting left/right/up). Use shape matrix.\n\nHard drop: move down until collision, lock, score bonus.\n\nLine clear: shift rows down, increment score, level speed.\n\nFishing:\n- Fish object: {type, x, y, vx, cells, caught}. Spawn with random type at random y in water, random direction.\n- Water height = `waterTopH`. Fish positions in pixels.\n- Hook: state 'ready', 'dropping', 'reeling', 'cooldown'. x target = input castX. y. ready: hook at surface y=waterTop+? with x follows mouse/touch horizontal in water. dropping: y += speed. If y >= fish bounding box top and x inside fish, catch. If y >= water bottom, transition reeling up empty. reeling: y -= speed; if y <= surface, state ready. On catch, mark fish caught, add type to queue, generate replacement fish, reel up. \n- But if hook follows x only when ready, and when dropping x fixed at cast x. Good.\n\nInput:\n- Mouse/touch move over water: update hook x if ready.\n- Tap/click in water: cast line.\n- Need not handle outside water. Tetris controls via buttons/keys.\n\nMobile D-pad: left/right/rotate/drop. Also maybe down soft drop. We can include 4 buttons: left, rotate, right, drop (hard drop). Soft drop via down? Hard drop common. Add down arrow separate? Space limited. Let's include 4 buttons: ←, ↻, →, ↓ (down soft drop) and hard drop by double-tap? Hmm. Better include 5? On mobile, bottom row can have left, rotate, right; next row down/hard drop. But height. Let's design controls with 4 large buttons: left, rotate, right, drop (hard drop). And use down for soft drop? Maybe not. Could add both? We can do 5 buttons in a row maybe too cramped. Let's do bottom control panel with flex wrap: left, rotate, right on first row; down, hard-drop on second row? But screen. Hmm.\n\nMaybe standard Tetris mobile controls: left/right/down arrows and rotate. Hard drop can be swipe up or just down button moves down quickly. Let's include left, rotate, right, down. Hard drop by pressing down repeatedly? We can make down button soft drop (move one row down per press or auto-repeat while held). For hard drop, maybe swipe down on well? Complex. We can include a small \"⤓\" hard drop button. Maybe 5 buttons arranged: [Left][Down][Right] top row, [Rotate][Drop] bottom row? That's common.\n\nBut controls instructions say no inversion. For 3D WASD etc irrelevant. \n\nI think 5 buttons: ←, ↓, →, ↻, ⤓. Use flex with 5 items; each ~55px. Fine.\n\nDesktop: arrow keys; up = rotate; down = soft drop; space = hard drop. \n\nLet's ensure controls are touch-friendly (min 44x44). \n\nWe also need to use canvas-confetti library. On line clear, `confetti({origin:{y:0.6}})`. \n\nAudio: Use Web Audio API to generate short beeps for move/rotate/lock/clear. This doesn't need a library. No base64. But maybe we should use Howler to satisfy \"use JS libraries from esm.sh\"? We already include canvas-confetti. That's a JS library from esm.sh. Good.\n\nNeed ensure modules import with relative paths and extension? Browsers need .js. Use `./constants.js`. \n\nNeed no base64 images. We'll draw all.\n\nNeed no scrolling; set html,body { margin:0; overflow:hidden; touch-action:none; }.\n\nLet's design file contents.\n\nconstants.js:\n```\nexport const COLS = 10;\nexport const ROWS = 12; // visible well\nexport const NEXT_COLS=4, NEXT_ROWS=4;\nexport const TYPES = ['I','O','T','S','Z','J','L'];\nexport const COLORS = { I:'#00f0f0', O:'#f0f000', T:'#a000f0', S:'#00f000', Z:'#f00000', J:'#0000f0', L:'#f0a000' };\nexport const SHAPES = { ... matrices in 4 orientations? Simpler base shape 0 orientation matrix for each type and rotation function.\n```\nDefine initial matrices as 2D arrays. We can rotate as needed.\n```\nI: [[1,1,1,1]]\nO: [[1,1],[1,1]]\nT: [[0,1,0],[1,1,1]]\nS: [[0,1,1],[1,1,0]]\nZ: [[1,1,0],[0,1,1]]\nJ: [[1,0,0],[1,1,1]]\nL: [[0,0,1],[1,1,1]]\n```\nRotation around matrix. We can implement `rotateMatrix(matrix)` and `getShapeCells(type, rot)`. \n\ntetris.js:\nClass `Tetris` managing well grid, active piece, next piece, score, level.\n- `constructor(cols, rows)`: grid, score=0, level=1, lines=0, active=null, next=null, gameOver=false.\n- `spawn(type)`: create active piece at top middle, type from queue; if next null set from type? Actually main will feed pieces from fishing. We can have `pushPiece(type)` adds to internal queue. If no active, spawn from internal queue.\n- `update(dt)`: handle gravity. Active piece falls every `dropInterval`. Soft drop/hard drop from input.\n- `move(dir)` (left/right/down). `rotate()` with wall kicks. `hardDrop()`. \n- `lock()`: merge piece to grid, then `clearLines()`.\n- `clearLines()`: returns number cleared, updates score/level.\n- `getGhostY()`: lowest valid y for active piece.\n\nfishing.js:\nClass `Fishing` or module.\n- `constructor(width, height, onCatch)`.\n- Fish array; hook state.\n- `update(dt)`, `draw(ctx)`, `setHookX(x)`, `cast()`.\n\nmain.js:\n- Setup canvas full window.\n- Initialize Tetris and Fishing.\n- Handle resize.\n- Input event listeners.\n- Game loop: update, draw.\n- Draw UI overlay (score, next piece) maybe on canvas or HTML. HTML overlay easier.\n\nLet's think about layout coordinates. Use canvas width and height. Define `waterRatio = 0.32` maybe. Water area top. Well area below; control panel at bottom reserved. We'll compute `wellY` and `wellH` excluding controls height. Controls overlay HTML at bottom with height ~80px. So canvas height = window.innerHeight, but controls cover bottom; we can still draw well above. Let's set canvas `position:fixed; inset:0; z-index:0;`. Controls container `position:fixed; bottom:0; left:0; right:0; height:80px; z-index:10; pointer-events:auto;`. UI overlay `position:fixed; top:0; left:0; right:0; z-index:10; pointer-events:none;`. Water area height = `canvasHeight * 0.35` maybe. Well area from waterH to `canvasHeight - controlsH`. Need dynamic.\n\nActually we can compute layout in main and pass to Fishing draw and Tetris draw. Fishing only needs rectangle. Tetris needs rectangle. Let's define `getLayout()` returns waterRect, wellRect. \n\nWell block size: To fit `wellRect.width` to `COLS`, `blockSize = Math.floor(wellRect.width / COLS)`. But then height = blockSize*ROWS may exceed wellRect.height. If exceed, blockSize = Math.floor(wellRect.height / ROWS). Then well width = blockSize*COLS. We'll center horizontally in wellRect. \n\nTetris draw: draw background grid, locked cells, active piece, ghost. Use colors.\n\nNext piece preview: draw small grid at top-right overlay. Use `NEXT_COLS/NEXT_ROWS`.\n\nWater drawing: gradient blue. Fish drawn as colored shapes. Hook: line from top of water to hook y, hook circle. Surface maybe wavy.\n\nFish generation: use shapes cells. `fishWidth = cellSize * cols, fishHeight = cellSize * rows`. Cell size maybe 14. Fish y random within water height minus fish height. Spawn off-screen left/right. Move vx. Wrap. \n\nHook collision: hook point (hook.x, hook.y). If point within any cell of any fish (fish x,y + cell offsets*cellSize), catch. For easier, catch if hook y passes fish top row and x within horizontal bounds. We'll do simple AABB.\n\nWhen caught, add fish type to queue. If queue too long maybe no catch? We'll cap at 5. \n\nQueue management in main:\n- `pieceQueue = []` internal for Tetris. \n- In loop, if queue length < 3 and not enough fish? Fish always spawn.\n- When fish caught, push type to queue.\n- Tetris spawns active when no active and queue length>0: shift type, spawn.\n\nShould Tetris game over? If locked piece above visible top. Then we can reset grid and score. \n\nScoring: 100 * lines^2 * level. \n\nLevel: every 10 lines increase level; drop interval decreases.\n\nConfetti: when lines cleared >0, call confetti.\n\nAudio: Use Web Audio oscillator for events. We can define `AudioSys` in audio.js. On mobile, AudioContext needs user gesture; but fine. Use short tones.\n\nNow, we need to ensure code is modular and maintainable.\n\nLet's also consider mobile controls. HTML overlay controls with touch. Buttons must have event listeners that call Tetris actions. Also support keyboard.\n\nPotential issue: With HTML overlay controls covering bottom, canvas still renders behind; we allocate wellRect excluding controls. Good.\n\nNeed make sure no vertical scrolling: `html,body{height:100%; overflow:hidden; touch-action:none;}`.\n\nLet's draft files.\n\nFile constants.js:\n```\nexport const COLS=10;\nexport const ROWS=12;\nexport const NEXT_W=4,NEXT_H=4;\nexport const TETROMINOES = { ... };\n```\nEach tetromino object: color, matrix. Use matrix numbers.\n\nAlso define `BASE_INTERVAL=800`, `SOFT_DROP_INTERVAL=50`, `LOCK_DELAY=200`.\n\ntetris.js:\n```\nimport { COLS, ROWS, TETROMINOES } from './constants.js';\n\nexport class TetrisGame {\n constructor() {\n this.reset();\n }\n reset() {...}\n pushPiece(type) { this.queue.push(type); }\n canSpawn() {...}\n update(dt) {...}\n move(dx,dy) {...}\n rotate() {...}\n hardDrop() {...}\n lock() {...}\n clearLines() {...}\n ...\n}\n```\n\nNeed methods:\n- `getActiveCells()` returns [{x,y}] in grid coords.\n- `valid(piece)`: check each cell inside grid and not occupied.\n- `rotateMatrix(m)`.\n- `kickTests`: simple.\n\nPiece representation: `{type, x, y, rotation, matrix}` where matrix is current orientation cells? Simpler store `shape` type and `rotation` index; compute cells each time from base shape rotated rotation times. But rotation count can be >0. Let's store base matrix and `rot` (0..3). Function `getMatrix(type, rot)`. Rotations by 90° clockwise. For O, no change. For I etc. Use generic rotate function.\n\n`valid` uses computed matrix and position.\n\nWall kick: after rotation, if invalid, try offsets (0,0), (-1,0), (1,0), (0,-1), (-2,0), (2,0), (0,-2). Choose first valid. This handles walls/floor.\n\n`moveLeft/Right/Down`: update x/y if valid; return boolean.\n\n`hardDrop`: while moveDown.\n\n`update(dt)`: accumulate `dropTimer`. If active and not paused, add dt. If dropTimer > interval (based on level), call `moveDown`. If moveDown false, start lockTimer? Standard Tetris locks after piece cannot move down for a delay. Simpler: if can't move down, lock immediately (but might be annoying). Better implement lock delay: if `onGround`, accumulate lockTimer; if lockTimer >= LOCK_DELAY, lock. If piece moves down or rotates, reset lockTimer? Standard. But to keep simple, immediate lock when update tries moveDown and fails might cause pieces to lock before player can slide. Use lock delay 200ms. \n\nNeed `isOnGround()` check `!this.move(0,1)`. When update finds on ground, start lockTimer. If active moves horizontally/rotates and still on ground? reset? Standard resets if movement occurs; we can reset lockTimer when piece moves/rotates if onGround. If piece moves down (not ground), reset lockTimer. If lockTimer exceeds, lock.\n\n`clearLines`: iterate rows bottom-up, build new grid of empty rows; for each full row skip; count. Then add empty rows at top. Score: lines^2 * 100 * level maybe. Level every 10 lines.\n\n`merge`: for each active cell, set grid[y][x]=type.\n\n`draw(ctx, rect, blockSize)`: draw background, grid lines maybe, locked blocks, active, ghost. Ghost computed via hard drop y? Could call `ghostY = this.getGhostY()`. Then draw cells at ghostY with low opacity.\n\n`drawNext(ctx, rect, blockSize, type)`: draw matrix centered in preview rect.\n\nfishing.js:\n```\nimport { TETROMINOES } from './constants.js';\n\nexport class Fishing {\n constructor(bounds) { this.bounds=bounds; this.reset(); }\n reset() { fish=[]; hook={state:'ready',x:bounds.x+bounds.w/2,y:bounds.y,size:8}; this.cellSize=14; this.spawnTimer=0; }\n update(dt) { spawn new fish every ~1.5s if <5; update fish x; update hook y; }\n setHookX(x) { if ready, clamp to bounds; }\n cast() { if ready state -> dropping; }\n draw(ctx) { draw water; fish; hook line; }\n}\n```\n\nFish object:\n```\nfunction spawnFish() {\n const type = random tetromino type;\n const matrix = TETROMINOES[type].matrix;\n const rows = matrix.length, cols = matrix[0].length;\n const height = rows*cellSize;\n const y = bounds.y + Math.random()*(bounds.h - height);\n const width = cols*cellSize;\n const dir = Math.random()<0.5?-1:1;\n const x = dir===1 ? bounds.x - width - Math.random()*100 : bounds.x+bounds.w + Math.random()*100;\n const speed = 20 + Math.random()*40; // px/sec\n return {type,matrix,rows,cols,x,y,vx:dir*speed};\n}\n```\n\nHook collision:\n```\nif dropping:\n hook.y += dropSpeed*dt;\n for each fish:\n if hook.x >= fish.x && hook.x <= fish.x+width && hook.y >= fish.y && hook.y <= fish.y+height:\n // check cell\n const cx = Math.floor((hook.x - fish.x)/cellSize);\n const cy = Math.floor((hook.y - fish.y)/cellSize);\n if cy>=0 && cy=0 && cx short blip; lock -> thud; clear -> arpeggio. Could be simple.\n\nNow let's write code.\n\nPotential challenges:\n- Importing `canvas-confetti` from esm.sh returns default export. Use `import confetti from 'canvas-confetti';`. But the import map key is `canvas-confetti`. Works.\n- Need check if esm.sh `canvas-confetti` default export works in browser with import map. It should. If not, we can fallback to dynamic import? But okay.\n\n- Mobile touch-action none. Controls buttons should not cause zoom. \n\n- The game should start immediately. No tap-to-start. AudioContext may be suspended until user gesture; that's okay. First button/tap will resume.\n\n- If no pieces in queue and no active, game waits for fishing. Fish spawn and player can tap. \n\n- If Tetris grid fills and piece locks above top, game over: reset score/grid, maybe keep level? We'll reset everything. Provide a brief visual. No explicit text? Could draw \"Game Over\" overlay? It says do not add instructions unless requested. \"Game Over\" is status, maybe okay. But maybe avoid; just reset. We'll show \"GAME OVER\" briefly in score line? Might be okay. We can set `gameOver` and flash, then auto reset after 1.5s. Since user wants functional. \n\nBut to align with no instructions, \"Game Over\" is acceptable? It's a standard status. However maybe not title/instructions. Fine.\n\n- Keep design simple. \n\n- Need multiple files. We'll create:\n - index.html\n - style.css\n - js/constants.js\n - js/tetris.js\n - js/fishing.js\n - js/audio.js\n - js/main.js\n\nLet's carefully code each.\n\nconstants.js:\n```\nexport const COLS = 10;\nexport const ROWS = 12;\nexport const NEXT_W = 4;\nexport const NEXT_H = 4;\nexport const BASE_INTERVAL = 800; // ms\nexport const MIN_INTERVAL = 120;\nexport const LOCK_DELAY = 220;\nexport const LEVEL_LINES = 10;\n\nexport const TETROMINOES = {\n I: { color: '#00f0f0', matrix: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] },\n O: { color: '#f0f000', matrix: [[1,1],[1,1]] },\n T: { color: '#a000f0', matrix: [[0,1,0],[1,1,1],[0,0,0]] },\n S: { color: '#00f000', matrix: [[0,1,1],[1,1,0],[0,0,0]] },\n Z: { color: '#f00000', matrix: [[1,1,0],[0,1,1],[0,0,0]] },\n J: { color: '#0000f0', matrix: [[1,0,0],[1,1,1],[0,0,0]] },\n L: { color: '#f0a000', matrix: [[0,0,1],[1,1,1],[0,0,0]] },\n};\n```\nNote I matrix 4x4 for proper rotation. Others 3x3. O 2x2. Good.\n\nHelper functions: \n```\nexport function getCells(type, rotation=0) {\n let m = TETROMINOES[type].matrix;\n for(let i=0;iArray(COLS).fill(null));\n this.queue=[];\n this.active=null;\n this.score=0;\n this.lines=0;\n this.level=1;\n this.gameOver=false;\n this.dropTimer=0;\n this.lockTimer=0;\n this.onGround=false;\n }\n pushPiece(type) { this.queue.push(type); }\n spawn() {\n if(this.queue.length===0 || this.active || this.gameOver) return false;\n const type=this.queue.shift();\n const cells=getCells(type,0);\n const width=Math.max(...cells.map(c=>c.x))+1;\n const x=Math.floor((COLS-width)/2);\n const piece={type,x,y:0,rotation:0};\n if(!this.isValid(piece)) {\n this.gameOver=true;\n return false;\n }\n this.active=piece;\n this.dropTimer=0;\n this.lockTimer=0;\n this.onGround = !this.isValid({...piece,y:piece.y+1});\n return true;\n }\n isValid(piece) {\n const cells=getCells(piece.type, piece.rotation);\n for(const c of cells) {\n const x=piece.x+c.x, y=piece.y+c.y;\n if(x<0||x>=COLS||y>=ROWS) return false;\n if(y>=0 && this.grid[y][x]) return false;\n }\n return true;\n }\n move(dx,dy) {\n if(!this.active) return false;\n const np={...this.active,x:this.active.x+dx,y:this.active.y+dy};\n if(this.isValid(np)) {\n this.active=np;\n this.onGround = !this.isValid({...this.active,y:this.active.y+1});\n if(this.onGround) this.lockTimer=0; else this.lockTimer=0; // reset on any successful move\n return true;\n }\n return false;\n }\n rotate() {\n if(!this.active) return false;\n const oldRot=this.active.rotation;\n const newRot=(oldRot+1)%4;\n const piece={...this.active,rotation:newRot};\n const kicks=[{x:0,y:0},{x:-1,y:0},{x:1,y:0},{x:0,y:-1},{x:-2,y:0},{x:2,y:0},{x:0,y:-2},{x:-1,y:-1},{x:1,y:-1}];\n for(const k of kicks) {\n const test={...piece,x:piece.x+k.x,y:piece.y+k.y};\n if(this.isValid(test)) {\n this.active=test;\n this.onGround = !this.isValid({...this.active,y:this.active.y+1});\n this.lockTimer=0;\n return true;\n }\n }\n return false;\n }\n hardDrop() {\n if(!this.active) return;\n let cells=0;\n while(this.move(0,1)) cells++;\n this.score += cells*2;\n this.lock();\n }\n update(dt) {\n if(this.gameOver) return;\n this.spawn();\n if(!this.active) return;\n const interval = Math.max(MIN_INTERVAL, BASE_INTERVAL - (this.level-1)*70);\n this.dropTimer += dt;\n if(this.dropTimer >= interval) {\n this.dropTimer=0;\n if(!this.move(0,1)) {\n // start/continue lock\n this.lockTimer += interval; // approximate, but dt may be bigger; better accumulate\n }\n }\n if(this.onGround) {\n this.lockTimer += dt;\n if(this.lockTimer >= LOCK_DELAY) this.lock();\n }\n }\n lock() {\n if(!this.active) return;\n const cells=getCells(this.active.type,this.active.rotation);\n for(const c of cells) {\n const x=this.active.x+c.x, y=this.active.y+c.y;\n if(y>=0 && y=0 && x0) {\n this.lines += cleared;\n this.score += cleared*cleared*100*this.level;\n this.level = 1 + Math.floor(this.lines/LEVEL_LINES);\n }\n }\n clearLines() {\n const newGrid=[];\n let cleared=0;\n for(let y=ROWS-1;y>=0;y--) {\n if(this.grid[y].every(cell=>cell)) {\n cleared++;\n } else {\n newGrid.unshift(this.grid[y]);\n }\n }\n while(newGrid.length= interval) {\n this.dropTimer -= interval;\n if(!this.move(0,1)) {\n this.onGround = true;\n this.lockTimer += interval; // or dt? Use dt accumulation\n }\n}\nif(this.onGround) {\n this.lockTimer += dt; // maybe already added above? Avoid double count.\n if(this.lockTimer >= LOCK_DELAY) this.lock();\n}\n```\nBut if drop happened and failed, we add dt in same frame double? We can handle by not adding interval; just set onGround true and let next frames accumulate. Actually when onGround becomes true in that frame, we can add remaining dt? Not critical. Let's do:\n```\nif(this.dropTimer >= interval) {\n this.dropTimer -= interval;\n if(!this.move(0,1)) this.onGround = true;\n}\nif(this.onGround) {\n this.lockTimer += dt;\n if(this.lockTimer >= LOCK_DELAY) this.lock();\n}\n```\nWhen piece moves horizontally or rotates and remains on ground, reset lockTimer to 0 (in move/rotate). Good.\n\nHowever `move` currently resets lockTimer for any successful move. Good. But if moving down succeeds, onGround recomputed. Need lockTimer reset.\n\n`move` after valid piece: compute onGround; set lockTimer=0 always. Good.\n\n`rotate` resets lockTimer. Good.\n\n`hardDrop` locks immediately.\n\nSpawn: Should not auto spawn if queue empty. In main, when queue gets new pieces from fishing, spawn next frame. Good.\n\nGame over: piece can't spawn. We can reset after 1.5 sec. In main, detect `gameOver` and schedule reset.\n\nNext piece: draw from queue[0] or active? Use queue[0] if exists.\n\nFishing class. Use constants for types/colors. Let's write.\n\nfishing.js:\n```\nimport { TETROMINOES, getCells } from './constants.js';\n\nconst STATES = { READY:'ready', DROPPING:'dropping', REELING:'reeling' };\n\nexport class Fishing {\n constructor(bounds, onCatch) {\n this.bounds=bounds;\n this.onCatch=onCatch;\n this.cellSize=16;\n this.reset();\n }\n reset() {\n this.fish=[];\n this.hook={state:STATES.READY, x:this.bounds.x+this.bounds.w/2, y:this.bounds.y+10, targetX:this.bounds.x+this.bounds.w/2};\n this.spawnTimer=0;\n this.caughtFish=null;\n }\n setBounds(bounds) { this.bounds=bounds; this.clampHook(); }\n update(dt) {\n this.spawnTimer += dt;\n if(this.spawnTimer > 1200 && this.fish.length < 5) {\n this.spawnTimer=0;\n this.spawnFish();\n }\n for(const f of this.fish) {\n f.x += f.vx*dt/1000;\n // wrap\n if(f.vx>0 && f.x > this.bounds.x+this.bounds.w + 30) f.x = this.bounds.x - f.width - 30;\n if(f.vx<0 && f.x + f.width < this.bounds.x - 30) f.x = this.bounds.x+this.bounds.w + 30;\n }\n this.updateHook(dt);\n }\n spawnFish() {\n const types = Object.keys(TETROMINOES);\n const type = types[Math.floor(Math.random()*types.length)];\n const cells = getCells(type,0);\n const cols = Math.max(...cells.map(c=>c.x))+1;\n const rows = Math.max(...cells.map(c=>c.y))+1;\n const width=cols*this.cellSize, height=rows*this.cellSize;\n const dir = Math.random()<0.5?-1:1;\n const x = dir===1 ? this.bounds.x - width - Math.random()*80 : this.bounds.x+this.bounds.w + Math.random()*80;\n const y = this.bounds.y + Math.random()*(this.bounds.h - height - 10) + 5;\n const speed = 30 + Math.random()*50;\n this.fish.push({type,cells,cols,rows,x,y,vx:dir*speed,width,height});\n }\n updateHook(dt) {\n const dropSpeed = 260; // px/sec\n const reelSpeed = 360;\n switch(this.hook.state) {\n case STATES.READY:\n this.hook.x += (this.hook.targetX - this.hook.x)*0.2;\n this.clampHook();\n this.hook.y = this.bounds.y + 8;\n break;\n case STATES.DROPPING:\n this.hook.y += dropSpeed*dt/1000;\n this.checkCatch();\n if(this.hook.y > this.bounds.y+this.bounds.h - 6) {\n this.hook.state = STATES.REELING;\n }\n break;\n case STATES.REELING:\n this.hook.y -= reelSpeed*dt/1000;\n if(this.hook.y <= this.bounds.y+8) {\n this.hook.y = this.bounds.y+8;\n this.hook.state = STATES.READY;\n if(this.caughtFish) {\n // fish already handled on catch\n this.caughtFish=null;\n }\n }\n break;\n }\n }\n checkCatch() {\n for(let i=this.fish.length-1;i>=0;i--) {\n const f=this.fish[i];\n if(this.hook.x >= f.x && this.hook.x <= f.x+f.width && this.hook.y >= f.y && this.hook.y <= f.y+f.height) {\n const cx=Math.floor((this.hook.x-f.x)/this.cellSize);\n const cy=Math.floor((this.hook.y-f.y)/this.cellSize);\n const hit = f.cells.some(c=>c.x===cx && c.y===cy);\n if(hit) {\n this.caughtFish=f;\n this.fish.splice(i,1);\n this.hook.state = STATES.REELING;\n if(this.onCatch) this.onCatch(f.type);\n return;\n }\n }\n }\n }\n setTargetX(x) { this.hook.targetX = x; this.clampTarget(); }\n cast() { if(this.hook.state===STATES.READY) this.hook.state=STATES.DROPPING; }\n clampHook() { this.hook.x = Math.max(this.bounds.x+4, Math.min(this.bounds.x+this.bounds.w-4, this.hook.x)); }\n clampTarget() { this.hook.targetX = Math.max(this.bounds.x+4, Math.min(this.bounds.x+this.bounds.w-4, this.hook.targetX)); }\n draw(ctx) {\n // water background\n const grd=ctx.createLinearGradient(this.bounds.x,this.bounds.y,this.bounds.x,this.bounds.y+this.bounds.h);\n grd.addColorStop(0,'#1a6fb0');\n grd.addColorStop(1,'#0d3a5c');\n ctx.fillStyle=grd;\n ctx.fillRect(this.bounds.x,this.bounds.y,this.bounds.w,this.bounds.h);\n // surface sheen\n ctx.fillStyle='rgba(255,255,255,0.08)';\n ctx.fillRect(this.bounds.x,this.bounds.y,this.bounds.w,6);\n // fish\n for(const f of this.fish) this.drawFish(ctx,f);\n // hook line\n ctx.strokeStyle='rgba(255,255,255,0.7)';\n ctx.lineWidth=2;\n ctx.beginPath(); ctx.moveTo(this.hook.x,this.bounds.y); ctx.lineTo(this.hook.x,this.hook.y); ctx.stroke();\n // hook bobber\n ctx.fillStyle=this.hook.state===STATES.READY?'#ff4444':'#ffaa00';\n ctx.beginPath(); ctx.arc(this.hook.x,this.hook.y,6,0,Math.PI*2); ctx.fill();\n ctx.strokeStyle='rgba(0,0,0,0.4)'; ctx.lineWidth=1; ctx.stroke();\n }\n drawFish(ctx,f) {\n const color=TETROMINOES[f.type].color;\n ctx.fillStyle=color;\n for(const c of f.cells) {\n ctx.fillRect(f.x+c.x*this.cellSize, f.y+c.y*this.cellSize, this.cellSize-1, this.cellSize-1);\n }\n // eye\n ctx.fillStyle='rgba(0,0,0,0.5)';\n const ex = f.vx>0 ? f.x+f.width-6 : f.x+4;\n const ey = f.y+5;\n ctx.beginPath(); ctx.arc(ex,ey,2,0,Math.PI*2); ctx.fill();\n }\n}\n```\n\nNeed fix spawn x: if dir===1 moving right, x should start left of bounds; if dir===-1 moving left, x starts right. I wrote opposite. Let's set:\n```\nconst x = dir===1 ? this.bounds.x - width - Math.random()*80 : this.bounds.x+this.bounds.w + Math.random()*80;\n```\nGood. If dir positive, moves right. Good.\n\nWrap conditions: For dir>0 and x > bounds right + 30, reset to left. For dir<0 and x+width < bounds left -30, reset to right. Good.\n\nHook in ready follows targetX with lerp. On cast x fixed. Good.\n\nCheckCatch only when dropping. Good.\n\nBut `onCatch` could add to queue. Good.\n\nAudio.js:\n```\nexport class AudioSys {\n constructor() { this.ctx=null; }\n ensure() {\n if(!this.ctx) this.ctx=new (window.AudioContext||window.webkitAudioContext)();\n if(this.ctx.state==='suspended') this.ctx.resume();\n }\n tone(freq=440, dur=0.1, type='square', vol=0.05) {\n if(!this.ctx) return;\n const osc=this.ctx.createOscillator();\n const gain=this.ctx.createGain();\n osc.type=type; osc.frequency.value=freq;\n gain.gain.setValueAtTime(vol,this.ctx.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.001,this.ctx.currentTime+dur);\n osc.connect(gain); gain.connect(this.ctx.destination);\n osc.start(); osc.stop(this.ctx.currentTime+dur);\n }\n move() { this.ensure(); this.tone(220,0.05,'triangle',0.04); }\n rotate() { this.ensure(); this.tone(330,0.08,'triangle',0.04); }\n lock() { this.ensure(); this.tone(150,0.12,'sawtooth',0.05); }\n clear(lines) { this.ensure(); const base=440+lines*100; for(let i=0;ithis.tone(base+i*110,0.15,'square',0.05), i*80); }\n}\n```\nTone may produce okay.\n\nmain.js:\n```\nimport { TetrisGame } from './tetris.js';\nimport { Fishing } from './fishing.js';\nimport { AudioSys } from './audio.js';\nimport { COLORS, TETROMINOES, COLS, ROWS, NEXT_W, NEXT_H, getCells } from './constants.js';\nimport confetti from 'canvas-confetti';\n\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\nconst scoreEl = document.getElementById('score');\nconst levelEl = document.getElementById('level');\nconst nextCanvas = document.getElementById('nextCanvas');\nconst nextCtx = nextCanvas.getContext('2d');\nconst controls = document.getElementById('controls');\nconst ui = document.getElementById('ui');\n\nconst audio = new AudioSys();\nconst tetris = new TetrisGame();\nlet pieceQueue = [];\ntetris.queue = pieceQueue; // share? Better let tetris manage queue. But we wanted fishing push. Actually Tetris class has its own queue. We can call tetris.pushPiece. So no separate. We'll use tetris.queue.\n\nconst fishing = new Fishing({x:0,y:0,w:0,h:0}, type => {\n tetris.pushPiece(type);\n audio.lock(); // maybe catch sound\n});\n\nfunction layout() {\n const dpr=window.devicePixelRatio||1;\n const w=window.innerWidth, h=window.innerHeight;\n canvas.width=Math.floor(w*dpr); canvas.height=Math.floor(h*dpr);\n ctx.setTransform(dpr,0,0,dpr,0,0);\n const uiRect = ui.getBoundingClientRect();\n const controlsRect = controls.getBoundingClientRect();\n const availH = h - controlsRect.height;\n const waterH = Math.floor((availH - uiRect.height)*0.34);\n const wellY = uiRect.height + waterH;\n const wellH = availH - wellY;\n const waterRect={x:0,y:uiRect.height,w:w,h:waterH};\n const wellRect={x:0,y:wellY,w:w,h:wellH};\n fishing.setBounds(waterRect);\n tetrisRect=wellRect;\n // next canvas internal\n nextCanvas.width = nextCanvas.clientWidth*dpr;\n nextCanvas.height = nextCanvas.clientHeight*dpr;\n const nctx=nextCanvas.getContext('2d');\n nctx.setTransform(dpr,0,0,dpr,0,0);\n}\nlet tetrisRect={x:0,y:0,w:0,h:0};\n\nfunction drawNext() {\n const rect={x:0,y:0,w:nextCanvas.clientWidth,h:nextCanvas.clientHeight};\n nextCtx.clearRect(0,0,rect.w,rect.h);\n const type = tetris.queue[0];\n if(!type) return;\n const cells=getCells(type,0);\n const cols=Math.max(...cells.map(c=>c.x))+1;\n const rows=Math.max(...cells.map(c=>c.y))+1;\n const size=Math.min(rect.w/(cols+1), rect.h/(rows+1));\n const offX=(rect.w - cols*size)/2;\n const offY=(rect.h - rows*size)/2;\n nextCtx.fillStyle=TETROMINOES[type].color;\n for(const c of cells) {\n nextCtx.fillRect(offX+c.x*size, offY+c.y*size, size-1, size-1);\n }\n}\n\nfunction draw() {\n ctx.clearRect(0,0,canvas.width,canvas.height);\n fishing.draw(ctx);\n // compute block size for well\n let blockSize=Math.floor(tetrisRect.w/COLS);\n if(blockSize*ROWS > tetrisRect.h) blockSize=Math.floor(tetrisRect.h/ROWS);\n const wellW=blockSize*COLS;\n const wellX=tetrisRect.x + (tetrisRect.w-wellW)/2;\n const drawRect={x:wellX,y:tetrisRect.y,w:wellW,h:blockSize*ROWS};\n tetris.draw(ctx, drawRect, blockSize);\n drawNext();\n scoreEl.textContent = `Score ${tetris.score}`;\n levelEl.textContent = `Lv ${tetris.level}`;\n}\n\nlet last=performance.now();\nfunction loop(now) {\n const dt=Math.min(now-last, 50);\n last=now;\n fishing.update(dt);\n const prevLines=tetris.lines;\n tetris.update(dt);\n if(tetris.lines>prevLines) {\n audio.clear(tetris.lines-prevLines);\n confetti({particleCount:60, spread:70, origin:{y:tetrisRect.y/window.innerHeight}});\n }\n if(tetris.gameOver) {\n setTimeout(()=>{ tetris.reset(); }, 1500);\n tetris.gameOver=false; // prevent repeated resets\n }\n draw();\n requestAnimationFrame(loop);\n}\n```\n\nInput:\n```\nwindow.addEventListener('resize', layout);\nwindow.addEventListener('pointermove', e=>{\n if(e.clientY < fishing.bounds.y + fishing.bounds.h) fishing.setTargetX(e.clientX);\n});\ncanvas.addEventListener('pointerdown', e=>{\n if(e.clientY < fishing.bounds.y + fishing.bounds.h) {\n fishing.setTargetX(e.clientX);\n fishing.cast();\n }\n});\n```\nBut `fishing.bounds` only after layout. Need guard.\n\nKeyboard:\n```\nwindow.addEventListener('keydown', e=>{\n if(tetris.gameOver) return;\n switch(e.key) {\n case 'ArrowLeft': case 'a': case 'A': if(tetris.move(-1,0)) audio.move(); break;\n case 'ArrowRight': case 'd': case 'D': if(tetris.move(1,0)) audio.move(); break;\n case 'ArrowDown': case 's': case 'S': if(tetris.move(0,1)) audio.move(); break;\n case 'ArrowUp': case 'w': case 'W': case ' ': // space maybe rotate? But typical space hard drop. Let's set up/space rotate? hmm.\n if(tetris.rotate()) audio.rotate(); break;\n case 'Enter': tetris.hardDrop(); audio.lock(); break;\n }\n});\n```\nNeed decide controls. Standard: Up rotate, Space hard drop. Let's do that. For hard drop, maybe `ArrowUp` rotate, `Space` hard drop. But many mobile? Desktop. Set `ArrowUp`/`w` rotate, `Space`/`Enter` hard drop, `ArrowDown`/`s` soft drop.\n\nMobile buttons: left/right/rotate/down/harddrop. Map.\n\nControls HTML:\n```\n

\n \n \n \n \n \n

\n```\nCSS grid.\n\nEvent listeners:\n```\ndocument.getElementById('btnLeft').addEventListener('pointerdown', e=>{ e.preventDefault(); if(tetris.move(-1,0)) audio.move(); });\ndocument.getElementById('btnRight').addEventListener('pointerdown', e=>{ e.preventDefault(); if(tetris.move(1,0)) audio.move(); });\ndocument.getElementById('btnDown').addEventListener('pointerdown', e=>{ e.preventDefault(); if(tetris.move(0,1)) audio.move(); });\ndocument.getElementById('btnRotate').addEventListener('pointerdown', e=>{ e.preventDefault(); if(tetris.rotate()) audio.rotate(); });\ndocument.getElementById('btnDrop').addEventListener('pointerdown', e=>{ e.preventDefault(); tetris.hardDrop(); audio.lock(); });\n```\nAdd `touch-action:none` to buttons.\n\nPotential issue: pointermove on canvas while touching controls maybe not.\n\nNeed game over reset. In loop, when `tetris.gameOver` true, set flag resetting to avoid repeated. We can store `let gameOverResetAt=0`. When gameOver, if now-gameOverResetAt>1500 then reset. Simpler:\n```\nif(tetris.gameOver) {\n if(!pendingReset) { pendingReset=true; setTimeout(()=>{tetris.reset(); pendingReset=false;},1500);}\n}\n```\nAlso maybe flash effect. \n\nNeed ensure queue initially has maybe 1 piece so game starts. In main, after init, maybe `tetris.pushPiece(randomType())`. \n\nAdd initial fish.\n\nLet's consider Tetris class `queue` property exists. Yes pushPiece.\n\nNow UI overlay: HTML. Need nextCanvas size. Use CSS.\n\nStyle:\n```\n* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }\nhtml,body { margin:0; height:100%; overflow:hidden; background:#050510; color:#fff; font-family:system-ui, sans-serif; touch-action:none; }\n#gameCanvas { position:fixed; inset:0; display:block; }\n#ui { position:fixed; top:0; left:0; right:0; height:42px; padding:6px 12px; display:flex; justify-content:space-between; align-items:center; background:rgba(0,0,0,0.35); pointer-events:none; z-index:10; }\n#score, #level { font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.7); }\n#nextWrap { display:flex; align-items:center; gap:6px; }\n#nextCanvas { width:42px; height:42px; background:rgba(0,0,0,0.3); border-radius:6px; }\n#controls { position:fixed; bottom:0; left:0; right:0; padding:8px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; background:rgba(0,0,0,0.45); z-index:20; touch-action:none; }\n#controls button { font-size:22px; padding:10px; border:none; border-radius:10px; background:rgba(255,255,255,0.15); color:#fff; touch-action:none; user-select:none; }\n#controls button:active { background:rgba(255,255,255,0.35); }\n```\nOn desktop controls maybe not needed but fine. Could hide? Keep. \n\nNeed `nextCanvas` clientWidth 42 => internal maybe 42*dpr. In drawNext, use `nextCanvas.getContext('2d')` after resize. We can store nctx globally.\n\nLet's finalize main.js.\n\nPotential import conflict: constants.js uses `getCells` with TETROMINOES matrix. Need ensure rotateMatrix for I 4x4 works. Let's implement rotation 90° clockwise:\n```\nfunction rotateMatrix(m) {\n const rows=m.length, cols=m[0].length;\n const out=Array.from({length:cols},()=>Array(rows).fill(0));\n for(let y=0;y= interval`, we do `this.dropTimer -= interval`. If dt > interval multiple times, loop could run multiple drops in one frame; okay.\n\nBut after failed down move, we set onGround true. Then lockTimer accumulates dt each frame. If player moves horizontally, lockTimer resets. Good.\n\nBut if piece spawns on ground (e.g., tall piece), onGround true, lockTimer starts; player can move/rotate to reset. Good.\n\n`lock` after clearing lines doesn't call spawn; spawn in next update. Good.\n\n`spawn` uses `this.queue` from tetris. Fishing pushes to tetris. Good.\n\nNeed initial pieces: In main, `tetris.pushPiece(randomType()); tetris.pushPiece(randomType());`. Also initial fish from fishing after reset? `reset` sets fish empty; spawnFish will happen after 1.2s. Maybe spawn initial fish immediately in reset or main call. Let's in main loop call `fishing.spawnFish()` a couple times. But `spawnFish` is method; can expose. Add `seedFish(count)` method. Or in main after layout call `for(i=0;i<3;i++) fishing.spawnFish();`.\n\nLet's add `seedFish` to Fishing:\n```\nseedFish(count) { for(let i=0;i\n\n\n \n \n Tetris Fishing\n \n \n\n\n

Score 0

Lv 1

\n \n \n \n \n \n

\n \n\n\n```\nMaybe add ``. Fine.\n\nstyle.css as above. Add media query for desktop maybe controls not too tall.\n\njs/constants.js:\n```\nexport const COLS = 10;\nexport const ROWS = 12;\nexport const NEXT_W = 4;\nexport const NEXT_H = 4;\n\nexport const BASE_INTERVAL = 800;\nexport const MIN_INTERVAL = 120;\nexport const LOCK_DELAY = 220;\nexport const LEVEL_LINES = 10;\n\nexport const TETROMINOES = {\n I: { color: '#00f0f0', matrix: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] },\n O: { color: '#f0f000', matrix: [[1,1],[1,1]] },\n T: { color: '#a000f0', matrix: [[0,1,0],[1,1,1],[0,0,0]] },\n S: { color: '#00f000', matrix: [[0,1,1],[1,1,0],[0,0,0]] },\n Z: { color: '#f00000', matrix: [[1,1,0],[0,1,1],[0,0,0]] },\n J: { color: '#0000f0', matrix: [[1,0,0],[1,1,1],[0,0,0]] },\n L: { color: '#f0a000', matrix: [[0,0,1],[1,1,1],[0,0,0]] },\n};\n\nfunction rotateMatrix(m) {\n const rows = m.length;\n const cols = m[0].length;\n const out = Array.from({ length: cols }, () => Array(rows).fill(0));\n for (let y = 0; y < rows; y++) {\n for (let x = 0; x < cols; x++) {\n out[x][rows - 1 - y] = m[y][x];\n }\n }\n return out;\n}\n\nexport function getCells(type, rotation = 0) {\n let m = TETROMINOES[type].matrix;\n for (let i = 0; i < rotation; i++) m = rotateMatrix(m);\n const cells = [];\n for (let y = 0; y < m.length; y++) {\n for (let x = 0; x < m[y].length; x++) {\n if (m[y][x]) cells.push({ x, y });\n }\n }\n return cells;\n}\n```\n\njs/tetris.js as above but be careful import. Let's write clean.\n\nPotential improvements: Add `dropInterval` getter. `BASE_INTERVAL - (level-1)*70`. \n\nNeed `clearLines` scoring: maybe use `linesCleared*100 + (linesCleared-1)*200?` Use `linesCleared*linesCleared*100*level`. Good.\n\nNeed `hardDrop` lock after moving, which clears lines. In `update`, if piece locks due to lock delay, lock clears lines.\n\nLet's define `spawn` returning boolean; main loop calls `tetris.spawn()` each frame? `update` already calls spawn. Yes.\n\nNeed game over detection in spawn: if invalid, set gameOver. Then main resets.\n\nShould we draw game over text? Could in main overlay if `tetris.gameOver`. But we can just reset. Maybe better show \"Game Over\" briefly in UI. But no instructions; it's status. Let's include a transient UI element `#message` and show. But maybe overkill. We can set scoreEl text to \"GAME OVER\". But then score lost. Could have message overlay. Let's add `#message` in HTML and show. However user said no page titles/instructions. A status message is okay. But to be safe, avoid text. We'll auto reset and maybe flash screen red. No text. We'll add a flash effect in draw: if pending reset, overlay red transparent. Good.\n\nNow audio catch: use a brighter tone.\n\nLet's write `fishing.js` with `seedFish` method.\n\nLet's also add `type` validation.\n\nPotential issue: `getCells` called repeatedly each frame for active piece and ghost and next. Performance fine.\n\nNow `main.js` details.\n\n```\nimport { TetrisGame } from './tetris.js';\nimport { Fishing } from './fishing.js';\nimport { AudioSys } from './audio.js';\nimport { TETROMINOES, getCells, COLS, ROWS } from './constants.js';\nimport confetti from 'canvas-confetti';\n\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\nconst scoreEl = document.getElementById('score');\nconst levelEl = document.getElementById('level');\nconst nextCanvas = document.getElementById('nextCanvas');\nconst nextCtx = nextCanvas.getContext('2d');\nconst ui = document.getElementById('ui');\nconst controls = document.getElementById('controls');\n\nconst audio = new AudioSys();\nconst tetris = new TetrisGame();\n\nfunction randomType() {\n const keys = Object.keys(TETROMINOES);\n return keys[Math.floor(Math.random()*keys.length)];\n}\n\nconst fishing = new Fishing({x:0,y:0,w:0,h:0}, type => {\n tetris.pushPiece(type);\n audio.tone(520, 0.12, 'sine', 0.06);\n});\n\nlet tetrisRect = {x:0,y:0,w:0,h:0};\nlet pendingReset = false;\n\nfunction layout() {\n const dpr = window.devicePixelRatio || 1;\n const w = window.innerWidth;\n const h = window.innerHeight;\n canvas.width = Math.floor(w*dpr);\n canvas.height = Math.floor(h*dpr);\n ctx.setTransform(dpr,0,0,dpr,0,0);\n\n const uiH = ui.getBoundingClientRect().height;\n const controlsH = controls.getBoundingClientRect().height;\n const availH = h - controlsH;\n const waterH = Math.floor((availH - uiH) * 0.34);\n const wellY = uiH + waterH;\n const wellH = availH - wellY;\n\n fishing.setBounds({x:0, y:uiH, w, h:waterH});\n tetrisRect = {x:0, y:wellY, w, h:wellH};\n\n nextCanvas.width = Math.floor(nextCanvas.clientWidth*dpr);\n nextCanvas.height = Math.floor(nextCanvas.clientHeight*dpr);\n nextCtx.setTransform(dpr,0,0,dpr,0,0);\n}\n\nfunction drawNext() {\n const w = nextCanvas.clientWidth;\n const h = nextCanvas.clientHeight;\n nextCtx.clearRect(0,0,w,h);\n const type = tetris.queue[0];\n if (!type) return;\n const cells = getCells(type, 0);\n const cols = Math.max(...cells.map(c=>c.x)) + 1;\n const rows = Math.max(...cells.map(c=>c.y)) + 1;\n const size = Math.min(w/(cols+1), h/(rows+1));\n const offX = (w - cols*size)/2;\n const offY = (h - rows*size)/2;\n nextCtx.fillStyle = TETROMINOES[type].color;\n for (const c of cells) {\n nextCtx.fillRect(offX + c.x*size, offY + c.y*size, size-1, size-1);\n }\n}\n\nfunction draw() {\n ctx.clearRect(0,0,window.innerWidth,window.innerHeight);\n fishing.draw(ctx);\n\n let blockSize = Math.floor(tetrisRect.w / COLS);\n if (blockSize * ROWS > tetrisRect.h) blockSize = Math.floor(tetrisRect.h / ROWS);\n const wellW = blockSize * COLS;\n const wellX = tetrisRect.x + (tetrisRect.w - wellW)/2;\n tetris.draw(ctx, {x:wellX, y:tetrisRect.y, w:wellW, h:blockSize*ROWS}, blockSize);\n\n drawNext();\n scoreEl.textContent = `Score ${tetris.score}`;\n levelEl.textContent = `Lv ${tetris.level}`;\n}\n\nlet last = performance.now();\nfunction loop(now) {\n const dt = Math.min(now - last, 50);\n last = now;\n\n fishing.update(dt);\n\n const prevLines = tetris.lines;\n tetris.update(dt);\n if (tetris.lines > prevLines) {\n audio.clear(tetris.lines - prevLines);\n confetti({\n particleCount: 60 + (tetris.lines - prevLines)*20,\n spread: 70,\n origin: { y: (tetrisRect.y + tetrisRect.h/2) / window.innerHeight }\n });\n }\n\n if (tetris.gameOver && !pendingReset) {\n pendingReset = true;\n setTimeout(() => {\n tetris.reset();\n fishing.seedFish(2);\n pendingReset = false;\n }, 1500);\n }\n\n draw();\n requestAnimationFrame(loop);\n}\n\n// input\nwindow.addEventListener('resize', layout);\n\ncanvas.addEventListener('pointermove', e => {\n if (e.clientY < fishing.bounds.y + fishing.bounds.h) fishing.setTargetX(e.clientX);\n});\ncanvas.addEventListener('pointerdown', e => {\n if (e.clientY < fishing.bounds.y + fishing.bounds.h) {\n fishing.setTargetX(e.clientX);\n fishing.cast();\n }\n});\n\nwindow.addEventListener('keydown', e => {\n if (tetris.gameOver) return;\n switch (e.key) {\n case 'ArrowLeft':\n case 'a':\n case 'A':\n if (tetris.move(-1, 0)) audio.move();\n break;\n case 'ArrowRight':\n case 'd':\n case 'D':\n if (tetris.move(1, 0)) audio.move();\n break;\n case 'ArrowDown':\n case 's':\n case 'S':\n if (tetris.move(0, 1)) audio.move();\n break;\n case 'ArrowUp':\n case 'w':\n case 'W':\n if (tetris.rotate()) audio.rotate();\n break;\n case ' ':\n case 'Enter':\n tetris.hardDrop();\n audio.lock();\n break;\n }\n});\n\nfunction setupButton(id, action) {\n const btn = document.getElementById(id);\n btn.addEventListener('pointerdown', e => { e.preventDefault(); audio.ensure(); action(); });\n}\n\nsetupButton('btnLeft', () => { if (tetris.move(-1,0)) audio.move(); });\nsetupButton('btnRight', () => { if (tetris.move(1,0)) audio.move(); });\nsetupButton('btnDown', () => { if (tetris.move(0,1)) audio.move(); });\nsetupButton('btnRotate', () => { if (tetris.rotate()) audio.rotate(); });\nsetupButton('btnDrop', () => { tetris.hardDrop(); audio.lock(); });\n\nlayout();\ntetris.pushPiece(randomType());\ntetris.pushPiece(randomType());\nfishing.seedFish(3);\nrequestAnimationFrame(loop);\n```\n\nNeed `audio.ensure()` in setupButton because audio context needs user gesture. It will resume. `AudioSys.ensure()` exists.\n\nPotential issue: `nextCanvas.clientWidth` initially 0 if hidden? It's visible from CSS. CSS sets width 42 height 42. Fine.\n\nNow `tetris.js` draw uses `rect` with `x,y` and blockSize. Need `tetris.draw` signature `(ctx, rect, blockSize)`. Good.\n\n`TetrisGame.update` calls `this.spawn()` which uses queue. It also calls `this.move(0,1)` which resets lockTimer. But if piece is on ground and move(0,1) fails, `onGround=true`, lockTimer accumulates. But `move` method resets lockTimer only when valid. Good.\n\nBut `move(0,1)` when active on ground: fails, returns false, doesn't reset lockTimer. We set onGround true. Good.\n\nBut if player presses down button, calls `move(0,1)`. If on ground, returns false. No score. Fine.\n\nNow check `spawn` onGround detection for active piece: piece at y=0, if invalid at y+1, onGround true. Good.\n\nWhat about lockTimer accumulation after spawn on ground: It will start accumulating because onGround true. If player doesn't act, locks in 220ms. Fine.\n\nGame over detection: spawn invalid if grid top occupied. Good.\n\nLine clear scoring and level update. `level = 1 + Math.floor(lines/LEVEL_LINES)`. Good.\n\nDrop interval: `Math.max(MIN_INTERVAL, BASE_INTERVAL - (level-1)*70)`. At level 10 interval = 800-630=170. Good.\n\nNeed confetti origin y within 0-1. Compute as above.\n\nNow `fishing.js` `setBounds` after resize: hook may be out of bounds; clamp. Good.\n\nOne issue: `fishing.draw` uses `ctx.fillRect` for fish cells; but if fish moving off-screen partially, drawn outside bounds but canvas clip? It will draw outside water area into UI/well, not ideal. We can clip to water rect: `ctx.save(); ctx.beginPath(); ctx.rect(bounds.x,bounds.y,bounds.w,bounds.h); ctx.clip();` before drawing water/fish. Then restore. Let's add in `draw`. Or draw water background then fish; if fish partially out, it's okay but may overlap UI? With clip, safe. Add clip.\n\nAlso `draw` hook line should be drawn inside clip. Good.\n\nNow, does `fishing` need to handle when hook targetX outside bounds? clamp.\n\nPotential issue: `pointermove` on canvas updates hook target even if hook dropping? We only set target; ready hook uses lerp. Dropping hook x doesn't change. Good.\n\nPotential issue: If user taps water while hook dropping? We only cast if ready. Good.\n\nPotential issue: Auto-repeat on mobile buttons? Pressing and holding doesn't repeat. Could implement repeat with interval, but not necessary. For Tetris, not repeating may be cumbersome. We can implement auto-repeat for move/down: on pointerdown start interval; on pointerup/leave clear. To keep simple and functional, we can implement. Let's add simple repeat for left/right/down. Maybe for rotate/drop no repeat.\n\nImplementation:\n```\nfunction setupRepeatingButton(id, action) {\n const btn=document.getElementById(id);\n let timer=null, interval=null;\n const start=(e)=>{ e.preventDefault(); audio.ensure(); action(); timer=setTimeout(()=>{ interval=setInterval(action, 90); }, 250); };\n const stop=()=>{ clearTimeout(timer); clearInterval(interval); timer=null; interval=null; };\n btn.addEventListener('pointerdown', start);\n btn.addEventListener('pointerup', stop);\n btn.addEventListener('pointerleave', stop);\n btn.addEventListener('pointercancel', stop);\n}\n```\nUse for left/right/down. Rotate/drop single. Good.\n\nFor desktop, key repeat from OS repeats; our keydown listener will fire repeatedly.\n\nNow, about `canvas-confetti` import map: `https://esm.sh/canvas-confetti` may redirect? Usually works. But the import map target should be exact. Use `https://esm.sh/canvas-confetti`. Good.\n\nNo base64 images.\n\nNeed make sure all files use correct relative paths. `js/main.js` imports `./tetris.js` etc. index.html script src `js/main.js`.\n\nNow potential issue: `tetris.js` imports `getCells` from `./constants.js`. Good.\n\nNow let's think about user intention: \"Tetris Fishing. This will need multiple files. An index.html file must be one of them.\" The user likely wants us to build the game. We should deliver files. We can also include a brief description. Since we are in final, output files as markdown code blocks.\n\nNeed ensure we don't ask questions. Use direct response.\n\nLet's also consider if we should generate image assets? Not necessary; all drawn. Good.\n\nNow, let's double-check code for errors.\n\nconstants.js:\n- `rotateMatrix` returns out dimensions swapped. For I 4x4 remains 4x4. For 3x3 remains 3x3. For 2x2 remains 2x2. Good.\n- `getCells` returns cells for orientation.\n\ntetris.js:\n- import `COLS, ROWS, TETROMINOES, BASE_INTERVAL, MIN_INTERVAL, LOCK_DELAY, LEVEL_LINES, getCells`.\n- Need define `drawBlock` function outside class. We'll include.\n- In `update`, after `this.spawn()`, if gameOver or no active returns. Good.\n- `move` resets lockTimer and recompute onGround. Good.\n- `rotate`: uses `getCells(piece.type, newRot)`. It creates test piece. Kicks array. For each, checks valid. Good.\n But `this.isValid({...piece, x: piece.x+k.x, y: piece.y+k.y})`. `piece` already has rotation newRot. Good.\n- `hardDrop`: loops while move(0,1). After each successful move, onGround recomputed. After final, piece on ground, lockTimer reset. Then lock. Good. Score += cells*2. Good.\n- `lock`: merge cells. Need ensure only cells with y>=0? Active piece could have y negative? We spawn at y=0, all cells y>=0. During rotation, could piece partly above top? `isValid` allows y<0 as long as not checked; cells with y<0 are ignored in collision. But after falling, y>=0. At spawn, y=0. Hard drop may have y negative? No. So merge y>=0. But include check. Good.\n- `clearLines`: builds newGrid by unshifting non-full rows. Then fill top. Good.\n- `draw`: background fill, grid lines, locked cells, ghost, active. Use `getCells`. For ghost, if active. Use globalAlpha 0.25. Set back. Good.\n Draw block uses pad=1. Fine.\n- `isValid`: for each cell x,y from active. If y<0 skip collision but check x bounds and y>=ROWS? Actually if y<0, it's above grid, valid. If y>=ROWS invalid. Good. If y>=0 and grid occupied invalid. Good.\n- `spawn`: if queue empty, active exists, gameOver -> return. Compute cells at rotation0. Width = max x+1. x centered. `isValid(piece)` checks collisions including grid. If invalid -> gameOver. Good.\n But `onGround` check uses `isValid({...piece,y:piece.y+1})`. If valid at y+1, not on ground. Good.\n- `queue` public. Good.\n\nfishing.js:\n- import `TETROMINOES, getCells`.\n- STATES constant.\n- `setBounds`: update bounds, clamp hook. Good.\n- `seedFish`: calls spawnFish. Good.\n- `spawnFish`: `const cells = getCells(type,0)`. `cols = max x +1`, `rows = max y +1`. `width`, `height`. Direction. x. y clamp to `bounds.h - height - 10`. Good.\n Speed px/sec. Update uses `f.x += f.vx*dt/1000`. Good.\n- Wrap: For vx>0, if x>right+30 reset to left. For vx<0, if x+width avail-ui=596, waterH 202, wellY 244, wellH = 638-244=394. Block size min(700/10=70, 394/12=32) => 32. Well width 320. Centered. Good.\n\nOn larger desktop h=900, controls maybe 70, avail 830, uiH 42, water 267, wellY 309, wellH 521, block size min(width/10= maybe 160, 521/12=43) => 43. Good.\n\nNow test mentally game loop: initial queue 2 pieces, no active. `update` calls spawn -> active. Fish seeded. Player can tap water; catch pushes to queue. Tetris runs. Good.\n\nIf queue empties and active locks, spawn returns false until fishing catch. Tetris area idle. Good.\n\nNow, maybe we should auto catch if queue empty and no fish? Fish spawn continuously. Good.\n\nNow, maybe include line clear animation? Not necessary.\n\nNow, we need to ensure no base64. Good.\n\nNow, maybe we should use `import confetti from 'canvas-confetti';` and call it. Good.\n\nNow, let's create final output with files.\n\nBefore final, let's think about possible improvements: The fishing and Tetris may feel disconnected. But it's okay.\n\nPotential bug: In `tetris.js`, `update` calls `this.spawn()` every frame. If `gameOver` true, spawn returns false. Then `if(!this.active) return;` so no active. Good.\n\n`gameOver` reset: `tetris.gameOver` set true. In main, schedule reset. But `tetris.update` may call spawn and set gameOver again each frame until reset? `pendingReset` true prevents new timeout, but `tetris.gameOver` remains true. We set `tetris.gameOver=false`? Not, but no issue. On reset, it becomes false. Good.\n\nDuring pending reset, draw still draws final locked state; no game over text. We could overlay flash. Could add `pendingReset` flash in draw: if pendingReset, fill red transparent. Let's add simple overlay in `draw`:\n```\nif (pendingReset) {\n ctx.fillStyle = 'rgba(255,0,0,0.25)';\n ctx.fillRect(0,0,window.innerWidth,window.innerHeight);\n}\n```\nGood.\n\nNow, implement auto-repeat. Let's write final main.js.\n\nOne more: For `canvas.addEventListener('pointermove', ...)`, on touch devices moving finger over water will also cause scroll? We set touch-action none on body. Good.\n\nNow, what about `e.clientY < fishing.bounds.y + fishing.bounds.h`. `fishing.bounds.y` is uiH. Good.\n\nPotential issue: `ui.getBoundingClientRect().height` includes padding maybe 42. Good.\n\nNow, audio `clear` uses `setTimeout` inside game loop; okay.\n\nNow, we should ensure `audio.tone` called in fishing catch. That calls `ensure`. Good.\n\nNow, final output should include file names and code blocks.\n\nLet's also include maybe a README? User asked for multiple files with index.html. We can include all. No need for README.\n\nLet's write final answer. Provide a short intro then files. Since mobile user maybe, but output is text. Fine.\n\nLet's produce final.\n\nHere is a complete, multi-file **Tetris Fishing** game.\n\nCast your line in the water to catch Tetromino-shaped fish. Each catch fills your piece queue, and the pieces play out as a normal Tetris game below.\n\n### File structure\n- `index.html`\n- `style.css`\n- `js/constants.js`\n- `js/tetris.js`\n- `js/fishing.js`\n- `js/audio.js`\n- `js/main.js`\n\n---\n\nindex.html\n```index.html\n```\n\n---\n\nstyle.css\n```style.css\n```\n\n---\n\njs/constants.js\n```js/constants.js\n```\n\n---\n\njs/tetris.js\n```js/tetris.js\n```\n\n---\n\njs/fishing.js\n```js/fishing.js\n```\n\n---\n\njs/audio.js\n```js/audio.js\n```\n\n---\n\njs/main.js\n```js/main.js\n```\n\nSave all files in the same folder structure and open `index.html` in a browser.","cursor","eyJpZCI6ImVoNXdjNDloYTc5ZnZ5ZDJ1azI3In0","token","included",[],"routes/browser/layout","actionData","errors"]