Skip to content

Commit

Permalink
WIP: Bug in parser.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dor-sketch
Dor-sketch committed Jun 29, 2024
1 parent 471f632 commit 333ad7f
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 118 deletions.
15 changes: 0 additions & 15 deletions docs/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -620,21 +620,6 @@ body.dtark-theme td {
/* Pseudo-element for the board */
/* ------------------- */

#input-board, .board-example {
font-family: monospace; /* Use a monospace font */
width: calc(12ch + 5px); /* 9 characters wide plus a little extra for padding/border */
white-space: pre-wrap; /* Allows text to wrap */
overflow-wrap: break-word; /* Ensures long words can break and wrap to the next line */
resize: none; /* Optional: Prevents resizing */
border: 1px solid #000; /* Add a border for contrast */
min-height: 150px; /* Adjust as needed */
/* add spaces between chars */
letter-spacing: 3px;
margin:0;
padding:0;
padding-left: 5px;
padding-top: 3px;
}

.actions {
display: flex;
Expand Down
111 changes: 48 additions & 63 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,21 @@
<meta name="author" content="Dor Pascal">
<meta property="og:title" content="Snap & Solve: Turn Puzzle Images into Sudoku Answers" />
<meta property="og:image" content="https://dorpascal.com/AlphaSudokuGo/sudoku-solver.png" />
<meta property="og:description" content="Fastest Sudoku solver ever. Enter a board, click solve, and see the magic happen. Built by Dor." />
<meta property="og:description"
content="Fastest Sudoku solver ever. Enter a board, click solve, and see the magic happen. Built by Dor." />
<meta property="og:url" content="https://dorpascal.com/AlphaSudokuGo/" />
<meta property="og:type" content="website" />
<link rel="canonical" href="https://dorpascal.com/AlphaSudokuGo/" />
<meta name="description" content="Fastest Sudoku solver ever. Enter a board, click solve, and see the magic happen. Built by Dor." />
<meta name="description"
content="Fastest Sudoku solver ever. Enter a board, click solve, and see the magic happen. Built by Dor." />
<meta name="keywords" content="sudoku, solver, puzzle, game, board, image, recognition, AI, OCR, tesseract">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#368dd9">
<link rel="icon" href="./favicon.ico">
<link rel="preload" href="./css/styles.css" as="style">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/styles.css">
Expand Down Expand Up @@ -124,7 +128,8 @@ <h2>How to use the Interactive Board</h2>
<p>Try to copy and paste the hardest Sudoku puzzle ever (according to <a
href="https://www.telegraph.co.uk/news/science/science-news/9359579/Worlds-hardest-sudoku-can-you-crack-it.html"
target="_blank">The Telegraph</a>).</p>
<textarea class="board-example">8..........36......7..9.2...5...7.......457.....1...3...1....68..85...1..9....4..</textarea>
<textarea
class="board-example">8..........36......7..9.2...5...7.......457.....1...3...1....68..85...1..9....4..</textarea>
<br>
<button class="copy-btn"
data-text="8..........36......7..9.2...5...7.......457.....1...3...1....68..85...1..9....4.."
Expand All @@ -135,76 +140,56 @@ <h2>How to use the Interactive Board</h2>
</div>
</div>
</div>

<textarea id="input-board"></textarea>
<div class="actions">
<button class="reset-button" onclick="resetBoard()">
<i class="fas fa-sync-alt"></i>
</button>
<button onclick="solveSudoku()" class="solve-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</button>
</div>
<input id="input-board" type="text" placeholder="Enter board as one line...">
<button class="reset-button" onclick="resetBoard()">
<i class="fas fa-sync-alt"></i>
</button>
<button onclick="solveSudoku()" class="solve-button" aria-label="Solve Sudoku" id="solve-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</button>
</div>
</main>
<footer>
<p>Built By Dor ©
<script>document.write(new Date().getFullYear());</script>
</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js" ></script>
<script src="./js/sudoku.js" ></script>
<script src="./js/tutorial.js" ></script>
<script src="./js/parser.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>
<script src="./js/sudoku.js"></script>
<script src="./js/tutorial.js"></script>
<script>
const fileInput = document.getElementById('fileInput');
const themeToggle = document.getElementById('theme-toggle');
const tutorialPopup = document.getElementById('tutorial-popup');
const fileInput = document.getElementById('fileInput');
const themeToggle = document.getElementById('theme-toggle');
const tutorialPopup = document.getElementById('tutorial-popup');

function toggleTheme() {
themeToggle.classList.toggle('toggle-on');
document.body.classList.toggle('dark-theme');
}
function toggleTheme() {
themeToggle.classList.toggle('toggle-on');
document.body.classList.toggle('dark-theme');
}

function closePopup() {
tutorialPopup.style.display = 'none';
}
function closePopup() {
tutorialPopup.style.display = 'none';
}

themeToggle.addEventListener('click', toggleTheme);
fileInput.addEventListener('change', function () {
handleFileSelection(this.files);
});
themeToggle.addEventListener('click', toggleTheme);

document.addEventListener('drop', function (event) {
event.preventDefault();
handleFileSelection(event.dataTransfer.files);
});

document.addEventListener('dragover', function (event) {
event.preventDefault();
});

document.body.addEventListener('click', function (e) {
if (e.target.classList.contains('close-btn')) {
closePopup();
}
});
document.addEventListener('dragover', function (event) {
event.preventDefault();
});

document.getElementById('cancelCrop').addEventListener('click', function () {
document.getElementById('parser').style.display = 'none';
// kill all workers
if (typeof worker !== 'undefined') {
worker.terminate();
}
if (typeof cropper !== 'undefined') {
cropper.destroy();
}
resetUI();
});
document.body.addEventListener('click', function (e) {
if (e.target.classList.contains('close-btn')) {
closePopup();
}
});



function solveSudoku() {
const boardStr = readBoard();
Expand All @@ -223,8 +208,6 @@ <h2>How to use the Interactive Board</h2>
const solvedBoardStr = csp.getBoard();
console.log(solvedBoardStr);
updateBoard(solvedBoardStr);

celebrate();
}

function readBoard() {
Expand All @@ -249,7 +232,7 @@ <h2>How to use the Interactive Board</h2>
}

function resetBoard() {
/* if in the middle of solving or parsing, reset the board */
/* if in the middle of solving or parsing, reset the board */
updateBoard('.................................................................................');
}

Expand Down Expand Up @@ -287,10 +270,12 @@ <h2>How to use the Interactive Board</h2>
changeTheme();
}, 4000);
}
const script = document.createElement('script');
const script = document.createElement('script');
script.src = './src/sudoku_solver.js';
document.body.appendChild(script);
</script>
<script src="./js/parser.js"></script>

</body>

</html>
23 changes: 22 additions & 1 deletion docs/js/parser.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,26 @@
// const DEBUG = localStorage.getItem('debug') === 'true' || new URLSearchParams(window.location.search).get('debug') === 'true';
const DEBUG = false;

document.getElementById('cancelCrop').addEventListener('click', function () {
document.getElementById('parser').style.display = 'none';
// kill all workers
if (typeof worker !== 'undefined') {
worker.terminate();
}
if (typeof cropper !== 'undefined') {
cropper.destroy();
}
resetUI();
});
fileInput.addEventListener('change', function () {
handleFileSelection(this.files);
});

document.addEventListener('drop', function (event) {
event.preventDefault();
handleFileSelection(event.dataTransfer.files);
});

async function handleFileSelection(files) {
if (files.length > 0) {
console.log('Handling file selection');
Expand Down Expand Up @@ -73,7 +94,7 @@ let cropper;
document.getElementById('sudoku-board').style.display = 'grid';
document.getElementById('parser').style.display = 'none';
}
document.getElementsByClassName('actions')[0].style.display = 'block';
document.getElementById('solve-button').style.display = 'block';
document.getElementById('rotationSlider').style.display = 'none';
if (cropper) {
let croppedCanvas = cropper.getCroppedCanvas();
Expand Down
40 changes: 1 addition & 39 deletions docs/js/sudoku.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,43 +261,5 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
}
// Handle arrow key navigation and spinning
document.addEventListener('keydown', function (e) {
const { row, col } = getCurrentCellPosition();
const cell = document.querySelector(`.spinner[data-row='${row}'][data-col='${col}']`);

// Check if cell exists
if (!cell) {
console.error(`No cell found at row ${row}, col ${col}`);
return; // Exit the function if no cell is found
}

const wheel = cell.querySelector('.wheel');

// Check if wheel exists
if (!wheel) {
console.error(`No wheel found in cell at row ${row}, col ${col}`);
return; // Exit the function if no wheel is found
}

let currentTransform = parseInt(wheel.style.transform.split('(')[1].split('px')[0]);

if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
let delta = e.key === 'ArrowUp' ? -50 : 50;
let newTransform = currentTransform + delta;
let closestDigit = findClosestDigit(newTransform);
wheel.style.transform = `translateY(${digitTransforms[closestDigit]}px)`;
cell.dataset.value = closestDigit;
synchronizeInputBoard();
}

if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
e.preventDefault();
if (e.key === 'ArrowLeft') {
moveToPreviousCell(row, col);
} else if (e.key === 'ArrowRight') {
moveToNextCell(row, col);
}
}
});

0 comments on commit 333ad7f

Please sign in to comment.