<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="sudoku.js"></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;
}
</style>
</head>
<body>
<pre style="opacity: 0.8; color: #fff;margin:0;padding:10;text-align: left">
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>