lxe/ches.html

## ches.html
<html>

<head>
  <title>Chess</title>
  <meta name="viewport" content="width=800, initial-scale=1, maximum-scale=1">
  <style>
    body {
      /* zoom: 0.5; */
      margin: 0;
      padding: 0;
      /* background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/70/Checkerboard_pattern.svg');
      background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAEElEQVQImWNg+M+AFeEQBgB+vw/xfUUZkgAAAABJRU5ErkJggg==');  */
      background-image:
        linear-gradient(45deg, #808080 25%, transparent 25%),
        linear-gradient(-45deg, #808080 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #808080 75%),
        linear-gradient(-45deg, transparent 75%, #808080 75%);
      background-size: 200px 200px;
      background-position: 0 0, 0 100px, 100px -100px, -100px 0px;
    }

    .piece {
      cursor: pointer;
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 100px;

      transition: transform linear .5s;
    }

    .piece.white {
      color: BurlyWood;
    }

    .piece.selected {
      background-color: rgba(0, 255, 0, 0.3);
    }
  </style>
</head>

<body>
  <script>
    document.body.innerHTML = (localStorage['board'] || `
♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟


♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
      `)
      .trim()
      .split('\n')
      .reduce(
        (text, pieces, row) =>
          text +
          pieces
            .split('')
            .map(
              (piece, col) => `
          <div
            class="piece ${piece.charCodeAt(0) < 0x265A ? 'white' : 'black'}"
            style="${pos(row, col)}">${piece}</div>`
            )
            .join(''),
        ''
      );

    function pos(row, col) {
      return `transform:
    translateY(${row * 100}px)
    translateX(${col * 100}px);`;
    }

    let prev = null;
    let empty = null;
    let currentTurn = 'white';
    let grid = [[], [], [], [], [], [], [], []];

    [...document.getElementsByTagName('div')].forEach((piece, i) => {
      piece.col = i % 8;
      piece.row = Math.floor(i / 8);

      piece.color = piece.innerHTML != ' ' && (piece.classList.contains('white') ? 'white' : 'black');
      grid[piece.row][piece.col] = piece;

      piece.addEventListener('touchend', () => {
        if (!prev && piece.color !== currentTurn) {
          return;
        }

        prev?.classList.remove('selected');

        if (!prev || !prev.color || prev.color === piece.color) {
          piece.classList.add('selected');
          prev = piece;
          return;
        }

        const { row, col } = prev;
        prev.row = piece.row;
        prev.col = piece.col;
        prev.style = pos(piece.row, piece.col);
        grid[piece.row][piece.col] = prev;

        piece.row = row;
        piece.col = col;
        piece.style = pos(row, col);
        grid[row][col] = piece;

        if (prev.color && piece.color !== prev.color) {
          piece.innerHTML = ' ';
          piece.color = null;
        }

        currentTurn = currentTurn === 'white' ? 'black' : 'white';
        prev = null;

        localStorage['board'] = grid.map(row => row.map(piece => piece.innerHTML).join('')).join('\n');
      });
    });

  </script>
</body>

</html>
	<html>

	<head>
	<title>Chess</title>
	<meta name="viewport" content="width=800, initial-scale=1, maximum-scale=1">
	<style>
	body {
	/* zoom: 0.5; */
	margin: 0;
	padding: 0;
	/* background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/70/Checkerboard_pattern.svg');
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAEElEQVQImWNg+M+AFeEQBgB+vw/xfUUZkgAAAABJRU5ErkJggg=='); */
	background-image:
	linear-gradient(45deg, #808080 25%, transparent 25%),
	linear-gradient(-45deg, #808080 25%, transparent 25%),
	linear-gradient(45deg, transparent 75%, #808080 75%),
	linear-gradient(-45deg, transparent 75%, #808080 75%);
	background-size: 200px 200px;
	background-position: 0 0, 0 100px, 100px -100px, -100px 0px;
	}

	.piece {
	cursor: pointer;
	position: absolute;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-size: 100px;

	transition: transform linear .5s;
	}

	.piece.white {
	color: BurlyWood;
	}

	.piece.selected {
	background-color: rgba(0, 255, 0, 0.3);
	}
	</style>
	</head>

	<body>
	<script>
	document.body.innerHTML = (localStorage['board'] \|\| `
	♜♞♝♛♚♝♞♜
	♟♟♟♟♟♟♟♟




	♙♙♙♙♙♙♙♙
	♖♘♗♕♔♗♘♖
	`)
	.trim()
	.split('\n')
	.reduce(
	(text, pieces, row) =>
	text +
	pieces
	.split('')
	.map(
	(piece, col) => `
	<div
	class="piece ${piece.charCodeAt(0) < 0x265A ? 'white' : 'black'}"
	style="${pos(row, col)}">${piece}</div>`
	)
	.join(''),
	''
	);

	function pos(row, col) {
	return `transform:
	translateY(${row * 100}px)
	translateX(${col * 100}px);`;
	}

	let prev = null;
	let empty = null;
	let currentTurn = 'white';
	let grid = [[], [], [], [], [], [], [], []];

	[...document.getElementsByTagName('div')].forEach((piece, i) => {
	piece.col = i % 8;
	piece.row = Math.floor(i / 8);

	piece.color = piece.innerHTML != ' ' && (piece.classList.contains('white') ? 'white' : 'black');
	grid[piece.row][piece.col] = piece;

	piece.addEventListener('touchend', () => {
	if (!prev && piece.color !== currentTurn) {
	return;
	}

	prev?.classList.remove('selected');

	if (!prev \|\| !prev.color \|\| prev.color === piece.color) {
	piece.classList.add('selected');
	prev = piece;
	return;
	}

	const { row, col } = prev;
	prev.row = piece.row;
	prev.col = piece.col;
	prev.style = pos(piece.row, piece.col);
	grid[piece.row][piece.col] = prev;

	piece.row = row;
	piece.col = col;
	piece.style = pos(row, col);
	grid[row][col] = piece;

	if (prev.color && piece.color !== prev.color) {
	piece.innerHTML = ' ';
	piece.color = null;
	}

	currentTurn = currentTurn === 'white' ? 'black' : 'white';
	prev = null;

	localStorage['board'] = grid.map(row => row.map(piece => piece.innerHTML).join('')).join('\n');
	});
	});

	</script>
	</body>

	</html>