bes-r/teach
1
0
Fork 0
Code Issues Pull requests 5 Projects Releases Packages Wiki Activity Actions

Verbeter grafische kwaliteit kleurplaten
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 39s
Details

Browse source
This commit is contained in:
Ramon 2026-07-29 08:02:53 +02:00
parent 24816c0d64
commit 3aafd50d62
6 changed files with 79 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
VERSION
View file

@ -1 +1 @@
0.4.66-beta 0.4.67-beta

6
public/css/coloring.css
View file

@ -22,7 +22,11 @@
.coloring-art,.coloring-paper canvas{position:absolute;inset:0;width:100%;height:100%} .coloring-art,.coloring-paper canvas{position:absolute;inset:0;width:100%;height:100%}
.coloring-art svg{width:100%;height:100%;display:block;background:#fff} .coloring-art svg{width:100%;height:100%;display:block;background:#fff}
.coloring-art [hidden]{display:none} .coloring-art [hidden]{display:none}
.coloring-svg-lines .coloring-detail{stroke-width:4.5;pointer-events:none} .coloring-svg-lines{shape-rendering:geometricPrecision}
.coloring-svg-lines .coloring-region[data-level="2"]{stroke-width:6}
.coloring-svg-lines .coloring-region[data-level="3"]{stroke-width:5.5}
.coloring-svg-lines .coloring-detail{stroke-width:3.75;pointer-events:none}
.coloring-svg-lines .coloring-detail[data-level="3"]{stroke-width:3.25}
.coloring-svg-lines .coloring-recognition{pointer-events:none} .coloring-svg-lines .coloring-recognition{pointer-events:none}
.coloring-paper canvas{z-index:2;touch-action:none;cursor:crosshair;mix-blend-mode:multiply} .coloring-paper canvas{z-index:2;touch-action:none;cursor:crosshair;mix-blend-mode:multiply}
.coloring-app[data-tool="bucket"] .coloring-art{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext y='24' font-size='23'%3E%F0%9F%AA%A3%3C/text%3E%3C/svg%3E") 6 24,pointer} .coloring-app[data-tool="bucket"] .coloring-art{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext y='24' font-size='23'%3E%F0%9F%AA%A3%3C/text%3E%3C/svg%3E") 6 24,pointer}

2
public/js/core.js
View file

@ -2,7 +2,7 @@
"use strict"; "use strict";
/* version — shown until /api/version resolves (or if the fetch fails, e.g. offline). /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
Kept in sync by hand with the VERSION file at the repo root on every release. */ Kept in sync by hand with the VERSION file at the repo root on every release. */
const VERSION = "0.4.66-beta"; const VERSION = "0.4.67-beta";
/* Safari en oudere mobiele browsers behandelen 100vh/100% soms als de hoogte /* Safari en oudere mobiele browsers behandelen 100vh/100% soms als de hoogte
achter hun adres- en navigatiebalk. visualViewport geeft de werkelijk achter hun adres- en navigatiebalk. visualViewport geeft de werkelijk
zichtbare hoogte; de CSS gebruikt deze pixelwaarde als betrouwbare bron en zichtbare hoogte; de CSS gebruikt deze pixelwaarde als betrouwbare bron en

60
public/js/widgets/coloring-scenes-extra.js
View file

@ -14,12 +14,16 @@ function sceneFarmyard(){return coloringScene(
coloringPart("ellipse","cow-snout",'cx="700" cy="400" rx="58" ry="35"',2)+ coloringPart("ellipse","cow-snout",'cx="700" cy="400" rx="58" ry="35"',2)+
coloringPart("path","cow-ear-left",'d="M 645 330 Q 600 285 580 330 Q 610 360 650 355 Z"',2)+ coloringPart("path","cow-ear-left",'d="M 645 330 Q 600 285 580 330 Q 610 360 650 355 Z"',2)+
coloringPart("path","cow-ear-right",'d="M 710 325 Q 750 280 775 325 Q 755 360 715 355 Z"',2)+ coloringPart("path","cow-ear-right",'d="M 710 325 Q 750 280 775 325 Q 755 360 715 355 Z"',2)+
coloringPart("path","cow-horn-left",'d="M 648 322 Q 635 278 665 292 Q 680 315 663 338 Z"',2)+
coloringPart("path","cow-horn-right",'d="M 710 320 Q 728 278 748 298 Q 748 325 723 340 Z"',2)+
coloringPart("path","cow-tail",'d="M 405 370 Q 350 390 368 458 Q 386 478 402 448 Q 375 408 420 390 Z"',2)+
coloringPart("ellipse","cow-udder",'cx="565" cy="458" rx="44" ry="25"',3)+
[420,500,575,640].map((x,i)=>coloringPart("rect",`cow-leg-${i}`,`x="${x}" y="445" width="35" height="105" rx="14"`)).join("")+ [420,500,575,640].map((x,i)=>coloringPart("rect",`cow-leg-${i}`,`x="${x}" y="445" width="35" height="105" rx="14"`)).join("")+
[[480,365,42,28],[555,420,35,25],[590,350,30,22]].map(([x,y,rx,ry],i)=>coloringPart("ellipse",`cow-spot-${i}`,`cx="${x}" cy="${y}" rx="${rx}" ry="${ry}"`,2)).join("")+ [[480,365,42,28],[555,420,35,25],[590,350,30,22]].map(([x,y,rx,ry],i)=>coloringPart("ellipse",`cow-spot-${i}`,`cx="${x}" cy="${y}" rx="${rx}" ry="${ry}"`,2)).join("")+
coloringPart("circle","farm-sun",'cx="690" cy="95" r="54"')+ coloringPart("circle","farm-sun",'cx="690" cy="95" r="54"')+
coloringLine("path",'d="M 115 330 L 265 480 M 265 330 L 115 480 M 148 210 H 232 M 190 168 V 252" fill="none"')+ coloringLine("path",'d="M 115 330 L 265 480 M 265 330 L 115 480 M 148 210 H 232 M 190 168 V 252" fill="none"')+
coloringLine("circle",'cx="675" cy="372" r="6" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="720" cy="372" r="6" fill="#26344a" stroke="none"')+ coloringLine("circle",'cx="675" cy="372" r="6" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="720" cy="372" r="6" fill="#26344a" stroke="none"')+
coloringLine("path",'d="M 688 405 q 12 12 24 0 M 650 425 Q 695 455 735 425" fill="none"',2)+ coloringLine("path",'d="M 688 405 q 12 12 24 0 M 650 425 Q 695 455 735 425 M 545 470 v 18 M 570 472 v 18 M 590 467 v 18" fill="none"',2)+
coloringLine("path",'d="M 420 550 h 35 M 500 550 h 35 M 575 550 h 35 M 640 550 h 35" fill="none"',2)+ coloringLine("path",'d="M 420 550 h 35 M 500 550 h 35 M 575 550 h 35 M 640 550 h 35" fill="none"',2)+
coloringLine("path",'d="M 355 470 H 390 M 360 440 H 400 M 370 410 H 405" fill="none"',3) coloringLine("path",'d="M 355 470 H 390 M 360 440 H 400 M 370 410 H 405" fill="none"',3)
)} )}
@ -34,14 +38,15 @@ function sceneRainbowWeather(){return coloringScene(
coloringPart("path","rainbow-yellow",'d="M 205 410 Q 400 150 595 410 L 555 410 Q 400 205 245 410 Z"',2)+ coloringPart("path","rainbow-yellow",'d="M 205 410 Q 400 150 595 410 L 555 410 Q 400 205 245 410 Z"',2)+
coloringPart("path","rainbow-green",'d="M 245 410 Q 400 205 555 410 L 515 410 Q 400 260 285 410 Z"',2)+ coloringPart("path","rainbow-green",'d="M 245 410 Q 400 205 555 410 L 515 410 Q 400 260 285 410 Z"',2)+
coloringPart("path","rainbow-blue",'d="M 285 410 Q 400 260 515 410 L 470 410 Q 400 320 330 410 Z"',3)+ coloringPart("path","rainbow-blue",'d="M 285 410 Q 400 260 515 410 L 470 410 Q 400 320 330 410 Z"',3)+
coloringPart("path","umbrella-left",'d="M 455 405 Q 530 300 605 405 Z"')+ coloringPart("path","umbrella-outer-left",'d="M 490 410 Q 520 315 635 285 Q 595 335 575 410 Q 535 382 490 410 Z"')+
coloringPart("path","umbrella-middle",'d="M 530 405 Q 605 300 605 405 Z"',2)+ coloringPart("path","umbrella-inner-left",'d="M 575 410 Q 595 335 635 285 V 410 Q 605 385 575 410 Z"',2)+
coloringPart("path","umbrella-right",'d="M 605 405 Q 680 300 755 405 Z"',2)+ coloringPart("path","umbrella-inner-right",'d="M 635 285 Q 690 335 700 410 Q 670 385 635 410 Z"',2)+
coloringPart("path","umbrella-outer-right",'d="M 635 285 Q 745 315 780 410 Q 740 382 700 410 Q 690 335 635 285 Z"',2)+
coloringPart("path","boot-left",'d="M 520 470 V 545 H 610 Q 620 505 575 505 V 470 Z"')+ coloringPart("path","boot-left",'d="M 520 470 V 545 H 610 Q 620 505 575 505 V 470 Z"')+
coloringPart("path","boot-right",'d="M 635 465 V 540 H 725 Q 735 500 690 500 V 465 Z"')+ coloringPart("path","boot-right",'d="M 635 465 V 540 H 725 Q 735 500 690 500 V 465 Z"')+
[[105,245],[155,275],[225,230],[590,230],[670,255],[735,225]].map(([x,y],i)=>coloringPart("path",`raindrop-${i}`,`d="M ${x} ${y-20} Q ${x-22} ${y+12} ${x} ${y+26} Q ${x+22} ${y+12} ${x} ${y-20} Z"`,i>2?3:2)).join("")+ [[105,245],[155,275],[225,230],[590,230],[670,255],[735,225]].map(([x,y],i)=>coloringPart("path",`raindrop-${i}`,`d="M ${x} ${y-20} Q ${x-22} ${y+12} ${x} ${y+26} Q ${x+22} ${y+12} ${x} ${y-20} Z"`,i>2?3:2)).join("")+
coloringLine("path",'d="M 605 405 V 505 Q 605 535 580 520" fill="none"')+ coloringLine("path",'d="M 635 410 V 505 Q 635 535 610 520" fill="none"')+
coloringLine("path",'d="M 545 405 Q 565 385 585 405 M 625 405 Q 650 385 675 405" fill="none"',2)+ coloringLine("path",'d="M 490 410 Q 535 382 575 410 M 575 410 Q 605 385 635 410 M 635 410 Q 670 385 700 410 M 700 410 Q 740 382 780 410" fill="none"',2)+
coloringLine("path",'d="M 535 470 H 575 M 650 465 H 690" fill="none"',2)+ coloringLine("path",'d="M 535 470 H 575 M 650 465 H 690" fill="none"',2)+
coloringLine("path",'d="M 92 145 Q 125 130 155 145 M 650 145 Q 680 125 715 145" fill="none"',3) coloringLine("path",'d="M 92 145 Q 125 130 155 145 M 650 145 Q 680 125 715 145" fill="none"',3)
)} )}
@ -57,6 +62,9 @@ function sceneConstruction(){return coloringScene(
coloringPart("path","arm-upper",'d="M 455 335 L 555 175 L 600 195 L 510 365 Z"')+ coloringPart("path","arm-upper",'d="M 455 335 L 555 175 L 600 195 L 510 365 Z"')+
coloringPart("path","arm-lower",'d="M 555 175 L 700 280 L 675 320 L 575 225 Z"',2)+ coloringPart("path","arm-lower",'d="M 555 175 L 700 280 L 675 320 L 575 225 Z"',2)+
coloringPart("path","bucket",'d="M 665 300 Q 755 295 775 385 Q 720 435 650 390 Z"')+ coloringPart("path","bucket",'d="M 665 300 Q 755 295 775 385 Q 720 435 650 390 Z"')+
coloringPart("path","bucket-tooth-a",'d="M 665 386 L 646 426 L 690 399 Z"',2)+
coloringPart("path","bucket-tooth-b",'d="M 705 404 L 700 442 L 735 414 Z"',2)+
coloringPart("path","bucket-tooth-c",'d="M 744 400 L 755 434 L 777 392 Z"',3)+
coloringPart("circle","digger-pivot",'cx="485" cy="350" r="28"',2)+ coloringPart("circle","digger-pivot",'cx="485" cy="350" r="28"',2)+
coloringPart("path","cone-left",'d="M 65 520 L 110 405 L 155 520 Z"')+ coloringPart("path","cone-left",'d="M 65 520 L 110 405 L 155 520 Z"')+
coloringPart("rect","cone-left-base",'x="45" y="515" width="130" height="30" rx="8"',2)+ coloringPart("rect","cone-left-base",'x="45" y="515" width="130" height="30" rx="8"',2)+
@ -65,7 +73,7 @@ function sceneConstruction(){return coloringScene(
coloringPart("circle","build-sun",'cx="120" cy="100" r="55"')+ coloringPart("circle","build-sun",'cx="120" cy="100" r="55"')+
coloringLine("path",'d="M 220 495 H 440 M 250 470 V 520 M 310 470 V 520 M 370 470 V 520 M 430 470 V 520" fill="none"')+ coloringLine("path",'d="M 220 495 H 440 M 250 470 V 520 M 310 470 V 520 M 370 470 V 520 M 430 470 V 520" fill="none"')+
coloringLine("path",'d="M 360 240 V 305 M 325 273 H 445" fill="none"',2)+ coloringLine("path",'d="M 360 240 V 305 M 325 273 H 445" fill="none"',2)+
coloringLine("path",'d="M 575 205 L 675 295 M 495 330 L 570 205" fill="none"',2)+ coloringLine("path",'d="M 575 205 L 675 295 M 495 330 L 570 205 M 520 315 L 585 215 M 650 390 Q 710 405 775 385" fill="none"',2)+
coloringLine("path",'d="M 80 480 H 140 M 600 500 H 650" fill="none"',3)+ coloringLine("path",'d="M 80 480 H 140 M 600 500 H 650" fill="none"',3)+
coloringLine("path",'d="M 25 395 H 170 M 650 395 H 785" fill="none"',3) coloringLine("path",'d="M 25 395 H 170 M 650 395 H 785" fill="none"',3)
)} )}
@ -146,13 +154,16 @@ function sceneFireStation(){return coloringScene(
coloringPart("path","engine-cab",'d="M 580 350 H 665 L 730 425 H 580 Z"')+ coloringPart("path","engine-cab",'d="M 580 350 H 665 L 730 425 H 580 Z"')+
coloringPart("path","engine-window",'d="M 610 370 H 655 L 695 415 H 610 Z"',2)+ coloringPart("path","engine-window",'d="M 610 370 H 655 L 695 415 H 610 Z"',2)+
coloringPart("rect","engine-panel",'x="385" y="375" width="165" height="90" rx="12"',2)+ coloringPart("rect","engine-panel",'x="385" y="375" width="165" height="90" rx="12"',2)+
coloringPart("path","engine-ladder",'d="M 375 342 L 555 287 L 566 317 L 386 373 Z"',2)+
coloringPart("circle","engine-hose-reel",'cx="470" cy="420" r="34"',2)+
coloringPart("circle","engine-hose-hub",'cx="470" cy="420" r="12"',3)+
coloringPart("circle","engine-wheel-a",'cx="445" cy="500" r="55"')+coloringPart("circle","engine-wheel-b",'cx="665" cy="500" r="55"')+ coloringPart("circle","engine-wheel-a",'cx="445" cy="500" r="55"')+coloringPart("circle","engine-wheel-b",'cx="665" cy="500" r="55"')+
coloringPart("circle","engine-hub-a",'cx="445" cy="500" r="22"',2)+coloringPart("circle","engine-hub-b",'cx="665" cy="500" r="22"',2)+ coloringPart("circle","engine-hub-a",'cx="445" cy="500" r="22"',2)+coloringPart("circle","engine-hub-b",'cx="665" cy="500" r="22"',2)+
coloringPart("rect","engine-light",'x="470" y="315" width="55" height="35" rx="16"',2)+ coloringPart("rect","engine-light",'x="470" y="315" width="55" height="35" rx="16"',2)+
coloringPart("rect","hydrant",'x="755" y="420" width="30" height="90" rx="10"',3)+ coloringPart("rect","hydrant",'x="755" y="420" width="30" height="90" rx="10"',3)+
coloringLine("path",'d="M 100 300 H 175 M 100 350 H 175 M 100 400 H 175 M 245 300 H 320 M 245 350 H 320 M 245 400 H 320" fill="none"')+ coloringLine("path",'d="M 100 300 H 175 M 100 350 H 175 M 100 400 H 175 M 245 300 H 320 M 245 350 H 320 M 245 400 H 320" fill="none"')+
coloringLine("path",'d="M 390 355 L 555 300 M 400 375 L 565 320 M 430 345 L 445 375 M 475 330 L 490 360 M 520 315 L 535 345" fill="none"',2)+ coloringLine("path",'d="M 390 338 L 400 368 M 430 325 L 440 355 M 470 313 L 480 343 M 510 300 L 520 330 M 550 290 L 560 320" fill="none"',2)+
coloringLine("path",'d="M 420 400 H 520 M 420 430 H 520 M 470 375 V 465" fill="none"',3)+ coloringLine("path",'d="M 470 408 v 24 M 458 420 h 24 M 405 452 H 535" fill="none"',3)+
coloringLine("path",'d="M 210 112 V 178 M 177 145 H 243" fill="none"',2)+ coloringLine("path",'d="M 210 112 V 178 M 177 145 H 243" fill="none"',2)+
coloringLine("path",'d="M 25 545 H 180 M 280 545 H 360 M 735 545 H 790" fill="none"',3) coloringLine("path",'d="M 25 545 H 180 M 280 545 H 360 M 735 545 H 790" fill="none"',3)
)} )}
@ -188,14 +199,20 @@ function sceneCoralReef(){return coloringScene(
coloringPart("path","seahorse-body",'d="M 610 220 Q 680 165 710 225 Q 660 270 675 345 Q 700 430 625 450 Q 570 440 600 390 Q 650 405 635 350 Q 590 285 610 220 Z"')+ coloringPart("path","seahorse-body",'d="M 610 220 Q 680 165 710 225 Q 660 270 675 345 Q 700 430 625 450 Q 570 440 600 390 Q 650 405 635 350 Q 590 285 610 220 Z"')+
coloringPart("path","seahorse-fin",'d="M 610 285 Q 540 300 585 360 Q 620 345 625 315 Z"',2)+ coloringPart("path","seahorse-fin",'d="M 610 285 Q 540 300 585 360 Q 620 345 625 315 Z"',2)+
coloringPart("circle","seahorse-eye",'cx="670" cy="220" r="13"',2)+ coloringPart("circle","seahorse-eye",'cx="670" cy="220" r="13"',2)+
coloringPart("path","coral-red",'d="M 120 520 Q 80 455 115 390 Q 145 430 145 470 Q 180 420 205 445 Q 185 490 180 530 Z"')+ coloringPart("path","coral-red",'d="M 95 535 Q 82 480 108 435 L 88 400 Q 95 375 118 405 L 128 360 Q 145 342 150 375 L 145 430 L 175 395 Q 198 390 188 420 L 158 468 L 200 452 Q 225 458 200 480 L 165 505 L 170 540 Z"')+
coloringPart("path","coral-fan",'d="M 470 535 Q 445 455 480 405 Q 500 455 510 490 Q 530 425 560 420 Q 555 490 540 540 Z"',2)+ coloringPart("path","coral-fan",'d="M 475 540 Q 455 485 472 430 Q 480 395 496 430 L 510 472 L 520 405 Q 535 378 543 420 L 540 478 L 565 430 Q 590 408 580 448 L 556 492 L 592 468 Q 615 470 593 495 L 548 530 L 550 545 Z"',2)+
coloringPart("ellipse","anemone-base",'cx="690" cy="505" rx="65" ry="28"',2)+
coloringPart("path","anemone-arm-a",'d="M 638 505 Q 620 445 650 400 Q 678 447 662 505 Z"',3)+
coloringPart("path","anemone-arm-b",'d="M 666 505 Q 650 430 678 390 Q 704 438 690 505 Z"',3)+
coloringPart("path","anemone-arm-c",'d="M 694 505 Q 688 430 710 398 Q 738 445 718 505 Z"',3)+
coloringPart("path","anemone-arm-d",'d="M 720 505 Q 722 452 748 420 Q 762 468 742 510 Z"',3)+
coloringPart("path","reef-starfish",'d="M 405 505 L 420 470 L 438 505 L 478 500 L 450 528 L 462 566 L 425 545 L 392 568 L 400 530 L 370 505 Z"',3)+
coloringPart("path","shell",'d="M 260 525 Q 320 445 380 525 Q 320 570 260 525 Z"',3)+ coloringPart("path","shell",'d="M 260 525 Q 320 445 380 525 Q 320 570 260 525 Z"',3)+
[[80,95,14],[125,130,9],[575,95,18],[730,115,12],[690,70,8]].map(([x,y,r],i)=>coloringPart("circle",`reef-bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,i>1?3:2)).join("")+ [[80,95,14],[125,130,9],[575,95,18],[730,115,12],[690,70,8]].map(([x,y,r],i)=>coloringPart("circle",`reef-bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,i>1?3:2)).join("")+
coloringLine("path",'d="M 455 270 Q 480 285 500 268 M 330 195 L 320 330 M 420 205 L 410 320" fill="none"')+ coloringLine("path",'d="M 455 270 Q 480 285 500 268 M 330 195 L 320 330 M 420 205 L 410 320" fill="none"')+
coloringLine("circle",'cx="447" cy="232" r="5" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="672" cy="217" r="4" fill="#26344a" stroke="none"')+ coloringLine("circle",'cx="447" cy="232" r="5" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="672" cy="217" r="4" fill="#26344a" stroke="none"')+
coloringLine("path",'d="M 620 400 Q 655 430 680 395 M 635 445 Q 680 465 700 430" fill="none"',2)+ coloringLine("path",'d="M 620 400 Q 655 430 680 395 M 635 445 Q 680 465 700 430" fill="none"',2)+
coloringLine("path",'d="M 285 520 Q 320 490 355 520 M 300 535 Q 320 510 340 535" fill="none"',3)+ coloringLine("path",'d="M 285 520 Q 320 490 355 520 M 300 535 Q 320 510 340 535 M 650 510 Q 690 525 730 510" fill="none"',3)+
coloringLine("path",'d="M 35 555 Q 110 530 185 555 M 590 550 Q 675 520 760 550" fill="none"',3) coloringLine("path",'d="M 35 555 Q 110 530 185 555 M 590 550 Q 675 520 760 550" fill="none"',3)
)} )}
@ -302,15 +319,24 @@ function sceneSavannaWeb(){return coloringScene(
coloringPart("ellipse","lion-muzzle",'cx="625" cy="350" rx="45" ry="30"',2)+ coloringPart("ellipse","lion-muzzle",'cx="625" cy="350" rx="45" ry="30"',2)+
[390,470,540,590].map((x,i)=>coloringPart("rect",`lion-leg-${i}`,`x="${x}" y="435" width="38" height="110" rx="15"`,i>1?2:1)).join("")+ [390,470,540,590].map((x,i)=>coloringPart("rect",`lion-leg-${i}`,`x="${x}" y="435" width="38" height="110" rx="15"`,i>1?2:1)).join("")+
coloringPart("path","lion-tail",'d="M 355 385 Q 285 350 300 475 Q 325 510 350 475 Q 325 410 370 410 Z"',2)+ coloringPart("path","lion-tail",'d="M 355 385 Q 285 350 300 475 Q 325 510 350 475 Q 325 410 370 410 Z"',2)+
coloringPart("ellipse","zebra-body",'cx="225" cy="505" rx="120" ry="60"',2)+ coloringPart("ellipse","zebra-body",'cx="200" cy="475" rx="115" ry="65"',2)+
coloringPart("path","zebra-head",'d="M 315 470 Q 370 425 405 465 L 380 545 Q 340 560 305 525 Z"',2)+ coloringPart("rect","zebra-leg-0",'x="125" y="510" width="30" height="70" rx="12"',3)+
coloringPart("path","zebra-ear-a",'d="M 335 465 L 330 420 L 365 455 Z"',3)+coloringPart("path","zebra-ear-b",'d="M 375 460 L 395 420 L 400 470 Z"',3)+ coloringPart("rect","zebra-leg-1",'x="175" y="510" width="30" height="70" rx="12"',3)+
coloringPart("rect","zebra-leg-2",'x="230" y="510" width="30" height="70" rx="12"',3)+
coloringPart("rect","zebra-leg-3",'x="280" y="510" width="30" height="70" rx="12"',3)+
coloringPart("path","zebra-tail",'d="M 100 455 Q 55 425 70 505 Q 90 528 105 500 Q 82 468 120 470 Z"',3)+
coloringPart("path","zebra-neck",'d="M 270 450 Q 280 390 315 350 L 350 382 L 330 490 Z"',2)+
coloringPart("path","zebra-head",'d="M 295 350 Q 350 315 390 350 Q 402 392 370 418 Q 330 430 300 398 Z"',2)+
coloringPart("ellipse","zebra-muzzle",'cx="372" cy="390" rx="42" ry="27"',3)+
coloringPart("path","zebra-ear-a",'d="M 312 352 L 305 310 L 338 343 Z"',3)+coloringPart("path","zebra-ear-b",'d="M 350 340 L 370 305 L 378 350 Z"',3)+
coloringPart("path","zebra-mane",'d="M 292 360 Q 268 395 282 455 L 306 445 Q 292 402 320 365 Z"',3)+
coloringPart("circle","savanna-sun",'cx="690" cy="95" r="58"')+ coloringPart("circle","savanna-sun",'cx="690" cy="95" r="58"')+
coloringLine("circle",'cx="605" cy="315" r="6" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="645" cy="315" r="6" fill="#26344a" stroke="none"')+ coloringLine("circle",'cx="605" cy="315" r="6" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="645" cy="315" r="6" fill="#26344a" stroke="none"')+
coloringLine("path",'d="M 625 338 l -10 10 l 10 10 l 10 -10 Z M 595 365 Q 625 385 655 365" fill="none"')+ coloringLine("path",'d="M 625 338 l -10 10 l 10 10 l 10 -10 Z M 595 365 Q 625 385 655 365" fill="none"')+
coloringLine("path",'d="M 420 350 Q 455 390 430 455 M 470 330 Q 505 380 485 460 M 520 340 Q 550 385 535 455" fill="none"',2)+ coloringLine("path",'d="M 420 350 Q 455 390 430 455 M 470 330 Q 505 380 485 460 M 520 340 Q 550 385 535 455" fill="none"',2)+
coloringLine("path",'d="M 145 485 l 30 45 M 190 460 l 35 75 M 240 455 l 35 75 M 290 470 l 28 50 M 325 475 l 35 55" fill="none"',3)+ coloringLine("path",'d="M 112 442 l 32 55 M 155 420 l 38 105 M 205 412 l 35 118 M 250 425 l 30 80 M 290 405 l 35 50 M 310 370 l 35 42" fill="none"',3)+
coloringLine("path",'d="M 120 545 v 35 M 190 545 v 35 M 255 545 v 35 M 320 540 v 40" fill="none"',3) coloringLine("circle",'cx="354" cy="362" r="5" fill="#26344a" stroke="none"',3)+
coloringLine("path",'d="M 365 395 Q 378 405 390 393 M 125 580 h 30 M 175 580 h 30 M 230 580 h 30 M 280 580 h 30" fill="none"',3)
)} )}
function sceneJapaneseGarden(){return coloringScene( function sceneJapaneseGarden(){return coloringScene(

26
public/js/widgets/coloring.js
View file

@ -11,14 +11,14 @@ const COLORING_COLORS=Object.freeze([
]); ]);
function coloringPart(tag,id,attrs="",level=1){ function coloringPart(tag,id,attrs="",level=1){
return `<${tag} data-fillable="true" data-part="${id}"${level>1?` data-level="${level}"`:""} ${attrs}/>`; return `<${tag} class="coloring-region" data-fillable="true" data-part="${id}"${level>1?` data-level="${level}"`:""} ${attrs}/>`;
} }
function coloringLine(tag,attrs="",level=1){ function coloringLine(tag,attrs="",level=1){
return `<${tag} class="coloring-detail"${level>1?` data-level="${level}"`:""} ${attrs}/>`; return `<${tag} class="coloring-detail"${level>1?` data-level="${level}"`:""} ${attrs}/>`;
} }
function coloringScene(content){ function coloringScene(content){
return `<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> return `<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g class="coloring-svg-lines" fill="#fff" stroke="#26344a" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"> <g class="coloring-svg-lines" fill="#fff" stroke="#26344a" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2">
${content} ${content}
</g> </g>
</svg>`; </svg>`;
@ -80,11 +80,12 @@ function sceneOcean(){return coloringScene(
coloringPart("ellipse","fish-body",'cx="325" cy="260" rx="145" ry="88"')+ coloringPart("ellipse","fish-body",'cx="325" cy="260" rx="145" ry="88"')+
coloringPart("path","fish-tail",'d="M 185 260 L 85 178 Q 110 260 85 342 Z"')+ coloringPart("path","fish-tail",'d="M 185 260 L 85 178 Q 110 260 85 342 Z"')+
coloringPart("circle","fish-eye",'cx="395" cy="230" r="18"')+ coloringPart("circle","fish-eye",'cx="395" cy="230" r="18"')+
coloringPart("path","turtle-shell",'d="M 510 390 Q 585 285 665 390 Q 600 485 510 390 Z"')+ coloringPart("ellipse","turtle-shell",'cx="590" cy="390" rx="110" ry="75"')+
coloringPart("circle","turtle-head",'cx="690" cy="382" r="38"')+ coloringPart("circle","turtle-head",'cx="720" cy="382" r="40"')+
[[530,330,-28],[550,450,28],[635,330,25],[625,450,-25]].map(([x,y,a],i)=>coloringPart("ellipse",`flipper-${i}`,`cx="${x}" cy="${y}" rx="48" ry="20" transform="rotate(${a} ${x} ${y})"`,2)).join("")+ [[520,335,-28],[525,445,28],[640,330,25],[640,450,-25]].map(([x,y,a],i)=>coloringPart("ellipse",`flipper-${i}`,`cx="${x}" cy="${y}" rx="48" ry="20" transform="rotate(${a} ${x} ${y})"`,2)).join("")+
coloringPart("path","turtle-tail",'d="M 480 388 L 445 365 L 455 410 Z"',2)+
coloringLine("path",'d="M 270 220 Q 325 265 270 310 M 335 190 Q 370 260 335 330" fill="none"',2)+ coloringLine("path",'d="M 270 220 Q 325 265 270 310 M 335 190 Q 370 260 335 330" fill="none"',2)+
coloringLine("path",'d="M 542 380 L 648 400 M 570 335 L 610 450 M 545 390 L 590 330 L 645 390 L 590 450 Z" fill="none"',3)+ coloringLine("path",'d="M 485 390 H 695 M 535 330 Q 590 390 535 450 M 645 330 Q 590 390 645 450 M 520 390 Q 590 340 660 390 Q 590 440 520 390 Z" fill="none"',3)+
[[115,105,18],[150,75,11],[640,100,22],[675,65,13],[730,145,15]].map(([x,y,r],i)=>coloringPart("circle",`bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,3)).join("")+ [[115,105,18],[150,75,11],[640,100,22],[675,65,13],[730,145,15]].map(([x,y,r],i)=>coloringPart("circle",`bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,3)).join("")+
coloringPart("path","seaweed-a",'d="M 120 525 Q 70 455 120 385 Q 165 455 120 525 Z"',2)+ coloringPart("path","seaweed-a",'d="M 120 525 Q 70 455 120 385 Q 165 455 120 525 Z"',2)+
coloringPart("path","seaweed-b",'d="M 190 535 Q 145 470 205 410 Q 240 475 190 535 Z"',3) coloringPart("path","seaweed-b",'d="M 190 535 Q 145 470 205 410 Q 240 475 190 535 Z"',3)
@ -135,10 +136,13 @@ function sceneRocket(){return coloringScene(
)} )}
function sceneRainforest(){return coloringScene( function sceneRainforest(){return coloringScene(
coloringPart("rect","forest-sky",'x="4" y="4" width="792" height="592" rx="28"')+ coloringPart("rect","forest-sky",'x="4" y="4" width="792" height="592" rx="28"')+
coloringPart("path","forest-canopy-left",'d="M 4 145 Q 45 35 145 80 Q 220 15 300 90 Q 335 150 270 185 H 4 Z"',2)+
coloringPart("path","forest-canopy-right",'d="M 500 95 Q 575 20 645 80 Q 735 35 796 130 V 205 H 535 Q 475 165 500 95 Z"',2)+
coloringPart("path","forest-floor",'d="M 4 475 Q 190 430 360 490 T 796 455 L 796 596 L 4 596 Z"')+ coloringPart("path","forest-floor",'d="M 4 475 Q 190 430 360 490 T 796 455 L 796 596 L 4 596 Z"')+
coloringPart("path","tree-trunk-left",'d="M 40 500 Q 95 330 70 45 L 205 45 Q 165 330 235 500 Z"')+ coloringPart("path","tree-trunk-left",'d="M 40 500 Q 95 330 70 45 L 205 45 Q 165 330 235 500 Z"')+
coloringPart("path","tree-trunk-right",'d="M 585 500 Q 640 300 615 35 L 760 35 Q 720 300 785 500 Z"')+ coloringPart("path","tree-trunk-right",'d="M 585 500 Q 640 300 615 35 L 760 35 Q 720 300 785 500 Z"')+
coloringLine("path",'d="M 170 55 Q 300 175 230 315 Q 170 430 300 485 Q 400 525 455 425 Q 505 330 430 265" fill="none"',2)+ coloringLine("path",'d="M 170 55 Q 300 175 230 315 Q 170 430 300 485 Q 400 525 455 425 Q 505 330 430 265" fill="none"',2)+
coloringPart("path","parrot-branch",'d="M 245 408 Q 395 382 575 420 L 568 455 Q 405 425 255 447 Z"')+
coloringPart("path","parrot-body",'d="M 340 270 Q 390 155 490 230 Q 520 330 430 405 Q 330 390 340 270 Z"')+ coloringPart("path","parrot-body",'d="M 340 270 Q 390 155 490 230 Q 520 330 430 405 Q 330 390 340 270 Z"')+
coloringPart("circle","parrot-head",'cx="450" cy="205" r="75"')+ coloringPart("circle","parrot-head",'cx="450" cy="205" r="75"')+
coloringPart("path","parrot-beak",'d="M 505 205 Q 590 225 515 270 Z"')+ coloringPart("path","parrot-beak",'d="M 505 205 Q 590 225 515 270 Z"')+
@ -243,8 +247,8 @@ const COLORING_REFINEMENTS=Object.freeze({
ocean: ocean:
coloringLine("path",'d="M 430 270 Q 455 285 475 270 M 375 200 Q 360 260 375 315" fill="none"')+ coloringLine("path",'d="M 430 270 Q 455 285 475 270 M 375 200 Q 360 260 375 315" fill="none"')+
coloringLine("path",'d="M 250 250 Q 290 215 330 250 Q 290 285 250 250 M 300 305 Q 335 275 365 305" fill="none"',2)+ coloringLine("path",'d="M 250 250 Q 290 215 330 250 Q 290 285 250 250 M 300 305 Q 335 275 365 305" fill="none"',2)+
coloringLine("circle",'cx="701" cy="374" r="5" fill="#26344a" stroke="none"')+ coloringLine("circle",'cx="732" cy="372" r="5" fill="#26344a" stroke="none"')+
coloringLine("path",'d="M 705 397 Q 720 407 733 396" fill="none"',2)+ coloringLine("path",'d="M 728 398 Q 744 408 758 395" fill="none"',2)+
coloringLine("path",'d="M 60 545 Q 115 520 170 545 M 625 545 Q 680 520 740 545" fill="none"',3), coloringLine("path",'d="M 60 545 Q 115 520 170 545 M 625 545 Q 680 520 740 545" fill="none"',3),
garden: garden:
coloringLine("path",'d="M 175 405 C 175 340 265 340 265 405 C 265 455 205 455 205 410 C 205 382 240 382 240 407" fill="none"')+ coloringLine("path",'d="M 175 405 C 175 340 265 340 265 405 C 265 455 205 455 205 410 C 205 382 240 382 240 407" fill="none"')+
@ -264,10 +268,10 @@ const COLORING_REFINEMENTS=Object.freeze({
coloringLine("path",'d="M 350 170 L 370 182 M 450 170 L 430 182 M 375 455 L 400 510 L 425 455" fill="none"',2), coloringLine("path",'d="M 350 170 L 370 182 M 450 170 L 430 182 M 375 455 L 400 510 L 425 455" fill="none"',2),
rainforest: rainforest:
coloringLine("path",'d="M 385 285 Q 415 315 445 345 M 375 315 Q 410 345 440 370" fill="none"',2)+ coloringLine("path",'d="M 385 285 Q 415 315 445 345 M 375 315 Q 410 345 440 370" fill="none"',2)+
coloringLine("path",'d="M 510 225 L 545 238 M 410 405 L 380 485 M 440 405 L 430 500" fill="none"')+ coloringLine("path",'d="M 510 225 L 545 238 M 400 395 L 392 430 M 445 395 L 448 430" fill="none"')+
coloringLine("path",'d="M 360 485 L 335 500 M 380 485 L 398 505 M 410 500 L 390 520 M 430 500 L 450 520" fill="none"',2)+ coloringLine("path",'d="M 392 430 l -20 10 M 392 430 l 18 10 M 448 430 l -18 10 M 448 430 l 20 10" fill="none"',2)+
coloringLine("path",'d="M 115 80 Q 135 165 110 250 M 680 65 Q 700 165 675 260" fill="none"',3)+ coloringLine("path",'d="M 115 80 Q 135 165 110 250 M 680 65 Q 700 165 675 260" fill="none"',3)+
coloringLine("path",'d="M 465 207 Q 478 215 488 204" fill="none"',3), coloringLine("path",'d="M 465 207 Q 478 215 488 204 M 520 228 L 548 238" fill="none"',3),
castle: castle:
coloringLine("path",'d="M 365 400 V 490 M 400 365 V 490 M 435 400 V 490" fill="none"')+ coloringLine("path",'d="M 365 400 V 490 M 400 365 V 490 M 435 400 V 490" fill="none"')+
coloringLine("path",'d="M 240 280 H 330 M 470 280 H 560 M 280 370 H 350 M 450 370 H 525 M 140 330 H 245 M 555 330 H 665" fill="none"',2)+ coloringLine("path",'d="M 240 280 H 330 M 470 280 H 560 M 280 370 H 350 M 450 370 H 525 M 140 330 H 245 M 555 330 H 665" fill="none"',2)+

17
test/coloring.test.js
View file

@ -62,7 +62,7 @@ test('elk leerjaar heeft zeven herkenbare kleurplaten met diverse thema’s en d
assert.ok(page.title.nl&&page.title.en,page.id+' heeft een tweetalige titel'); assert.ok(page.title.nl&&page.title.en,page.id+' heeft een tweetalige titel');
const parts=[...page.svg.matchAll(/data-part="([^"]+)"/g)].map(match=>match[1]); const parts=[...page.svg.matchAll(/data-part="([^"]+)"/g)].map(match=>match[1]);
const details=(page.svg.match(/class="coloring-detail"/g)||[]).length; const details=(page.svg.match(/class="coloring-detail"/g)||[]).length;
const openFillablePaths=[...page.svg.matchAll(/<path data-fillable="true" data-part="([^"]+)"[^>]* d="([^"]+)"/g)] const openFillablePaths=[...page.svg.matchAll(/<path\b[^>]*data-fillable="true"[^>]*data-part="([^"]+)"[^>]* d="([^"]+)"/g)]
.filter(match=>!/[zZ]\s*$/.test(match[2])).map(match=>match[1]); .filter(match=>!/[zZ]\s*$/.test(match[2])).map(match=>match[1]);
assert.ok(parts.length>=14,page.id+' heeft voldoende afzonderlijke kleurvakken'); assert.ok(parts.length>=14,page.id+' heeft voldoende afzonderlijke kleurvakken');
assert.equal(new Set(parts).size,parts.length,page.id+' heeft unieke kleurvakken'); assert.equal(new Set(parts).size,parts.length,page.id+' heeft unieke kleurvakken');
@ -74,8 +74,15 @@ test('elk leerjaar heeft zeven herkenbare kleurplaten met diverse thema’s en d
assert.doesNotMatch(page.svg,/<script|on\w+=/i); assert.doesNotMatch(page.svg,/<script|on\w+=/i);
} }
const landmarks={ const landmarks={
farmyard:['barn','cow-body','cow-head','farm-sun'], farmyard:['barn','cow-body','cow-head','cow-horn-left','cow-tail'],
'rainbow-weather':['umbrella-outer-left','umbrella-inner-right','boot-left'],
'construction-site':['digger-body','bucket','bucket-tooth-a'],
ocean:['fish-body','turtle-shell','turtle-tail'],
rainforest:['forest-canopy-left','parrot-body','parrot-branch'],
'dinosaur-valley':['volcano','dino-body','dino-head','dino-tail'], 'dinosaur-valley':['volcano','dino-body','dino-head','dino-tail'],
'fire-station':['engine-body','engine-ladder','engine-hose-reel'],
'coral-reef':['clownfish-body','coral-red','anemone-base','reef-starfish'],
'savanna-web':['lion-mane','zebra-neck','zebra-muzzle','zebra-leg-0'],
'robot-workshop':['robot-head','robot-body','robot-arm-a','gear-a'], 'robot-workshop':['robot-head','robot-body','robot-arm-a','gear-a'],
'japanese-garden':['pagoda-base','bridge','cherry-trunk','koi-a'] 'japanese-garden':['pagoda-base','bridge','cherry-trunk','koi-a']
}; };
@ -96,7 +103,11 @@ test('potlood reageert op echte pendruk en bouwt kleur transparant op',async()=>
for(const feature of ['getCoalescedEvents','event.pressure','erase?1:.27','quadraticCurveTo','Math.random()'])assert.ok(source.includes(feature),feature); for(const feature of ['getCoalescedEvents','event.pressure','erase?1:.27','quadraticCurveTo','Math.random()'])assert.ok(source.includes(feature),feature);
const css=await readFile('public/css/coloring.css','utf8'); const css=await readFile('public/css/coloring.css','utf8');
assert.match(css,/mix-blend-mode:multiply/); assert.match(css,/mix-blend-mode:multiply/);
assert.match(css,/\.coloring-detail\{stroke-width:4\.5;pointer-events:none\}/); assert.match(source,/class="coloring-region" data-fillable="true"/);
assert.match(source,/stroke-width="6\.5"[^>]*stroke-miterlimit="2"/);
assert.match(css,/\.coloring-svg-lines\{shape-rendering:geometricPrecision\}/);
assert.match(css,/\.coloring-region\[data-level="3"\]\{stroke-width:5\.5\}/);
assert.match(css,/\.coloring-detail\{stroke-width:3\.75;pointer-events:none\}/);
}); });
test('verfemmer vult een SVG-vak in één keer en state bewaart potlood én vlakkleuren',async()=>{ test('verfemmer vult een SVG-vak in één keer en state bewaart potlood én vlakkleuren',async()=>{