Improve game layout

icons/skins/default/tile_8.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" ry="2" fill="none"/><g stroke-width="3.1763" aria-label="8"><path d="m28.039 46.588q-5.9556-3.1639-8.6852-7.0722-3.7222-5.3352-3.7222-12.283 0-11.415 10.732-18.673 8.375-5.5833 22.147-5.5833 18.239 0 26.924 6.9482 8.7472 6.9482 8.7472 17.494 0 6.1417-3.4741 11.477-2.6056 3.9704-8.1889 7.6926 7.3824 3.5361 10.981 9.3676 3.6602 5.8315 3.6602 12.904 0 6.8241-3.1639 12.78-3.1019 5.8935-7.6926 9.1195-4.5287 3.2259-11.353 4.7148-6.762 1.5509-14.455 1.5509-14.455 0-22.085-3.412-7.6306-3.412-11.601-10.05t-3.9704-14.827q0-8.0028 3.7222-13.524 3.7222-5.5833 11.477-8.6232zm11.353-17.867q0 4.7148 2.9157 7.6306 2.9778 2.8537 7.8787 2.8537 4.3426 0 7.1343-2.8537t2.7917-7.3824q0-4.7148-2.9157-7.6306-2.9157-2.9778-7.4445-2.9778-4.5907 0-7.5065 2.9157-2.8537 2.8537-2.8537 7.4445zm-1.3648 39.145q0 6.0176 3.6602 9.8639 3.6602 3.7843 8.375 3.7843 4.5287 0 8.1269-3.8463 3.5982-3.9083 3.5982-9.8639 0-6.0176-3.6602-9.8639-3.5982-3.8463-8.375-3.8463-4.7148 0-8.2509 3.7222-3.4741 3.7222-3.4741 10.05z"/></g></svg>
+<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" ry="2" fill="none"/><g fill="#535353" stroke-width="3.1763" aria-label="8"><path d="m28.039 46.588q-5.9556-3.1639-8.6852-7.0722-3.7222-5.3352-3.7222-12.283 0-11.415 10.732-18.673 8.375-5.5833 22.147-5.5833 18.239 0 26.924 6.9482 8.7472 6.9482 8.7472 17.494 0 6.1417-3.4741 11.477-2.6056 3.9704-8.1889 7.6926 7.3824 3.5361 10.981 9.3676 3.6602 5.8315 3.6602 12.904 0 6.8241-3.1639 12.78-3.1019 5.8935-7.6926 9.1195-4.5287 3.2259-11.353 4.7148-6.762 1.5509-14.455 1.5509-14.455 0-22.085-3.412-7.6306-3.412-11.601-10.05t-3.9704-14.827q0-8.0028 3.7222-13.524 3.7222-5.5833 11.477-8.6232zm11.353-17.867q0 4.7148 2.9157 7.6306 2.9778 2.8537 7.8787 2.8537 4.3426 0 7.1343-2.8537t2.7917-7.3824q0-4.7148-2.9157-7.6306-2.9157-2.9778-7.4445-2.9778-4.5907 0-7.5065 2.9157-2.8537 2.8537-2.8537 7.4445zm-1.3648 39.145q0 6.0176 3.6602 9.8639 3.6602 3.7843 8.375 3.7843 4.5287 0 8.1269-3.8463 3.5982-3.9083 3.5982-9.8639 0-6.0176-3.6602-9.8639-3.5982-3.8463-8.375-3.8463-4.7148 0-8.2509 3.7222-3.4741 3.7222-3.4741 10.05z" fill="#535353"/></g></svg>

icons/skins/default/tile_mine.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" ry="2" fill="none"/><g transform="matrix(1.0346 0 0 1.0346 -1.7311 -1.7312)" fill="#eb0404" stroke="#870000" stroke-width="1.9331"><path d="m92.148 55.869c-0.626-0.939-1.482-1.519-2.568-1.739l-6.792-1.242c0.368-5.669-0.727-11.035-3.286-16.096l5.853-4.224c0.939-0.663 1.491-1.574 1.657-2.733 0.202-1.086-0.037-2.071-0.718-2.954l-0.469-0.718c-0.626-0.883-1.537-1.427-2.733-1.629-1.031-0.166-2.016 0.092-2.954 0.773l-5.632 4.059c-3.81-4.215-8.347-7.206-13.611-8.973l1.27-7.731c0.202-1.104-0.037-2.126-0.718-3.065-0.626-0.883-1.482-1.427-2.568-1.629l-0.856-0.166c-1.104-0.147-2.126 0.092-3.065 0.718-0.884 0.681-1.427 1.565-1.629 2.65l-1.16 7.427c-2.503-0.221-4.951-0.175-7.344 0.138-1.362 0.055-2.641 0.294-3.838 0.718-0.626 0.147-1.224 0.331-1.795 0.552l-3.451-7.51c-0.46-0.994-1.215-1.693-2.264-2.098-1.031-0.423-2.043-0.405-3.037 0.055l-0.773 0.414c-0.994 0.405-1.73 1.16-2.209 2.264-0.368 1.031-0.313 2.043 0.166 3.037l3.506 7.648c-0.202 0.11-0.405 0.249-0.607 0.414-5.264 3.681-9.019 8.31-11.265 13.888l-6.958-1.546c-1.086-0.276-2.098-0.074-3.037 0.607-0.994 0.534-1.592 1.344-1.795 2.43l-0.246 0.772c-0.203 1.104-0.018 2.172 0.552 3.203 0.626 0.883 1.491 1.463 2.595 1.739l6.626 1.546c-0.736 5.835 0.101 11.329 2.512 16.483l-5.411 3.672c-0.939 0.626-1.537 1.491-1.795 2.595-0.147 1.086 0.092 2.098 0.718 3.037l0.469 0.635c0.626 0.939 1.454 1.537 2.485 1.795 1.16 0.147 2.209-0.092 3.147-0.718l5.135-3.424c3.7 4.583 8.255 7.887 13.667 9.912l-1.242 6.323c-0.202 1.104 9e-3 2.154 0.635 3.147 0.626 0.883 1.482 1.427 2.568 1.629l0.801 0.166c1.086 0.258 2.098 0.101 3.037-0.469 0.939-0.681 1.509-1.574 1.712-2.678l1.242-6.074c6 0.626 11.651-0.285 16.952-2.733l4.003 6.074c0.626 0.939 1.509 1.518 2.651 1.739 1.049 0.258 2.043 0.074 2.982-0.552l0.69-0.387c0.939-0.626 1.537-1.518 1.795-2.678 0.203-1.086-9e-3 -2.098-0.635-3.037l-3.81-5.936c4.583-3.7 7.841-8.255 9.774-13.667l6.875 1.242c1.086 0.202 2.098-9e-3 3.037-0.635 0.883-0.607 1.427-1.463 1.629-2.568l0.166-0.773c0.202-1.103-0.01-2.143-0.636-3.119zm-50.085-15.013c-0.824 1.929-2.217 3.297-4.178 4.102-1.962 0.806-3.92 0.815-5.876 0.028-1.936-0.778-3.299-2.13-4.09-4.056s-0.774-3.853 0.05-5.782c0.844-1.92 2.247-3.284 4.209-4.089 1.962-0.806 3.91-0.819 5.846-0.041 1.956 0.787 3.329 2.144 4.12 4.069 0.79 1.925 0.763 3.848-0.081 5.769z" fill="#eb0404" stroke="#870000" stroke-width="1.9331"/></g></svg>
+<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" ry="2" fill="none"/><g transform="matrix(1.0346 0 0 1.0346 -1.7311 -1.7312)" fill="#ce0000" stroke="#870000" stroke-width="1.9331"><path d="m92.148 55.869c-0.626-0.939-1.482-1.519-2.568-1.739l-6.792-1.242c0.368-5.669-0.727-11.035-3.286-16.096l5.853-4.224c0.939-0.663 1.491-1.574 1.657-2.733 0.202-1.086-0.037-2.071-0.718-2.954l-0.469-0.718c-0.626-0.883-1.537-1.427-2.733-1.629-1.031-0.166-2.016 0.092-2.954 0.773l-5.632 4.059c-3.81-4.215-8.347-7.206-13.611-8.973l1.27-7.731c0.202-1.104-0.037-2.126-0.718-3.065-0.626-0.883-1.482-1.427-2.568-1.629l-0.856-0.166c-1.104-0.147-2.126 0.092-3.065 0.718-0.884 0.681-1.427 1.565-1.629 2.65l-1.16 7.427c-2.503-0.221-4.951-0.175-7.344 0.138-1.362 0.055-2.641 0.294-3.838 0.718-0.626 0.147-1.224 0.331-1.795 0.552l-3.451-7.51c-0.46-0.994-1.215-1.693-2.264-2.098-1.031-0.423-2.043-0.405-3.037 0.055l-0.773 0.414c-0.994 0.405-1.73 1.16-2.209 2.264-0.368 1.031-0.313 2.043 0.166 3.037l3.506 7.648c-0.202 0.11-0.405 0.249-0.607 0.414-5.264 3.681-9.019 8.31-11.265 13.888l-6.958-1.546c-1.086-0.276-2.098-0.074-3.037 0.607-0.994 0.534-1.592 1.344-1.795 2.43l-0.246 0.772c-0.203 1.104-0.018 2.172 0.552 3.203 0.626 0.883 1.491 1.463 2.595 1.739l6.626 1.546c-0.736 5.835 0.101 11.329 2.512 16.483l-5.411 3.672c-0.939 0.626-1.537 1.491-1.795 2.595-0.147 1.086 0.092 2.098 0.718 3.037l0.469 0.635c0.626 0.939 1.454 1.537 2.485 1.795 1.16 0.147 2.209-0.092 3.147-0.718l5.135-3.424c3.7 4.583 8.255 7.887 13.667 9.912l-1.242 6.323c-0.202 1.104 9e-3 2.154 0.635 3.147 0.626 0.883 1.482 1.427 2.568 1.629l0.801 0.166c1.086 0.258 2.098 0.101 3.037-0.469 0.939-0.681 1.509-1.574 1.712-2.678l1.242-6.074c6 0.626 11.651-0.285 16.952-2.733l4.003 6.074c0.626 0.939 1.509 1.518 2.651 1.739 1.049 0.258 2.043 0.074 2.982-0.552l0.69-0.387c0.939-0.626 1.537-1.518 1.795-2.678 0.203-1.086-9e-3 -2.098-0.635-3.037l-3.81-5.936c4.583-3.7 7.841-8.255 9.774-13.667l6.875 1.242c1.086 0.202 2.098-9e-3 3.037-0.635 0.883-0.607 1.427-1.463 1.629-2.568l0.166-0.773c0.202-1.103-0.01-2.143-0.636-3.119zm-50.085-15.013c-0.824 1.929-2.217 3.297-4.178 4.102-1.962 0.806-3.92 0.815-5.876 0.028-1.936-0.778-3.299-2.13-4.09-4.056s-0.774-3.853 0.05-5.782c0.844-1.92 2.247-3.284 4.209-4.089 1.962-0.806 3.91-0.819 5.846-0.041 1.956 0.787 3.329 2.144 4.12 4.069 0.79 1.925 0.763 3.848-0.081 5.769z" fill="#ce0000" stroke="#870000" stroke-width="1.9331"/></g></svg>

icons/skins/default/tile_mine_not_found.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" ry="2" fill="none"/><g transform="matrix(1.0346 0 0 1.0346 -1.7311 -1.7312)" fill="#787878" stroke="#444343" stroke-width="1.9331"><path d="m92.148 55.869c-0.626-0.939-1.482-1.519-2.568-1.739l-6.792-1.242c0.368-5.669-0.727-11.035-3.286-16.096l5.853-4.224c0.939-0.663 1.491-1.574 1.657-2.733 0.202-1.086-0.037-2.071-0.718-2.954l-0.469-0.718c-0.626-0.883-1.537-1.427-2.733-1.629-1.031-0.166-2.016 0.092-2.954 0.773l-5.632 4.059c-3.81-4.215-8.347-7.206-13.611-8.973l1.27-7.731c0.202-1.104-0.037-2.126-0.718-3.065-0.626-0.883-1.482-1.427-2.568-1.629l-0.856-0.166c-1.104-0.147-2.126 0.092-3.065 0.718-0.884 0.681-1.427 1.565-1.629 2.65l-1.16 7.427c-2.503-0.221-4.951-0.175-7.344 0.138-1.362 0.055-2.641 0.294-3.838 0.718-0.626 0.147-1.224 0.331-1.795 0.552l-3.451-7.51c-0.46-0.994-1.215-1.693-2.264-2.098-1.031-0.423-2.043-0.405-3.037 0.055l-0.773 0.414c-0.994 0.405-1.73 1.16-2.209 2.264-0.368 1.031-0.313 2.043 0.166 3.037l3.506 7.648c-0.202 0.11-0.405 0.249-0.607 0.414-5.264 3.681-9.019 8.31-11.265 13.888l-6.958-1.546c-1.086-0.276-2.098-0.074-3.037 0.607-0.994 0.534-1.592 1.344-1.795 2.43l-0.246 0.772c-0.203 1.104-0.018 2.172 0.552 3.203 0.626 0.883 1.491 1.463 2.595 1.739l6.626 1.546c-0.736 5.835 0.101 11.329 2.512 16.483l-5.411 3.672c-0.939 0.626-1.537 1.491-1.795 2.595-0.147 1.086 0.092 2.098 0.718 3.037l0.469 0.635c0.626 0.939 1.454 1.537 2.485 1.795 1.16 0.147 2.209-0.092 3.147-0.718l5.135-3.424c3.7 4.583 8.255 7.887 13.667 9.912l-1.242 6.323c-0.202 1.104 9e-3 2.154 0.635 3.147 0.626 0.883 1.482 1.427 2.568 1.629l0.801 0.166c1.086 0.258 2.098 0.101 3.037-0.469 0.939-0.681 1.509-1.574 1.712-2.678l1.242-6.074c6 0.626 11.651-0.285 16.952-2.733l4.003 6.074c0.626 0.939 1.509 1.518 2.651 1.739 1.049 0.258 2.043 0.074 2.982-0.552l0.69-0.387c0.939-0.626 1.537-1.518 1.795-2.678 0.203-1.086-9e-3 -2.098-0.635-3.037l-3.81-5.936c4.583-3.7 7.841-8.255 9.774-13.667l6.875 1.242c1.086 0.202 2.098-9e-3 3.037-0.635 0.883-0.607 1.427-1.463 1.629-2.568l0.166-0.773c0.202-1.103-0.01-2.143-0.636-3.119zm-50.085-15.013c-0.824 1.929-2.217 3.297-4.178 4.102-1.962 0.806-3.92 0.815-5.876 0.028-1.936-0.778-3.299-2.13-4.09-4.056s-0.774-3.853 0.05-5.782c0.844-1.92 2.247-3.284 4.209-4.089 1.962-0.806 3.91-0.819 5.846-0.041 1.956 0.787 3.329 2.144 4.12 4.069 0.79 1.925 0.763 3.848-0.081 5.769z" fill="#787878" stroke="#444343" stroke-width="1.9331"/></g></svg>
+<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" ry="2" fill="none"/><g transform="matrix(1.0346 0 0 1.0346 -1.7311 -1.7312)" fill="#616161" stroke="#373737" stroke-width="1.9331"><path d="m92.148 55.869c-0.626-0.939-1.482-1.519-2.568-1.739l-6.792-1.242c0.368-5.669-0.727-11.035-3.286-16.096l5.853-4.224c0.939-0.663 1.491-1.574 1.657-2.733 0.202-1.086-0.037-2.071-0.718-2.954l-0.469-0.718c-0.626-0.883-1.537-1.427-2.733-1.629-1.031-0.166-2.016 0.092-2.954 0.773l-5.632 4.059c-3.81-4.215-8.347-7.206-13.611-8.973l1.27-7.731c0.202-1.104-0.037-2.126-0.718-3.065-0.626-0.883-1.482-1.427-2.568-1.629l-0.856-0.166c-1.104-0.147-2.126 0.092-3.065 0.718-0.884 0.681-1.427 1.565-1.629 2.65l-1.16 7.427c-2.503-0.221-4.951-0.175-7.344 0.138-1.362 0.055-2.641 0.294-3.838 0.718-0.626 0.147-1.224 0.331-1.795 0.552l-3.451-7.51c-0.46-0.994-1.215-1.693-2.264-2.098-1.031-0.423-2.043-0.405-3.037 0.055l-0.773 0.414c-0.994 0.405-1.73 1.16-2.209 2.264-0.368 1.031-0.313 2.043 0.166 3.037l3.506 7.648c-0.202 0.11-0.405 0.249-0.607 0.414-5.264 3.681-9.019 8.31-11.265 13.888l-6.958-1.546c-1.086-0.276-2.098-0.074-3.037 0.607-0.994 0.534-1.592 1.344-1.795 2.43l-0.246 0.772c-0.203 1.104-0.018 2.172 0.552 3.203 0.626 0.883 1.491 1.463 2.595 1.739l6.626 1.546c-0.736 5.835 0.101 11.329 2.512 16.483l-5.411 3.672c-0.939 0.626-1.537 1.491-1.795 2.595-0.147 1.086 0.092 2.098 0.718 3.037l0.469 0.635c0.626 0.939 1.454 1.537 2.485 1.795 1.16 0.147 2.209-0.092 3.147-0.718l5.135-3.424c3.7 4.583 8.255 7.887 13.667 9.912l-1.242 6.323c-0.202 1.104 9e-3 2.154 0.635 3.147 0.626 0.883 1.482 1.427 2.568 1.629l0.801 0.166c1.086 0.258 2.098 0.101 3.037-0.469 0.939-0.681 1.509-1.574 1.712-2.678l1.242-6.074c6 0.626 11.651-0.285 16.952-2.733l4.003 6.074c0.626 0.939 1.509 1.518 2.651 1.739 1.049 0.258 2.043 0.074 2.982-0.552l0.69-0.387c0.939-0.626 1.537-1.518 1.795-2.678 0.203-1.086-9e-3 -2.098-0.635-3.037l-3.81-5.936c4.583-3.7 7.841-8.255 9.774-13.667l6.875 1.242c1.086 0.202 2.098-9e-3 3.037-0.635 0.883-0.607 1.427-1.463 1.629-2.568l0.166-0.773c0.202-1.103-0.01-2.143-0.636-3.119zm-50.085-15.013c-0.824 1.929-2.217 3.297-4.178 4.102-1.962 0.806-3.92 0.815-5.876 0.028-1.936-0.778-3.299-2.13-4.09-4.056s-0.774-3.853 0.05-5.782c0.844-1.92 2.247-3.284 4.209-4.089 1.962-0.806 3.91-0.819 5.846-0.041 1.956 0.787 3.329 2.144 4.12 4.069 0.79 1.925 0.763 3.848-0.081 5.769z" fill="#616161" stroke="#373737" stroke-width="1.9331"/></g></svg>

lib/entities/cell.dart

@@ -100,7 +100,7 @@ class Cell {
     if (myProvider.gameWin) {
       return this.isAnimated ? Colors.green[400] : Colors.green[500];
     } else if (myProvider.gameFail) {
-      return this.isAnimated ? Colors.pink[300] : Colors.pink[400];
+      return this.isAnimated ? Colors.pink[200] : Colors.pink[400];
     }
 
     return this.isAnimated ? Colors.white : Colors.grey[200];

lib/layout/board.dart

@@ -85,19 +85,56 @@ class Board {
     );
   }
 
-  static Container buildMinesCounterWidget(Data myProvider) {
-    String markedMinesCount = BoardUtils.countFlaggedCells(myProvider.cells).toString();
-    String placedMinesCount = myProvider.minesCount.toString();
+  static Widget buildMinesCounterWidget(Data myProvider) {
+    int flaggedCellsCount = BoardUtils.countFlaggedCells(myProvider.cells);
+    int minesCount = myProvider.minesCount;
+    double blockSize = 40;
 
-    return Container(
-      child: Text(
-        markedMinesCount + ' / ' + placedMinesCount,
+    Image flagIconBlock = Image(
+      image: AssetImage('assets/skins/' + myProvider.skin + '_tile_flag.png'),
+      fit: BoxFit.fill,
+      height: blockSize,
+      width: blockSize,
+    );
+    Image mineIconBlock = Image(
+      image: AssetImage('assets/skins/' + myProvider.skin + '_tile_mine.png'),
+      fit: BoxFit.fill,
+      height: blockSize,
+      width: blockSize,
+    );
+    Text markedMinesCountBlock = Text(
+      flaggedCellsCount.toString(),
       style: TextStyle(
-          fontSize: 20,
+        fontSize: blockSize,
+        fontWeight: FontWeight.bold,
         color: Colors.white
       ),
+    );
+    Text placedMinesCountBlock = Text(
+      minesCount.toString(),
+      style: TextStyle(
+        fontSize: blockSize,
+        fontWeight: FontWeight.bold,
+        color: Colors.white
       ),
     );
+
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            markedMinesCountBlock,
+            flagIconBlock,
+            SizedBox(width: blockSize * 2),
+            mineIconBlock,
+            placedMinesCountBlock,
+          ],
+        )
+      ]);
   }
 
 }

lib/layout/game.dart

@@ -10,7 +10,7 @@ class Game {
     return Container(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           Board.buildGameBoard(myProvider),
           SizedBox(height: 2),

lib/utils/board_animate.dart

@@ -58,7 +58,7 @@ class BoardAnimate {
           bool isHilighted = false;
           for (var mineIndex = 0; mineIndex < explodedMines.length; mineIndex++) {
             double distance = sqrt(pow((explodedMines[mineIndex][0] - row), 2) + pow((explodedMines[mineIndex][1] - col), 2));
-            isHilighted = isHilighted || ((patternIndex + distance) % 3 < 1);
+            isHilighted = isHilighted || ((patternIndex + distance) % 4 < 2);
           }
           patternRow.add(isHilighted);
         }