forked from sent/waves
378 lines
18 KiB
HTML
378 lines
18 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<title>Sudoku</title>
|
|
|
|
<meta name="viewport" content="width=360, initial-scale=0.6, maximum-scale=0.6, user-scalable=yes">
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha512-NiWqa2rceHnN3Z5j6mSAvbwwg3tiwVNxiAQaaSMSXnRRDh5C2mk/+sKQRw8qjV1vN4nf8iK2a0b048PnHbyx+Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" integrity="sha512-S6hLYzz2hVBjcFOZkAOO+qEkytvbg2k9yZ1oO+zwXNYnQU71syCWhWtIk3UYDvUW2FCIwkzsTcwkEE58EZPnIQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
|
|
<style>
|
|
@import url('https://fonts.cdnfonts.com/css/segoe-ui-4');
|
|
body {
|
|
background:#fff;
|
|
margin:0;
|
|
padding:0;
|
|
font-family:Segoe UI, Open Sans, Ubuntu, Arial, sans-serif;
|
|
}
|
|
main {
|
|
width:352px;
|
|
margin:20px auto;
|
|
}
|
|
h1, p, h4 {
|
|
text-align:center;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
h4 {
|
|
margin-bottom:10px;
|
|
}
|
|
p {
|
|
height:20px;
|
|
line-height:20px;
|
|
font-size:18px;
|
|
}
|
|
table {
|
|
background:#fff;
|
|
margin:10px auto 20px auto;
|
|
padding:0;
|
|
|
|
}
|
|
table td {
|
|
width:36px;
|
|
height:36px;
|
|
border-collapse:collapse;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
table td input {
|
|
border:none;
|
|
width:34px;
|
|
height:34px;
|
|
font-size:18px;
|
|
text-align:center;
|
|
border:1px solid #333;
|
|
border-radius:3px;
|
|
color:#000;
|
|
transition-property: background, color;
|
|
transition-duration: 1s;
|
|
|
|
}
|
|
table td input.alt {
|
|
background:#ddd;
|
|
color:#000;
|
|
}
|
|
table td input.prepopulated{
|
|
color:#000 !important;
|
|
font-weight:bold;
|
|
opacity:1 !important;
|
|
-webkit-text-fill-color:#000;
|
|
}
|
|
table td input.playable {
|
|
color:#c30;
|
|
}
|
|
table td input.inerror,
|
|
table td input.prepopulated.inerror {
|
|
background:red !important;
|
|
color:#fff;
|
|
-webkit-text-fill-color:#fff;
|
|
}
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input[type=number] {
|
|
-moz-appearance:textfield;
|
|
}
|
|
p .error {
|
|
display:none;
|
|
color:red;
|
|
}
|
|
p .ok {
|
|
display:none;
|
|
}
|
|
p .notfilled, p .completed {
|
|
font-weight:bold;
|
|
display:none;
|
|
}
|
|
p .notfilled {
|
|
font-size:0.8em;
|
|
color:red;
|
|
}
|
|
p .completed {
|
|
color:#c30;
|
|
}
|
|
button {
|
|
margin:5px auto;
|
|
display:block;
|
|
font-size:1.1em;
|
|
background:#fff;
|
|
padding:5px;
|
|
border:1px solid #999;
|
|
border-radius:3px;
|
|
color:#666;
|
|
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="main">
|
|
<br>
|
|
<h1>SUDOKU</h1>
|
|
<p>
|
|
<span class="error">There are duplicates</span>
|
|
<span class="ok">No duplicates found!</span>
|
|
</p>
|
|
<p>
|
|
<span class="notfilled">There are still empty cells!</span>
|
|
<span class="completed">You're done!</span>
|
|
</p>
|
|
<table cellpadding="0" cellspacing="1" border="0" align="center">
|
|
<tr>
|
|
<td><input type="number" value="" maxlength="1" class="sector1 row1 column1 keyrow keycolumn keysector alt"></td>
|
|
<td><input type="number" value="3" maxlength="1" class="sector1 row1 column2 keycolumn alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector1 row1 column3 keycolumn alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector2 row1 column4 keycolumn keysector"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector2 row1 column5 keycolumn"></td>
|
|
<td><input type="number" value="6" maxlength="1" class="sector2 row1 column6 keycolumn"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector3 row1 column7 keycolumn keysector alt"></td>
|
|
<td><input type="number" value="7" maxlength="1" class="sector3 row1 column8 keycolumn alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector3 row1 column9 keycolumn alt"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="number" value="5" maxlength="1" class="sector1 row2 column1 keyrow alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector1 row2 column2 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector1 row2 column3 alt"></td>
|
|
<td><input type="number" value="3" maxlength="1" class="sector2 row2 column4"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector2 row2 column5"></td>
|
|
<td><input type="number" value="9" maxlength="1" class="sector2 row2 column6"></td>
|
|
<td><input type="number" value="1" maxlength="1" class="sector3 row2 column7 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector3 row2 column8 alt"></td>
|
|
<td><input type="number" value="8" maxlength="1" class="sector3 row2 column9 alt"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="number" value="" maxlength="1" class="sector1 row3 column1 keyrow alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector1 row3 column2 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector1 row3 column3 alt"></td>
|
|
<td><input type="number" value="4" maxlength="1" class="sector2 row3 column4"></td>
|
|
<td><input type="number" value="1" maxlength="1" class="sector2 row3 column5"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector2 row3 column6"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector3 row3 column7 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector3 row3 column8 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector3 row3 column9 alt"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="number" value="2" maxlength="1" class="sector4 row4 column1 keyrow keysector"></td>
|
|
<td><input type="number" value="4" maxlength="1" class="sector4 row4 column2"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector4 row4 column3"></td>
|
|
<td><input type="number" value="9" maxlength="1" class="sector5 row4 column4 alt keysector"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector5 row4 column5 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector5 row4 column6 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector6 row4 column7 keysector"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector6 row4 column8"></td>
|
|
<td><input type="number" value="7" maxlength="1" class="sector6 row4 column9"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="number" value="6" maxlength="1" class="sector4 row5 column1 keyrow"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector4 row5 column2"></td>
|
|
<td><input type="number" value="7" maxlength="1" class="sector4 row5 column3"></td>
|
|
<td><input type="number" value="2" maxlength="1" class="sector5 row5 column4 alt"></td>
|
|
<td><input type="number" value="5" maxlength="1" class="sector5 row5 column5 alt"></td>
|
|
<td><input type="number" value="3" maxlength="1" class="sector5 row5 column6 alt"></td>
|
|
<td><input type="number" value="9" maxlength="1" class="sector6 row5 column7"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector6 row5 column8"></td>
|
|
<td><input type="number" value="4" maxlength="1" class="sector6 row5 column9"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="number" value="9" maxlength="1" class="sector4 row6 column1 keyrow"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector4 row6 column2"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector4 row6 column3"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector5 row6 column4 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector5 row6 column5 alt"></td>
|
|
<td><input type="number" value="4" maxlength="1" class="sector5 row6 column6 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector6 row6 column7"></td>
|
|
<td><input type="number" value="3" maxlength="1" class="sector6 row6 column8"></td>
|
|
<td><input type="number" value="2" maxlength="1" class="sector6 row6 column9"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="number" value="" maxlength="1" class="sector7 row7 column1 keyrow keysector alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector7 row7 column2 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector7 row7 column3 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector8 row7 column4 keysector"></td>
|
|
<td><input type="number" value="4" maxlength="1" class="sector8 row7 column5"></td>
|
|
<td><input type="number" value="2" maxlength="1" class="sector8 row7 column6"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector9 row7 column7 alt keysector"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector9 row7 column8 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector9 row7 column9 alt"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="number" value="7" maxlength="1" class="sector7 row8 column1 keyrow alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector7 row8 column2 alt"></td>
|
|
<td><input type="number" value="5" maxlength="1" class="sector7 row8 column3 alt"></td>
|
|
<td><input type="number" value="6" maxlength="1" class="sector8 row8 column4"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector8 row8 column5"></td>
|
|
<td><input type="number" value="8" maxlength="1" class="sector8 row8 column6"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector9 row8 column7 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector9 row8 column8 alt"></td>
|
|
<td><input type="number" value="3" maxlength="1" class="sector9 row8 column9 alt"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="number" value="" maxlength="1" class="sector7 row9 column1 keyrow alt"></td>
|
|
<td><input type="number" value="9" maxlength="1" class="sector7 row9 column2 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector7 row9 column3 alt"></td>
|
|
<td><input type="number" value="7" maxlength="1" class="sector8 row9 column4"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector8 row9 column5"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector8 row9 column6"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector9 row9 column7 alt"></td>
|
|
<td><input type="number" value="6" maxlength="1" class="sector9 row9 column8 alt"></td>
|
|
<td><input type="number" value="" maxlength="1" class="sector9 row9 column9 alt"></td>
|
|
</tr>
|
|
</table>
|
|
<button class="checkit">How Am I doing?</button>
|
|
<button class="completegame">I'm Done!</button>
|
|
</div>
|
|
<script src="https://code.jquery.com/jquery-1.2.min.js"></script>
|
|
<script src="http://code.jquery.com/jquery-1.2.min.js"></script>
|
|
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.37.1/minified.js" integrity="sha512-0zxr+q1dkyVXy7SJTrE7TT50Sg4/oeu8lahBVgKxCRH+0RW/41tO3tCcxnHiGO0DrSzwEQJLw9URq6+b1KtMlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ie8/0.8.1/ie8.max.js" integrity="sha512-fM7eX8htmp02yDiNl+deWASJlK/RSCRovrMn8ip77fmatH9CvNDo10Zp1bDy/rU1wYb2igoxkBAL8FyzK5OkwA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ie-love/0.0.3/ie-love.min.js" integrity="sha512-NUs2v1jRqRP9SWOjq61dEADs61C+i/Nt+McdKzGxvQYfg6W5WOJ0cVKZ8YhN2JfTmLBqA9yEomrtmqeevP3pwQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/promise-polyfill/8.3.0/polyfill.min.js" integrity="sha512-310GmPyrxvjHYxcTy7HdjCN7EYL9ou4DldEiu1oABpNFUcEbPfcESbQ+4lZBIAsYb2KuKjJpvWaDxQUINj4I8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.43/polyfill.min.js" integrity="sha512-lvWiOP+aMKHllm4THsjzNleVuGOh0WGniJ3lgu/nvCbex1LlaQSxySUjAu/LTJw9FhnSL/PVYoQcckg1Q03+fQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js" integrity="sha512-qWVvreMuH9i0DrugcOtifxdtZVBBL0X75r9YweXsdCHtXUidlctw7NXg5KVP3ITPtqZ2S575A0wFkvgS2anqSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aight/2.1.1/aight.min.js" integrity="sha512-WfUru+mqweHgCi7htg6o59/EFOVnKIXRdIb9nBRGHR+zyd1LlhroHYBZU2tbOFXuKkkOboe9aKn3WovQPWDkjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE678.js" integrity="sha512-OZODcuzsAvwpKHWkfqvBqbnRXgMiS7OAqp1bRYoacfz8CsgzBGCDMTFkWlSEn7+6Zr2CxVvc0WmE97XnVYGN+A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE9.js" integrity="sha512-WLbdAGso4JLW7yB+bQ9xKCvkifceECA5akGzSrKmj4VuXoJ0XC0AaadA0CtbV7DSiLJjhS7SP1t54eVEZvHUSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/minifill/0.0.4/minifill.min.js" integrity="sha512-FufT7NOLLMHHY69P9J7aTJxONTS6vEFjoLp65H1d24r2zogwxaDxGCHP+pjgOwkmP4snQCmOO42vQ9XTappgGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-ie8-build/1.3.20/angular.min.js" integrity="sha512-Q0K4ZvRzeYTatSJnS5wjzcs9mzlkKotLInm6SjyjKKVfaV4P8f37yyPncw3TKI4LXswdP9lRxrGIXURFVTfi7g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js" integrity="sha512-wGcZXj/wGy0PrK1PUJpABds0CNVMN5FOvx6RJ4VFX6d1cP21LHdn32pqqHZxnlAyTY3MN6agJQnV/RkWiOTZzw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js" integrity="sha512-lbO95HE52QWwrDVEaDJmW9Xr8UIfMpRFT3akB8ett7lGfWsrGKz07L6wfwnF3KJ3T4a8cZupAKoI9Q2jH+0QIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
//loops through board and finds pre-populated cells and locks them
|
|
$('input').each(function() {
|
|
var prePopVal = $(this).val();
|
|
if (prePopVal > 0) {
|
|
$(this).addClass('prepopulated').attr('disabled','disabled');
|
|
} else {
|
|
$(this).addClass('playable');
|
|
}
|
|
});
|
|
//Prevents you from entering anything other than a number between 1-9
|
|
$('input').keyup(function(e) {
|
|
$(this).val($(this).val().replace(/[^1-9\.]/g,''));
|
|
var val = $(this).val();
|
|
var valLength = val.length;
|
|
var maxCount = $(this).attr('maxlength');
|
|
if(valLength>maxCount){
|
|
$(this).val($(this).val().substring(0,maxCount));
|
|
}
|
|
$(this).blur();
|
|
});
|
|
//"how Am I doing?" Button, fires the row, column and sector checkers
|
|
$('.checkit').click(function() {
|
|
checkRows();
|
|
checkColumns();
|
|
checkSectors();
|
|
});
|
|
//"Complete game" Button: First checks to see if all the cells are filled, then checks for duplicates
|
|
$('.completegame').click(function() {
|
|
var empty = $('input').filter(function() {
|
|
return this.value === '';
|
|
});
|
|
if(empty.length) {
|
|
$('.notfilled').show();
|
|
setTimeout( function() {
|
|
$('.notfilled').fadeOut();
|
|
}, 1000 );
|
|
} else {
|
|
$('.notfilled').hide();
|
|
checkRows();
|
|
checkColumns();
|
|
checkSectors();
|
|
if(!$('.error').hasClass('banana')) {
|
|
$('.completed').show();
|
|
}
|
|
}
|
|
});
|
|
//Row Checker function, fires the dupes(); function for all rows
|
|
var checkRows = function(sectionToCheck) {
|
|
$('.keyrow').each(function() {
|
|
var thisRow = $(this).attr('class').split(' ')[1];
|
|
var sectionToCheck = '.'+thisRow;
|
|
dupes(sectionToCheck);
|
|
});
|
|
}
|
|
//Column Checker function, fires the dupes(); function for all columns
|
|
var checkColumns = function(sectionToCheck) {
|
|
$('.keycolumn').each(function() {
|
|
var thisColumn = $(this).attr('class').split(' ')[2];
|
|
var sectionToCheck = '.'+thisColumn;
|
|
dupes(sectionToCheck);
|
|
});
|
|
}
|
|
//Sector Checker function, fires the dupes(); function for all sectors
|
|
var checkSectors = function(sectionToCheck) {
|
|
$('.keysector').each(function() {
|
|
var thisSector = $(this).attr('class').split(' ')[0];
|
|
var sectionToCheck = '.'+thisSector;
|
|
dupes(sectionToCheck);
|
|
});
|
|
}
|
|
//This is the main function that looks for all dupes in columns, rows and sectors
|
|
var dupes = function(sectionToCheck) {
|
|
var sectionValues = [];
|
|
var sectionValues = $(sectionToCheck).map(function() {
|
|
return this.value;
|
|
}).get();
|
|
sectionValues = sectionValues.filter(Number);
|
|
function hasDuplicate(arr) {
|
|
var i = arr.length, j, val;
|
|
|
|
while (i--) {
|
|
val = arr[i];
|
|
j = i;
|
|
while (j--) {
|
|
if (arr[j] === val) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
if (hasDuplicate(sectionValues)) {
|
|
$('.error').addClass('banana').show();
|
|
$('.ok').hide();
|
|
$('.completed').hide();
|
|
$(sectionToCheck).addClass('inerror');
|
|
setTimeout( function() {
|
|
$(sectionToCheck).removeClass('inerror');
|
|
$('.error').removeClass('banana').fadeOut();
|
|
}, 2000 );
|
|
} else {
|
|
if(!$('.error').hasClass('banana')) {
|
|
$('.ok').show();
|
|
}
|
|
setTimeout( function() {
|
|
$('.ok').fadeOut();
|
|
}, 2000 );
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |