coryk135/modified_lights_out.html

## modified_lights_out.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
        html, body {
            margin: 25px auto;
            text-align: center
        }
        ul {
            list-style-type: none;
        }
        li {
            line-height: 0;
        }
        span{
            display: inline-block;
            width: 32px;
            height: 32px;
            background-color: white;
            border: 1px solid rgb(184, 184, 184);
            border-radius: 3px;
            margin: 1px;

            transition: width 1s, height 1s;
        }
        span[clicked] {
            border: 2px solid rgb(211, 16, 16);
            width: 30px;
            height: 30px;
        }
        span[on]{
            background: rgb(59,153,252);
        }
        span[big]{
            width: 164px;
            height: 164px;
        }
    </style>
</head>
<body>
<input id="input" type="text" value="5">
<button onclick="render()">create</button>
<div id="grid"></div>
<script>
function render(){
    var input = document.querySelector('#input');
    var grid = document.querySelector('#grid');
    grid.innerHTML = '';
    var N = parseInt(input.value);
    var M = [];
    for(var i = 0; i < N; i++){
        var Mi = [];
        for(var j = 0; j < N; j++){
            var Mij = document.createElement('span');
            Mij.toggleOn = function(){
                if(this.hasAttribute('on'))
                    this.removeAttribute('on');
                else
                    this.setAttribute('on','');
                this.setAttribute('big', '');
                setTimeout(function(){
                    this.removeAttribute('big');
                }.bind(this), 100);
            }
            Mij.toggleClick = function(){
                if(this.hasAttribute('clicked'))
                    this.removeAttribute('clicked');
                else
                    this.setAttribute('clicked','');
            }
            Mij.i = i;
            Mij.j = j;
            Mij.onclick = handleClick(M, N);
            Mi.push(Mij);
        }
        M.push(Mi);
    }

    var ul = document.createElement('ul');
    for(var i = 0; i < N; i++){
        var li = document.createElement('li');
        for(var j = 0; j < N; j++){
            li.appendChild(M[i][j]);
        }
        ul.appendChild(li);
    }
    grid.appendChild(ul);
}
function handleClick(M, N){
    return function(){
        var x = this.i;
        var y = this.j;
        M[x][y].toggleOn();
        M[x][y].toggleClick();
        for(var i = 0; i < N; i++){
            var a = i-this.i,
                b = y-y;
            setTimeout(function(i,y){
                M[i][y].toggleOn();
            }.bind(this,i,y),
                50*Math.sqrt(a*a + b*b)
            );

        }
        for(var j = 0; j < N; j++){
            var a = x-x,
                b = j-this.j;
            setTimeout(function(x,j){
                M[x][j].toggleOn();
            }.bind(this,x,j),
                50*Math.sqrt(a*a + b*b)
            );

        }
    }
}
render();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	}
	html, body {
	margin: 25px auto;
	text-align: center
	}
	ul {
	list-style-type: none;
	}
	li {
	line-height: 0;
	}
	span{
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: white;
	border: 1px solid rgb(184, 184, 184);
	border-radius: 3px;
	margin: 1px;

	transition: width 1s, height 1s;
	}
	span[clicked] {
	border: 2px solid rgb(211, 16, 16);
	width: 30px;
	height: 30px;
	}
	span[on]{
	background: rgb(59,153,252);
	}
	span[big]{
	width: 164px;
	height: 164px;
	}
	</style>
	</head>
	<body>
	<input id="input" type="text" value="5">
	<button onclick="render()">create</button>
	<div id="grid"></div>
	<script>
	function render(){
	var input = document.querySelector('#input');
	var grid = document.querySelector('#grid');
	grid.innerHTML = '';
	var N = parseInt(input.value);
	var M = [];
	for(var i = 0; i < N; i++){
	var Mi = [];
	for(var j = 0; j < N; j++){
	var Mij = document.createElement('span');
	Mij.toggleOn = function(){
	if(this.hasAttribute('on'))
	this.removeAttribute('on');
	else
	this.setAttribute('on','');
	this.setAttribute('big', '');
	setTimeout(function(){
	this.removeAttribute('big');
	}.bind(this), 100);
	}
	Mij.toggleClick = function(){
	if(this.hasAttribute('clicked'))
	this.removeAttribute('clicked');
	else
	this.setAttribute('clicked','');
	}
	Mij.i = i;
	Mij.j = j;
	Mij.onclick = handleClick(M, N);
	Mi.push(Mij);
	}
	M.push(Mi);
	}

	var ul = document.createElement('ul');
	for(var i = 0; i < N; i++){
	var li = document.createElement('li');
	for(var j = 0; j < N; j++){
	li.appendChild(M[i][j]);
	}
	ul.appendChild(li);
	}
	grid.appendChild(ul);
	}
	function handleClick(M, N){
	return function(){
	var x = this.i;
	var y = this.j;
	M[x][y].toggleOn();
	M[x][y].toggleClick();
	for(var i = 0; i < N; i++){
	var a = i-this.i,
	b = y-y;
	setTimeout(function(i,y){
	M[i][y].toggleOn();
	}.bind(this,i,y),
	50Math.sqrt(aa + b*b)
	);

	}
	for(var j = 0; j < N; j++){
	var a = x-x,
	b = j-this.j;
	setTimeout(function(x,j){
	M[x][j].toggleOn();
	}.bind(this,x,j),
	50Math.sqrt(aa + b*b)
	);

	}
	}
	}
	render();
	</script>
	</body>
	</html>