V1
This commit is contained in:
55
dev.html
Normal file
55
dev.html
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Sudoku</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
<script type="text/javascript" src="sudoku_dev.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Sudoku</h1>
|
||||||
|
</header>
|
||||||
|
<form id="sudokuForm">
|
||||||
|
<div>
|
||||||
|
<table id="gridTable" class="grid"></table>
|
||||||
|
<script>createGrid()</script>
|
||||||
|
</div>
|
||||||
|
<div id="helpDiv">
|
||||||
|
<fieldset id="helpFieldset">
|
||||||
|
<legend>Aide</legend>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="showAllowedValues" onclick="grid.forEach(box => showAllowedValuesOn(box))"/>
|
||||||
|
<label for="showAllowedValues">Indiquer les valeurs possibles pour chaque case</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="highlightSelect">Surligner les cases pouvant contenir un :</label>
|
||||||
|
<select id="highlightSelect" onchange="highlightAndTabOrder()">
|
||||||
|
<option></option>
|
||||||
|
<option>1</option>
|
||||||
|
<option>2</option>
|
||||||
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
<option>6</option>
|
||||||
|
<option>7</option>
|
||||||
|
<option>8</option>
|
||||||
|
<option>9</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button id="solveButton" type="button" onclick="solve()">Montrer la solution</button>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div>
|
||||||
|
<button id="clearButton" type="button" onclick="erase()">Effacer tout</button>
|
||||||
|
<button type="button" onclick="generateGrid()">Nouvelle partie</button>
|
||||||
|
<button id="customGridButton" type="button" onclick="customGrid()">Grille personnalisée</button>
|
||||||
|
</div>
|
||||||
|
Pour partager cette grille, copiez le lien suivant :<br/>
|
||||||
|
<div id="shareDiv">
|
||||||
|
<a id="shareLink" href="">malingrey.fr<br/>/sudoku/#<br/></a>
|
||||||
|
</div>
|
||||||
|
<script>loadGrid()</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
handmadepaper.png
Normal file
BIN
handmadepaper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
49
index.html
Normal file
49
index.html
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<title>Sudoku</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
<script type="text/javascript" src="sudoku.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Sudoku</h1>
|
||||||
|
</header>
|
||||||
|
<form id="sudokuForm">
|
||||||
|
<div>
|
||||||
|
<table id="gridTable" class="grid"></table>
|
||||||
|
<script>createGrid()</script>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div>
|
||||||
|
Surligner les cases pouvant contenir
|
||||||
|
</div>
|
||||||
|
<div id="highlightRadiosDiv">
|
||||||
|
<input type="radio" id="highlightRadio1" name="highlightRadio" onclick="highlight('1')"><label id="highlightLabel1" for="highlightRadio1">1</label>
|
||||||
|
<input type="radio" id="highlightRadio2" name="highlightRadio" onclick="highlight('2')"><label id="highlightLabel2" for="highlightRadio2">2</label>
|
||||||
|
<input type="radio" id="highlightRadio3" name="highlightRadio" onclick="highlight('3')"><label id="highlightLabel3" for="highlightRadio3">3</label>
|
||||||
|
<input type="radio" id="highlightRadio4" name="highlightRadio" onclick="highlight('4')"><label id="highlightLabel4" for="highlightRadio4">4</label>
|
||||||
|
<input type="radio" id="highlightRadio5" name="highlightRadio" onclick="highlight('5')"><label id="highlightLabel5" for="highlightRadio5">5</label>
|
||||||
|
<input type="radio" id="highlightRadio6" name="highlightRadio" onclick="highlight('6')"><label id="highlightLabel6" for="highlightRadio6">6</label>
|
||||||
|
<input type="radio" id="highlightRadio7" name="highlightRadio" onclick="highlight('7')"><label id="highlightLabel7" for="highlightRadio7">7</label>
|
||||||
|
<input type="radio" id="highlightRadio8" name="highlightRadio" onclick="highlight('8')"><label id="highlightLabel8" for="highlightRadio8">8</label>
|
||||||
|
<input type="radio" id="highlightRadio9" name="highlightRadio" onclick="highlight('9')"><label id="highlightLabel9" for="highlightRadio9">9</label>
|
||||||
|
<input type="radio" id="highlightRadioNone" name="highlightRadio" onclick="highlight(null)"><label for="highlightRadioNone">Effacer</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button id="clearButton" type="button" onclick="erase()">Effacer tout</button>
|
||||||
|
<button id="solveButton" type="button" onclick="solve()">Montrer la solution</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button type="button" onclick="generateGrid()">Nouvelle partie</button>
|
||||||
|
<button id="customGridButton" type="button" onclick="customGrid()">Grille personnalisée</button>
|
||||||
|
</div>
|
||||||
|
Pour partager cette grille, copiez le lien suivant :<br/>
|
||||||
|
<div id="shareDiv">
|
||||||
|
<a id="shareA" href="">malingrey.fr<br/>/sudoku/#<br/></a>
|
||||||
|
</div>
|
||||||
|
<script>loadGrid()</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
52
index.html.bak
Normal file
52
index.html.bak
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Sudoku</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
<script type="text/javascript" src="sudoku.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Sudoku</h1>
|
||||||
|
</header>
|
||||||
|
<form id="sudokuForm">
|
||||||
|
<div>
|
||||||
|
<table id="gridTable" class="grid"></table>
|
||||||
|
<script>createGrid()</script>
|
||||||
|
</div>
|
||||||
|
<div id="helpDiv">
|
||||||
|
<fieldset id="helpFieldset">
|
||||||
|
<legend>Aide</legend>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="showAllowedValues" onclick="grid.forEach(box => showAllowedValuesOn(box))"/>
|
||||||
|
<label for="showAllowedValues">Indiquer les valeurs possibles</label>
|
||||||
|
</div>
|
||||||
|
<label for="highlightSelect">Surligner les cases pouvant contenir :</label>
|
||||||
|
<select id="highlightSelect" multiple size="1" onclick="highlightAndTabOrder()">
|
||||||
|
<option>1</option>
|
||||||
|
<option>2</option>
|
||||||
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
<option>6</option>
|
||||||
|
<option>7</option>
|
||||||
|
<option>8</option>
|
||||||
|
<option>9</option>
|
||||||
|
</select>
|
||||||
|
<button id="solveButton" type="button" onclick="solve()">Montrer la solution</button>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div>
|
||||||
|
<button id="clearButton" type="button" onclick="erase()">Effacer tout</button>
|
||||||
|
<button type="button" onclick="generateGrid()">Nouvelle partie</button>
|
||||||
|
<button id="customGridButton" type="button" onclick="customGrid()">Grille personnalisée</button>
|
||||||
|
</div>
|
||||||
|
<div id="shareDiv">
|
||||||
|
Lien vers cette grille :<br/>
|
||||||
|
<a id="shareLink" href="">malingrey.fr<br/>/sudoku/?<br/></a>
|
||||||
|
</div>
|
||||||
|
<script>loadGrid()</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
88
style.css
Normal file
88
style.css
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
body {
|
||||||
|
/* Background pattern from Toptal Subtle Patterns */
|
||||||
|
background: url("handmadepaper.png");
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 1px 1px grey;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 0.5em;
|
||||||
|
row-gap: 0.5em;
|
||||||
|
margin: 1em auto;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"] {
|
||||||
|
margin-top: -1px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.disabled {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid td {
|
||||||
|
border: 2px solid black;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region td {
|
||||||
|
border: 1px solid grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid input {
|
||||||
|
width: 1.6em;
|
||||||
|
height: 1.6em;
|
||||||
|
font-size: 1.5em;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid input:enabled {
|
||||||
|
font-family: cursive;
|
||||||
|
color: darkblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid input:disabled {
|
||||||
|
color: black;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid input::placeholder {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unhighlighted:enabled {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlighted {
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
#shareDiv {
|
||||||
|
display: block;
|
||||||
|
line-height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#shareA {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.8em;
|
||||||
|
letter-spacing: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#highlightRadiosDiv {
|
||||||
|
column-gap: 0;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user