7
retoor
3d

Progress on my sudoku application goes well. Damn, what is javascript fantastic. While the code of the previous version that I posted here was alright I did decide that i want to split code and html elements after all. I have now a puzzle class doing all resolving / validating and when a field is selected or changed, it emits an event where the html elements are listening to. It also keeps all states. So, that's the model. puzzle.get(0,1).value = 4 triggers an update event. It also tracks selection of users because users selecting fields is part of the game. I can render full featured widgets with a one liner. Dark mode and light mode are supported and size is completely configurable by changing font-size and optional padding. So far, painless. BUT: i did encounter some stuff that works under a CSS class, but not if I do element.style.* =. Made me crazy because I didn't expect that.

Comments
  • 1
    Hovering over a widget will light it up btw. 20% clearer
  • 1
    With field selection. White bg, bit older version. Invalid validation is broken here. Should be a red number
  • 1
    maybe add temporary numbers, like you can note down in a cell the possible numbers in it.

    For more advanced sudoku that helps a lot to keep track.
  • 0
    @Grumm yes, the small numbers in the corner! I already exactly know how to do that. So small numbers in the corner, sorted by value and last inputted number is the big number. It can also select three / four fields at the same time and you can push one digit and all those fields will be filled with that. It supports the futures the professional guys use on youtube.

    Thanks for input. More ideas?
  • 2
    Generator of extra hard puzzles written in C. This is a terminal application. This application runs while generating puzzles the web server where the html frontend runs on. The idea is to render the generated results live using the widgets i've build. Now it has an live text page that refreshes ever second
  • 0
    Just thinking about making something like that with html/css/js makes me want to vomit! 😂

    I‘m glad that you are more resilient than me!
  • 1
    @retoor How come your complexity is so high for only 400 games ?
  • 1
    @Grumm that's for one game. It's the amount of steps taken to solve that puzzle. It's a puzzle that took more than ten minutes to generate. I have doubts too, but, in some other post I made you can see how much different valid combos there are. It's a number I can't even pronounce. The amount of valid puzzles vs invalid is a fraction. Still it's possible a specific puzzle really sucks for this algorithm. Mines uses logic with brute force as fallback. Chatgpt 4o crashes on these puzzles providing a screenshot from timeout ipython resolve process using bruteforce technique and the old one just gives a wrong answer for these puzzles within a second. Brute force psuedo:
    solve()
    var f = get_empty_field{}
    If(!f)
    Return true
    I = 1
    While(I!=10)
    // Set field value to I
    If(Solve())
    return true
    I++
    // set field value empty
    return false
    * typed on phone, that's why strange casing
  • 1
    Are you using web components?
  • 1
    @AlgoRythm nope, tried once. Didn't really like it back then. I gonna add the CSS to the javascript so it's a one file library. Still have to find a nice way to do that. The complete css is only 25 lines or so
  • 1
    @retoor hooking into the DOM like that is pretty nice. I make all my things like these web components these days. I’d implore another try and perhaps a different approach!
  • 0
    @AlgoRythm I gonna try to extend HTMLElement and use customElements.define to make a html tag from it. So soon it's possible to do: <sudoku size="9" editable="true">{{the puzzle in text 0 to 9's. 81 numbers}}</sudoku>. 0 are free fields. I made it read 81 digits, all other stuff it sees, it ignores. So you can copy and pase from anywhere. I still have no solution for CSS tho. My stuff didn't work correctly when I applied it on element.style for some reason. I prefer not to have an external stylesheet
  • 1
    @retoor is this by choice ? Why not attempt to create an actual solver algorithm that uses propagation and search techniques ? Using the rules to do it faster instead of brute force.
  • 1
    @Grumm brute force is the fallback when the logic gets stuck. I just added some logic - going to field with most neighbors first and filling in the most common value. If there are many fives, it will try to find one first, just like a human would do. It's often thousand times faster. In rare cases it's slower.

    Brute force does actually solve most puzzles just fine. I'm just trying to get the ones that aren't easy, that's why generating so much.

    Slowly I'm adding logic to my solver. XWinging and stuff. For now it's fine and will continue on frontend. Want to implement the small numbers in corner
  • 1
    @retoor It is great already that you make a solver.

    But can I ask why ?

    Isn't the application just starting from a valid solved sudoku and then you just hide numbers based on the difficulty ?
  • 0
    @Grumm how to start from a valid sudoku if you have to generate one first? They don't grow on trees. I generate empty sudoku's, add around 17 fields (around 17 puzzles get only one solution) with random values and then I apply the solver to validate the puzzle and check how hard it is based on time it took
  • 2
    It generates 1000 puzzles in 44ms
  • 1
    @retoor CSS sandboxing is both a blessing and a curse. A style sheet is not a bad thing though. A separate file is easily cached, you’re missing out on that performance!
  • 1
    @AlgoRythm haha, be aware the the user's of my project and all sites it will run on is completely fictive. I have too much fantasy
Add Comment