1.9.13

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.9.12",
+  "version": "1.9.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.9.12",
+      "version": "1.9.13",
       "dependencies": {
         "fireworks-js": "^2.10.8",
         "flag-icons": "^7.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.9.12",
+  "version": "1.9.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/Hints.vue

@@ -32,7 +32,11 @@ defineProps({
       v-for="(group, index) in hints" 
       :key="index" 
       class="hint-group"
-      :class="{ 'is-active': index === activeIndex }"
+      :class="{
+        'is-active': index === activeIndex,
+        'guide-right': orientation === 'col' && (index + 1) % 5 === 0 && index !== size - 1,
+        'guide-bottom': orientation === 'row' && (index + 1) % 5 === 0 && index !== size - 1
+      }"
     >
       <span 
         v-for="(num, idx) in group" 
@@ -111,4 +115,12 @@ defineProps({
     border-color: rgba(79, 172, 254, 0.8);
     box-shadow: 0 0 12px rgba(79, 172, 254, 0.35);
 }
+
+/* Guide lines every 5 */
+.hint-group.guide-right {
+    border-right: 2px solid rgba(0, 242, 255, 0.5);
+}
+.hint-group.guide-bottom {
+    border-bottom: 2px solid rgba(0, 242, 255, 0.5);
+}
 </style>