How to design an interactive Sudoku grid in Racket? - scheme

Question

I'm nowing trying to create a Sudoku game in Drracket. I've already managed to design the functions randomly generating Sudoku and checking if the users' answers are correct. But now I have some troubles with designing the interactive Suduko grid.
I want to create a Sudoku grid allows the user click a cell to "activate" it (it also means the user can't fill numbers in wrong places) and fill it with a number (1-9) or delete the number. At the same time, the situation of every cell can be detected by the "check-answer funtion".
The data type I use to represent the a List of SudokuNumber
; the ElementState of the test right solution *TME means test element
(define TRS (list TME-44 TME-34 TME-24 TME-14 TME04 TME14 TME24 TME34 TME44
TME-43 TME-33 TME-23 TME-13 TME03 TME13 TME23 TME33 TME43
TME-42 TME-32 TME-22 TME-12 TME02 TME12 TME22 TME32 TME42
TME-41 TME-31 TME-21 TME-11 TME01 TME11 TME21 TME31 TME41
TME-40 TME-30 TME-20 TME-10 TME00 TME10 TME20 TME30 TME40
TME-4-1 TME-3-1 TME-2-1 TME-1-1 TME0-1 TME1-1 TME2-1 TME3-1 TME4-1
TME-4-2 TME-3-2 TME-2-2 TME-1-2 TME0-2 TME1-2 TME2-2 TME3-2 TME4-2
TME-4-3 TME-3-3 TME-2-3 TME-1-3 TME0-3 TME1-3 TME2-3 TME3-3 TME4-3
TME-4-4 TME-3-4 TME-2-4 TME-1-4 TME0-4 TME1-4 TME2-4 TME3-4 TME4-4))
where a SudokuNumber a structure
(define-struct SudokuNumber [number position])
*For the position, I created a coordinate system by defining the position of
the center cell is (0,0), so every cell has a unique position from (-4.-4) to (4,4)
My current idea is when the user change the situation of a cell, the situation of the corresponding element of the List of SudokuNumber is also changed. So the "check-answer funtion" can work by checking the list.
So now my only problem is how to design the interactive Sudoku grid.

Answer 1

If you are doing a GUI you could use a text-field% or a canvas%. Any way you pick I suggest you to create a widget, so that you can reuse it anywhere (and makes testing easier). For creating a new widget do something like:
(module sudoku
mzscheme
(provide (all-defined))
(require (lib "mred.ss" "mred"))
(define my-sudoku%
(class canvas%
(init-field parent)
(init-field callback)
(super-new (parent parent)(min-width 500)(horiz-margin 2)(vert-margin 2)
(paint-callback (lambda (cnv dc)(PaintCallback cnv dc)))
(style '(control-border vscroll hscroll)))
...
The text-field accepts a callback, so you could validate/reject the new input at that point... Use horizontal and vertical panels to create the grid.
If you go with the canvas% way (personally my favorite) you must implement everything, but you have more flexibility. In this case, the Paint event must redraw the whole sudoku table each time, the on click event will change the active cell (if applies) and the on-char event will validate the key pressed and update the values if appropiate. As an example, here there is an example of a widget made with canvas%, that allows you to draw with mouse. Modifying it to implement sudoku should be easy.
(define canva-pintable%
(class canvas%
(init-field parent) ; parent of this control
(init-field color) ; color to use for painting
(super-new (parent parent)(min-width 400)(min-height 400)(horiz-margin 2)(vert-margin 2)
; In this example we don't need a redraw function. For sudoku you should implement it, so that the window is redraw each time you move/resize the window.
(paint-callback (lambda (cnv dc)(void)))
(style '(control-border vscroll hscroll)))
(send (send this get-dc) set-pen color 1 'solid)
;receives an mouse-event%
(define/override (on-event event)
(cond ((send event dragging?) (send (send this get-dc) draw-point (send event get-x) (send event get-y)))
)
)
(define/override (on-char event)
(send (send this get-dc) clear)
)
)
)
(define myWindow (new frame% (label "Draw on me!")))
(define myCanva (new canva-pintable% (parent myWindow)(color "black")))
(send myWindow show #t)