view release on metacpan or  search on metacpan

lib/Chandra/Game/Tetris/Engine.pm  view on Meta::CPAN

		}

		.score-wrapper h2,
		.lines-wrapper h2,
		.next-block-wrapper h2 {
			font-size: clamp(0.6rem, calc(var(--cell) * 0.35), 1rem);
			text-transform: uppercase;
			letter-spacing: 0.15em;
			color: rgb(160, 164, 167);
		}

		#score,
		#lines {
			font-size: clamp(0.8rem, calc(var(--cell) * 0.5), 1.5rem);
			font-weight: bold;
		}

		#next-block {
			width: calc(var(--cell) * 4);
			height: calc(var(--cell) * 4);
			border: var(--border);
			background: var(--cell-bg);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#start {
			width: 100%;
			padding: calc(var(--cell) * 0.2) 0;
			background: rgb(60, 180, 100);
			color: var(--color);
			border: none;
			font-family: monospace;
			font-size: clamp(0.7rem, calc(var(--cell) * 0.35), 1rem);
			letter-spacing: 0.1em;
			text-transform: uppercase;
			cursor: pointer;
			border-radius: 2px;
		}

		#start:hover {
			background: rgb(80, 200, 120);
		}

		/* Next block preview */
		.tetris-block {
			border-collapse: collapse;
			table-layout: fixed;
			margin: auto;
		}

		.tetris-block-row {
			height: calc(var(--cell) * 0.8);
		}

		.tetris-cell {
			width: calc(var(--cell) * 0.8);
			height: calc(var(--cell) * 0.8);
			padding: 0;
			border: 1px solid transparent;
		}

		.tetris-cell.filled {
			border-color: rgba(0,0,0,0.3);
		}

		.tetris-cell.empty {
			background: transparent;
		}

		.tetris-cell > div {
			width: 100%;
			height: 100%;
		}

		.start-modal {
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-family: monospace;
			font-size: clamp(2rem, 10vw, 6rem);
			font-weight: bold;
			background: rgba(0,0,0,0.6);
			pointer-events: none;
		}

		.start-modal.small {
			font-size: clamp(1rem, 4vw, 2rem);
			text-align: center;
			padding: 1rem;
		}

		.hide {
			display: none !important;
		}
	|;
}



sub js {
	return q|
		var score_el = document.querySelector('#score');
		var lines_el = document.querySelector('#lines');
		var next_block = document.querySelector('#next-block');
		var start_button = document.querySelector('#start');
		var tetris_area = document.querySelector('.tetris-game-area-left');
		var start_modal = document.querySelector('.start-modal');
		var gameInterval = null;
		var isRunning = false;
		var currentLevel = 1;

		function getSpeed(level) {
			return Math.max(80, 800 - (level - 1) * 70);
		}

		function startGameLoop(level) {
			if (gameInterval) clearInterval(gameInterval);
			gameInterval = setInterval(function() {
				window.chandra.invoke('tick', [])
					.then(function(r) { handleGameResponse(r); })
					.catch(function(e) { console.error('tick error:', e); });
			}, getSpeed(level));
		}