|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sudoku</title>
|
|
<script type="text/javascript" src="sudoku.modified.js" async defer></script>
|
|
<style>
|
|
body {
|
|
|
|
background-color: #222;
|
|
}
|
|
|
|
.sudoku {
|
|
float: left;
|
|
color: hwb(0 20% 80%);
|
|
opacity: 0.90
|
|
}
|
|
|
|
.sudoku:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sudoku-dark {
|
|
background-color: #222 !important;
|
|
color: #ffffff;
|
|
opacity: 0.8
|
|
}
|
|
|
|
.sudoku-dark > .sudoku-field {
|
|
color: #333333;
|
|
}
|
|
|
|
.sudoku-dark > .sudoku-field-selected {
|
|
color: black;
|
|
}
|
|
|
|
.sudoku-dark > .grid-item {
|
|
border: none;
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.instructions {
|
|
opacity: 0.8;
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 10px;
|
|
text-align: left
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<pre class="instructions">
|
|
Refresh the page for different theme. The widgets are in two colors and multiple sizes available.
|
|
|
|
These keyboard shortcuts are available for active puzzle widget:
|
|
- `d` for deleting last filled field.
|
|
- `a` for auto resolving.
|
|
- `u` for unlimited undo's.
|
|
- `r` for a tip.
|
|
|
|
Developer notes:
|
|
- Widget size is defined by font size on the .soduku css class or as html
|
|
attribute to the component.
|
|
- You can use an existing puzzle by setting the puzzle attribute on a component.
|
|
It must contain at least 81 digits to be valid.
|
|
</pre>
|
|
<my-sudoku size="17" class="sudoku sudoku-dark" puzzle="
|
|
A nice generated puzzle.
|
|
It will parse, even with this
|
|
nonsense above it. Cool huh?
|
|
0 0 8 0 9 0 0 0 0
|
|
0 9 0 0 0 0 0 0 7
|
|
0 0 0 0 2 0 0 0 0
|
|
0 0 3 0 0 0 0 0 0
|
|
5 0 0 0 8 0 0 0 0
|
|
0 0 6 0 0 0 0 0 0
|
|
0 0 0 0 0 3 9 0 0
|
|
9 1 0 0 0 0 0 0 0
|
|
0 0 0 0 1 0 0 0 0
|
|
">
|
|
</my-sudoku>
|
|
<my-sudoku size="8" class="sudoku" puzzle="generate">
|
|
Small generated puzzle
|
|
</my-sudoku>
|
|
<my-sudoku class="sudoku" puzzle="generate">
|
|
Default generated puzzle
|
|
</my-sudoku>
|
|
<my-sudoku class="sudoku">
|
|
Default empty puzzle
|
|
</my-sudoku>
|
|
</body>
|
|
|
|
</html> |