<!--© 2025 VasekCZ230 - All rights reserved.
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
...................................:+*++*+-.....................................................................................
................................:+########**=:..................................................................................
...............................:+########%##*+..................................................................................
................................*%######%####+:-..:.............................................................................
................................+#####%#%%########+-............................................................................
................................=#%%%%%%%%#########=...::-=+++**+-..........-+**#**=-...........................................
..................................:*#%%%%##*#####%##*+=*****#*##**+==+=:..:=*%%####*+:..........................................
....................................:+%%**#%##%##%%##***#*****#*##*+++**+--+#########**.........................................
...............................-==++-+%%**#%%%%%%%%#***#*###*##********+*#%#%%%%%%###**+........................................
............................-+**+**#%%%%%%%%%%%%#****##*##***####**##**##%#%%%%%%%%###++....:=+**--.............................
............................+*#***######%%%#####****##*#**#**#*##***#**#*#%%%%%%%%%%#*-....:*#####+.............................
............................=**+*#*##########****#####**#***#+*#***#+******##%%%#***=:..:+=*########+...........................
............................-*#+****#***#*#*##############*#**#***#*********##%%*++++....+#########%#-..........................
............................:***#***********################************#****#%%*+=+++:..+*##%%#%####-..........................
...........................-****#*#***#**#####################******#*****#****##*+*++++-.:++**%#--:............................
..........................+#*+**#*###*########***##******########*##**##*##**####*++++****=:..*%#...............................
..........................+#***#+*###*####*******##*******#######*##**##*##*##+##*+*++**+*****#%#...............................
-:.......................-##**#****#######*****************######*****#**##*##*##******+**+++***#=..............................
=-:.......:----:.........-##**#*+*+*#*#********+*************######******#**#**##****++***+***++**+-............................
=--:.....-======-=-:....:*##**###************##******************#####*###*##***##***++***+***+**+**+-..........................
=-----...-========-:...:****++**##*#*******######*********##*****#####**##*##******+*++***+#*++*****+++-........................
------..-==========-:.+*##****+*####***#*########*********###%%%#%%###********###*++********#***+*****++*=................:*=###
=------:-==========--**##***######%%####*####**####*+****#%##%%%%########*##***##*++*++**++**+*#*****#******++-............#####
#*+-------==-======+**#*##***##%%#%%%######***+**##******#%#%%%%%%##**###*###*##**+++*+***#%%%#%#####%%%%%%##+***.......--*##%%%
###*++=--===--=====*********##%%%%%#%########*****##+*##%%%%%%%%%%%%%%###*#***##*++++*++*#%%%%%%%%##%%%%%%%%#***+......:##%##%%%
%##%%##++=-----===-***##*##%%%%%%%%%%%#%######****######%%%%%%%%%%%%%#%#####**##**+++++++##%%%%%%%%%%%%%%%%%%#*+*:.....:*##%%%%%
%%%%#####++==--=:.:*###**#%%%%%%%%%#%%#%##***+*****###*#%%%%%%%%%#%%%%######*#****++*##%#%%%%%%%%%%%%%%%%%@%%%%##+::...=##%%%%%%
%%%#######++---=:-**###**##%%%%%%@%%%%%%%###**##****##**#%%@@@@%@%%%%%##**#+******+*#%%%%%%%%%%%%%@%%%@%%%%%%%%%#++*%##%%%%%%%%%
%%%%%#######*++++************##%%@%%%%%####**##**#**##**#%%%%@@@@%@%%%%%#*#*#####*####%%%%%%@%%%%@@@@%%%%%@%%%%%%#+*%%#%%%%%%%%%
%%%%%##%##%##*****+****#*****###%%%%%#####**#**##***#**#%%@@@%@@%%%%%%####*#####**###%%@%%@@@@@@@@@@@@@@@@%%%@%%%#*#%%%%%%%*#%%%
%%%%%%%%%########*#**#**#*#####%%%%%%%%###**#***#***#*##%%@@%%%%%%%%%%######*##**##*##*#####@@@@####*#%@@@#*****##%%%%%%%%%%%%%%
%@@%%%%%%##**##**###*#***###%%%%%%%%%#%########*##**######%%%#%#%%%###*#*##*####*#####*#####@@@@####*##@@@##**+*#%%%%%%%%%%%%%%%
#@%%##*###******#****+****###%%%##########################%%##########*****######*###*####%#%@@%%@%%@%#@@@%###*##%%%%%%%%%%%%%%%
##%####%##%###***###**#####%##########*#***#**######%%##%#########*###%#######%%*##%##**##%%%%%%%%%%@@@@@@%%%%%*####%%%@@@@#%%%%
####**##*###*#*****++***###########***+***#**++*###*##%###########**############***##***##%##%%#%%#%@@@@@@@%%@@#####%@@@@@@##**#
############*######******#############***####***###***####*#######*##########*####**###*###*####*###**####%%%%#%%%#####%#*%#%%%*
******++*+**+*+=+++++++==+++==++++=+*++==++*====***===+***=****+**+****+*****+*+**++++*+*+*++*+********+######*##***++**+****##*
-==-=-===-==-=..--===--..=-=:.----.:=-=..=-=:...=-=:..:=--.--=-.--==---.-====-=.--=-..=-=:--=-:#%#*####-*###=+++=-=-:-==:===-=-=
-:-======---==:.:==-==-:.-==:.:==-::-==.:--=:..:--=:..:--::::-:.:::::--.--====-:-=--::=-=-=+===###*##**=*##*==++++=+-+=+-=-=-=-=
=========..:==-..-===-=-..=-=:.-=-=..=-=:.-==-...:--=.=###*+=-=.:=-=.:=-=.----.==--:=-=:+###*#%##*#%#**###*+=-=*################
=====-===..:==-..-=====-..-==:.:===..-=--.-####+=.---.=###*+=--.:---..---..:...:::..=-=-+###*####*#%%**####****######*##########
++++=+****+++***+++****+++++*+****+*********#*#++*********###******###*******#####**%%%%%%%%%%%%%%#%%%%%#%%%%%%%%%%%%%%%%%%%%%%%
####**####**#####*#####*#####*####**####*#####*####*#####*########*########*######*#%%%%#%%%##%%%%#%%#%###%%%#%%%##%%%%%%%%%%%%%
####***###***####*####***####**###**####**####****#*****############*#*#####****################%########################%##%###
#####%%%######%#%%###%%%###%%%######%#%%%%%%#%###%#%%######%%%%%#%%%%###%%%%%%%%%%%%#%%%%#%%%%#%%%%%####################**#*####
#####%%########%%%###%%%###%%%#####%%%#%%%%%%%###%%%%######%%%%%%%%%%%##%%%%%%%%%%%###%%%%%%%%#%%%%%%%%%##%%%%%%%%%#%%%%%%%%###%
#####%%%#############################################################################################%%%%%%%#%#%%%%%%%%###%%%#%%
################################%######%%#%##################%#%%%%%%%%%%%%%%%######%#%#########################################
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%####%%%%%%%%%%%#%#%%#%########
%%%%%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%##%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%##%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%%%%%%%%%%%%%%%%%###%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%###%%%%%%%%%%%%%%%%%%%#%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@%%@%%%%%%%%%%%%%%@@%%%@%%%%%%%%%%%%%%%%@@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@%%@%%%%%%%
-->
<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript'> 
		title = "VasekCZ230's Website - Tetris • ";
		position = 0;
		function scrolltitle() {
    		document.title = title.substring(position, title.length) + title.substring(0, position); 
    		position++;
    		if (position > title.length) position = 0;
    		titleScroll = window.setTimeout(scrolltitle,170);
		}
		scrolltitle();
	</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/style.css?v=2.7.0">
	<style>
  html, body { margin:0; padding:0; }
  #game-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    box-sizing: border-box;
  }
  #game-canvas {
    background: rgba(0,0,0,0);
    border: 4px solid #0066ff;
  }
  canvas { display:block; }
  #sidebar {
    display: flex;
    flex-direction: column;
    color: #4a4d7c;
    font-family: monospace;
    font-size: 14px;
    background: rgba(0,0,0,0);
    border: 3px solid #0066ff;
    padding: 5px;
    min-width: 120px;
    height: auto;
  }
  #next-canvas { 
    background: rgba(0,0,0,0);
    margin-bottom: 10px;
    border: 2px solid #0066ff;
    width: 60px;
    height: 60px;
  }
  #gameover-msg {
    text-align: center;
    color: #ff5555;
    font-family: monospace;
    font-size: 11px;
    margin-top: 10px;
    display: none;
  }
  #pause-msg {
    text-align: center;
    color: #ffcc00;
    font-family: monospace;
    font-size: 11px;
    margin-top: 10px;
    display: none;
  }
  .score-row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
  }
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>Tetris</h1>
        </div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td id="menu">
                    <h3 style="text-align: center;">Menu</h3>
                    <a href="https://vasekcz230.github.io/home">&bull; Home</a>
					<a href="https://vasekcz230.github.io/projects">&bull; My projects</a>
                    <a href="https://vasekcz230.github.io/games">&bull; Games</a>
                    <a href="https://vasekcz230.github.io/programs">&bull; Programs</a>
                    <a href="https://vasekcz230.github.io/other">&bull; Other</a>
                    <a href="https://vasekcz230.github.io/about">&bull; About</a>
                </td>
                <td id="content">
                    <div id="game-container">
                        <canvas id="game-canvas"></canvas>
                        <div id="sidebar">
                            <canvas id="next-canvas" width="60" height="60"></canvas>
                            <div class="score-row">
                                <div>Score:</div>
                                <div id="score">0</div>
                            </div>
                            <div class="score-row">
                                <div>Lines:</div>
                                <div id="lines">0</div>
                            </div>
                            <div class="score-row">
                                <div>Level:</div>
                                <div id="level">1</div>
                            </div>
                            <div style="margin-top: 10px; font-size: 12px;">
                                Controls:<br>
                                [A][D] - Move<br>
                                [S] - Down<br>
                                [W]/[K] - Rotate<br>
                                [Enter] - Pause/Resume
                            </div>
                            <div id="gameover-msg">GAME OVER<br>Press Enter to restart</div>
                            <div id="pause-msg">PAUSE<br>Press Enter to resume</div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <div id="footer">
            <p>&copy; 2025 VasekCZ230 - All rights reserved.</p>
            <a href="https://vasekcz230.github.io/home" style="color: #ccdcf3;">Home</a> | 
			<a href="https://vasekcz230.github.io/projects" style="color: #ccdcf3;">My projects</a> | 
            <a href="https://vasekcz230.github.io/games" style="color: #ccdcf3;">Games</a> | 
            <a href="https://vasekcz230.github.io/programs" style="color: #ccdcf3;">Programs</a> | 
            <a href="https://vasekcz230.github.io/other" style="color: #ccdcf3;">Other</a> | 
            <a href="https://vasekcz230.github.io/about" style="color: #ccdcf3;">About</a>
        </div>
    </div>
	<script>
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const nextCanvas = document.getElementById('next-canvas');
const nctx = nextCanvas.getContext('2d');

const COLS = 10, ROWS = 20;
let SIZE = 20;
canvas.width = COLS * SIZE;
canvas.height = ROWS * SIZE;

const SHAPES = {
  I:[[1,1,1,1]],
  J:[[1,0,0],[1,1,1]],
  L:[[0,0,1],[1,1,1]],
  O:[[1,1],[1,1]],
  S:[[0,1,1],[1,1,0]],
  T:[[0,1,0],[1,1,1]],
  Z:[[1,1,0],[0,1,1]]
};

const COLORS = ['#00aaff','#33ccff','#0066ff','#3399ff','#66ccff','#0099ff','#00ccff'];

let field, piece, nextPiece, score=0, level=1, lines=0, dropTime=1000, lastTime=0;
let running=false, paused=false, gameOver=false;

const BORDER = 4;
let OFFSET = BORDER;

function resizeCanvas(){
    const container = document.getElementById('game-container');
    const w = container.clientWidth - 120;
    const h = container.clientHeight;

    SIZE = Math.min(Math.floor((w - BORDER*2) / COLS), Math.floor((h - BORDER*2) / ROWS));

    canvas.width = COLS * SIZE + BORDER*2;
    canvas.height = ROWS * SIZE + BORDER*2;

    OFFSET = BORDER;
}

function drawCell(x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(OFFSET + x * SIZE, OFFSET + y * SIZE, SIZE, SIZE);
}

window.addEventListener('resize', () => { resizeCanvas(); draw(); drawNext(); });

function resetField() { field = Array.from({ length: ROWS }, () => Array(COLS).fill(0)); }

function randomPiece(){
  const keys = Object.keys(SHAPES);
  const k = keys[Math.floor(Math.random() * keys.length)];
  return { shape: SHAPES[k].map(r => r.slice()), x: 3, y: 0, color: COLORS[Math.floor(Math.random() * COLORS.length)] };
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      if (field[y][x]) drawCell(x, y, field[y][x]);
    }
  }
  if (piece) {
    for (let y = 0; y < piece.shape.length; y++) {
      for (let x = 0; x < piece.shape[y].length; x++) {
        if (piece.shape[y][x]) drawCell(piece.x + x, piece.y + y, piece.color);
      }
    }
  }
}

function drawNext() {
  nctx.clearRect(0, 0, nextCanvas.width, nextCanvas.height);
  const s = nextPiece.shape;
  const offsetX = (nextCanvas.width - s[0].length * SIZE) / 2;
  const offsetY = (nextCanvas.height - s.length * SIZE) / 2;
  for (let y = 0; y < s.length; y++) {
    for (let x = 0; x < s[y].length; x++) {
      if (s[y][x]) {
        nctx.fillStyle = nextPiece.color;
        nctx.fillRect(offsetX + x * SIZE, offsetY + y * SIZE, SIZE, SIZE);
      }
    }
  }
}

function collides(shape, x, y) {
  for (let r = 0; r < shape.length; r++) {
    for (let c = 0; c < shape[r].length; c++) {
      if (shape[r][c] && (y + r >= ROWS || x + c < 0 || x + c >= COLS || field[y + r][x + c])) return true;
    }
  }
  return false;
}

function merge() {
  for (let r = 0; r < piece.shape.length; r++) {
    for (let c = 0; c < piece.shape[r].length; c++) {
      if (piece.shape[r][c]) field[piece.y + r][piece.x + c] = piece.color;
    }
  }
  score += 4;
  document.getElementById('score').textContent = score;
}

function clearLines() {
  let cleared = 0;
  for (let y = ROWS - 1; y >= 0; y--) {
    if (field[y].every(v => v)) {
      field.splice(y, 1);
      field.unshift(Array(COLS).fill(0));
      cleared++;
      y++;
    }
  }
  if (cleared) {
    lines += cleared;
    const lineScores = [0, 40, 100, 300, 1200];
    score += lineScores[cleared] * level;
    level = Math.floor(lines / 10) + 1;
    dropTime = Math.max(200, 1000 - level * 100);
    document.getElementById('level').textContent = level;
    document.getElementById('lines').textContent = lines;
  }
}

function rotate(shape) {
  return shape[0].map((_, i) => shape.map(r => r[i]).reverse());
}

function drop() {
  if (!collides(piece.shape, piece.x, piece.y + 1)) {
    piece.y++;
  } else {
    merge();
    clearLines();
    piece = nextPiece;
    nextPiece = randomPiece();
    if (collides(piece.shape, piece.x, piece.y)) {
      gameOver = true;
      running = false;
      document.getElementById('gameover-msg').style.display = 'block';
    }
  }
}

function update(time = 0) {
  if (!running) return;
  if (paused) {
    document.getElementById('pause-msg').style.display = 'block';
    draw();
    drawNext();
    requestAnimationFrame(update);
    return;
  } else {
    document.getElementById('pause-msg').style.display = 'none';
  }

  if (time - lastTime > dropTime) {
    drop();
    lastTime = time;
  }

  draw();
  drawNext();
  requestAnimationFrame(update);
}

window.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    if (!running) start();
    else if (gameOver) {
      start();
      document.getElementById('gameover-msg').style.display = 'none';
    } else paused = !paused;
  }
  if (!running || paused || gameOver) return;
  if ((e.key === 'a' || e.key === 'A') && !collides(piece.shape, piece.x - 1, piece.y)) piece.x--;
  if ((e.key === 'd' || e.key === 'D') && !collides(piece.shape, piece.x + 1, piece.y)) piece.x++;
  if (e.key === 's' || e.key === 'S') drop();
  if (e.key === 'w' || e.key === 'W' || e.key === 'k' || e.key === 'K') {
    const r = rotate(piece.shape);
    if (!collides(r, piece.x, piece.y)) piece.shape = r;
  }
});

function start() {
  resizeCanvas();
  resetField();
  score = 0;
  level = 1;
  lines = 0;
  dropTime = 1000;
  piece = randomPiece();
  nextPiece = randomPiece();
  running = true;
  paused = false;
  gameOver = false;
  document.getElementById('gameover-msg').style.display = 'none';
  document.getElementById('pause-msg').style.display = 'none';
  update();
}

start();
</script>
    <script>
        function checkSparkleCursor() {
            const currentHour = new Date().getHours();
            const shouldActivate = (currentHour >= 22 || currentHour < 2);
            const existingScript = document.querySelector('script[src="../js/sparklecursor.js"]');
            if (shouldActivate && !existingScript) {
                const script = document.createElement('script');
                script.src = '../js/sparklecursor.js';
                document.head.appendChild(script);
            } else if (!shouldActivate && existingScript) {
                existingScript.remove();
            }
        }
        checkSparkleCursor();
    </script>
</body>
</html>