derekmc · October 9, 2020 20:12
diff --git a/chess.html b/chess.html
 <!doctype html>

 <html>
  <head>
    <title> Chess </title>
    <style>
      * {
        font-family: sans-serif;
        user-select: none;
      }
      body{
        margin: 1em;
      }
      #notify_span{
        font-family: monospace;
        margin: 1em;
        border: 1px solid black;
        padding: 1em 1em;
      }
    </style>


    <!-- Utility Functions -->
    <!-- These functions do general purpose things that aren't specific to this project or codebase -->
    <script> 
      function copy(x){
        return x? JSON.parse(JSON.stringify(x)) : x;
      }
    </script>


    <script>
      window.addEventListener("load", Init);

      let State, NotifySpan;  // Names that start with uppercase are globals or functions that modify globals.

      const INITBOARD = "rnbqkbnrpppppppp--------------------------------PPPPPPPPRNBQKBNR".split('');
      const INITSTATE = {
        count: 0,
        cursor: 0,
        select: -1,
        board: INITBOARD,
      }
      

      function Init(){
         State = copy(INITSTATE);
         NotifySpan = document.getElementById("notify_span");
         Events();
         Notify("Init() completed.");
         document.body.click();
      }


      function Notify(msg){
        // console.log("Notification: " + msg);
        NotifySpan.innerHTML = "";
        NotifySpan.appendChild(document.createTextNode(msg));
      }


      function Events(){

        window.addEventListener("click",
         (e) => click(State, e, () => update(Notify, State)));

        window.addEventListener("keydown",
         (e) => keyDown(State, e, () => update(Notify, State)));

        function update(notify, state){
          let s = ('   ' + state.board.join('   ')).match(/.{32}/g).join(" \n\n");
          s = highlight(s, state.cursor, '()');
          s = highlight(s, state.select, '[]');
          notify(s);

          function highlight(s, n, c){
             if(n === null || n < 0) return s;
             let x = n%8;
             let y = Math.floor(n/8);
             let index = 4 + 4*x + 35*y;
             return s.substring(0,index-2) + c[0] + s[index-1] + c[1] + s.substring(index + 1);
          }
        }
        function click(state, e, after){
          let x = e.clientX;
          let y = e.clientY;
          ++state.count;
          Notify(`Click #${State.count}: (${x}, ${y})`);
          if(after) after();
        }
        function keyDown(state, e, after){
          let key = e.keyCode;
          switch(key){
             case 37: --state.cursor; break;
             case 38: state.cursor -= 8; break;
             case 39: ++state.cursor; break;
             case 40: state.cursor += 8; break;
             case 13:
             case 32:
               if(state.select < 0){
                 state.select = state.cursor;
                 break; }
               state.board[state.cursor] = state.board[state.select];
               state.board[state.select] = '-';
               state.select = -1;
               break;
          }
          state.cursor %= 64;
          if(state.cursor < 0) state.cursor += 64;

          Notify(`Key Down: ${key}`);
          state.lastkey = key;
          if(after) after();
        }
      }

    </script>
  </head>
  <body>
    <h1> Chess </h1>
    <div>
      <pre id='notify_span'></pre>
    </div>
  </body>
 </html>
	<!doctype html>

	<html>
	<head>
	<title> Chess </title>
	<style>
	* {
	font-family: sans-serif;
	user-select: none;
	}
	body{
	margin: 1em;
	}
	#notify_span{
	font-family: monospace;
	margin: 1em;
	border: 1px solid black;
	padding: 1em 1em;
	}
	</style>


	<!-- Utility Functions -->
	<!-- These functions do general purpose things that aren't specific to this project or codebase -->
	<script>
	function copy(x){
	return x? JSON.parse(JSON.stringify(x)) : x;
	}
	</script>


	<script>
	window.addEventListener("load", Init);

	let State, NotifySpan; // Names that start with uppercase are globals or functions that modify globals.

	const INITBOARD = "rnbqkbnrpppppppp--------------------------------PPPPPPPPRNBQKBNR".split('');
	const INITSTATE = {
	count: 0,
	cursor: 0,
	select: -1,
	board: INITBOARD,
	}


	function Init(){
	State = copy(INITSTATE);
	NotifySpan = document.getElementById("notify_span");
	Events();
	Notify("Init() completed.");
	document.body.click();
	}


	function Notify(msg){
	// console.log("Notification: " + msg);
	NotifySpan.innerHTML = "";
	NotifySpan.appendChild(document.createTextNode(msg));
	}


	function Events(){

	window.addEventListener("click",
	(e) => click(State, e, () => update(Notify, State)));

	window.addEventListener("keydown",
	(e) => keyDown(State, e, () => update(Notify, State)));

	function update(notify, state){
	let s = (' ' + state.board.join(' ')).match(/.{32}/g).join(" \n\n");
	s = highlight(s, state.cursor, '()');
	s = highlight(s, state.select, '[]');
	notify(s);

	function highlight(s, n, c){
	if(n === null \|\| n < 0) return s;
	let x = n%8;
	let y = Math.floor(n/8);
	let index = 4 + 4x + 35y;
	return s.substring(0,index-2) + c[0] + s[index-1] + c[1] + s.substring(index + 1);
	}
	}
	function click(state, e, after){
	let x = e.clientX;
	let y = e.clientY;
	++state.count;
	Notify(`Click #${State.count}: (${x}, ${y})`);
	if(after) after();
	}
	function keyDown(state, e, after){
	let key = e.keyCode;
	switch(key){
	case 37: --state.cursor; break;
	case 38: state.cursor -= 8; break;
	case 39: ++state.cursor; break;
	case 40: state.cursor += 8; break;
	case 13:
	case 32:
	if(state.select < 0){
	state.select = state.cursor;
	break; }
	state.board[state.cursor] = state.board[state.select];
	state.board[state.select] = '-';
	state.select = -1;
	break;
	}
	state.cursor %= 64;
	if(state.cursor < 0) state.cursor += 64;

	Notify(`Key Down: ${key}`);
	state.lastkey = key;
	if(after) after();
	}
	}

	</script>
	</head>
	<body>
	<h1> Chess </h1>
	<div>
	<pre id='notify_span'></pre>
	</div>
	</body>
	</html>