<!DOCTYPE html>

<html>
<head>
<title>Number Place</title>
<meta name="viewport" content="width=285px" />
<style type="text/css">
body{
margin:0;
padding:0;
}
div{
margin:0;
padding:0;
}
#header{
margin:0 auto;
padding:0;
width:283px;
}
#main{
margin:0 auto;
padding:0;
width:283px;
}
#footer{
margin:0 auto;
padding:40px 0 0 0;
width:283px;
}
#level{
width:100px;
height:30px;
margin:0;
padding:0;
font-family:'MS PMincho',serif;
font-size:16px;
}
#header input{
width:120px;
height:30px;
margin:2px;
padding:0;
float:left;
font-family:Arial,sans-serif;
font-size:20px;
line-height:1em;
letter-spacing:1px;
}
h1{
margin:10px;
padding:0;
width:200px;
clear:both;
font-family:Arial,sans-serif;
font-weight:normal;
font-size:24px;
line-height:1em;
letter-spacing:1px;
}
h2{
margin:10px;
padding:0;
width:264px;
float:left;
font-family:'MS PMincho',serif;
font-size:16px;
font-weight:normal;
line-height:1.2em;
letter-spacing:1px;
}
table{
margin:0;
padding:0;
border-collapse:collapse;
}
td{
width:30px;
height:30px;
margin:0;
padding:0;
border:1px solid black;
text-align:center;
vertical-align:center;
font-family:serif;
font-size:24px;
line-height:1em;
}
tr:nth-child(1) td{
border-top:2px solid black;
}
tr:nth-child(3) td,tr:nth-child(6) td,tr:nth-child(9) td{
border-bottom:2px solid black;
}
tr td:nth-child(1){
border-left:2px solid black;
}
tr td:nth-child(3),tr td:nth-child(6),tr td:nth-child(9){
border-right:2px solid black;
}
td.red{
color:black;
background-color:#fdd;
font-family:'Arial',sans-serif;
}
td.correct{
background-color:#8cc;
}
td.incorrect{
background-color:#c88;
}
td.current{
background-color:#fff;
}
#inputMan{
display:none;
}
#inputMan input{
width:20px;
height:20px;
margin:0;
padding:0;
float:left;
font-family:Arial,sans-serif;
font-size:14px;
line-height:1em;
letter-spacing:0;
}
</style>
<script type="text/javascript" src="nisequery.js"></script>
<script type="text/javascript">
"use strict";
let ans; // 答え
let cl; // クリックされたセルのDOM
function init(){
 $('td').map(function(td){
  td.className='';
  td.innerHTML='';
  td.onclick='';
 });
 let mtx=new Array(9);
 let prev=0;
 let nPrev=0;
 let oPrev=0;
 for(let j=0;j<9;j++){
  mtx[j]=new Array();
  for(let i=0;i<9;){
   let r=Math.ceil(Math.random()*9);
   let bOk=false;
   switch(j){
   case 0:
    if(mtx[0].indexOf(r)==-1){
     bOk=true;
    }
    break;
   case 1:
    if(mtx[1].indexOf(r)==-1){
     if(mtx[0][i-(i%3)+0] != r && mtx[0][i-(i%3)+1] != r && mtx[0][i-(i%3)+2] != r){
      bOk=true;
     }
    }
    break;
   case 2:
    if(mtx[2].indexOf(r)==-1){
     if(mtx[1][i-(i%3)+0] != r && mtx[1][i-(i%3)+1] != r && mtx[1][i-(i%3)+2] != r){
      if(mtx[0][i-(i%3)+0] != r && mtx[0][i-(i%3)+1] != r && mtx[0][i-(i%3)+2] != r){
       bOk=true;
      }
     }
    }
    break;
   case 3:
    if(mtx[3].indexOf(r)==-1){
     if(mtx[2][i] != r){
      if(mtx[1][i] != r){
       if(mtx[0][i] != r){
        bOk=true;
       }
      }
     }
    }
    break;
   case 4:
    if(mtx[4].indexOf(r)==-1){
     if(mtx[3][i-(i%3)+0] != r && mtx[3][i-(i%3)+1] != r && mtx[3][i-(i%3)+2] != r){
      if(mtx[2][i] != r){
       if(mtx[1][i] != r){
        if(mtx[0][i] != r){
         bOk=true;
        }
       }
      }
     }
    }
    break;
   case 5:
    if(mtx[5].indexOf(r)==-1){
     if(mtx[4][i-(i%3)+0] != r && mtx[4][i-(i%3)+1] != r && mtx[4][i-(i%3)+2] != r){
      if(mtx[3][i-(i%3)+0] != r && mtx[3][i-(i%3)+1] != r && mtx[3][i-(i%3)+2] != r){
       if(mtx[2][i] != r){
        if(mtx[1][i] != r){
         if(mtx[0][i] != r){
          bOk=true;
         }
        }
       }
      }
     }
    }
    break;
   case 6:
    if(mtx[6].indexOf(r)==-1){
     if(mtx[5][i] != r){
      if(mtx[4][i] != r){
       if(mtx[3][i] != r){
        if(mtx[2][i] != r){
         if(mtx[1][i] != r){
          if(mtx[0][i] != r){
           bOk=true;
          }
         }
        }
       }
      }
     }
    }
    break;
   case 7:
    if(mtx[7].indexOf(r)==-1){
     if(mtx[6][i-(i%3)+0] != r && mtx[6][i-(i%3)+1] != r && mtx[6][i-(i%3)+2] != r){
      if(mtx[5][i] != r){
       if(mtx[4][i] != r){
        if(mtx[3][i] != r){
         if(mtx[2][i] != r){
          if(mtx[1][i] != r){
           if(mtx[0][i] != r){
            bOk=true;
           }
          }
         }
        }
       }
      }
     }
    }
    break;
   case 8:
    if(mtx[8].indexOf(r)==-1){
     if(mtx[7][i-(i%3)+0] != r && mtx[7][i-(i%3)+1] != r && mtx[7][i-(i%3)+2] != r){
      if(mtx[6][i-(i%3)+0] != r && mtx[6][i-(i%3)+1] != r && mtx[6][i-(i%3)+2] != r){
       if(mtx[5][i] != r){
        if(mtx[4][i] != r){
         if(mtx[3][i] != r){
          if(mtx[2][i] != r){
           if(mtx[1][i] != r){
            if(mtx[0][i] != r){
             bOk=true;
            }
           }
          }
         }
        }
       }
      }
     }
    }
    break;
   }
   if(bOk){
     mtx[j].push(r);
     prev=i;
     nPrev=0;
     i++;
   }else{
    if(prev==i){
     if(nPrev>3){ // trigger back-tracking!
      i=0;
      mtx[j]=new Array();
      if(oPrev>100){
       j=0;
       oPrev=0;
      }
      nPrev=0;
      oPrev++;
     }else{
      nPrev++;
     }
    }else{
     prev=i;
    }
   }
  }
 }
 // 答えをバックアップ
 ans=new Array(9);
 for(let j=0;j<9;j++){
  ans[j]=new Array();
  for(let i=0;i<9;i++){
   ans[j][i]=mtx[j][i];
  }
 }
 // ０で穴あけ
 for(let h=0;h<3;h++){
  for(let g=0;g<3;g++){
   let max=Math.ceil(Math.random()*3)+1;
   for(let l=0;l<max;l++){
    let j=Math.floor(Math.random()*3);
    let i=Math.floor(Math.random()*3);
    mtx[h*3+j][g*3+i]=0;
   }
  }
 }
 // 解決器
/*
 for(let j=0;j<9;j++){
  mtx[j]=new Array();
  for(let i=0;i<9;){
   let r=Math.ceil(Math.random()*9);
   let bOk=false;
   switch(j){
   case 0:
    if(mtx[0].indexOf(r)==-1){
     bOk=true;
    }
    break;
   case 1:
    if(mtx[1].indexOf(r)==-1){
     if(mtx[0][i-(i%3)+0] != r && mtx[0][i-(i%3)+1] != r && mtx[0][i-(i%3)+2] != r){
      bOk=true;
     }
    }
    break;
   case 2:
    if(mtx[2].indexOf(r)==-1){
     if(mtx[1][i-(i%3)+0] != r && mtx[1][i-(i%3)+1] != r && mtx[1][i-(i%3)+2] != r){
      if(mtx[0][i-(i%3)+0] != r && mtx[0][i-(i%3)+1] != r && mtx[0][i-(i%3)+2] != r){
       bOk=true;
      }
     }
    }
    break;
   case 3:
    if(mtx[3].indexOf(r)==-1){
     if(mtx[2][i] != r){
      if(mtx[1][i] != r){
       if(mtx[0][i] != r){
        bOk=true;
       }
      }
     }
    }
    break;
   case 4:
    if(mtx[4].indexOf(r)==-1){
     if(mtx[3][i-(i%3)+0] != r && mtx[3][i-(i%3)+1] != r && mtx[3][i-(i%3)+2] != r){
      if(mtx[2][i] != r){
       if(mtx[1][i] != r){
        if(mtx[0][i] != r){
         bOk=true;
        }
       }
      }
     }
    }
    break;
   case 5:
    if(mtx[5].indexOf(r)==-1){
     if(mtx[4][i-(i%3)+0] != r && mtx[4][i-(i%3)+1] != r && mtx[4][i-(i%3)+2] != r){
      if(mtx[3][i-(i%3)+0] != r && mtx[3][i-(i%3)+1] != r && mtx[3][i-(i%3)+2] != r){
       if(mtx[2][i] != r){
        if(mtx[1][i] != r){
         if(mtx[0][i] != r){
          bOk=true;
         }
        }
       }
      }
     }
    }
    break;
   case 6:
    if(mtx[6].indexOf(r)==-1){
     if(mtx[5][i] != r){
      if(mtx[4][i] != r){
       if(mtx[3][i] != r){
        if(mtx[2][i] != r){
         if(mtx[1][i] != r){
          if(mtx[0][i] != r){
           bOk=true;
          }
         }
        }
       }
      }
     }
    }
    break;
   case 7:
    if(mtx[7].indexOf(r)==-1){
     if(mtx[6][i-(i%3)+0] != r && mtx[6][i-(i%3)+1] != r && mtx[6][i-(i%3)+2] != r){
      if(mtx[5][i] != r){
       if(mtx[4][i] != r){
        if(mtx[3][i] != r){
         if(mtx[2][i] != r){
          if(mtx[1][i] != r){
           if(mtx[0][i] != r){
            bOk=true;
           }
          }
         }
        }
       }
      }
     }
    }
    break;
   case 8:
    if(mtx[8].indexOf(r)==-1){
     if(mtx[7][i-(i%3)+0] != r && mtx[7][i-(i%3)+1] != r && mtx[7][i-(i%3)+2] != r){
      if(mtx[6][i-(i%3)+0] != r && mtx[6][i-(i%3)+1] != r && mtx[6][i-(i%3)+2] != r){
       if(mtx[5][i] != r){
        if(mtx[4][i] != r){
         if(mtx[3][i] != r){
          if(mtx[2][i] != r){
           if(mtx[1][i] != r){
            if(mtx[0][i] != r){
             bOk=true;
            }
           }
          }
         }
        }
       }
      }
     }
    }
    break;
   }
   if(bOk){
     mtx[j][i]=r;
     prev=i;
     nPrev=0;
     i++;
   }else{
    if(prev==i){
     i=0;
     j=-1; // j to zero
     for(let n=0;n<9;n++){
      for(let m=0;m<9;m++){
       mtx[n][m]=bak[n][m];
      }
     }
     prev=0;
    }else{
     prev=i;
    }
   }
  }
 }
*/
 $('tr').map(function(tr,n){
  $(tr).children('td').map(function(td,m){
   if(mtx[n][m]==0){
    $(td).addClass('red');
    $(td).on('click',function(self){
     let cur=this;
     if(cl){
      $(cl).removeClass('current');
     }
     cl=cur;
     $(cur).addClass('current');
     $('#inputMan').css('display','block');
     $('#footer').css('display','none');
/*
     let val=prompt('1-9');
     if(val.match(/^[1-9]$/)){
      $(cur).html(val);
     }
*/
    });
   }else{
    $(td).html(mtx[n][m].toString(10));
   }
  });
 });
}
$(document).ready(init);
function check(){
 $('tr').map(function(tr,n){
  $(tr).children('td').map(function(td,m){
   if($(td).hasClass('red')){
    $(td).removeClass('correct');
    $(td).removeClass('incorrect');
    $(td).removeClass('current');
    if(td.innerHTML==ans[n][m].toString(10)){
     $(td).addClass('correct');
    }else{
     $(td).addClass('incorrect');
    }
   }
  });
 });
}
function uncheck(){
 $('tr').map(function(tr,n){
  $(tr).children('td').map(function(td,m){
   if($(td).hasClass('red')){
    $(td).removeClass('correct');
    $(td).removeClass('incorrect');
    $(td).removeClass('current');
   }
  });
 });
}
function input(n){
 $(cl).html(n);
 $(cl).removeClass('current');
 $('#inputMan').css('display','none');
 $('#footer').css('display','block');
}
</script>
</head>
<body draggable="true">
<div id="header">
<!--<input type="button" value="reload" onclick="location.reload()">-->
<input type="button" value="check" onclick="check()">
<input type="button" value="uncheck" onclick="uncheck()">
<h1>Number Place</h1>
</div> <!-- #header -->
<div id="main">
<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<div id="inputMan">
<input type="button" value="1" onclick="input(1)">
<input type="button" value="2" onclick="input(2)">
<input type="button" value="3" onclick="input(3)">
<input type="button" value="4" onclick="input(4)">
<input type="button" value="5" onclick="input(5)">
<input type="button" value="6" onclick="input(6)">
<input type="button" value="7" onclick="input(7)">
<input type="button" value="8" onclick="input(8)">
<input type="button" value="9" onclick="input(9)">
</div>
</div><!-- #main -->
<div id="footer"><a href=".">Top Page</a></div>
</body>
</html>