adrien/Sudoku
adrien/Sudoku
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

V1

Browse Source
This commit is contained in:
Adrien MALINGREY 2020-09-04 20:17:03 +02:00
parent 55f5546271
commit 99646d3175
5 changed files with 244 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
dev.html Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

49
index.html Normal file
View 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
View 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
View 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;
}