adamjedlicka · June 21, 2018 16:36
diff --git a/sudoku.html b/sudoku.html
 <head>
    <meta charset="UTF-8">

    <script src="http://unpkg.com/vue"></script>
 </head>

 <body>

    <div id="app">

        <div id="sudoku">
            <div class="row" v-for="(row, i) in sudoku" :key="i">
                <span class="col" v-for="(col, j) in row" :key="j">
                    <input type="text" v-model.number="sudoku[i][j]">
                </span>
            </div>
        </div>

        <br>

        <div>
            <button @click="solve">
                Vyřešit
            </button>

            <button @click="clear">
                Vyčistit
            </button>
        </div>

    </div>

    <script>
        new Vue({
            el: '#app',

            data() {
                return {
                    sudoku: [],
                }
            },

            mounted() {
                for (let i = 0; i < 9; i++) {
                    this.sudoku.push(new Array(9))

                    for (let j = 0; j < 9; j++) {
                        this.sudoku[i][j] = ''
                    }
                }
            },

            methods: {
                solve() {
                    let res = this._solve(0, 0)
                    this.$forceUpdate()
                    if (res == false) {
                        alert('Nelze vyřešit!')
                    }
                },

                clear() {
                    for (let i = 0; i < 9; i++) {
                        for (let j = 0; j < 9; j++) {
                            this.sudoku[i][j] = ''
                        }
                    }

                    this.$forceUpdate()
                },

                _solve(row, col) {
                    if (this.sudoku[row][col] != '') {
                        return this._tryNext(row, col)
                    }

                    for (let val = 1; val < 10; val++) {
                        this.sudoku[row][col] = val

                        if (this._checkAll(row, col) && this._tryNext(row, col)) {
                            return true
                        }

                        this.sudoku[row][col] = ''
                    }

                    return false
                },

                _tryNext(row, col) {
                    if (row == 8 && col == 8) {
                        return true
                    }

                    if (col == 8) {
                        return this._solve(row + 1, 0)
                    }

                    return this._solve(row, col + 1)
                },

                _checkAll(row, col) {
                    return this._checkRow(row, col) && this._checkCol(row, col) && this._checkSquare(row, col)
                },

                _checkRow(row, col) {
                    return this._check(row, 0, row + 1, 9)
                },

                _checkCol(row, col) {
                    return this._check(0, col, 9, col + 1)
                },

                _checkSquare(row, col) {
                    let fromRow = Math.floor(row / 3) * 3
                    let fromCol = Math.floor(col / 3) * 3

                    return this._check(fromRow, fromCol, fromRow + 3, fromCol + 3)
                },

                _check(fromRow, fromCol, toRow, toCol) {
                    let set = new Set();

                    for (let row = fromRow; row < toRow; row++) {
                        for (let col = fromCol; col < toCol; col++) {
                            let val = this.sudoku[row][col]

                            if (val != '' && set.has(val)) {
                                return false
                            }

                            set.add(val)
                        }
                    }

                    return true
                },
            }
        })
    </script>

    <style>
        input {
            width: 3em;
            height: 3em;
            text-align: center;
            border: 1px solid gray;
        }
    </style>

 </body>
	<head>
	<meta charset="UTF-8">

	<script src="http://unpkg.com/vue"></script>
	</head>

	<body>

	<div id="app">

	<div id="sudoku">
	<div class="row" v-for="(row, i) in sudoku" :key="i">
	<span class="col" v-for="(col, j) in row" :key="j">
	<input type="text" v-model.number="sudoku[i][j]">
	</span>
	</div>
	</div>

	<br>

	<div>
	<button @click="solve">
	Vyřešit
	</button>

	<button @click="clear">
	Vyčistit
	</button>
	</div>

	</div>

	<script>
	new Vue({
	el: '#app',

	data() {
	return {
	sudoku: [],
	}
	},

	mounted() {
	for (let i = 0; i < 9; i++) {
	this.sudoku.push(new Array(9))

	for (let j = 0; j < 9; j++) {
	this.sudoku[i][j] = ''
	}
	}
	},

	methods: {
	solve() {
	let res = this._solve(0, 0)
	this.$forceUpdate()
	if (res == false) {
	alert('Nelze vyřešit!')
	}
	},

	clear() {
	for (let i = 0; i < 9; i++) {
	for (let j = 0; j < 9; j++) {
	this.sudoku[i][j] = ''
	}
	}

	this.$forceUpdate()
	},

	_solve(row, col) {
	if (this.sudoku[row][col] != '') {
	return this._tryNext(row, col)
	}

	for (let val = 1; val < 10; val++) {
	this.sudoku[row][col] = val

	if (this._checkAll(row, col) && this._tryNext(row, col)) {
	return true
	}

	this.sudoku[row][col] = ''
	}

	return false
	},

	_tryNext(row, col) {
	if (row == 8 && col == 8) {
	return true
	}

	if (col == 8) {
	return this._solve(row + 1, 0)
	}

	return this._solve(row, col + 1)
	},

	_checkAll(row, col) {
	return this._checkRow(row, col) && this._checkCol(row, col) && this._checkSquare(row, col)
	},

	_checkRow(row, col) {
	return this._check(row, 0, row + 1, 9)
	},

	_checkCol(row, col) {
	return this._check(0, col, 9, col + 1)
	},

	_checkSquare(row, col) {
	let fromRow = Math.floor(row / 3) * 3
	let fromCol = Math.floor(col / 3) * 3

	return this._check(fromRow, fromCol, fromRow + 3, fromCol + 3)
	},

	_check(fromRow, fromCol, toRow, toCol) {
	let set = new Set();

	for (let row = fromRow; row < toRow; row++) {
	for (let col = fromCol; col < toCol; col++) {
	let val = this.sudoku[row][col]

	if (val != '' && set.has(val)) {
	return false
	}

	set.add(val)
	}
	}

	return true
	},
	}
	})
	</script>

	<style>
	input {
	width: 3em;
	height: 3em;
	text-align: center;
	border: 1px solid gray;
	}
	</style>

	</body>