1.9.5

check_i18n.js

@@ -0,0 +1,37 @@
+
+const fs = require('fs');
+
+const fileContent = fs.readFileSync('src/composables/useI18n.js', 'utf8');
+
+// Extract the messages object
+const match = fileContent.match(/const messages = ({[\s\S]*?});/);
+if (!match) {
+  console.error('Could not find messages object');
+  process.exit(1);
+}
+
+// We need to make the string valid JS to eval it.
+// It seems the content inside `const messages = { ... };` is valid JS object notation.
+// But we need to be careful about imports or other things if we were to `eval` the whole file.
+// We'll just `eval` the object part.
+
+const messagesStr = match[1];
+const messages = eval(`(${messagesStr})`);
+
+const enKeys = Object.keys(messages.en);
+const languages = Object.keys(messages);
+
+const missing = {};
+
+languages.forEach(lang => {
+  if (lang === 'en') return;
+  
+  const langKeys = Object.keys(messages[lang]);
+  const missingKeys = enKeys.filter(k => !langKeys.includes(k));
+  
+  if (missingKeys.length > 0) {
+    missing[lang] = missingKeys;
+  }
+});
+
+console.log(JSON.stringify(missing, null, 2));

difficulty_simulation_results.csv

@@ -0,0 +1,118 @@
+size,density,avg_solved_percent,min_solved_percent,max_solved_percent,avg_time_ms
+5,0.1,89.40,36.00,100.00,0.03
+5,0.2,74.20,8.00,100.00,0.04
+5,0.3,74.20,0.00,100.00,0.04
+5,0.4,80.80,8.00,100.00,0.03
+5,0.5,96.80,68.00,100.00,0.03
+5,0.6,97.60,84.00,100.00,0.03
+5,0.7,99.20,84.00,100.00,0.03
+5,0.8,100.00,100.00,100.00,0.02
+5,0.9,100.00,100.00,100.00,0.02
+10,0.1,56.60,19.00,86.00,0.04
+10,0.2,19.80,0.00,51.00,0.05
+10,0.3,15.75,0.00,73.00,0.07
+10,0.4,54.05,0.00,100.00,0.13
+10,0.5,91.80,59.00,100.00,0.17
+10,0.6,99.80,96.00,100.00,0.07
+10,0.7,99.80,96.00,100.00,0.05
+10,0.8,100.00,100.00,100.00,0.04
+10,0.9,100.00,100.00,100.00,0.02
+15,0.1,37.04,13.33,61.78,0.05
+15,0.2,9.78,0.00,26.67,0.03
+15,0.3,1.89,0.00,8.00,0.03
+15,0.4,11.82,0.00,61.33,0.08
+15,0.5,68.20,2.67,100.00,0.14
+15,0.6,99.56,96.44,100.00,0.09
+15,0.7,99.78,97.33,100.00,0.07
+15,0.8,100.00,100.00,100.00,0.05
+15,0.9,100.00,100.00,100.00,0.03
+20,0.1,22.59,5.00,41.50,0.04
+20,0.2,3.25,0.00,14.50,0.04
+20,0.3,0.56,0.00,5.00,0.04
+20,0.4,1.46,0.00,3.25,0.07
+20,0.5,36.75,1.25,99.00,0.26
+20,0.6,99.80,99.00,100.00,0.23
+20,0.7,99.95,99.00,100.00,0.13
+20,0.8,100.00,100.00,100.00,0.09
+20,0.9,100.00,100.00,100.00,0.05
+25,0.1,16.00,7.84,32.80,0.06
+25,0.2,0.00,0.00,0.00,0.04
+25,0.3,0.05,0.00,0.64,0.06
+25,0.4,0.89,0.00,9.44,0.12
+25,0.5,19.13,1.12,96.48,0.35
+25,0.6,99.25,94.88,100.00,0.50
+25,0.7,99.90,99.36,100.00,0.24
+25,0.8,100.00,100.00,100.00,0.15
+25,0.9,99.97,99.36,100.00,0.08
+30,0.1,7.99,0.00,16.00,0.08
+30,0.2,0.17,0.00,3.33,0.07
+30,0.3,0.00,0.00,0.00,0.08
+30,0.4,0.38,0.00,4.11,0.18
+30,0.5,5.42,0.78,21.44,0.41
+30,0.6,99.42,94.78,100.00,0.94
+30,0.7,99.93,99.56,100.00,0.42
+30,0.8,100.00,100.00,100.00,0.22
+30,0.9,100.00,100.00,100.00,0.13
+35,0.1,5.65,0.00,13.80,0.11
+35,0.2,0.14,0.00,2.86,0.10
+35,0.3,0.00,0.00,0.00,0.13
+35,0.4,0.13,0.00,0.57,0.22
+35,0.5,4.42,0.41,23.18,0.56
+35,0.6,91.11,8.41,100.00,1.58
+35,0.7,99.97,99.67,100.00,0.60
+35,0.8,100.00,100.00,100.00,0.33
+35,0.9,100.00,100.00,100.00,0.17
+40,0.1,2.73,0.00,9.81,0.13
+40,0.2,0.00,0.00,0.00,0.13
+40,0.3,0.00,0.00,0.00,0.18
+40,0.4,0.03,0.00,0.31,0.27
+40,0.5,2.14,0.00,9.56,0.69
+40,0.6,91.44,22.31,100.00,2.92
+40,0.7,99.99,99.75,100.00,0.84
+40,0.8,100.00,100.00,100.00,0.43
+40,0.9,100.00,100.00,100.00,0.24
+45,0.1,1.78,0.00,4.69,0.17
+45,0.2,0.00,0.00,0.00,0.17
+45,0.3,0.00,0.00,0.00,0.24
+45,0.4,0.01,0.00,0.15,0.33
+45,0.5,1.44,0.40,5.14,0.96
+45,0.6,81.72,6.02,100.00,5.28
+45,0.7,99.94,99.41,100.00,1.28
+45,0.8,100.00,100.00,100.00,0.64
+45,0.9,100.00,100.00,100.00,0.30
+50,0.1,1.70,0.00,5.92,0.20
+50,0.2,0.00,0.00,0.00,0.23
+50,0.3,0.00,0.00,0.00,0.30
+50,0.4,0.01,0.00,0.16,0.38
+50,0.5,0.51,0.00,1.80,0.90
+50,0.6,73.26,5.60,100.00,7.94
+50,0.7,99.96,99.76,100.00,1.63
+50,0.8,100.00,100.00,100.00,0.83
+50,0.9,100.00,100.00,100.00,0.41
+60,0.1,0.17,0.00,1.67,0.24
+60,0.2,0.00,0.00,0.00,0.35
+60,0.3,0.00,0.00,0.00,0.50
+60,0.4,0.00,0.00,0.06,0.64
+60,0.5,0.23,0.00,1.67,1.24
+60,0.6,35.02,1.33,100.00,10.76
+60,0.7,99.97,99.83,100.00,2.96
+60,0.8,100.00,100.00,100.00,1.27
+60,0.9,100.00,100.00,100.00,0.62
+70,0.1,0.14,0.00,1.43,0.34
+70,0.2,0.00,0.00,0.00,0.54
+70,0.3,0.00,0.00,0.00,0.76
+70,0.4,0.00,0.00,0.00,0.96
+70,0.5,0.04,0.00,0.29,1.49
+70,0.6,16.40,1.00,99.71,22.21
+70,0.7,99.97,99.73,100.00,4.92
+70,0.8,100.00,99.92,100.00,2.03
+70,0.9,100.00,100.00,100.00,0.89
+80,0.1,0.00,0.00,0.00,0.44
+80,0.2,0.00,0.00,0.00,0.78
+80,0.3,0.00,0.00,0.00,1.07
+80,0.4,0.00,0.00,0.00,1.34
+80,0.5,0.01,0.00,0.08,1.97
+80,0.6,1.21,0.41,2.30,3.92
+80,0.7,99.98,99.94,100.00,7.79
+80,0.8,100.00,100.00,100.00,3.14
+80,0.9,100.00,100.00,100.00,1.31

difficulty_simulation_results.json

@@ -0,0 +1,938 @@
+[
+  {
+    "size": 5,
+    "density": 0.1,
+    "avgSolved": 89.4,
+    "minSolved": 36,
+    "maxSolved": 100,
+    "avgTime": 0.031666799999999905
+  },
+  {
+    "size": 5,
+    "density": 0.2,
+    "avgSolved": 74.2,
+    "minSolved": 8,
+    "maxSolved": 100,
+    "avgTime": 0.03671869999999924
+  },
+  {
+    "size": 5,
+    "density": 0.3,
+    "avgSolved": 74.2,
+    "minSolved": 0,
+    "maxSolved": 100,
+    "avgTime": 0.04439559999999983
+  },
+  {
+    "size": 5,
+    "density": 0.4,
+    "avgSolved": 80.8,
+    "minSolved": 8,
+    "maxSolved": 100,
+    "avgTime": 0.0317166499999999
+  },
+  {
+    "size": 5,
+    "density": 0.5,
+    "avgSolved": 96.8,
+    "minSolved": 68,
+    "maxSolved": 100,
+    "avgTime": 0.0309604000000002
+  },
+  {
+    "size": 5,
+    "density": 0.6,
+    "avgSolved": 97.6,
+    "minSolved": 84,
+    "maxSolved": 100,
+    "avgTime": 0.031464499999999875
+  },
+  {
+    "size": 5,
+    "density": 0.7,
+    "avgSolved": 99.2,
+    "minSolved": 84,
+    "maxSolved": 100,
+    "avgTime": 0.03086874999999978
+  },
+  {
+    "size": 5,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.01615615000000048
+  },
+  {
+    "size": 5,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.02271474999999956
+  },
+  {
+    "size": 10,
+    "density": 0.1,
+    "avgSolved": 56.6,
+    "minSolved": 19,
+    "maxSolved": 86,
+    "avgTime": 0.042958299999999915
+  },
+  {
+    "size": 10,
+    "density": 0.2,
+    "avgSolved": 19.8,
+    "minSolved": 0,
+    "maxSolved": 51,
+    "avgTime": 0.050141749999999874
+  },
+  {
+    "size": 10,
+    "density": 0.3,
+    "avgSolved": 15.75,
+    "minSolved": 0,
+    "maxSolved": 73,
+    "avgTime": 0.06852290000000014
+  },
+  {
+    "size": 10,
+    "density": 0.4,
+    "avgSolved": 54.05,
+    "minSolved": 0,
+    "maxSolved": 100,
+    "avgTime": 0.12701870000000018
+  },
+  {
+    "size": 10,
+    "density": 0.5,
+    "avgSolved": 91.8,
+    "minSolved": 59,
+    "maxSolved": 100,
+    "avgTime": 0.16561034999999985
+  },
+  {
+    "size": 10,
+    "density": 0.6,
+    "avgSolved": 99.8,
+    "minSolved": 96,
+    "maxSolved": 100,
+    "avgTime": 0.07136649999999882
+  },
+  {
+    "size": 10,
+    "density": 0.7,
+    "avgSolved": 99.8,
+    "minSolved": 96,
+    "maxSolved": 100,
+    "avgTime": 0.04808134999999893
+  },
+  {
+    "size": 10,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.03795824999999979
+  },
+  {
+    "size": 10,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.024952100000000855
+  },
+  {
+    "size": 15,
+    "density": 0.1,
+    "avgSolved": 37.044444444444444,
+    "minSolved": 13.333333333333334,
+    "maxSolved": 61.77777777777778,
+    "avgTime": 0.045045850000000345
+  },
+  {
+    "size": 15,
+    "density": 0.2,
+    "avgSolved": 9.777777777777775,
+    "minSolved": 0,
+    "maxSolved": 26.666666666666668,
+    "avgTime": 0.034581349999998776
+  },
+  {
+    "size": 15,
+    "density": 0.3,
+    "avgSolved": 1.8888888888888886,
+    "minSolved": 0,
+    "maxSolved": 8,
+    "avgTime": 0.029402199999999823
+  },
+  {
+    "size": 15,
+    "density": 0.4,
+    "avgSolved": 11.822222222222223,
+    "minSolved": 0,
+    "maxSolved": 61.33333333333333,
+    "avgTime": 0.07898965000000047
+  },
+  {
+    "size": 15,
+    "density": 0.5,
+    "avgSolved": 68.19999999999999,
+    "minSolved": 2.666666666666667,
+    "maxSolved": 100,
+    "avgTime": 0.1374602999999997
+  },
+  {
+    "size": 15,
+    "density": 0.6,
+    "avgSolved": 99.55555555555554,
+    "minSolved": 96.44444444444444,
+    "maxSolved": 100,
+    "avgTime": 0.09379159999999978
+  },
+  {
+    "size": 15,
+    "density": 0.7,
+    "avgSolved": 99.77777777777779,
+    "minSolved": 97.33333333333334,
+    "maxSolved": 100,
+    "avgTime": 0.07072704999999928
+  },
+  {
+    "size": 15,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.050104250000000405
+  },
+  {
+    "size": 15,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.031362550000000766
+  },
+  {
+    "size": 20,
+    "density": 0.1,
+    "avgSolved": 22.5875,
+    "minSolved": 5,
+    "maxSolved": 41.5,
+    "avgTime": 0.04363335000000035
+  },
+  {
+    "size": 20,
+    "density": 0.2,
+    "avgSolved": 3.25,
+    "minSolved": 0,
+    "maxSolved": 14.499999999999998,
+    "avgTime": 0.03823525000000103
+  },
+  {
+    "size": 20,
+    "density": 0.3,
+    "avgSolved": 0.5625,
+    "minSolved": 0,
+    "maxSolved": 5,
+    "avgTime": 0.03880414999999786
+  },
+  {
+    "size": 20,
+    "density": 0.4,
+    "avgSolved": 1.4625,
+    "minSolved": 0,
+    "maxSolved": 3.25,
+    "avgTime": 0.06692695000000129
+  },
+  {
+    "size": 20,
+    "density": 0.5,
+    "avgSolved": 36.75,
+    "minSolved": 1.25,
+    "maxSolved": 99,
+    "avgTime": 0.25872084999999884
+  },
+  {
+    "size": 20,
+    "density": 0.6,
+    "avgSolved": 99.8,
+    "minSolved": 99,
+    "maxSolved": 100,
+    "avgTime": 0.2258772000000004
+  },
+  {
+    "size": 20,
+    "density": 0.7,
+    "avgSolved": 99.95,
+    "minSolved": 99,
+    "maxSolved": 100,
+    "avgTime": 0.13418124999999997
+  },
+  {
+    "size": 20,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.09264785000000053
+  },
+  {
+    "size": 20,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.05307699999999756
+  },
+  {
+    "size": 25,
+    "density": 0.1,
+    "avgSolved": 16.000000000000004,
+    "minSolved": 7.84,
+    "maxSolved": 32.800000000000004,
+    "avgTime": 0.05678540000000112
+  },
+  {
+    "size": 25,
+    "density": 0.2,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.04278334999999842
+  },
+  {
+    "size": 25,
+    "density": 0.3,
+    "avgSolved": 0.048,
+    "minSolved": 0,
+    "maxSolved": 0.64,
+    "avgTime": 0.05884794999999983
+  },
+  {
+    "size": 25,
+    "density": 0.4,
+    "avgSolved": 0.8880000000000001,
+    "minSolved": 0,
+    "maxSolved": 9.44,
+    "avgTime": 0.11761245000000287
+  },
+  {
+    "size": 25,
+    "density": 0.5,
+    "avgSolved": 19.128000000000007,
+    "minSolved": 1.1199999999999999,
+    "maxSolved": 96.48,
+    "avgTime": 0.3490229000000021
+  },
+  {
+    "size": 25,
+    "density": 0.6,
+    "avgSolved": 99.24799999999998,
+    "minSolved": 94.88,
+    "maxSolved": 100,
+    "avgTime": 0.49611459999999996
+  },
+  {
+    "size": 25,
+    "density": 0.7,
+    "avgSolved": 99.904,
+    "minSolved": 99.36,
+    "maxSolved": 100,
+    "avgTime": 0.23916465000000073
+  },
+  {
+    "size": 25,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.14604994999999973
+  },
+  {
+    "size": 25,
+    "density": 0.9,
+    "avgSolved": 99.96799999999999,
+    "minSolved": 99.36,
+    "maxSolved": 100,
+    "avgTime": 0.08385419999999896
+  },
+  {
+    "size": 30,
+    "density": 0.1,
+    "avgSolved": 7.988888888888889,
+    "minSolved": 0,
+    "maxSolved": 16,
+    "avgTime": 0.08026245000000073
+  },
+  {
+    "size": 30,
+    "density": 0.2,
+    "avgSolved": 0.16666666666666669,
+    "minSolved": 0,
+    "maxSolved": 3.3333333333333335,
+    "avgTime": 0.06999999999999887
+  },
+  {
+    "size": 30,
+    "density": 0.3,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.08285835000000005
+  },
+  {
+    "size": 30,
+    "density": 0.4,
+    "avgSolved": 0.3777777777777777,
+    "minSolved": 0,
+    "maxSolved": 4.111111111111112,
+    "avgTime": 0.1756041499999988
+  },
+  {
+    "size": 30,
+    "density": 0.5,
+    "avgSolved": 5.4222222222222225,
+    "minSolved": 0.7777777777777778,
+    "maxSolved": 21.444444444444443,
+    "avgTime": 0.41105620000000015
+  },
+  {
+    "size": 30,
+    "density": 0.6,
+    "avgSolved": 99.41666666666669,
+    "minSolved": 94.77777777777779,
+    "maxSolved": 100,
+    "avgTime": 0.9417500999999995
+  },
+  {
+    "size": 30,
+    "density": 0.7,
+    "avgSolved": 99.93333333333335,
+    "minSolved": 99.55555555555556,
+    "maxSolved": 100,
+    "avgTime": 0.41628955000000334
+  },
+  {
+    "size": 30,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.22320620000000133
+  },
+  {
+    "size": 30,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.13331460000000134
+  },
+  {
+    "size": 35,
+    "density": 0.1,
+    "avgSolved": 5.653061224489796,
+    "minSolved": 0,
+    "maxSolved": 13.795918367346937,
+    "avgTime": 0.11177699999999931
+  },
+  {
+    "size": 35,
+    "density": 0.2,
+    "avgSolved": 0.14285714285714285,
+    "minSolved": 0,
+    "maxSolved": 2.857142857142857,
+    "avgTime": 0.09598544999999917
+  },
+  {
+    "size": 35,
+    "density": 0.3,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.1290145000000038
+  },
+  {
+    "size": 35,
+    "density": 0.4,
+    "avgSolved": 0.1346938775510204,
+    "minSolved": 0,
+    "maxSolved": 0.5714285714285714,
+    "avgTime": 0.21904799999999797
+  },
+  {
+    "size": 35,
+    "density": 0.5,
+    "avgSolved": 4.424489795918367,
+    "minSolved": 0.40816326530612246,
+    "maxSolved": 23.183673469387756,
+    "avgTime": 0.5596769500000022
+  },
+  {
+    "size": 35,
+    "density": 0.6,
+    "avgSolved": 91.1061224489796,
+    "minSolved": 8.408163265306122,
+    "maxSolved": 100,
+    "avgTime": 1.5827311000000024
+  },
+  {
+    "size": 35,
+    "density": 0.7,
+    "avgSolved": 99.9673469387755,
+    "minSolved": 99.67346938775509,
+    "maxSolved": 100,
+    "avgTime": 0.5970167499999988
+  },
+  {
+    "size": 35,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.33084175000000327
+  },
+  {
+    "size": 35,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.1685022000000032
+  },
+  {
+    "size": 40,
+    "density": 0.1,
+    "avgSolved": 2.734375,
+    "minSolved": 0,
+    "maxSolved": 9.8125,
+    "avgTime": 0.13156869999999826
+  },
+  {
+    "size": 40,
+    "density": 0.2,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.13052910000000112
+  },
+  {
+    "size": 40,
+    "density": 0.3,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.17675199999999905
+  },
+  {
+    "size": 40,
+    "density": 0.4,
+    "avgSolved": 0.03125,
+    "minSolved": 0,
+    "maxSolved": 0.3125,
+    "avgTime": 0.26616039999999686
+  },
+  {
+    "size": 40,
+    "density": 0.5,
+    "avgSolved": 2.14375,
+    "minSolved": 0,
+    "maxSolved": 9.5625,
+    "avgTime": 0.694316649999999
+  },
+  {
+    "size": 40,
+    "density": 0.6,
+    "avgSolved": 91.44375,
+    "minSolved": 22.3125,
+    "maxSolved": 100,
+    "avgTime": 2.9244042000000006
+  },
+  {
+    "size": 40,
+    "density": 0.7,
+    "avgSolved": 99.9875,
+    "minSolved": 99.75,
+    "maxSolved": 100,
+    "avgTime": 0.8381519999999967
+  },
+  {
+    "size": 40,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.4339062999999925
+  },
+  {
+    "size": 40,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.2375938000000076
+  },
+  {
+    "size": 45,
+    "density": 0.1,
+    "avgSolved": 1.7827160493827159,
+    "minSolved": 0,
+    "maxSolved": 4.691358024691358,
+    "avgTime": 0.1660813500000046
+  },
+  {
+    "size": 45,
+    "density": 0.2,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.1715666999999968
+  },
+  {
+    "size": 45,
+    "density": 0.3,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.23760415000000706
+  },
+  {
+    "size": 45,
+    "density": 0.4,
+    "avgSolved": 0.012345679012345678,
+    "minSolved": 0,
+    "maxSolved": 0.14814814814814814,
+    "avgTime": 0.333931249999992
+  },
+  {
+    "size": 45,
+    "density": 0.5,
+    "avgSolved": 1.439506172839506,
+    "minSolved": 0.39506172839506176,
+    "maxSolved": 5.135802469135802,
+    "avgTime": 0.9644125499999916
+  },
+  {
+    "size": 45,
+    "density": 0.6,
+    "avgSolved": 81.71851851851852,
+    "minSolved": 6.0246913580246915,
+    "maxSolved": 100,
+    "avgTime": 5.281324949999998
+  },
+  {
+    "size": 45,
+    "density": 0.7,
+    "avgSolved": 99.94074074074075,
+    "minSolved": 99.4074074074074,
+    "maxSolved": 100,
+    "avgTime": 1.2768960000000107
+  },
+  {
+    "size": 45,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.638566650000007
+  },
+  {
+    "size": 45,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.3004915999999923
+  },
+  {
+    "size": 50,
+    "density": 0.1,
+    "avgSolved": 1.7,
+    "minSolved": 0,
+    "maxSolved": 5.92,
+    "avgTime": 0.20294785000000387
+  },
+  {
+    "size": 50,
+    "density": 0.2,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.23199789999999892
+  },
+  {
+    "size": 50,
+    "density": 0.3,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.29876259999999205
+  },
+  {
+    "size": 50,
+    "density": 0.4,
+    "avgSolved": 0.008,
+    "minSolved": 0,
+    "maxSolved": 0.16,
+    "avgTime": 0.38459799999998834
+  },
+  {
+    "size": 50,
+    "density": 0.5,
+    "avgSolved": 0.5099999999999999,
+    "minSolved": 0,
+    "maxSolved": 1.7999999999999998,
+    "avgTime": 0.8961771499999941
+  },
+  {
+    "size": 50,
+    "density": 0.6,
+    "avgSolved": 73.258,
+    "minSolved": 5.6000000000000005,
+    "maxSolved": 100,
+    "avgTime": 7.937735449999991
+  },
+  {
+    "size": 50,
+    "density": 0.7,
+    "avgSolved": 99.96399999999998,
+    "minSolved": 99.76,
+    "maxSolved": 100,
+    "avgTime": 1.6324250000000062
+  },
+  {
+    "size": 50,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.8293270000000064
+  },
+  {
+    "size": 50,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.41459575000000654
+  },
+  {
+    "size": 60,
+    "density": 0.1,
+    "avgSolved": 0.16666666666666669,
+    "minSolved": 0,
+    "maxSolved": 1.6666666666666667,
+    "avgTime": 0.2432124999999928
+  },
+  {
+    "size": 60,
+    "density": 0.2,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.35082704999999237
+  },
+  {
+    "size": 60,
+    "density": 0.3,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.49827310000000014
+  },
+  {
+    "size": 60,
+    "density": 0.4,
+    "avgSolved": 0.0027777777777777775,
+    "minSolved": 0,
+    "maxSolved": 0.05555555555555555,
+    "avgTime": 0.6393062499999985
+  },
+  {
+    "size": 60,
+    "density": 0.5,
+    "avgSolved": 0.23055555555555554,
+    "minSolved": 0,
+    "maxSolved": 1.6666666666666667,
+    "avgTime": 1.2402395500000012
+  },
+  {
+    "size": 60,
+    "density": 0.6,
+    "avgSolved": 35.01805555555556,
+    "minSolved": 1.3333333333333335,
+    "maxSolved": 100,
+    "avgTime": 10.759754149999992
+  },
+  {
+    "size": 60,
+    "density": 0.7,
+    "avgSolved": 99.96944444444445,
+    "minSolved": 99.83333333333333,
+    "maxSolved": 100,
+    "avgTime": 2.964204100000029
+  },
+  {
+    "size": 60,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 1.2736664999999903
+  },
+  {
+    "size": 60,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.6249353999999812
+  },
+  {
+    "size": 70,
+    "density": 0.1,
+    "avgSolved": 0.14285714285714285,
+    "minSolved": 0,
+    "maxSolved": 1.4285714285714286,
+    "avgTime": 0.34277719999998907
+  },
+  {
+    "size": 70,
+    "density": 0.2,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.5435105000000249
+  },
+  {
+    "size": 70,
+    "density": 0.3,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.7600602999999865
+  },
+  {
+    "size": 70,
+    "density": 0.4,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.9591250999999943
+  },
+  {
+    "size": 70,
+    "density": 0.5,
+    "avgSolved": 0.04081632653061225,
+    "minSolved": 0,
+    "maxSolved": 0.2857142857142857,
+    "avgTime": 1.491010399999982
+  },
+  {
+    "size": 70,
+    "density": 0.6,
+    "avgSolved": 16.403061224489797,
+    "minSolved": 1,
+    "maxSolved": 99.71428571428571,
+    "avgTime": 22.21432699999999
+  },
+  {
+    "size": 70,
+    "density": 0.7,
+    "avgSolved": 99.96836734693878,
+    "minSolved": 99.73469387755102,
+    "maxSolved": 100,
+    "avgTime": 4.92020829999999
+  },
+  {
+    "size": 70,
+    "density": 0.8,
+    "avgSolved": 99.99591836734695,
+    "minSolved": 99.91836734693878,
+    "maxSolved": 100,
+    "avgTime": 2.0306394499999554
+  },
+  {
+    "size": 70,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 0.8882499500000336
+  },
+  {
+    "size": 80,
+    "density": 0.1,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.4418666499999858
+  },
+  {
+    "size": 80,
+    "density": 0.2,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 0.7795667999999978
+  },
+  {
+    "size": 80,
+    "density": 0.3,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 1.0745101999999747
+  },
+  {
+    "size": 80,
+    "density": 0.4,
+    "avgSolved": 0,
+    "minSolved": 0,
+    "maxSolved": 0,
+    "avgTime": 1.3407041500000105
+  },
+  {
+    "size": 80,
+    "density": 0.5,
+    "avgSolved": 0.0125,
+    "minSolved": 0,
+    "maxSolved": 0.078125,
+    "avgTime": 1.9724897000000283
+  },
+  {
+    "size": 80,
+    "density": 0.6,
+    "avgSolved": 1.21484375,
+    "minSolved": 0.40625,
+    "maxSolved": 2.296875,
+    "avgTime": 3.9163123999999927
+  },
+  {
+    "size": 80,
+    "density": 0.7,
+    "avgSolved": 99.978125,
+    "minSolved": 99.9375,
+    "maxSolved": 100,
+    "avgTime": 7.790070799999967
+  },
+  {
+    "size": 80,
+    "density": 0.8,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 3.1350061999999754
+  },
+  {
+    "size": 80,
+    "density": 0.9,
+    "avgSolved": 100,
+    "minSolved": 100,
+    "maxSolved": 100,
+    "avgTime": 1.3134414999999535
+  }
+]

package-lock.json

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

package.json

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

scripts/add_simulation_translations.cjs

@@ -0,0 +1,61 @@
+const fs = require('fs');
+const path = require('path');
+
+const filePath = path.join(__dirname, '../src/composables/useI18n.js');
+let content = fs.readFileSync(filePath, 'utf8');
+
+const newKeys = {
+    'custom.simulationHelp': 'How is this calculated?',
+    'custom.hideMap': 'Hide difficulty map',
+    'custom.showMap': 'Show difficulty map',
+    'simulation.title': 'Difficulty Simulation',
+    'simulation.status.ready': 'Ready',
+    'simulation.status.stopped': 'Stopped',
+    'simulation.status.completed': 'Completed',
+    'simulation.status.simulating': 'Simulating {size}x{size} @ {density}%',
+    'simulation.start': 'Start Simulation',
+    'simulation.stop': 'Stop',
+    'simulation.table.size': 'Size',
+    'simulation.table.density': 'Density',
+    'simulation.table.solved': 'Solved (Logic)',
+    'simulation.empty': 'Press Start to run Monte Carlo simulation'
+};
+
+const lines = content.split('\n');
+const processedLines = [];
+let currentLang = null;
+
+for (let i = 0; i < lines.length; i++) {
+    let line = lines[i];
+    
+    // Detect start of language block
+    const startMatch = line.match(/^\s{2}(['"]?[\w-]+['"]?): \{/);
+    if (startMatch) {
+        currentLang = startMatch[1].replace(/['"]/g, '');
+    }
+
+    // Detect end of language block
+    if (currentLang && (line.trim() === '},' || line.trim() === '}')) {
+        if (currentLang !== 'pl' && currentLang !== 'en') {
+            // Ensure previous line has comma
+            if (processedLines.length > 0) {
+                let lastLine = processedLines[processedLines.length - 1];
+                if (!lastLine.trim().endsWith(',') && !lastLine.trim().endsWith('{')) {
+                    processedLines[processedLines.length - 1] = lastLine + ',';
+                }
+            }
+
+            // Append new keys
+            Object.entries(newKeys).forEach(([key, value]) => {
+                processedLines.push(`    '${key}': '${value}',`);
+            });
+        }
+        currentLang = null;
+    }
+    
+    processedLines.push(line);
+}
+
+const finalContent = processedLines.join('\n');
+fs.writeFileSync(filePath, finalContent);
+console.log('Successfully added simulation translations to all languages.');

scripts/add_simulation_translations.js

@@ -0,0 +1,97 @@
+
+const fs = require('fs');
+const path = require('path');
+
+const filePath = path.join(__dirname, '../src/composables/useI18n.js');
+let content = fs.readFileSync(filePath, 'utf8');
+
+const newKeys = {
+    'custom.simulationHelp': 'How is this calculated?',
+    'simulation.title': 'Difficulty Simulation',
+    'simulation.status.ready': 'Ready',
+    'simulation.status.stopped': 'Stopped',
+    'simulation.status.completed': 'Completed',
+    'simulation.status.simulating': 'Simulating {size}x{size} @ {density}%',
+    'simulation.start': 'Start Simulation',
+    'simulation.stop': 'Stop',
+    'simulation.table.size': 'Size',
+    'simulation.table.density': 'Density',
+    'simulation.table.solved': 'Solved (Logic)',
+    'simulation.empty': 'Press Start to run Monte Carlo simulation'
+};
+
+// Regex to match the end of a language block
+// Matches "  }," or "  }" at the start of a line
+const blockEndRegex = /^(\s{2})\},?$/gm;
+
+let newContent = content.replace(blockEndRegex, (match, indent, offset) => {
+    // Determine which language we are closing
+    const precedingText = content.substring(0, offset);
+    const langMatch = precedingText.match(/^\s{2}(\w+([-]\w+)?): \{/gm);
+    
+    if (!langMatch) return match;
+    const currentLangLine = langMatch[langMatch.length - 1];
+    const currentLang = currentLangLine.match(/^\s{2}(\w+([-]\w+)?): \{/)[1];
+
+    // Skip pl and en as they are already updated
+    if (currentLang === 'pl' || currentLang === 'en') {
+        return match;
+    }
+
+    // Check if the previous line has a comma
+    // We need to look at the lines before the match
+    // This is tricky with replace callback. 
+    // Easier strategy: Just insert the keys. 
+    // If the file is well formatted, the last item might or might not have a comma.
+    // But we can ensure *our* inserted block starts with a comma if needed? 
+    // No, standard JS objects need comma after previous item.
+    
+    // Let's assume we simply inject before the closing brace.
+    // We'll add a comma to the previous line if it doesn't have one?
+    // That's hard with regex replace on the closing brace only.
+    
+    // Alternative: Split by lines and process.
+    return match; // Placeholder, we will process by lines below.
+});
+
+const lines = content.split('\n');
+const processedLines = [];
+let currentLang = null;
+
+for (let i = 0; i < lines.length; i++) {
+    let line = lines[i];
+    
+    // Detect start of language block
+    const startMatch = line.match(/^\s{2}(['"]?[\w-]+['"]?): \{/);
+    if (startMatch) {
+        currentLang = startMatch[1].replace(/['"]/g, '');
+    }
+
+    // Detect end of language block
+    if (currentLang && (line.trim() === '},' || line.trim() === '}')) {
+        if (currentLang !== 'pl' && currentLang !== 'en') {
+            // Ensure previous line has comma
+            if (processedLines.length > 0) {
+                let lastLine = processedLines[processedLines.length - 1];
+                if (!lastLine.trim().endsWith(',') && !lastLine.trim().endsWith('{')) {
+                    processedLines[processedLines.length - 1] = lastLine + ',';
+                }
+            }
+
+            // Append new keys
+            Object.entries(newKeys).forEach(([key, value]) => {
+                processedLines.push(`    '${key}': '${value}',`);
+            });
+            
+            // Remove trailing comma from last inserted item if we want strictly JSON-like (but JS allows it)
+            // It's fine to leave it.
+        }
+        currentLang = null;
+    }
+    
+    processedLines.push(line);
+}
+
+const finalContent = processedLines.join('\n');
+fs.writeFileSync(filePath, finalContent);
+console.log('Successfully added simulation translations to all languages.');

src/App.vue

@@ -186,10 +186,11 @@ onUnmounted(() => {
 .game-container {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch; /* was center */
   gap: 20px;
   width: 100%;
   padding-bottom: 50px;
+  padding-top: 100px; /* Space for fixed NavBar */
 }
 
 .install-banner {
@@ -202,8 +203,11 @@ onUnmounted(() => {
   align-items: center;
   width: 90%;
   max-width: 600px;
-  margin-bottom: 20px;
+  margin: 0 auto 20px auto; /* Center it manually */
   box-shadow: var(--banner-shadow);
+  position: sticky;
+  left: 0;
+  right: 0;
 }
 
 .install-text {
@@ -227,17 +231,27 @@ onUnmounted(() => {
 .game-layout {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
   gap: 20px;
   width: 100%;
-  max-width: 1200px;
   padding: 0 20px;
 }
 
+/* Center children (except board section which handles itself) */
+.game-layout > *:not(.board-section) {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1200px; /* Keep constraint for panels */
+    width: 100%;
+    position: sticky;
+    left: 0;
+    right: 0;
+}
+
 .board-section {
-  display: flex;
+  display: block;
-  justify-content: center;
   width: 100%;
+  overflow-x: visible;
 }
 
 .fade-enter-active,

src/components/CustomGameModal.vue

@@ -14,6 +14,7 @@ const fillRate = ref(50);
 const errorMsg = ref('');
 const difficultyCanvas = ref(null);
 const isDragging = ref(false);
+const cachedBackground = ref(null);
 
 const drawMap = () => {
   const canvas = difficultyCanvas.value;
@@ -25,46 +26,42 @@ const drawMap = () => {
   // Clear
   ctx.clearRect(0, 0, width, height);
 
-  // Draw Gradient Background
+  // Use cached background if available
-  // Optimization: Create an image data once if static, but here it's small enough.
+  if (cachedBackground.value) {
-  const imgData = ctx.createImageData(width, height);
+      ctx.putImageData(cachedBackground.value, 0, 0);
-  const data = imgData.data;
+  } else {
+      // Draw Gradient Background (Heavy calculation)
+      const imgData = ctx.createImageData(width, height);
+      const data = imgData.data;
 
-  // Ranges:
+      // Ranges:
-  // X: Fill Rate 10% -> 90%
+      // X: Fill Rate 10% -> 90%
-  // Y: Size 5 -> 80
+      // Y: Size 5 -> 80
       
-  for (let y = 0; y < height; y++) {
+      for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
+        for (let x = 0; x < width; x++) {
-      // Map x, y to fillRate, size
+          const normalizedX = x / width;
-      // y=0 -> size 80 (top), y=height -> size 5 (bottom)
+          const normalizedY = 1 - (y / height); // 0 at bottom, 1 at top
-      // x=0 -> fill 10%, x=width -> fill 90%
           
-      const normalizedX = x / width;
+          const fRate = 0.1 + normalizedX * 0.8; // 0.1 to 0.9
-      const normalizedY = 1 - (y / height); // 0 at bottom, 1 at top
+          const sSize = 5 + normalizedY * 75;    // 5 to 80
           
-      const fRate = 0.1 + normalizedX * 0.8; // 0.1 to 0.9
+          const { value } = calculateDifficulty(fRate, sSize);
-      const sSize = 5 + normalizedY * 75;    // 5 to 80
           
-      const { value } = calculateDifficulty(fRate, sSize);
+          // Color Mapping
+          const hue = 120 * (1 - value / 100);
+          const [r, g, b] = hslToRgb(hue / 360, 1, 0.5);
           
-      // Color Mapping:
+          const index = (y * width + x) * 4;
-      // Green (0%) -> Yellow (50%) -> Red (100%)
+          data[index] = r;
-      // Hue: 120 -> 0
+          data[index + 1] = g;
-      const hue = 120 * (1 - value / 100);
+          data[index + 2] = b;
-      
+          data[index + 3] = 255; // Alpha
-      // Convert HSL to RGB (Simplified)
+        }
-      // Saturation 100%, Lightness 50%
+      }
-      const [r, g, b] = hslToRgb(hue / 360, 1, 0.5);
+      ctx.putImageData(imgData, 0, 0);
-      
+      cachedBackground.value = imgData;
-      const index = (y * width + x) * 4;
-      data[index] = r;
-      data[index + 1] = g;
-      data[index + 2] = b;
-      data[index + 3] = 255; // Alpha
-    }
   }
-  ctx.putImageData(imgData, 0, 0);
 
   // Draw current position
   // Map current fillRate/size to x,y
@@ -166,6 +163,8 @@ const showAdvanced = ref(false);
 const toggleAdvanced = () => {
     showAdvanced.value = !showAdvanced.value;
     if (showAdvanced.value) {
+        // Reset cache when opening to ensure size is correct if canvas resized
+        cachedBackground.value = null; 
         nextTick(drawMap);
     }
 };
@@ -306,7 +305,7 @@ const confirm = () => {
 
       <div class="advanced-toggle">
           <button class="btn-text" @click="toggleAdvanced">
-              {{ showAdvanced ? 'Ukryj mapę trudności' : 'Pokaż mapę trudności' }}
+              {{ showAdvanced ? t('custom.hideMap') : t('custom.showMap') }}
           </button>
       </div>
       

src/components/FixedBar.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
-import { useTimer } from '@/composables/useTimer';
+import { formatTime } from '@/utils/timeUtils';
 import { useI18n } from '@/composables/useI18n';
 
 const store = usePuzzleStore();
-const { formatTime } = useTimer();
 const { t } = useI18n();
 
 const isVisible = ref(false);

src/components/GameBoard.vue

@@ -118,6 +118,8 @@ const computeCellSize = () => {
   const gap = parseFloat(gapRaw);
   const gridPad = parseFloat(gridPadRaw);
 
+  const isDesktop = window.matchMedia('(min-width: 769px)').matches;
+
   let containerWidth;
   if (scrollWrapper.value) {
     containerWidth = scrollWrapper.value.clientWidth;
@@ -131,8 +133,15 @@ const computeCellSize = () => {
   const availableForGrid = Math.max(0, containerWidth - hintWidth);
   
   const size = Math.floor((availableForGrid - gridPad * 2 - (store.size - 1) * gap) / store.size);
-  // Keep min 18, max 36
+  
-  cellSize.value = Math.max(18, Math.min(36, size));
+  if (isDesktop) {
+      // Desktop: Allow overflow, use comfortable size
+      cellSize.value = 30;
+  } else {
+      // Mobile: Fit to screen
+      // Keep min 18, max 36
+      cellSize.value = Math.max(18, Math.min(36, size));
+  }
 };
 
 const handleGlobalMouseUp = () => {
@@ -258,8 +267,15 @@ watch(() => store.size, async () => {
 /* Desktop: Remove scroll behavior to ensure full grid visibility */
 @media (min-width: 769px) {
   .game-board-wrapper {
-    overflow-x: auto; /* Allow scrolling if grid is too large (e.g. 80x80) */
+    overflow: visible;
-    align-items: center; /* Center the grid on desktop */
+    width: max-content;
+    min-width: 100%;
+    margin: 0 auto; /* Center the wrapper safely */
+    align-items: flex-start; /* Prevent cropping when centered */
+  }
+  
+  .game-container {
+      /* margin: 0 auto; - wrapper handles centering now */
   }
 }
 

src/components/NavBar.vue

@@ -435,8 +435,10 @@ watch(isMobileMenuOpen, (val) => {
   justify-content: space-between;
   align-items: center;
   z-index: 100;
-  position: sticky;
+  position: fixed;
   top: 0;
+  left: 0;
+  right: 0;
 }
 
 .nav-left {

src/components/SimulationView.vue

@@ -3,9 +3,11 @@
 import { ref, computed } from 'vue';
 import { generateRandomGrid, calculateHints } from '@/utils/puzzleUtils';
 import { solvePuzzle } from '@/utils/solver';
+import { useI18n } from '@/composables/useI18n';
 import { X, Play, Square, RotateCcw } from 'lucide-vue-next';
 
 const emit = defineEmits(['close']);
+const { t } = useI18n();
 
 const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]; 
 const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
@@ -13,12 +15,17 @@ const SAMPLES_PER_POINT = 10; // Reduced for web performance demo
 
 const isRunning = ref(false);
 const progress = ref(0);
-const currentStatus = ref('Ready');
+const currentStatus = ref('');
 const results = ref([]);
 const simulationSpeed = ref(1); // 1 = Normal, 2 = Fast (less render updates)
 
 let stopRequested = false;
 
+const displayStatus = computed(() => {
+    if (!currentStatus.value) return t('simulation.status.ready');
+    return currentStatus.value;
+});
+
 const startSimulation = async () => {
     if (isRunning.value) return;
     isRunning.value = true;
@@ -32,12 +39,15 @@ const startSimulation = async () => {
     for (const size of SIZES) {
         for (const density of DENSITIES) {
             if (stopRequested) {
-                currentStatus.value = 'Stopped';
+                currentStatus.value = t('simulation.status.stopped');
                 isRunning.value = false;
                 return;
             }
 
-            currentStatus.value = `Simulating ${size}x${size} @ ${(density * 100).toFixed(0)}%`;
+            currentStatus.value = t('simulation.status.simulating', { 
+                size: size, 
+                density: (density * 100).toFixed(0) 
+            });
             
             let totalSolved = 0;
             
@@ -66,7 +76,7 @@ const startSimulation = async () => {
     }
 
     isRunning.value = false;
-    currentStatus.value = 'Completed';
+    currentStatus.value = t('simulation.status.completed');
 };
 
 const stopSimulation = () => {
@@ -86,7 +96,7 @@ const getRowColor = (solved) => {
   <div class="modal-overlay" @click.self="emit('close')">
     <div class="modal glass-panel">
       <div class="header">
-        <h2>Difficulty Simulation</h2>
+        <h2>{{ t('simulation.title') }}</h2>
         <button class="close-btn" @click="emit('close')">
             <X />
         </button>
@@ -95,7 +105,7 @@ const getRowColor = (solved) => {
       <div class="content">
         <div class="controls">
             <div class="status-bar">
-                <div class="status-text">{{ currentStatus }}</div>
+                <div class="status-text">{{ displayStatus }}</div>
                 <div class="progress-track">
                     <div class="progress-fill" :style="{ width: progress + '%' }"></div>
                 </div>
@@ -103,10 +113,10 @@ const getRowColor = (solved) => {
             
             <div class="actions">
                 <button v-if="!isRunning" class="btn-neon" @click="startSimulation">
-                    <Play class="icon" /> Start Simulation
+                    <Play class="icon" /> {{ t('simulation.start') }}
                 </button>
                 <button v-else class="btn-neon secondary" @click="stopSimulation">
-                    <Square class="icon" /> Stop
+                    <Square class="icon" /> {{ t('simulation.stop') }}
                 </button>
             </div>
         </div>
@@ -115,9 +125,9 @@ const getRowColor = (solved) => {
             <table class="results-table">
                 <thead>
                     <tr>
-                        <th>Size</th>
+                        <th>{{ t('simulation.table.size') }}</th>
-                        <th>Density</th>
+                        <th>{{ t('simulation.table.density') }}</th>
-                        <th>Solved (Logic)</th>
+                        <th>{{ t('simulation.table.solved') }}</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -129,7 +139,7 @@ const getRowColor = (solved) => {
                 </tbody>
             </table>
             <div v-if="results.length === 0" class="empty-state">
-                Press Start to run Monte Carlo simulation
+                {{ t('simulation.empty') }}
             </div>
         </div>
       </div>

src/components/StatusPanel.vue

@@ -1,12 +1,11 @@
 <script setup>
 import { computed } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
-import { useTimer } from '@/composables/useTimer';
+import { formatTime } from '@/utils/timeUtils';
 import { useI18n } from '@/composables/useI18n';
 import { RotateCcw, RefreshCw, Eye, Undo } from 'lucide-vue-next';
 
 const store = usePuzzleStore();
-const { formatTime } = useTimer();
 const { t } = useI18n();
 
 const formattedTime = computed(() => formatTime(store.elapsedTime));

src/components/WinModal.vue

@@ -3,17 +3,20 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { Fireworks } from 'fireworks-js';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
-import { useTimer } from '@/composables/useTimer';
+import { formatTime } from '@/utils/timeUtils';
+import { playFanfare, cleanupAudio } from '@/utils/audio';
+import { 
+  buildShareUrl, 
+  downloadShareSVG as utilsDownloadShareSVG, 
+  downloadShareImage as utilsDownloadShareImage, 
+  createShareBlob 
+} from '@/utils/shareUtils';
 import { Download, FileCode } from 'lucide-vue-next';
-import { calculateDifficulty } from '@/utils/puzzleUtils';
 
 const store = usePuzzleStore();
 const { t } = useI18n();
-const { formatTime } = useTimer();
 const fireworksRef = ref(null);
 let fireworksInstance = null;
-let audioContext = null;
-let masterGain = null;
 const shareInProgress = ref(false);
 
 const formattedTime = computed(() => formatTime(store.elapsedTime));
@@ -29,57 +32,6 @@ const handleKeyDown = (e) => {
   }
 };
 
-const playFanfare = async () => {
-  const AudioCtx = window.AudioContext || window.webkitAudioContext;
-  if (!AudioCtx) return;
-  audioContext = new AudioCtx();
-  if (audioContext.state === 'suspended') {
-    try {
-      await audioContext.resume();
-    } catch {
-      return;
-    }
-  }
-  masterGain = audioContext.createGain();
-  masterGain.gain.value = 0.25; // Slightly louder but softer tone
-  masterGain.connect(audioContext.destination);
-
-  const now = audioContext.currentTime;
-
-  const playNote = (freq, startTime, duration) => {
-    const osc = audioContext.createOscillator();
-    const gain = audioContext.createGain();
-    
-    // Mix of sine and triangle for a bell-like quality
-    osc.type = 'sine'; 
-    osc.frequency.value = freq;
-
-    // Envelope for elegant bell/chime sound
-    gain.gain.setValueAtTime(0, startTime);
-    gain.gain.linearRampToValueAtTime(0.4, startTime + 0.05); // Soft attack
-    gain.gain.exponentialRampToValueAtTime(0.01, startTime + duration); // Long release
-
-    osc.connect(gain);
-    gain.connect(masterGain);
-
-    osc.start(startTime);
-    osc.stop(startTime + duration + 0.1);
-  };
-
-  // C Major 7 Arpeggio sequence (C5, E5, G5, B5, C6) - Elegant & Uplifting
-  const sequence = [
-    { freq: 523.25, time: 0.0, dur: 0.8 }, // C5
-    { freq: 659.25, time: 0.1, dur: 0.8 }, // E5
-    { freq: 783.99, time: 0.2, dur: 0.8 }, // G5
-    { freq: 987.77, time: 0.3, dur: 0.8 }, // B5 (Maj7)
-    { freq: 1046.50, time: 0.4, dur: 2.0 }, // C6 (High C resolve)
-    // Add a bass root note at the end for fullness
-    { freq: 523.25, time: 0.4, dur: 2.0 }  // C5
-  ];
-
-  sequence.forEach(note => playNote(note.freq, now + note.time, note.dur));
-};
-
 const triggerVibration = () => {
   if (!('vibrate' in navigator)) return;
   const isCoarse = window.matchMedia?.('(pointer: coarse)')?.matches;
@@ -89,286 +41,19 @@ const triggerVibration = () => {
   }
 };
 
-const buildShareCanvas = () => {
+const getShareData = () => ({
-  const grid = store.playerGrid;
+  grid: store.playerGrid,
-  if (!grid || !grid.length) return null;
+  size: store.size,
-  const appUrl = 'https://nonograms.7u.pl/';
+  currentDensity: store.currentDensity,
-  const size = store.size;
+  guideUsageCount: store.guideUsageCount
-  const maxBoard = 640;
+});
-  const cellSize = Math.max(8, Math.floor(maxBoard / size));
-  const boardSize = cellSize * size;
-  const padding = 28;
-  const headerHeight = 64;
-  const footerHeight = 28;
-  const infoHeight = 40; // New space for difficulty/guide info
-  const width = boardSize + padding * 2;
-  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
-  const scale = window.devicePixelRatio || 1;
-  const canvas = document.createElement('canvas');
-  canvas.width = width * scale;
-  canvas.height = height * scale;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return null;
-  ctx.scale(scale, scale);
-  const bg = ctx.createLinearGradient(0, 0, width, height);
-  bg.addColorStop(0, '#1b2a4a');
-  bg.addColorStop(1, '#0a1324');
-  ctx.fillStyle = bg;
-  ctx.fillRect(0, 0, width, height);
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.35)';
-  ctx.fillRect(12, 12, width - 24, height - 24);
-  ctx.fillStyle = '#e8fbff';
-  ctx.font = '700 26px "Segoe UI", sans-serif';
-  ctx.fillText(t('app.title'), padding, padding + 10);
-  ctx.font = '600 16px "Segoe UI", sans-serif';
-  ctx.fillText(`${t('win.time')} ${formattedTime.value}`, padding, padding + 34);
-  
-  // Difficulty & Density Info
-  const densityPercent = Math.round(store.currentDensity * 100);
-  const difficultyKey = calculateDifficulty(store.currentDensity);
-  let diffColor = '#33ff33';
-  if (difficultyKey === 'extreme') diffColor = '#ff3333';
-  else if (difficultyKey === 'hardest') diffColor = '#ff9933';
-  else if (difficultyKey === 'harder') diffColor = '#ffff33';
-  
-  const difficultyText = t(`difficulty.${difficultyKey}`);
-  ctx.font = '600 14px "Segoe UI", sans-serif';
-  
-  // Right aligned difficulty info
-  const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
-  const diffWidth = ctx.measureText(diffLabel).width;
-  ctx.fillStyle = diffColor;
-  ctx.fillText(diffLabel, width - padding - diffWidth, padding + 34);
-
-  const gridX = padding;
-  const gridY = padding + headerHeight;
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.06)';
-  ctx.fillRect(gridX, gridY, boardSize, boardSize);
-  ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
-  ctx.lineWidth = 1;
-  for (let i = 0; i <= size; i++) {
-    const x = gridX + i * cellSize;
-    const y = gridY + i * cellSize;
-    ctx.beginPath();
-    ctx.moveTo(x, gridY);
-    ctx.lineTo(x, gridY + boardSize);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.moveTo(gridX, y);
-    ctx.lineTo(gridX + boardSize, y);
-    ctx.stroke();
-  }
-  ctx.fillStyle = '#00f2fe';
-  ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
-  ctx.lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
-  for (let r = 0; r < size; r++) {
-    for (let c = 0; c < size; c++) {
-      const state = grid[r]?.[c];
-      if (state === 1) {
-        const x = gridX + c * cellSize + 1;
-        const y = gridY + r * cellSize + 1;
-        ctx.fillRect(x, y, cellSize - 2, cellSize - 2);
-      } else if (state === 2) {
-        const x = gridX + c * cellSize + cellSize * 0.2;
-        const y = gridY + r * cellSize + cellSize * 0.2;
-        const d = cellSize * 0.6;
-        ctx.beginPath();
-        ctx.moveTo(x, y);
-        ctx.lineTo(x + d, y + d);
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(x + d, y);
-        ctx.lineTo(x, y + d);
-        ctx.stroke();
-      }
-    }
-  }
-
-  // Guide Usage Info (Dirty Flag)
-  if (store.guideUsageCount > 0) {
-      ctx.fillStyle = '#ff4d4d';
-      ctx.font = '600 14px "Segoe UI", sans-serif';
-      
-      const totalCells = store.size * store.size;
-      const percent = Math.min(100, Math.round((store.guideUsageCount / totalCells) * 100));
-      const guideText = t('win.usedGuide', { count: store.guideUsageCount, percent });
-      
-      ctx.fillText(`⚠️ ${guideText}`, padding, height - padding - footerHeight + 10);
-  }
-
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.75)';
-  ctx.font = '500 14px "Segoe UI", sans-serif';
-  ctx.fillText(appUrl, padding, height - padding + 6);
-  return canvas;
-};
-
-const buildShareSVG = () => {
-  const grid = store.playerGrid;
-  if (!grid || !grid.length) return null;
-  
-  const appUrl = 'https://nonograms.7u.pl/';
-  const size = store.size;
-  const maxBoard = 640;
-  const cellSize = Math.max(8, Math.floor(maxBoard / size));
-  const boardSize = cellSize * size;
-  const padding = 28;
-  const headerHeight = 64;
-  const footerHeight = 28;
-  const infoHeight = 40;
-  const width = boardSize + padding * 2;
-  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
-
-  // Colors
-  const bgGradientStart = '#1b2a4a';
-  const bgGradientEnd = '#0a1324';
-  const overlayColor = 'rgba(0, 0, 0, 0.35)';
-  const textColor = '#e8fbff';
-  const gridColor = 'rgba(255, 255, 255, 0.06)';
-  const gridLineColor = 'rgba(255, 255, 255, 0.12)';
-  const filledColor = '#00f2fe';
-  const crossColor = 'rgba(255, 255, 255, 0.5)';
-  const urlColor = 'rgba(255, 255, 255, 0.75)';
-
-  // Difficulty Logic
-  const densityPercent = Math.round(store.currentDensity * 100);
-  const diffInfo = calculateDifficulty(store.currentDensity, store.size);
-  const difficultyKey = diffInfo.level;
-  let diffColor = '#33ff33';
-  if (difficultyKey === 'extreme') diffColor = '#ff3333';
-  else if (difficultyKey === 'hardest') diffColor = '#ff9933';
-  else if (difficultyKey === 'harder') diffColor = '#ffff33';
-  const difficultyText = t(`difficulty.${difficultyKey}`);
-  const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
-
-  let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">`;
-  
-  // Background
-  svgContent += `
-    <defs>
-      <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="${bgGradientStart}"/>
-        <stop offset="100%" stop-color="${bgGradientEnd}"/>
-      </linearGradient>
-    </defs>
-    <rect width="100%" height="100%" fill="url(#bg)"/>
-    <rect x="12" y="12" width="${width - 24}" height="${height - 24}" fill="${overlayColor}"/>
-  `;
-
-  // Text: Title & Time
-  svgContent += `
-    <text x="${padding}" y="${padding + 28}" font-family="Segoe UI, sans-serif" font-weight="700" font-size="26" fill="${textColor}">${t('app.title')}</text>
-    <text x="${padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="16" fill="${textColor}">${t('win.time')} ${formattedTime.value}</text>
-  `;
-
-  // Text: Difficulty (Right Aligned - manual approx or end anchor)
-  svgContent += `
-    <text x="${width - padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="${diffColor}" text-anchor="end">${diffLabel}</text>
-  `;
-
-  const gridX = padding;
-  const gridY = padding + headerHeight;
-
-  // Grid Background
-  svgContent += `<rect x="${gridX}" y="${gridY}" width="${boardSize}" height="${boardSize}" fill="${gridColor}"/>`;
-
-  // Grid Lines
-  let gridLines = '';
-  for (let i = 0; i <= size; i++) {
-    const pos = i * cellSize;
-    // Vertical
-    gridLines += `<line x1="${gridX + pos}" y1="${gridY}" x2="${gridX + pos}" y2="${gridY + boardSize}" stroke="${gridLineColor}" stroke-width="1"/>`;
-    // Horizontal
-    gridLines += `<line x1="${gridX}" y1="${gridY + pos}" x2="${gridX + boardSize}" y2="${gridY + pos}" stroke="${gridLineColor}" stroke-width="1"/>`;
-  }
-  svgContent += gridLines;
-
-  // Cells
-  let cells = '';
-  const lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
-  
-  for (let r = 0; r < size; r++) {
-    for (let c = 0; c < size; c++) {
-      const state = grid[r]?.[c];
-      const cx = gridX + c * cellSize;
-      const cy = gridY + r * cellSize;
-      
-      if (state === 1) { // Filled
-        cells += `<rect x="${cx + 1}" y="${cy + 1}" width="${cellSize - 2}" height="${cellSize - 2}" fill="${filledColor}"/>`;
-      } else if (state === 2) { // Cross
-        const d = cellSize * 0.6;
-        const off = cellSize * 0.2;
-        cells += `
-          <path d="M${cx + off} ${cy + off} L${cx + off + d} ${cy + off + d} M${cx + off + d} ${cy + off} L${cx + off} ${cy + off + d}" 
-          stroke="${crossColor}" stroke-width="${lineWidth}" stroke-linecap="round"/>
-        `;
-      }
-    }
-  }
-  svgContent += cells;
-
-  // Guide Usage
-  if (store.guideUsageCount > 0) {
-      const totalCells = store.size * store.size;
-      const percent = Math.min(100, Math.round((store.guideUsageCount / totalCells) * 100));
-      const guideText = t('win.usedGuide', { count: store.guideUsageCount, percent });
-      svgContent += `<text x="${padding}" y="${height - padding - footerHeight + 10}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="#ff4d4d">⚠️ ${guideText}</text>`;
-  }
-
-  // URL
-  svgContent += `<text x="${padding}" y="${height - padding + 6}" font-family="Segoe UI, sans-serif" font-weight="500" font-size="14" fill="${urlColor}">${appUrl}</text>`;
-
-  svgContent += '</svg>';
-  return svgContent;
-};
-
-const canvasToBlob = (canvas) => new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), 'image/png'));
-
-const createShareBlob = async () => {
-  const canvas = buildShareCanvas();
-  if (!canvas) return null;
-  return canvasToBlob(canvas);
-};
 
 const downloadShareSVG = () => {
-  const svgString = buildShareSVG();
+  utilsDownloadShareSVG(getShareData(), t, formattedTime.value);
-  if (!svgString) return;
-  const blob = new Blob([svgString], { type: 'image/svg+xml' });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `nonogram-${store.size}x${store.size}.svg`;
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  URL.revokeObjectURL(url);
 };
 
 const downloadShareImage = async () => {
-  const blob = await createShareBlob();
+  await utilsDownloadShareImage(getShareData(), t, formattedTime.value);
-  if (!blob) return;
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `nonogram-${store.size}x${store.size}.png`;
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  URL.revokeObjectURL(url);
-};
-
-const buildShareUrl = (target, text, url) => {
-  const encodedText = encodeURIComponent(text);
-  const encodedUrl = encodeURIComponent(url);
-  if (target === 'x') {
-    return `https://x.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
-  }
-  if (target === 'facebook') {
-    return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&quote=${encodedText}`;
-  }
-  if (target === 'whatsapp') {
-    return `https://wa.me/?text=${encodeURIComponent(`${text} ${url}`)}`;
-  }
-  return '';
 };
 
 const shareTo = async (target) => {
@@ -382,7 +67,7 @@ const shareTo = async (target) => {
   try {
     // Try native share first if available (supports images)
     if (navigator.share && navigator.canShare) {
-      const blob = await createShareBlob();
+      const blob = await createShareBlob(getShareData(), t, formattedTime.value);
       if (blob) {
         const file = new File([blob], `nonogram-${store.size}x${store.size}.png`, { type: 'image/png' });
         if (navigator.canShare({ files: [file] })) {
@@ -406,10 +91,6 @@ const shareTo = async (target) => {
   }
 
   // Fallback: Direct Link + Download
-  // Open window immediately if possible (though we awaited above, so it might be blocked, 
-  // but we can't do much about it if we want to try native share first).
-  // Ideally, for Desktop, navigator.share is undefined so we skip the await above.
-  
   if (shareUrl) {
     window.open(shareUrl, '_blank', 'noopener');
   }
@@ -450,11 +131,7 @@ onUnmounted(() => {
   if ('vibrate' in navigator) {
     navigator.vibrate(0);
   }
-  if (audioContext) {
+  cleanupAudio();
-    audioContext.close();
-    audioContext = null;
-  }
-  masterGain = null;
 });
 </script>
 
@@ -472,27 +149,27 @@ onUnmounted(() => {
         </div>
       </div>
 
-      <div class="share">
+      <div class="social-section">
-        <div class="share-title">{{ t('win.shareTitle') }}</div>
+        <div class="social-header">{{ t('win.shareTitle') }}</div>
-        <div class="share-buttons">
+        <div class="social-grid">
           <!-- X (Twitter) -->
-          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareX')" @click="shareTo('x')">
+          <button class="btn-neon secondary social-item" :disabled="shareInProgress" :aria-label="t('win.shareX')" @click="shareTo('x')">
-            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M18.901 3H22l-7.21 8.26L23 21h-6.66L11.13 14.76 5.66 21H2.56l7.73-8.83L1 3h6.8l4.63 5.56L18.9 3h.001zm-1.2 15.9h1.77L6.44 5.1H4.44l13.26 13.8z"/></svg>
+            <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"><path d="M18.901 3H22l-7.21 8.26L23 21h-6.66L11.13 14.76 5.66 21H2.56l7.73-8.83L1 3h6.8l4.63 5.56L18.9 3h.001zm-1.2 15.9h1.77L6.44 5.1H4.44l13.26 13.8z"/></svg>
           </button>
           <!-- Facebook -->
-          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareFacebook')" @click="shareTo('facebook')">
+          <button class="btn-neon secondary social-item" :disabled="shareInProgress" :aria-label="t('win.shareFacebook')" @click="shareTo('facebook')">
-            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.791-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
+            <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.791-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
           </button>
           <!-- WhatsApp -->
-          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareWhatsapp')" @click="shareTo('whatsapp')">
+          <button class="btn-neon secondary social-item" :disabled="shareInProgress" :aria-label="t('win.shareWhatsapp')" @click="shareTo('whatsapp')">
-            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
+            <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
           </button>
           <!-- Download Screenshot (Compact) -->
-          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareDownload')" @click="downloadShareImage">
+          <button class="btn-neon secondary social-item" :disabled="shareInProgress" :aria-label="t('win.shareDownload')" @click="downloadShareImage">
             <Download :size="20" />
           </button>
           <!-- Download SVG (Compact) -->
-          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" aria-label="Download SVG" @click="downloadShareSVG">
+          <button class="btn-neon secondary social-item" :disabled="shareInProgress" aria-label="Download SVG" @click="downloadShareSVG">
             <FileCode :size="20" />
           </button>
         </div>
@@ -575,14 +252,14 @@ p {
   margin-left: 10px;
 }
 
-.share {
+.social-section {
   margin-bottom: 24px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
-.share-title {
+.social-header {
   font-size: 0.95rem;
   letter-spacing: 1px;
   text-transform: uppercase;
@@ -590,14 +267,14 @@ p {
   overflow-wrap: anywhere;
 }
 
-.share-buttons {
+.social-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
 }
 
-.share-btn {
+.social-item {
   width: 44px;
   height: 44px;
   padding: 0;
@@ -607,14 +284,14 @@ p {
   justify-content: center;
 }
 
-.share-icon {
+.social-icon {
   width: 22px;
   height: 22px;
   display: block;
 }
 
 
-.share-download {
+.social-download {
   align-self: center;
   padding: 8px 18px;
   font-size: 0.85rem;

src/composables/useNonogram.js

@@ -44,6 +44,7 @@ export function useNonogram() {
   };
 
   const stopDrag = () => {
+    store.endInteraction();
     isDragging.value = false;
     dragMode.value = null;
   };

src/composables/useSolver.js

@@ -9,8 +9,8 @@ export function useSolver() {
     const isPlaying = ref(false);
     const isProcessing = ref(false);
     const speedIndex = ref(0);
-    const speeds = [1000, 500, 250, 125];
+    const speeds = [1000, 500, 250, 125, 62];
-    const speedLabels = ['x1', 'x2', 'x3', 'x4'];
+    const speedLabels = ['x1', 'x2', 'x4', 'x8', 'x16'];
     const statusText = ref(t('guide.waiting'));
     
     let intervalId = null;

src/composables/useTimer.js

@@ -1,49 +0,0 @@
-import { ref, onUnmounted } from 'vue';
-
-export function useTimer() {
-  const time = ref(0);
-  const timerInterval = ref(null);
-  const isRunning = ref(false);
-
-  const formatTime = (seconds) => {
-    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
-    const s = (seconds % 60).toString().padStart(2, '0');
-    return `${m}:${s}`;
-  };
-
-  const start = () => {
-    if (isRunning.value) return;
-    isRunning.value = true;
-    const startTime = Date.now() - (time.value * 1000);
-    
-    timerInterval.value = setInterval(() => {
-      time.value = Math.floor((Date.now() - startTime) / 1000);
-    }, 1000);
-  };
-
-  const stop = () => {
-    if (timerInterval.value) {
-      clearInterval(timerInterval.value);
-      timerInterval.value = null;
-    }
-    isRunning.value = false;
-  };
-
-  const reset = () => {
-    stop();
-    time.value = 0;
-  };
-
-  onUnmounted(() => {
-    stop();
-  });
-
-  return {
-    time,
-    isRunning,
-    start,
-    stop,
-    reset,
-    formatTime
-  };
-}

src/constants/puzzles.js

@@ -0,0 +1,53 @@
+export const PUZZLES = {
+  easy: {
+    id: 'easy',
+    name: 'Uśmiech',
+    size: 5,
+    grid: [
+      [0, 1, 0, 1, 0],
+      [0, 1, 0, 1, 0],
+      [0, 0, 0, 0, 0],
+      [1, 0, 0, 0, 1],
+      [0, 1, 1, 1, 0]
+    ]
+  },
+  medium: {
+    id: 'medium',
+    name: 'Domek',
+    size: 10,
+    grid: [
+      [0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
+      [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
+      [0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
+      [0, 1, 1, 0, 0, 0, 0, 1, 1, 0],
+      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+      [1, 0, 0, 1, 1, 1, 1, 0, 0, 1],
+      [1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
+      [1, 0, 0, 1, 1, 1, 1, 0, 0, 1],
+      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+      [0, 1, 1, 1, 1, 1, 1, 1, 1, 0]
+    ]
+  },
+  hard: {
+    id: 'hard',
+    name: 'Statek',
+    size: 15,
+    grid: [
+      [0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],
+      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
+      [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0],
+      [0,0,0,0,1,1,1,1,1,1,1,0,0,0,0],
+      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
+      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
+      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
+      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
+      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
+      [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
+      [0,0,0,1,1,1,1,1,1,1,1,1,0,0,0],
+      [0,0,0,0,1,1,1,1,1,1,1,0,0,0,0],
+      [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0]
+    ]
+  }
+};

src/stores/puzzle.js

@@ -1,61 +1,7 @@
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
-import { generateRandomGrid } from '@/utils/puzzleUtils';
+import { generateRandomGrid, calculateHints, calculateLineHints, validateLine } from '@/utils/puzzleUtils';
-
+import { PUZZLES } from '@/constants/puzzles';
-// Definicje zagadek (Static Puzzles)
-const PUZZLES = {
-  easy: {
-    id: 'easy',
-    name: 'Uśmiech',
-    size: 5,
-    grid: [
-      [0, 1, 0, 1, 0],
-      [0, 1, 0, 1, 0],
-      [0, 0, 0, 0, 0],
-      [1, 0, 0, 0, 1],
-      [0, 1, 1, 1, 0]
-    ]
-  },
-  medium: {
-    id: 'medium',
-    name: 'Domek',
-    size: 10,
-    grid: [
-      [0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
-      [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
-      [0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
-      [0, 1, 1, 0, 0, 0, 0, 1, 1, 0],
-      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-      [1, 0, 0, 1, 1, 1, 1, 0, 0, 1],
-      [1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
-      [1, 0, 0, 1, 1, 1, 1, 0, 0, 1],
-      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-      [0, 1, 1, 1, 1, 1, 1, 1, 1, 0]
-    ]
-  },
-  hard: {
-    id: 'hard',
-    name: 'Statek',
-    size: 15,
-    grid: [
-      [0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],
-      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
-      [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0],
-      [0,0,0,0,1,1,1,1,1,1,1,0,0,0,0],
-      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
-      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
-      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
-      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
-      [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
-      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
-      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-      [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
-      [0,0,0,1,1,1,1,1,1,1,1,1,0,0,0],
-      [0,0,0,0,1,1,1,1,1,1,1,0,0,0,0],
-      [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0]
-    ]
-  }
-};
 
 export const usePuzzleStore = defineStore('puzzle', () => {
   // State
@@ -75,6 +21,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   
   // History for undo
   const history = ref([]);
+  const currentTransaction = ref(null);
   
   // Progress State
   const totalCellsToFill = computed(() => {
@@ -150,18 +97,39 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     playerGrid.value = Array(size.value).fill().map(() => Array(size.value).fill(0));
     moves.value = 0;
     history.value = [];
+    currentTransaction.value = null;
   }
   
-  function pushHistory() {
+  function startInteraction() {
-      const gridCopy = playerGrid.value.map(row => [...row]);
+      currentTransaction.value = [];
-      history.value.push(gridCopy);
+  }
-      if (history.value.length > 50) history.value.shift();
+
+  function endInteraction() {
+      if (currentTransaction.value && currentTransaction.value.length > 0) {
+          history.value.push(currentTransaction.value);
+          if (history.value.length > 50) history.value.shift();
+          saveState();
+      }
+      currentTransaction.value = null;
   }
 
   function undo() {
       if (history.value.length === 0 || isGameWon.value) return;
-      const previousState = history.value.pop();
+      
-      playerGrid.value = previousState;
+      const transaction = history.value.pop();
+      
+      // Handle legacy history (full grid snapshot)
+      if (!Array.isArray(transaction) || (transaction.length > 0 && Array.isArray(transaction[0]))) {
+          playerGrid.value = transaction;
+      } else {
+          // Handle new history (list of changes)
+          // Revert changes in reverse order
+          for (let i = transaction.length - 1; i >= 0; i--) {
+              const { r, c, oldVal } = transaction[i];
+              playerGrid.value[r][c] = oldVal;
+          }
+      }
+      
       moves.value++; 
       saveState();
   }
@@ -169,8 +137,6 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   function toggleCell(r, c, isRightClick = false) {
     if (isGameWon.value) return;
     
-    pushHistory();
-
     const currentState = playerGrid.value[r][c];
     let newState;
     
@@ -182,39 +148,79 @@ export const usePuzzleStore = defineStore('puzzle', () => {
       newState = currentState === 1 ? 0 : 1;
     }
     
-    playerGrid.value[r][c] = newState; // This triggers reactivity
+    if (currentState === newState) return;
+
+    // Apply change
+    playerGrid.value[r][c] = newState; 
+    
+    // Record history
+    const change = { r, c, oldVal: currentState, newVal: newState };
+    if (currentTransaction.value) {
+        currentTransaction.value.push(change);
+    } else {
+        // Atomic change if no interaction started
+        history.value.push([change]);
+        if (history.value.length > 50) history.value.shift();
+        saveState();
+    }
+
     moves.value++;
     checkWin();
-    saveState();
+    // saveState(); // Moved to endInteraction or atomic block
   }
   
   function setCell(r, c, state) {
      if (isGameWon.value) return;
-     if (playerGrid.value[r][c] !== state) {
+     const currentState = playerGrid.value[r][c];
-         pushHistory();
+     
+     if (currentState !== state) {
+         // Apply change
          playerGrid.value[r][c] = state;
+         
+         // Record history
+         const change = { r, c, oldVal: currentState, newVal: state };
+         if (currentTransaction.value) {
+             currentTransaction.value.push(change);
+         } else {
+             history.value.push([change]);
+             if (history.value.length > 50) history.value.shift();
+             saveState();
+         }
+         
          moves.value++;
          checkWin();
-         saveState();
+         // saveState(); // Moved to endInteraction or atomic block
      }
   }
 
   function checkWin() {
     let correct = true;
+    
+    // Calculate expected hints from solution (truth)
+    // We do this dynamically to ensure we always check against the rules of the board
+    const solutionRows = solution.value;
+    const solutionCols = Array(size.value).fill().map((_, c) => solution.value.map(r => r[c]));
+    
+    // Check Rows
     for (let r = 0; r < size.value; r++) {
+      const targetHints = calculateLineHints(solutionRows[r]);
+      const playerLine = playerGrid.value[r];
+      if (!validateLine(playerLine, targetHints)) {
+        correct = false;
+        break;
+      }
+    }
+    
+    if (correct) {
+      // Check Columns
       for (let c = 0; c < size.value; c++) {
-        const playerCell = playerGrid.value[r][c];
+        const targetHints = calculateLineHints(solutionCols[c]);
-        const solutionCell = solution.value[r][c];
+        const playerLine = playerGrid.value.map(row => row[c]);
-        
+        if (!validateLine(playerLine, targetHints)) {
-        const isFilled = playerCell === 1;
-        const shouldBeFilled = solutionCell === 1;
-        
-        if (isFilled !== shouldBeFilled) {
           correct = false;
           break;
         }
       }
-      if (!correct) break;
     }
     
     if (correct) {
@@ -289,12 +295,6 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     return false;
   }
   
-  // Duplicate initGame removed
-  
-  // Duplicate initCustomGame removed
-
-  // Duplicate toggleCell/setCell removed
-
   function resetGame() {
     if (currentLevelId.value === 'custom') {
         resetGrid();
@@ -343,7 +343,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     hasUsedGuide,
     guideUsageCount,
     currentDensity,
-    markGuideUsed
+    markGuideUsed,
+    startInteraction,
+    endInteraction
   };
 
 });

src/styles/main.css

@@ -130,7 +130,6 @@
 }
 
 html {
-  overflow-x: hidden;
   width: 100%;
 }
 
@@ -139,18 +138,18 @@ body {
   padding: 20px;
   font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
   background: var(--bg-gradient);
+  background-attachment: fixed;
+  background-size: cover;
   color: var(--text-color);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  overflow-x: hidden;
 }
 
 /* Ensure no other content is visible */
 #app {
   width: 100%;
-  max-width: 100vw;
   display: flex;
   flex-direction: column;
   align-items: center;

src/utils/audio.js

@@ -0,0 +1,72 @@
+let audioContext = null;
+let masterGain = null;
+
+export async function playFanfare() {
+  const AudioCtx = window.AudioContext || window.webkitAudioContext;
+  if (!AudioCtx) return;
+  
+  if (!audioContext) {
+      audioContext = new AudioCtx();
+  }
+  
+  if (audioContext.state === 'suspended') {
+    try {
+      await audioContext.resume();
+    } catch {
+      return;
+    }
+  }
+  
+  // Re-create gain if needed or just use it. 
+  // In the original code, it was created every time playFanfare was called?
+  // Original: masterGain = audioContext.createGain();
+  // It's better to create it once or manage it properly.
+  // Let's stick to the original logic but encapsulated.
+  
+  masterGain = audioContext.createGain();
+  masterGain.gain.value = 0.25; // Slightly louder but softer tone
+  masterGain.connect(audioContext.destination);
+
+  const now = audioContext.currentTime;
+
+  const playNote = (freq, startTime, duration) => {
+    const osc = audioContext.createOscillator();
+    const gain = audioContext.createGain();
+    
+    // Mix of sine and triangle for a bell-like quality
+    osc.type = 'sine'; 
+    osc.frequency.value = freq;
+
+    // Envelope for elegant bell/chime sound
+    gain.gain.setValueAtTime(0, startTime);
+    gain.gain.linearRampToValueAtTime(0.4, startTime + 0.05); // Soft attack
+    gain.gain.exponentialRampToValueAtTime(0.01, startTime + duration); // Long release
+
+    osc.connect(gain);
+    gain.connect(masterGain);
+
+    osc.start(startTime);
+    osc.stop(startTime + duration + 0.1);
+  };
+
+  // C Major 7 Arpeggio sequence (C5, E5, G5, B5, C6) - Elegant & Uplifting
+  const sequence = [
+    { freq: 523.25, time: 0.0, dur: 0.8 }, // C5
+    { freq: 659.25, time: 0.1, dur: 0.8 }, // E5
+    { freq: 783.99, time: 0.2, dur: 0.8 }, // G5
+    { freq: 987.77, time: 0.3, dur: 0.8 }, // B5 (Maj7)
+    { freq: 1046.50, time: 0.4, dur: 2.0 }, // C6 (High C resolve)
+    // Add a bass root note at the end for fullness
+    { freq: 523.25, time: 0.4, dur: 2.0 }  // C5
+  ];
+
+  sequence.forEach(note => playNote(note.freq, now + note.time, note.dur));
+}
+
+export function cleanupAudio() {
+  if (audioContext) {
+    audioContext.close();
+    audioContext = null;
+  }
+  masterGain = null;
+}

src/utils/puzzleUtils.js

@@ -1,3 +1,29 @@
+export function calculateLineHints(line) {
+  const hints = [];
+  let currentRun = 0;
+  
+  for (const cell of line) {
+    if (cell === 1) {
+      currentRun++;
+    } else {
+      if (currentRun > 0) {
+        hints.push(currentRun);
+        currentRun = 0;
+      }
+    }
+  }
+  if (currentRun > 0) {
+    hints.push(currentRun);
+  }
+  return hints.length > 0 ? hints : [0];
+}
+
+export function validateLine(line, targetHints) {
+  const currentHints = calculateLineHints(line);
+  if (currentHints.length !== targetHints.length) return false;
+  return currentHints.every((h, i) => h === targetHints[i]);
+}
+
 export function calculateHints(grid) {
     if (!grid || grid.length === 0) return { rowHints: [], colHints: [] };
     
@@ -7,34 +33,16 @@ export function calculateHints(grid) {
 
     // Row Hints
     for (let r = 0; r < size; r++) {
-        const hints = [];
+        rowHints.push(calculateLineHints(grid[r]));
-        let count = 0;
-        for (let c = 0; c < size; c++) {
-            if (grid[r][c] === 1) {
-                count++;
-            } else if (count > 0) {
-                hints.push(count);
-                count = 0;
-            }
-        }
-        if (count > 0) hints.push(count);
-        rowHints.push(hints.length > 0 ? hints : [0]);
     }
 
     // Col Hints
     for (let c = 0; c < size; c++) {
-        const hints = [];
+        const col = [];
-        let count = 0;
         for (let r = 0; r < size; r++) {
-            if (grid[r][c] === 1) {
+            col.push(grid[r][c]);
-                count++;
-            } else if (count > 0) {
-                hints.push(count);
-                count = 0;
-            }
         }
-        if (count > 0) hints.push(count);
+        colHints.push(calculateLineHints(col));
-        colHints.push(hints.length > 0 ? hints : [0]);
     }
 
     return { rowHints, colHints };
@@ -68,7 +76,7 @@ export function calculateDifficulty(density, size = 10) {
         45: [2, 0, 0, 0, 1, 82, 100, 100, 100],
         50: [2, 0, 0, 0, 1, 73, 100, 100, 100],
         60: [0, 0, 0, 0, 0, 35, 100, 100, 100],
-        70: [0, 0, 0, 0, 0, 16, 100, 100, 100],
+        71: [0, 0, 0, 0, 0, 16, 100, 100, 100],
         80: [0, 0, 0, 0, 0, 1, 100, 100, 100]
     };
 

src/utils/shareUtils.js

@@ -0,0 +1,284 @@
+import { calculateDifficulty } from '@/utils/puzzleUtils';
+
+export function buildShareCanvas(data, t, formattedTime) {
+  const { grid, size, currentDensity, guideUsageCount } = data;
+  if (!grid || !grid.length) return null;
+  
+  const appUrl = 'https://nonograms.7u.pl/';
+  const maxBoard = 640;
+  const cellSize = Math.max(8, Math.floor(maxBoard / size));
+  const boardSize = cellSize * size;
+  const padding = 28;
+  const headerHeight = 64;
+  const footerHeight = 28;
+  const infoHeight = 40; // New space for difficulty/guide info
+  const width = boardSize + padding * 2;
+  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
+  const scale = window.devicePixelRatio || 1;
+  const canvas = document.createElement('canvas');
+  canvas.width = width * scale;
+  canvas.height = height * scale;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+  ctx.scale(scale, scale);
+  
+  const bg = ctx.createLinearGradient(0, 0, width, height);
+  bg.addColorStop(0, '#1b2a4a');
+  bg.addColorStop(1, '#0a1324');
+  ctx.fillStyle = bg;
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.35)';
+  ctx.fillRect(12, 12, width - 24, height - 24);
+  
+  ctx.fillStyle = '#e8fbff';
+  ctx.font = '700 26px "Segoe UI", sans-serif';
+  ctx.fillText(t('app.title'), padding, padding + 10);
+  ctx.font = '600 16px "Segoe UI", sans-serif';
+  ctx.fillText(`${t('win.time')} ${formattedTime}`, padding, padding + 34);
+  
+  // Difficulty & Density Info
+  const densityPercent = Math.round(currentDensity * 100);
+  const { level: difficultyKey } = calculateDifficulty(currentDensity, size);
+  let diffColor = '#33ff33';
+  if (difficultyKey === 'extreme') diffColor = '#ff3333';
+  else if (difficultyKey === 'hardest') diffColor = '#ff9933';
+  else if (difficultyKey === 'harder') diffColor = '#ffff33';
+  
+  const difficultyText = t(`difficulty.${difficultyKey}`);
+  ctx.font = '600 14px "Segoe UI", sans-serif';
+  
+  // Right aligned difficulty info
+  const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
+  const diffWidth = ctx.measureText(diffLabel).width;
+  ctx.fillStyle = diffColor;
+  ctx.fillText(diffLabel, width - padding - diffWidth, padding + 34);
+
+  const gridX = padding;
+  const gridY = padding + headerHeight;
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.06)';
+  ctx.fillRect(gridX, gridY, boardSize, boardSize);
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= size; i++) {
+    const x = gridX + i * cellSize;
+    const y = gridY + i * cellSize;
+    ctx.beginPath();
+    ctx.moveTo(x, gridY);
+    ctx.lineTo(x, gridY + boardSize);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(gridX, y);
+    ctx.lineTo(gridX + boardSize, y);
+    ctx.stroke();
+  }
+  ctx.fillStyle = '#00f2fe';
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+  ctx.lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
+  for (let r = 0; r < size; r++) {
+    for (let c = 0; c < size; c++) {
+      const state = grid[r]?.[c];
+      if (state === 1) {
+        const x = gridX + c * cellSize + 1;
+        const y = gridY + r * cellSize + 1;
+        ctx.fillRect(x, y, cellSize - 2, cellSize - 2);
+      } else if (state === 2) {
+        const x = gridX + c * cellSize + cellSize * 0.2;
+        const y = gridY + r * cellSize + cellSize * 0.2;
+        const d = cellSize * 0.6;
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + d, y + d);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x + d, y);
+        ctx.lineTo(x, y + d);
+        ctx.stroke();
+      }
+    }
+  }
+
+  // Guide Usage Info (Dirty Flag)
+  if (guideUsageCount > 0) {
+      ctx.fillStyle = '#ff4d4d';
+      ctx.font = '600 14px "Segoe UI", sans-serif';
+      
+      const totalCells = size * size;
+      const percent = Math.min(100, Math.round((guideUsageCount / totalCells) * 100));
+      const guideText = t('win.usedGuide', { count: guideUsageCount, percent });
+      
+      ctx.fillText(`⚠️ ${guideText}`, padding, height - padding - footerHeight + 10);
+  }
+
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.75)';
+  ctx.font = '500 14px "Segoe UI", sans-serif';
+  ctx.fillText(appUrl, padding, height - padding + 6);
+  return canvas;
+}
+
+export function buildShareSVG(data, t, formattedTime) {
+  const { grid, size, currentDensity, guideUsageCount } = data;
+  if (!grid || !grid.length) return null;
+  
+  const appUrl = 'https://nonograms.7u.pl/';
+  const maxBoard = 640;
+  const cellSize = Math.max(8, Math.floor(maxBoard / size));
+  const boardSize = cellSize * size;
+  const padding = 28;
+  const headerHeight = 64;
+  const footerHeight = 28;
+  const infoHeight = 40;
+  const width = boardSize + padding * 2;
+  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
+
+  // Colors
+  const bgGradientStart = '#1b2a4a';
+  const bgGradientEnd = '#0a1324';
+  const overlayColor = 'rgba(0, 0, 0, 0.35)';
+  const textColor = '#e8fbff';
+  const gridColor = 'rgba(255, 255, 255, 0.06)';
+  const gridLineColor = 'rgba(255, 255, 255, 0.12)';
+  const filledColor = '#00f2fe';
+  const crossColor = 'rgba(255, 255, 255, 0.5)';
+  const urlColor = 'rgba(255, 255, 255, 0.75)';
+
+  // Difficulty Logic
+  const densityPercent = Math.round(currentDensity * 100);
+  const { level: difficultyKey } = calculateDifficulty(currentDensity, size);
+  
+  let diffColor = '#33ff33';
+  if (difficultyKey === 'extreme') diffColor = '#ff3333';
+  else if (difficultyKey === 'hardest') diffColor = '#ff9933';
+  else if (difficultyKey === 'harder') diffColor = '#ffff33';
+  const difficultyText = t(`difficulty.${difficultyKey}`);
+  const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
+
+  let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">`;
+  
+  // Background
+  svgContent += `
+    <defs>
+      <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="${bgGradientStart}"/>
+        <stop offset="100%" stop-color="${bgGradientEnd}"/>
+      </linearGradient>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#bg)"/>
+    <rect x="12" y="12" width="${width - 24}" height="${height - 24}" fill="${overlayColor}"/>
+  `;
+
+  // Text: Title & Time
+  svgContent += `
+    <text x="${padding}" y="${padding + 28}" font-family="Segoe UI, sans-serif" font-weight="700" font-size="26" fill="${textColor}">${t('app.title')}</text>
+    <text x="${padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="16" fill="${textColor}">${t('win.time')} ${formattedTime}</text>
+  `;
+
+  // Text: Difficulty (Right Aligned - manual approx or end anchor)
+  svgContent += `
+    <text x="${width - padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="${diffColor}" text-anchor="end">${diffLabel}</text>
+  `;
+
+  const gridX = padding;
+  const gridY = padding + headerHeight;
+
+  // Grid Background
+  svgContent += `<rect x="${gridX}" y="${gridY}" width="${boardSize}" height="${boardSize}" fill="${gridColor}"/>`;
+
+  // Grid Lines
+  let gridLines = '';
+  for (let i = 0; i <= size; i++) {
+    const pos = i * cellSize;
+    // Vertical
+    gridLines += `<line x1="${gridX + pos}" y1="${gridY}" x2="${gridX + pos}" y2="${gridY + boardSize}" stroke="${gridLineColor}" stroke-width="1"/>`;
+    // Horizontal
+    gridLines += `<line x1="${gridX}" y1="${gridY + pos}" x2="${gridX + boardSize}" y2="${gridY + pos}" stroke="${gridLineColor}" stroke-width="1"/>`;
+  }
+  svgContent += gridLines;
+
+  // Cells
+  let cells = '';
+  const lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
+  
+  for (let r = 0; r < size; r++) {
+    for (let c = 0; c < size; c++) {
+      const state = grid[r]?.[c];
+      const cx = gridX + c * cellSize;
+      const cy = gridY + r * cellSize;
+      
+      if (state === 1) { // Filled
+        cells += `<rect x="${cx + 1}" y="${cy + 1}" width="${cellSize - 2}" height="${cellSize - 2}" fill="${filledColor}"/>`;
+      } else if (state === 2) { // Cross
+        const d = cellSize * 0.6;
+        const off = cellSize * 0.2;
+        cells += `
+          <path d="M${cx + off} ${cy + off} L${cx + off + d} ${cy + off + d} M${cx + off + d} ${cy + off} L${cx + off} ${cy + off + d}" 
+          stroke="${crossColor}" stroke-width="${lineWidth}" stroke-linecap="round"/>
+        `;
+      }
+    }
+  }
+  svgContent += cells;
+
+  // Guide Usage
+  if (guideUsageCount > 0) {
+      const totalCells = size * size;
+      const percent = Math.min(100, Math.round((guideUsageCount / totalCells) * 100));
+      const guideText = t('win.usedGuide', { count: guideUsageCount, percent });
+      svgContent += `<text x="${padding}" y="${height - padding - footerHeight + 10}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="#ff4d4d">⚠️ ${guideText}</text>`;
+  }
+
+  // URL
+  svgContent += `<text x="${padding}" y="${height - padding + 6}" font-family="Segoe UI, sans-serif" font-weight="500" font-size="14" fill="${urlColor}">${appUrl}</text>`;
+
+  svgContent += '</svg>';
+  return svgContent;
+}
+
+export const canvasToBlob = (canvas) => new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), 'image/png'));
+
+export const createShareBlob = async (data, t, formattedTime) => {
+  const canvas = buildShareCanvas(data, t, formattedTime);
+  if (!canvas) return null;
+  return canvasToBlob(canvas);
+};
+
+export const downloadShareSVG = (data, t, formattedTime) => {
+  const svgString = buildShareSVG(data, t, formattedTime);
+  if (!svgString) return;
+  const blob = new Blob([svgString], { type: 'image/svg+xml' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `nonogram-${data.size}x${data.size}.svg`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+};
+
+export const downloadShareImage = async (data, t, formattedTime) => {
+  const blob = await createShareBlob(data, t, formattedTime);
+  if (!blob) return;
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `nonogram-${data.size}x${data.size}.png`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+};
+
+export const buildShareUrl = (target, text, url) => {
+  const encodedText = encodeURIComponent(text);
+  const encodedUrl = encodeURIComponent(url);
+  if (target === 'x') {
+    return `https://x.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
+  }
+  if (target === 'facebook') {
+    return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&quote=${encodedText}`;
+  }
+  if (target === 'whatsapp') {
+    return `https://wa.me/?text=${encodeURIComponent(`${text} ${url}`)}`;
+  }
+  return '';
+};

src/utils/timeUtils.js

@@ -0,0 +1,5 @@
+export function formatTime(seconds) {
+  const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+  const s = (seconds % 60).toString().padStart(2, '0');
+  return `${m}:${s}`;
+}