Skip to content

Commit 587729f

Browse files
intrepidcoderintrepidcoder
committed
Improve user interface.
1 parent cd70091 commit 587729f

File tree

4 files changed

+101
-71
lines changed

4 files changed

+101
-71
lines changed

‎Sudoku.css

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
body {
2+
margin: 0px;
3+
}
4+
15
td
26
{
37
white-space: nowrap;
@@ -9,35 +13,60 @@ form {
913

1014
ul {
1115
list-style-type: none;
12-
margin: 10px 0px;
16+
}
17+
18+
a:visited {
19+
color: blue;
20+
}
21+
22+
a:active {
23+
color: red;
24+
}
25+
26+
#top_bar {
27+
background-color: #FFA;
28+
font-family: Verdana, Arial, sans-serif;
29+
font-size: 10pt;
30+
left: 0px;
31+
position: absolute;
32+
top: 0px;
33+
width: 100%;
34+
}
35+
36+
#top_bar ul {
37+
margin: 0px;
38+
padding: 0px;
39+
}
40+
41+
#top_bar li {
42+
float: left;
43+
margin: 3px 10px;
1344
}
1445

1546
#grid_table {
1647
border-collapse: collapse;
1748
border-spacing: 0px;
1849
float: left;
1950
height: 551px;
51+
margin: 22px 0px 0px 8px;
2052
width: 536px;
2153
}
2254

2355
#controls {
2456
border-style: solid;
2557
border-width: 2px;
58+
display: none;
2659
float: left;
27-
margin-left: 10px;
28-
width: 300px;
29-
}
30-
31-
#solving_status {
32-
cursor: help;
60+
margin: 8px 0px 0px 8px;
61+
width: 350px;
3362
}
3463

35-
#solution_controls {
36-
display: none;
64+
#controls ul {
65+
margin: 10px 0px;
3766
}
3867

39-
#guessing_tools {
40-
display: none;
68+
#solving_status {
69+
cursor: help;
4170
}
4271

4372
.cell {

‎Sudoku.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -279,15 +279,17 @@ function submitGivens() {
279279
var puzzle = new Puzzle(values);
280280

281281
if (!puzzle.hasSolution()) {
282-
alert("There is no solution for the inputted clues.");
282+
alert("There is no solution for the inputted values.");
283283
} else {
284284

285-
document.getElementById("submit_givens").style.display = "none";
286-
document.getElementById("paste_puzzle").style.display = "none";
287-
document.getElementById("solving_status").innerHTML = "Solving puzzle...";
288-
document.getElementById("solving_status").title = "Enter values to solve the puzzle.";
289-
document.getElementById("solution_controls").style.display = "block";
290-
document.getElementById("guessing_tools").style.display = "block";
285+
document.getElementById("top_bar").style.display = "none";
286+
// document.getElementById("submit_givens").style.display = "none";
287+
// document.getElementById("paste_puzzle").style.display = "none";
288+
// document.getElementById("solving_status").innerHTML = "Solving puzzle...";
289+
// document.getElementById("solving_status").title = "Enter values to solve the puzzle.";
290+
document.getElementById("controls").style.display = "block";
291+
document.getElementById("grid_table").style.marginTop = "8px";
292+
291293
cells.solution = puzzle.toString();
292294
for (var i = 0; i < 81; i++) {
293295
currentCell = cells[i];

‎help.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<html>
2+
<body style="margin: 25px;">
3+
<h1 style="font-size: 2.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; font-weight: bold; cursor: text; position: relative; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">sudoku</h1><p style="margin: 15px 0px; color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">This is a simple web page that provides tools to help solve sudoku puzzles.</p><p style="margin: 15px 0px; color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">To access the web page, go to <a href="http://delta42.github.io/sudoku" style="color: rgb(65, 131, 196); text-decoration: none;">http://delta42.github.io/sudoku</a>.</p><p style="margin: 15px 0px; color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">Note: This web page does not save any entered clues or values. Refreshing or navigating away from it will reset the page to its initial state without warning.</p><h2 style="margin: 1em 0px 15px; line-height: 1.7; font-size: 2em; padding: 0px; font-weight: bold; cursor: text; position: relative; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><a name="features" class="anchor" href="https://github.com/delta42/sudoku/blob/gh-pages/Readme.md#features" style="color: rgb(65, 131, 196); text-decoration: none; display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0px; left: 0px; bottom: 0px;"></a>Features:</h2><ul style="padding: 0px 0px 0px 30px; margin: 15px 0px; color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><li>Pencil marks</li><li>Cell highlighting based on pencil marks</li><li>Flag duplicate values</li><li>Show solution</li><li>Hints</li><li>Mark guesses for quick removal</li></ul><h2 style="margin: 1em 0px 15px; line-height: 1.7; font-size: 2em; padding: 0px; font-weight: bold; cursor: text; position: relative; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><a name="instructions" class="anchor" href="https://github.com/delta42/sudoku/blob/gh-pages/Readme.md#instructions" style="color: rgb(65, 131, 196); text-decoration: none; display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0px; left: 0px; bottom: 0px;"></a>Instructions:</h2><ol style="padding: 0px 0px 0px 30px; margin: 15px 0px; color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><li>To begin,<span class="Apple-converted-space"> </span><strong style="font-weight: bold;">enter some clues</strong>. Find a sudoku puzzle and input its clues using the number keys to insert values. The arrow keys, TAB, and ENTER can be used for navigation, while DELETE and BACKSPACE remove values. Alternatively enter clues using the Paste puzzle button.</li><li><strong style="font-weight: bold;">Submit the clues</strong><span class="Apple-converted-space"> </span>by clicking the Submit clues button. This sets the clues as read-only and enables several features.</li><li><strong style="font-weight: bold;">Solve the puzzle</strong><span class="Apple-converted-space"> </span>using pencil marks, cell highlighting, guesses, hints, and if all else fails, show solution.</li></ol><h2 style="margin: 1em 0px 15px; line-height: 1.7; font-size: 2em; padding: 0px; font-weight: bold; cursor: text; position: relative; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><a name="button-descriptions" class="anchor" href="https://github.com/delta42/sudoku/blob/gh-pages/Readme.md#button-descriptions" style="color: rgb(65, 131, 196); text-decoration: none; display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0px; left: 0px; bottom: 0px;"></a>Button descriptions:</h2><ul style="padding: 0px 0px 0px 30px; margin-top: 15px; margin-bottom: 0px !important; margin-right: 0px; margin-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><li><strong style="font-weight: bold;">Clear cells</strong>: Deletes all clues and values, resets pencil marks, and removes all highlighting. This resets the page to its initial state.</li><li><strong style="font-weight: bold;">Submit clues</strong>: Sets the entered values as read-only clues and submits them to the puzzle solver. Once the clues have been submitted, they cannot be changed. This generates a solution for the clues and as a result, enables hints, show solution, and guess removal.</li><li><strong style="font-weight: bold;">Paste puzzle</strong>: Allows values to be inputted from the clipboard. This overwrites existing values. Zeros can be used as placeholders for empty cells. Characters other than 0-9 are ignored. There must be exactly 81 numbers for this to work properly.</li><li><strong style="font-weight: bold;">1-9</strong>: Highlights all cells that do not have a pencil mark of 1-9 a pale green color. If the pencil marks have been updated, this can be used to easily determine which cells do not have a value of 1-9. Does not update automatically.</li><li><strong style="font-weight: bold;">Clear</strong>: Removes all cell highlighting.</li><li><strong style="font-weight: bold;">Enter values</strong>: When this option is selected, typing a number in a cell changes its value.</li><li><strong style="font-weight: bold;">Enter pencil marks</strong>: When this option is selected, typing a number in a cell toggles the corresponding pencil mark.</li><li><strong style="font-weight: bold;">Automatically remove pencil marks</strong>: When this option is enabled, entering a value in a cell removes that pencil mark from all of the cell's neighbors (cells in the same row, box, or column).</li><li><strong style="font-weight: bold;">Update</strong>: Changes all pencil marks so that they show the possible values that each cell could have. This overwrites existing pencil marks.</li><li><strong style="font-weight: bold;">Reset</strong>: Adds all pencil marks to empty cells. Allows solving the puzzle without the aid of pencil marks. This overwrites existing pencil marks.</li><li><strong style="font-weight: bold;">Show duplicates</strong>: When this option is enabled, neighboring cells with the same value are flagged red.</li><li><strong style="font-weight: bold;">Mark blank cells (color)</strong>: Marks all blank cells with a certain color. Use this to make guesses so that if the guess is incorrect, all values entered afterward can be removed easily.</li><li><strong style="font-weight: bold;">Delete cells marked (color)</strong>: Deletes all cells that have been marked a certain color. Does not affect cells marked a different color or pencil marks.</li><li><strong style="font-weight: bold;">Show solution</strong>: When this option is enabled, the puzzle's solution will be shown. Does not affect cell values or pencil marks.</li><li><strong style="font-weight: bold;">Hint</strong>: Gives a hint for cell that was last selected, up to three hints. Hints are based on the solution.</li></ul>
4+
</body>
5+
</html>

‎index.html

Lines changed: 47 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,33 @@
77
</head>
88

99
<body>
10-
<!-- <textarea id="hi">hi</textarea> -->
10+
<div id="top_bar">
11+
<ul>
12+
<li>To begin, find a sudoku puzzle and input its values below. When finished, <a href="javascript:void(0);" onclick="submitGivens();">begin solving</a>.</li>
13+
<li style="float: right;"><a href="help.html" target="_blank">Help/About</a></li>
14+
<li style="float: right;" id="paste_puzzle"><a href="javascript:void(0);" onclick="pastePuzzle();" title="Paste values to place into the puzzle. Note: this overwrites existing values.">Paste puzzle</a></li>
15+
</ul>
16+
</div>
17+
1118
<table id="grid_table">
12-
<tbody>
13-
<!-- <tr>
14-
<td class="cell cell_top cell_left">1</td>
15-
<td class="cell"><input type="text" value="1" /></td>
16-
</tr>
17-
<tr>
18-
<td class="candidates">123456789</td>
19-
<td class="candidates">-</td>
20-
</tr> -->
21-
</tbody>
19+
<tbody></tbody>
2220
</table>
21+
2322
<div id="controls">
2423
<form name="controls_form">
25-
<div class="small_header" id="solving_status" title="Enter the sudoku puzzle's clues and click SUBMIT CLUES to begin solving.">Entering Clues...</div>
26-
<ul>
24+
<!-- <div class="small_header" id="solving_status" title="Enter the sudoku puzzle's clues and click SUBMIT CLUES to begin solving.">Entering Clues...</div> -->
25+
<div class="small_header"><a href="help.html" target="_blank">Help/About</a></div>
26+
<div class="small_header"><a href="javascript:void(0);" title="Delete all cell values, reset pencil marks, and remove highlighting." onclick="clearCells();">Clear Cells</a></div>
27+
<!-- <ul>
2728
<li>
28-
<input type="button" name="update_pencilmarks" value="Clear cells" title="Delete all clues and values, reset pencil marks, and remove highlighting." onclick="clearCells();" />
29+
<input type="button" name="clear_cells" value="Clear cells" title="Delete all clues and values, reset pencil marks, and remove highlighting." onclick="clearCells();" />
2930
</li><li>
3031
<input type="button" name="submit_givens" id="submit_givens" value="Submit clues" title="Set all filled cells as read-only to enable guessing and hints." onclick="submitGivens();" />
3132
</li><li>
3233
<input type="button" name="paste_puzzle" id="paste_puzzle" value="Paste puzzle" title="Paste values to place into the puzzle. Note: this overwrites existing values." onclick="pastePuzzle();" />
3334
</li>
34-
</ul>
35+
</ul> -->
36+
3537
<div class="small_header">Cell Highlighting:</div>
3638
<ul>
3739
<li>
@@ -50,9 +52,6 @@
5052

5153
<div class="small_header">Pencil Marks:</div>
5254
<ul>
53-
<!-- <li>
54-
<input type="button" value="Hide candidates" onclick="toggleCandidateVisibility(this);" title="Hide possible cell values." />
55-
</li> -->
5655
<li>
5756
<input type="radio" name="write_mode" value="values" id="write_mode_values" title="Enter values by clicking on a cell and typing the desired value." checked="checked" selected="selected" />
5857
<label for="write_mode_values" title="Enter values by clicking on a cell and typing the desired value." >Enter values.</label>
@@ -77,43 +76,38 @@
7776
<li></li>
7877
</ul>
7978

80-
<div id="guessing_tools">
81-
<div class="small_header">Guessing tools:</div>
82-
<ul>
83-
<li>
84-
Mark blank cells:
85-
<select title="Mark all blank cells a unique color so they can be deleted easily. This is useful for making guesses." onchange="this.style.color = this.value.toLowerCase(); setBlankCells(this.value.toLowerCase());">
86-
<option selected="selected" style="color: black;">Black</option>
87-
<option style="color: blue;">Blue</option>
88-
<option style="color: red;">Red</option>
89-
<option style="color: green;">Green</option>
90-
<option style="color: purple;">Purple</option>
91-
</select>
92-
</li><li>
93-
Delete cells marked:
94-
<select title="Delete all cells marked a certain color." onchange="deleteColoredCells(this);">
95-
<option selected="selected">Select Color</option>
96-
<option style="color: blue;">Blue</option>
97-
<option style="color: red;">Red</option>
98-
<option style="color: green;">Green</option>
99-
<option style="color: purple;">Purple</option>
100-
</select>
101-
</li>
102-
</ul>
103-
</div>
104-
79+
<div class="small_header">Guessing tools:</div>
80+
<ul>
81+
<li>
82+
Mark blank cells:
83+
<select title="Mark all blank cells a unique color so they can be deleted easily. This is useful for making guesses." onchange="this.style.color = this.value.toLowerCase(); setBlankCells(this.value.toLowerCase());">
84+
<option selected="selected" style="color: black;">Black</option>
85+
<option style="color: blue;">Blue</option>
86+
<option style="color: red;">Red</option>
87+
<option style="color: green;">Green</option>
88+
<option style="color: purple;">Purple</option>
89+
</select>
90+
</li><li>
91+
Delete cells marked:
92+
<select title="Delete all cells marked a certain color." onchange="deleteColoredCells(this);">
93+
<option selected="selected">Select Color</option>
94+
<option style="color: blue;">Blue</option>
95+
<option style="color: red;">Red</option>
96+
<option style="color: green;">Green</option>
97+
<option style="color: purple;">Purple</option>
98+
</select>
99+
</li>
100+
</ul>
105101

106-
<div id="solution_controls">
107-
<div class="small_header">Solution/Hints:</div>
108-
<ul>
109-
<li>
110-
<input type="checkbox" name="show_solution" id="show_solution" title="Show the solution to the sudoku puzzle." onclick="showSolution();" />
111-
<label for="show_solution" title="Show the solution to the sudoku puzzle.">Show solution.<label>
112-
</li><li>
113-
<input type="button" name="get_hint" id="get_hint" value="Hint (3)" title="Give a hint for the selected cell. There are three hints remaining." onclick="getHint();" />
114-
</li>
102+
<div class="small_header">Solution/Hints:</div>
103+
<ul>
104+
<li>
105+
<input type="checkbox" name="show_solution" id="show_solution" title="Show the solution to the sudoku puzzle." onclick="showSolution();" />
106+
<label for="show_solution" title="Show the solution to the sudoku puzzle.">Show solution.<label>
107+
</li><li>
108+
<input type="button" name="get_hint" id="get_hint" value="Hint (3)" title="Give a hint for the selected cell. There are three hints remaining." onclick="getHint();" />
109+
</li>
115110
</ul>
116-
</div>
117111

118112
</form>
119113
</div>

0 commit comments

Comments
 (0)