Voeg 28 herkenbare kleurplaten en creatieve niveaus toe (v0.4.66-beta) #4
7 changed files with 490 additions and 26 deletions
2
VERSION
2
VERSION
|
|
@ -1 +1 @@
|
|||
0.4.65-beta
|
||||
0.4.66-beta
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
.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 [hidden]{display:none}
|
||||
.coloring-svg-lines .coloring-detail{stroke-width:4.5;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-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 [data-fillable]{pointer-events:all}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
<script src="js/widgets/sentence.js?v=__V__" defer></script>
|
||||
<script src="js/widgets/learning.js?v=__V__" defer></script>
|
||||
<script src="js/widgets/world.js?v=__V__" defer></script>
|
||||
<script src="js/widgets/coloring-scenes-extra.js?v=__V__" defer></script>
|
||||
<script src="js/widgets/coloring.js?v=__V__" defer></script>
|
||||
<script src="js/board.js?v=__V__" defer></script>
|
||||
<script src="js/pupil.js?v=__V__" defer></script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"use strict";
|
||||
/* 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. */
|
||||
const VERSION = "0.4.65-beta";
|
||||
const VERSION = "0.4.66-beta";
|
||||
/* Safari en oudere mobiele browsers behandelen 100vh/100% soms als de hoogte
|
||||
achter hun adres- en navigatiebalk. visualViewport geeft de werkelijk
|
||||
zichtbare hoogte; de CSS gebruikt deze pixelwaarde als betrouwbare bron en
|
||||
|
|
|
|||
338
public/js/widgets/coloring-scenes-extra.js
Normal file
338
public/js/widgets/coloring-scenes-extra.js
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
/* teach - aanvullende, herkenbare SVG-kleurplaten */
|
||||
"use strict";
|
||||
|
||||
function sceneFarmyard(){return coloringScene(
|
||||
coloringPart("rect","farm-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","farm-grass",'d="M 4 410 Q 180 370 365 420 T 796 395 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("rect","barn",'x="65" y="245" width="250" height="235" rx="8"')+
|
||||
coloringPart("path","barn-roof",'d="M 35 245 L 190 105 L 345 245 Z"')+
|
||||
coloringPart("circle","barn-window",'cx="190" cy="210" r="42"',2)+
|
||||
coloringPart("rect","barn-door-left",'x="115" y="330" width="75" height="150"')+
|
||||
coloringPart("rect","barn-door-right",'x="190" y="330" width="75" height="150"')+
|
||||
coloringPart("ellipse","cow-body",'cx="535" cy="390" rx="155" ry="95"')+
|
||||
coloringPart("path","cow-head",'d="M 620 315 Q 720 300 738 380 Q 710 460 620 425 Z"')+
|
||||
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-right",'d="M 710 325 Q 750 280 775 325 Q 755 360 715 355 Z"',2)+
|
||||
[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("")+
|
||||
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("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 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)
|
||||
)}
|
||||
|
||||
function sceneRainbowWeather(){return coloringScene(
|
||||
coloringPart("rect","weather-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","weather-hill",'d="M 4 425 Q 180 370 355 430 T 796 400 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("path","cloud-left",'d="M 65 160 Q 75 100 135 115 Q 165 55 225 95 Q 285 80 300 145 Q 285 190 225 180 L 110 180 Q 70 185 65 160 Z"')+
|
||||
coloringPart("path","cloud-right",'d="M 535 155 Q 550 95 605 115 Q 640 65 690 105 Q 750 95 765 155 Q 745 195 690 180 L 575 180 Q 540 190 535 155 Z"')+
|
||||
coloringPart("path","rainbow-red",'d="M 120 410 Q 400 20 680 410 L 635 410 Q 400 90 165 410 Z"')+
|
||||
coloringPart("path","rainbow-orange",'d="M 165 410 Q 400 90 635 410 L 595 410 Q 400 150 205 410 Z"')+
|
||||
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-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-middle",'d="M 530 405 Q 605 300 605 405 Z"',2)+
|
||||
coloringPart("path","umbrella-right",'d="M 605 405 Q 680 300 755 405 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-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("")+
|
||||
coloringLine("path",'d="M 605 405 V 505 Q 605 535 580 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 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)
|
||||
)}
|
||||
|
||||
function sceneConstruction(){return coloringScene(
|
||||
coloringPart("rect","build-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","build-ground",'d="M 4 420 L 796 420 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("rect","digger-track",'x="150" y="450" width="360" height="90" rx="45"')+
|
||||
coloringPart("rect","digger-track-inner",'x="195" y="475" width="270" height="40" rx="20"',2)+
|
||||
coloringPart("path","digger-body",'d="M 205 450 L 240 325 H 475 L 525 450 Z"')+
|
||||
coloringPart("path","digger-cab",'d="M 290 325 L 330 220 H 440 L 475 325 Z"')+
|
||||
coloringPart("path","digger-window",'d="M 325 305 L 350 240 H 420 L 445 305 Z"',2)+
|
||||
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","bucket",'d="M 665 300 Q 755 295 775 385 Q 720 435 650 390 Z"')+
|
||||
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("rect","cone-left-base",'x="45" y="515" width="130" height="30" rx="8"',2)+
|
||||
coloringPart("path","cone-right",'d="M 590 535 L 625 445 L 660 535 Z"',2)+
|
||||
coloringPart("rect","cone-right-base",'x="570" y="530" width="110" height="25" rx="8"',3)+
|
||||
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 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 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)
|
||||
)}
|
||||
|
||||
function sceneForestPicnic(){return coloringScene(
|
||||
coloringPart("rect","picnic-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","picnic-grass",'d="M 4 390 Q 190 350 380 410 T 796 375 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("path","picnic-trunk",'d="M 85 460 Q 125 285 110 90 H 225 Q 200 290 245 460 Z"')+
|
||||
coloringPart("circle","picnic-crown-a",'cx="120" cy="110" r="95"')+coloringPart("circle","picnic-crown-b",'cx="225" cy="135" r="105"')+
|
||||
coloringPart("path","blanket",'d="M 250 455 L 610 420 L 720 570 L 315 580 Z"')+
|
||||
coloringPart("path","blanket-panel-a",'d="M 250 455 L 430 438 L 480 505 L 285 520 Z"',2)+
|
||||
coloringPart("path","blanket-panel-b",'d="M 430 438 L 610 420 L 665 490 L 480 505 Z"',2)+
|
||||
coloringPart("path","basket",'d="M 330 390 Q 405 365 475 390 L 455 490 H 350 Z"')+
|
||||
coloringPart("path","basket-handle",'d="M 350 390 Q 400 290 455 390 L 430 390 Q 400 335 375 390 Z"',2)+
|
||||
coloringPart("circle","apple",'cx="520" cy="455" r="34"')+
|
||||
coloringPart("path","sandwich",'d="M 560 520 L 650 455 L 705 535 Z"',2)+
|
||||
coloringPart("ellipse","rabbit-body",'cx="655" cy="320" rx="80" ry="65"')+
|
||||
coloringPart("circle","rabbit-head",'cx="690" cy="245" r="58"')+
|
||||
coloringPart("ellipse","rabbit-ear-a",'cx="665" cy="160" rx="25" ry="75" transform="rotate(-15 665 160)"')+
|
||||
coloringPart("ellipse","rabbit-ear-b",'cx="720" cy="160" rx="25" ry="75" transform="rotate(15 720 160)"')+
|
||||
coloringPart("circle","rabbit-tail",'cx="575" cy="315" r="38"',2)+
|
||||
coloringLine("path",'d="M 135 150 Q 170 190 205 150 M 150 235 Q 180 265 210 235" fill="none"',2)+
|
||||
coloringLine("path",'d="M 365 410 H 450 M 380 440 H 445 M 395 470 H 440" fill="none"',3)+
|
||||
coloringLine("circle",'cx="705" cy="235" r="6" fill="#26344a" stroke="none"')+
|
||||
coloringLine("path",'d="M 715 260 q 15 12 28 0 M 690 265 l -45 5 M 690 275 l -45 20 M 735 270 l 45 -5 M 735 280 l 42 20" fill="none"',2)+
|
||||
coloringLine("path",'d="M 520 420 q 8 -28 22 -35 M 585 495 H 670" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneDinosaurValley(){return coloringScene(
|
||||
coloringPart("rect","dino-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","dino-ground",'d="M 4 430 Q 185 370 360 435 T 796 405 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("path","volcano",'d="M 35 430 L 175 145 L 320 430 Z"')+
|
||||
coloringPart("path","lava",'d="M 135 225 L 175 145 L 220 235 L 205 320 L 170 275 L 145 335 Z"',2)+
|
||||
coloringPart("circle","smoke-a",'cx="145" cy="105" r="45"',2)+coloringPart("circle","smoke-b",'cx="205" cy="75" r="55"',3)+
|
||||
coloringPart("ellipse","dino-body",'cx="500" cy="380" rx="170" ry="95"')+
|
||||
coloringPart("path","dino-neck",'d="M 575 345 Q 610 170 690 155 Q 750 160 742 225 Q 690 255 660 235 Q 650 330 625 405 Z"')+
|
||||
coloringPart("ellipse","dino-head",'cx="705" cy="190" rx="72" ry="52"')+
|
||||
coloringPart("path","dino-tail",'d="M 350 360 Q 225 300 250 390 Q 290 445 370 425 Z"')+
|
||||
[390,475,555,615].map((x,i)=>coloringPart("path",`dino-leg-${i}`,`d="M ${x} 425 L ${x-10} 545 H ${x+55} L ${x+35} 430 Z"`,i>1?2:1)).join("")+
|
||||
[[385,320],[440,290],[500,280],[555,295]].map(([x,y],i)=>coloringPart("path",`dino-plate-${i}`,`d="M ${x-25} ${y+20} L ${x} ${y-35} L ${x+25} ${y+20} Z"`,i>1?2:1)).join("")+
|
||||
coloringPart("circle","dino-sun",'cx="690" cy="85" r="42"')+
|
||||
coloringLine("circle",'cx="725" cy="180" r="6" fill="#26344a" stroke="none"')+
|
||||
coloringLine("path",'d="M 715 210 Q 735 225 755 208" fill="none"')+
|
||||
coloringLine("path",'d="M 405 400 Q 500 440 590 395 M 435 345 q 20 20 40 0 M 520 335 q 20 20 40 0" fill="none"',2)+
|
||||
coloringLine("path",'d="M 380 545 h 60 M 465 545 h 60 M 545 545 h 60 M 605 545 h 60" fill="none"',2)+
|
||||
coloringLine("path",'d="M 90 450 q 25 -55 50 0 M 250 475 q 25 -65 50 0 M 720 455 q 25 -60 50 0" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneSpringNest(){return coloringScene(
|
||||
coloringPart("rect","nest-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","nest-hill",'d="M 4 465 Q 180 420 380 470 T 796 445 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("path","nest-branch",'d="M 45 410 Q 250 340 480 390 Q 620 420 755 345 L 770 405 Q 600 475 455 445 Q 220 405 50 475 Z"')+
|
||||
coloringPart("path","nest-bowl",'d="M 250 350 Q 395 305 535 350 Q 500 470 390 475 Q 285 460 250 350 Z"')+
|
||||
[315,390,465].map((x,i)=>coloringPart("ellipse",`nest-egg-${i}`,`cx="${x}" cy="350" rx="38" ry="55"`,i===2?2:1)).join("")+
|
||||
coloringPart("ellipse","bird-body",'cx="590" cy="255" rx="105" ry="85"')+
|
||||
coloringPart("circle","bird-head",'cx="655" cy="185" r="63"')+
|
||||
coloringPart("path","bird-wing",'d="M 520 245 Q 595 185 625 300 Q 560 345 520 245 Z"',2)+
|
||||
coloringPart("path","bird-beak",'d="M 710 180 L 780 205 L 710 225 Z"')+
|
||||
coloringPart("path","bird-tail-a",'d="M 505 285 L 405 330 L 525 330 Z"',2)+coloringPart("path","bird-tail-b",'d="M 520 305 L 445 375 L 555 335 Z"',3)+
|
||||
[[125,300,-20],[175,340,25],[665,390,-25],[705,350,20]].map(([x,y,a],i)=>coloringPart("path",`spring-leaf-${i}`,`d="M ${x-35} ${y} Q ${x} ${y-45} ${x+35} ${y} Q ${x} ${y+45} ${x-35} ${y} Z" transform="rotate(${a} ${x} ${y})"`,i>1?2:1)).join("")+
|
||||
coloringPetals(135,165,"spring-nest-flower",3)+
|
||||
coloringLine("circle",'cx="670" cy="175" r="6" fill="#26344a" stroke="none"')+
|
||||
coloringLine("path",'d="M 645 205 Q 665 220 685 205" fill="none"',2)+
|
||||
coloringLine("path",'d="M 535 250 Q 575 270 610 245 M 530 275 Q 575 300 615 275" fill="none"',2)+
|
||||
coloringLine("path",'d="M 275 370 Q 390 330 515 370 M 285 400 Q 390 360 505 400 M 310 430 Q 390 395 480 430" fill="none"',3)+
|
||||
coloringLine("path",'d="M 125 300 L 80 270 M 175 340 L 215 300 M 665 390 L 620 360 M 705 350 L 750 315" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneFireStation(){return coloringScene(
|
||||
coloringPart("rect","fire-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","fire-road",'d="M 4 455 H 796 V 596 H 4 Z"')+
|
||||
coloringPart("rect","station",'x="45" y="170" width="330" height="285" rx="8"')+
|
||||
coloringPart("path","station-roof",'d="M 20 170 L 210 65 L 400 170 Z"')+
|
||||
coloringPart("circle","station-badge",'cx="210" cy="145" r="42"',2)+
|
||||
coloringPart("rect","station-door-a",'x="80" y="255" width="115" height="200" rx="8"')+
|
||||
coloringPart("rect","station-door-b",'x="225" y="255" width="115" height="200" rx="8"')+
|
||||
coloringPart("path","engine-body",'d="M 360 350 H 640 L 730 425 V 500 H 355 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("rect","engine-panel",'x="385" y="375" width="165" height="90" rx="12"',2)+
|
||||
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("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)+
|
||||
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 420 400 H 520 M 420 430 H 520 M 470 375 V 465" fill="none"',3)+
|
||||
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)
|
||||
)}
|
||||
|
||||
function sceneBeeMeadow(){return coloringScene(
|
||||
coloringPart("rect","bee-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","bee-grass",'d="M 4 420 Q 180 385 355 430 T 796 405 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("ellipse","bee-body",'cx="430" cy="250" rx="135" ry="82"')+
|
||||
coloringPart("circle","bee-head",'cx="560" cy="235" r="68"')+
|
||||
coloringPart("ellipse","bee-wing-a",'cx="385" cy="150" rx="75" ry="45" transform="rotate(-25 385 150)"')+
|
||||
coloringPart("ellipse","bee-wing-b",'cx="475" cy="145" rx="75" ry="45" transform="rotate(25 475 145)"')+
|
||||
coloringPart("path","bee-stripe-a",'d="M 350 188 Q 395 165 415 180 L 405 320 Q 365 315 335 285 Z"',2)+
|
||||
coloringPart("path","bee-stripe-b",'d="M 445 170 Q 485 175 510 195 L 490 315 Q 455 328 430 320 Z"',2)+
|
||||
coloringPart("path","hive",'d="M 610 385 Q 685 300 760 385 L 745 535 H 625 Z"')+
|
||||
coloringPart("ellipse","hive-door",'cx="685" cy="475" rx="38" ry="52"',2)+
|
||||
[[115,430],[220,460],[330,440]].map(([x,y],i)=>coloringPetals(x,y,`bee-flower-${i}`,i===2?3:2)).join("")+
|
||||
[[620,400],[685,385],[745,410]].map(([x,y],i)=>coloringPart("path",`honey-cell-${i}`,`d="M ${x-22} ${y} L ${x-11} ${y-20} H ${x+11} L ${x+22} ${y} L ${x+11} ${y+20} H ${x-11} Z"`,3)).join("")+
|
||||
coloringLine("circle",'cx="580" cy="220" r="6" fill="#26344a" stroke="none"')+
|
||||
coloringLine("path",'d="M 575 255 Q 595 270 615 250 M 540 180 Q 520 135 495 125 M 580 175 Q 600 130 625 125" fill="none"')+
|
||||
coloringLine("path",'d="M 380 320 L 350 365 M 425 325 L 415 375 M 470 315 L 490 360" fill="none"',2)+
|
||||
coloringLine("path",'d="M 625 420 H 745 M 620 455 H 750 M 620 495 H 750" fill="none"',2)+
|
||||
coloringLine("path",'d="M 115 455 V 545 M 220 485 V 550 M 330 465 V 545" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneCoralReef(){return coloringScene(
|
||||
coloringPart("rect","reef-water",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","reef-sand",'d="M 4 475 Q 175 425 345 490 T 796 455 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("ellipse","clownfish-body",'cx="355" cy="260" rx="155" ry="82"')+
|
||||
coloringPart("path","clownfish-tail",'d="M 205 260 L 105 180 Q 130 260 105 340 Z"')+
|
||||
coloringPart("path","clownfish-stripe-a",'d="M 290 188 Q 330 178 355 185 L 350 338 Q 315 345 285 328 Q 320 260 290 188 Z"',2)+
|
||||
coloringPart("path","clownfish-stripe-b",'d="M 405 190 Q 445 205 470 235 L 460 300 Q 435 325 400 333 Q 430 260 405 190 Z"',2)+
|
||||
coloringPart("circle","clownfish-eye",'cx="445" cy="235" r="16"')+
|
||||
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("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-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","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("")+
|
||||
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("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 35 555 Q 110 530 185 555 M 590 550 Q 675 520 760 550" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneMountainCamp(){return coloringScene(
|
||||
coloringPart("rect","camp-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","mountain-back",'d="M 5 400 L 210 115 L 400 400 Z"')+
|
||||
coloringPart("path","mountain-front",'d="M 245 420 L 520 75 L 795 420 Z"')+
|
||||
coloringPart("path","snow-back",'d="M 150 200 L 210 115 L 275 215 L 240 195 L 215 225 L 190 195 Z"',2)+
|
||||
coloringPart("path","snow-front",'d="M 430 190 L 520 75 L 615 195 L 565 175 L 525 220 L 485 175 Z"',2)+
|
||||
coloringPart("path","camp-ground",'d="M 4 395 Q 190 360 370 420 T 796 390 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("path","tent-left",'d="M 105 520 L 270 310 L 365 520 Z"')+
|
||||
coloringPart("path","tent-right",'d="M 270 310 L 520 520 H 365 Z"',2)+
|
||||
coloringPart("path","tent-door",'d="M 270 355 L 340 520 H 200 Z"',2)+
|
||||
coloringPart("path","fire-outer",'d="M 545 515 Q 490 450 555 390 Q 545 455 600 425 Q 660 475 610 525 Z"')+
|
||||
coloringPart("path","fire-inner",'d="M 555 505 Q 535 465 575 440 Q 570 475 605 465 Q 625 500 590 520 Z"',2)+
|
||||
coloringPart("rect","log-a",'x="500" y="520" width="135" height="28" rx="14" transform="rotate(12 568 534)"',2)+
|
||||
coloringPart("rect","log-b",'x="510" y="520" width="135" height="28" rx="14" transform="rotate(-12 578 534)"',2)+
|
||||
coloringPart("path","pine-crown-a",'d="M 690 225 L 620 390 H 760 Z"')+
|
||||
coloringPart("path","pine-crown-b",'d="M 690 300 L 595 485 H 785 Z"',2)+
|
||||
coloringPart("rect","pine-trunk",'x="670" y="455" width="40" height="90"',3)+
|
||||
coloringPart("circle","camp-moon",'cx="690" cy="95" r="48"')+
|
||||
coloringLine("path",'d="M 270 310 V 535 M 105 520 H 520" fill="none"')+
|
||||
coloringLine("path",'d="M 220 430 H 315 M 245 480 H 335" fill="none"',2)+
|
||||
coloringLine("path",'d="M 520 534 H 635 M 555 390 Q 585 430 600 425" fill="none"',2)+
|
||||
coloringLine("path",'d="M 620 390 H 760 M 610 435 H 770" fill="none"',3)+
|
||||
coloringLine("path",'d="M 45 560 Q 110 535 175 560 M 355 565 Q 420 535 485 565" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneRobotWorkshop(){return coloringScene(
|
||||
coloringPart("rect","robot-wall",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","robot-floor",'d="M 4 450 H 796 V 596 H 4 Z"')+
|
||||
coloringPart("rect","robot-head",'x="285" y="95" width="230" height="145" rx="28"')+
|
||||
coloringPart("rect","robot-face",'x="320" y="125" width="160" height="80" rx="18"',2)+
|
||||
coloringPart("circle","robot-eye-a",'cx="360" cy="165" r="20"')+coloringPart("circle","robot-eye-b",'cx="440" cy="165" r="20"')+
|
||||
coloringPart("rect","robot-body",'x="250" y="250" width="300" height="210" rx="25"')+
|
||||
coloringPart("rect","robot-screen",'x="305" y="285" width="190" height="90" rx="15"',2)+
|
||||
coloringPart("circle","robot-button-a",'cx="335" cy="415" r="18"',2)+coloringPart("circle","robot-button-b",'cx="400" cy="415" r="18"',2)+coloringPart("circle","robot-button-c",'cx="465" cy="415" r="18"',3)+
|
||||
coloringPart("path","robot-arm-a",'d="M 250 285 L 140 330 L 165 395 L 265 360 Z"')+
|
||||
coloringPart("path","robot-arm-b",'d="M 550 285 L 660 330 L 635 395 L 535 360 Z"')+
|
||||
coloringPart("circle","robot-hand-a",'cx="135" cy="390" r="42"',2)+coloringPart("circle","robot-hand-b",'cx="665" cy="390" r="42"',2)+
|
||||
coloringPart("rect","robot-leg-a",'x="285" y="460" width="85" height="95" rx="20"')+coloringPart("rect","robot-leg-b",'x="430" y="460" width="85" height="95" rx="20"')+
|
||||
coloringPart("path","gear-a",'d="M 105 130 l 18 -28 l 28 18 l 30 -12 l 12 32 l 35 5 l -4 35 l 25 24 l -22 28 l 8 34 l -34 10 l -16 31 l -30 -18 l -33 12 l -11 -33 l -35 -6 l 5 -34 l -25 -25 l 22 -27 l -8 -35 l 34 -9 Z"',3)+
|
||||
coloringPart("circle","gear-a-hole",'cx="145" cy="205" r="35"',3)+
|
||||
coloringLine("path",'d="M 400 95 V 45 M 375 45 H 425" fill="none"')+
|
||||
coloringLine("path",'d="M 355 165 H 365 M 435 165 H 445 M 365 205 Q 400 225 435 205" fill="none"')+
|
||||
coloringLine("path",'d="M 330 325 L 365 350 L 400 310 L 435 340 L 470 300" fill="none"',2)+
|
||||
coloringLine("path",'d="M 275 275 H 525 M 275 440 H 525 M 328 460 V 555 M 472 460 V 555" fill="none"',2)+
|
||||
coloringLine("path",'d="M 20 500 H 160 M 640 500 H 780 M 75 550 H 220 M 580 550 H 725" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneCanalStreet(){return coloringScene(
|
||||
coloringPart("rect","canal-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("rect","house-a",'x="55" y="190" width="175" height="260"')+
|
||||
coloringPart("path","house-a-roof",'d="M 45 190 L 143 95 L 240 190 Z"')+
|
||||
coloringPart("rect","house-b",'x="230" y="145" width="180" height="305"')+
|
||||
coloringPart("path","house-b-roof",'d="M 230 145 Q 320 45 410 145 Z"')+
|
||||
coloringPart("rect","house-c",'x="410" y="180" width="175" height="270"')+
|
||||
coloringPart("path","house-c-roof",'d="M 400 180 L 585 180 L 550 105 L 435 105 Z"')+
|
||||
[[95,235],[175,235],[95,320],[175,320],[270,210],[350,210],[270,300],[350,300],[450,230],[530,230],[450,320],[530,320]].map(([x,y],i)=>coloringPart("rect",`canal-window-${i}`,`x="${x-25}" y="${y-30}" width="50" height="60" rx="5"`,i>7?3:i>3?2:1)).join("")+
|
||||
coloringPart("rect","canal-door-a",'x="115" y="365" width="58" height="85" rx="12"')+
|
||||
coloringPart("rect","canal-door-b",'x="290" y="355" width="58" height="95" rx="12"',2)+
|
||||
coloringPart("rect","canal-door-c",'x="470" y="360" width="58" height="90" rx="12"',2)+
|
||||
coloringPart("path","canal-water",'d="M 4 455 Q 190 425 385 465 T 796 445 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("path","canal-bridge",'d="M 555 455 Q 665 325 795 455 L 795 505 Q 665 410 555 505 Z"',2)+
|
||||
coloringPart("path","canal-boat",'d="M 250 525 H 470 Q 440 575 290 570 Z"',3)+
|
||||
coloringPart("rect","boat-cabin",'x="325" y="470" width="95" height="55" rx="8"',3)+
|
||||
coloringLine("path",'d="M 95 205 V 265 M 175 205 V 265 M 70 235 H 200 M 270 180 V 240 M 350 180 V 240 M 245 210 H 375" fill="none"')+
|
||||
coloringLine("path",'d="M 450 200 V 260 M 530 200 V 260 M 425 230 H 555 M 450 290 V 350 M 530 290 V 350 M 425 320 H 555" fill="none"',2)+
|
||||
coloringLine("path",'d="M 590 455 Q 665 370 760 455 M 625 455 Q 665 415 715 455" fill="none"',2)+
|
||||
coloringLine("path",'d="M 35 535 Q 120 510 205 535 M 500 555 Q 610 520 750 550" fill="none"',3)+
|
||||
coloringLine("path",'d="M 350 470 V 445 M 330 445 H 430 M 290 550 H 440" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneSolarObservatory(){return coloringScene(
|
||||
coloringPart("rect","observatory-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","observatory-hill",'d="M 4 420 Q 185 350 360 425 T 796 385 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("path","observatory-dome",'d="M 85 400 Q 95 170 310 170 Q 520 180 535 400 Z"')+
|
||||
coloringPart("rect","observatory-base",'x="105" y="390" width="410" height="145" rx="12"')+
|
||||
coloringPart("path","dome-slit",'d="M 275 175 Q 330 175 365 205 L 335 390 H 245 Z"',2)+
|
||||
coloringPart("path","telescope-tube",'d="M 300 275 L 575 125 L 620 190 L 350 340 Z"')+
|
||||
coloringPart("ellipse","telescope-lens",'cx="600" cy="158" rx="35" ry="55" transform="rotate(-30 600 158)"',2)+
|
||||
coloringPart("path","telescope-mount",'d="M 325 325 L 395 505 H 290 Z"',2)+
|
||||
coloringPart("circle","planet-ringed",'cx="675" cy="305" r="48"')+
|
||||
coloringPart("path","planet-ring",'d="M 600 295 Q 675 345 750 295 Q 680 380 600 295 Z"',2)+
|
||||
coloringPart("circle","planet-small",'cx="110" cy="100" r="38"',2)+
|
||||
coloringPart("circle","moon-small",'cx="175" cy="90" r="18"',3)+
|
||||
coloringStars([[520,70,18],[710,75,14],[65,245,15],[750,205,12],[420,115,11]],"observatory-star",3)+
|
||||
coloringPart("rect","control-panel",'x="570" y="425" width="155" height="95" rx="12"',3)+
|
||||
coloringLine("path",'d="M 105 390 H 515 M 310 170 V 390" fill="none"')+
|
||||
coloringLine("path",'d="M 335 340 L 575 205 M 360 325 L 600 190" fill="none"',2)+
|
||||
coloringLine("path",'d="M 290 505 H 395 M 325 325 V 505" fill="none"',2)+
|
||||
coloringLine("path",'d="M 595 450 H 700 M 595 475 H 650 M 670 475 H 700 M 595 500 H 625" fill="none"',3)+
|
||||
coloringLine("path",'d="M 505 70 L 535 70 M 520 55 V 85 M 695 75 H 725 M 710 60 V 90" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneSavannaWeb(){return coloringScene(
|
||||
coloringPart("rect","savanna-sky",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","savanna-ground",'d="M 4 415 Q 180 380 360 425 T 796 400 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("path","acacia-trunk",'d="M 95 450 Q 145 300 135 185 H 205 Q 190 310 235 450 Z"')+
|
||||
coloringPart("path","acacia-crown",'d="M 35 210 Q 65 95 165 125 Q 250 70 320 155 Q 365 235 270 260 H 90 Q 30 260 35 210 Z"')+
|
||||
coloringPart("ellipse","lion-body",'cx="485" cy="390" rx="145" ry="80"')+
|
||||
coloringPart("circle","lion-mane",'cx="625" cy="325" r="105"')+
|
||||
coloringPart("circle","lion-face",'cx="625" cy="325" r="68"',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("")+
|
||||
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("path","zebra-head",'d="M 315 470 Q 370 425 405 465 L 380 545 Q 340 560 305 525 Z"',2)+
|
||||
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("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("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 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 120 545 v 35 M 190 545 v 35 M 255 545 v 35 M 320 540 v 40" fill="none"',3)
|
||||
)}
|
||||
|
||||
function sceneJapaneseGarden(){return coloringScene(
|
||||
coloringPart("rect","garden-sky-jp",'x="4" y="4" width="792" height="592" rx="28"')+
|
||||
coloringPart("path","garden-bank-jp",'d="M 4 405 Q 180 365 350 420 T 796 395 L 796 596 L 4 596 Z"')+
|
||||
coloringPart("ellipse","garden-pond-jp",'cx="420" cy="500" rx="335" ry="85"')+
|
||||
coloringPart("rect","pagoda-base",'x="520" y="310" width="175" height="140"')+
|
||||
coloringPart("path","pagoda-roof-low",'d="M 475 310 Q 610 270 740 310 L 700 345 H 515 Z"')+
|
||||
coloringPart("rect","pagoda-upper",'x="550" y="205" width="120" height="85"',2)+
|
||||
coloringPart("path","pagoda-roof-high",'d="M 510 205 Q 610 160 710 205 L 670 235 H 550 Z"',2)+
|
||||
coloringPart("path","bridge",'d="M 85 470 Q 230 300 385 470 L 385 520 Q 230 390 85 520 Z"')+
|
||||
coloringPart("rect","bridge-post-a",'x="95" y="405" width="25" height="115"',2)+coloringPart("rect","bridge-post-b",'x="350" y="405" width="25" height="115"',2)+
|
||||
coloringPart("path","cherry-trunk",'d="M 80 405 Q 135 260 115 95 H 205 Q 175 260 235 405 Z"')+
|
||||
coloringPart("circle","cherry-crown-a",'cx="110" cy="120" r="85"')+coloringPart("circle","cherry-crown-b",'cx="205" cy="130" r="95"')+coloringPart("circle","cherry-crown-c",'cx="155" cy="70" r="70"',2)+
|
||||
coloringPetals(95,95,"cherry-blossom-a",2)+coloringPetals(205,105,"cherry-blossom-b",3)+
|
||||
coloringPart("path","koi-a",'d="M 430 500 Q 490 450 550 500 Q 490 550 430 500 Z"',2)+
|
||||
coloringPart("path","koi-tail-a",'d="M 430 500 L 385 465 L 395 535 Z"',2)+
|
||||
coloringPart("path","stone-lantern",'d="M 705 430 L 740 365 L 775 430 L 760 450 H 720 Z"',3)+
|
||||
coloringPart("rect","lantern-post",'x="732" y="445" width="18" height="90"',3)+
|
||||
coloringLine("path",'d="M 120 445 Q 230 335 350 445 M 120 475 Q 230 375 350 475" fill="none"')+
|
||||
coloringLine("path",'d="M 150 405 V 470 M 220 360 V 435 M 290 380 V 455" fill="none"',2)+
|
||||
coloringLine("path",'d="M 570 350 V 450 M 645 350 V 450 M 550 400 H 670 M 580 235 V 290 M 640 235 V 290" fill="none"',2)+
|
||||
coloringLine("path",'d="M 455 500 Q 490 480 525 500 M 475 490 L 500 510 M 455 545 Q 500 525 555 545" fill="none"',3)+
|
||||
coloringLine("path",'d="M 40 555 Q 140 525 240 555 M 565 555 Q 650 530 760 555" fill="none"',3)
|
||||
)}
|
||||
|
|
@ -14,7 +14,7 @@ function coloringPart(tag,id,attrs="",level=1){
|
|||
return `<${tag} data-fillable="true" data-part="${id}"${level>1?` data-level="${level}"`:""} ${attrs}/>`;
|
||||
}
|
||||
function coloringLine(tag,attrs="",level=1){
|
||||
return `<${tag}${level>1?` data-level="${level}"`:""} ${attrs}/>`;
|
||||
return `<${tag} class="coloring-detail"${level>1?` data-level="${level}"`:""} ${attrs}/>`;
|
||||
}
|
||||
function coloringScene(content){
|
||||
return `<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
|
|
@ -138,12 +138,13 @@ function sceneRainforest(){return coloringScene(
|
|||
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-right",'d="M 585 500 Q 640 300 615 35 L 760 35 Q 720 300 785 500 Z"')+
|
||||
coloringPart("path","vine",'d="M 170 55 Q 300 175 230 315 Q 170 430 300 485 Q 400 525 455 425 Q 505 330 430 265"',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-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("path","parrot-beak",'d="M 505 205 Q 590 225 515 270 Z"')+
|
||||
coloringPart("path","parrot-wing",'d="M 365 275 Q 455 245 465 365 Q 390 400 365 275 Z"',2)+
|
||||
coloringPart("circle","parrot-eye",'cx="470" cy="185" r="14"')+
|
||||
coloringPart("path","parrot-tail",'d="M 385 395 L 355 520 L 425 430 L 440 525 L 465 395 Z"',2)+
|
||||
[[285,125,-25],[540,100,18],[265,405,15],[525,450,-20]].map(([x,y,a],i)=>coloringPart("path",`forest-leaf-${i}`,`d="M ${x-55} ${y} Q ${x} ${y-70} ${x+55} ${y} Q ${x} ${y+70} ${x-55} ${y} Z" transform="rotate(${a} ${x} ${y})"`,i<2?2:3)).join("")+
|
||||
coloringLine("path",'d="M 285 70 L 285 180 M 540 30 L 540 170 M 265 335 L 265 475 M 525 375 L 525 525" fill="none"',3)
|
||||
)}
|
||||
|
|
@ -185,7 +186,7 @@ function sceneEcoCity(){return coloringScene(
|
|||
[[135,235],[205,235],[135,305],[205,305],[135,375],[205,375],[600,185],[670,185],[600,255],[670,255],[600,325],[670,325]].map(([x,y],i)=>coloringPart("rect",`city-window-${i}`,`x="${x-22}" y="${y-25}" width="44" height="50"`,i>5?2:1)).join("")+
|
||||
coloringPart("rect","school-door",'x="375" y="365" width="55" height="90" rx="12"')+
|
||||
coloringPart("circle","tree-crown",'cx="60" cy="410" r="55"',2)+coloringPart("rect","tree-trunk",'x="48" y="430" width="24" height="75"',2)+
|
||||
coloringPart("path","bike-frame",'d="M 250 515 L 315 515 L 285 470 L 250 515 L 330 465"',3)+
|
||||
coloringLine("path",'d="M 250 515 L 315 515 L 285 470 L 250 515 L 330 465" fill="none"',3)+
|
||||
coloringLine("circle",'cx="240" cy="520" r="34" fill="none"',3)+coloringLine("circle",'cx="330" cy="520" r="34" fill="none"',3)+
|
||||
coloringPart("path","solar-a",'d="M 100 190 L 125 135 L 245 135 L 225 190 Z"',2)+coloringPart("path","solar-b",'d="M 580 135 L 600 80 L 705 80 L 690 135 Z"',2)+
|
||||
coloringLine("path",'d="M 125 160 L 235 160 M 165 135 L 155 190 M 205 135 L 195 190 M 600 105 L 700 105 M 635 80 L 625 135 M 670 80 L 660 135" fill="none"',3)
|
||||
|
|
@ -221,20 +222,112 @@ function sceneEcosystem(){return coloringScene(
|
|||
coloringLine("path",'d="M 105 310 L 65 270 M 160 325 L 205 270" fill="none"',3)
|
||||
)}
|
||||
|
||||
const COLORING_REFINEMENTS=Object.freeze({
|
||||
butterfly:
|
||||
coloringLine("circle",'cx="385" cy="150" r="5" fill="#26344a" stroke="none"')+
|
||||
coloringLine("circle",'cx="415" cy="150" r="5" fill="#26344a" stroke="none"')+
|
||||
coloringLine("path",'d="M 375 250 Q 315 275 270 330 M 425 250 Q 485 275 530 330" fill="none"',2)+
|
||||
coloringLine("path",'d="M 372 300 L 428 300 M 368 345 L 432 345 M 375 390 L 425 390" fill="none"',2)+
|
||||
coloringLine("path",'d="M 95 430 l -18 -28 M 145 425 l 18 -30 M 645 435 l -15 -30 M 700 430 l 20 -28" fill="none"',3),
|
||||
autumn:
|
||||
coloringLine("path",'d="M 370 470 Q 385 390 382 305 M 425 470 Q 405 390 410 305" fill="none"')+
|
||||
coloringLine("path",'d="M 385 320 Q 320 270 275 235 M 410 300 Q 475 255 535 235" fill="none"',2)+
|
||||
coloringLine("path",'d="M 90 175 L 140 175 M 635 165 L 685 165 M 150 355 L 200 355 M 585 390 L 635 390" fill="none"',2)+
|
||||
coloringLine("path",'d="M 350 505 q 18 -20 35 0 M 410 510 q 18 -22 38 0" fill="none"',3),
|
||||
cake:
|
||||
coloringLine("ellipse",'cx="400" cy="492" rx="255" ry="24" fill="none"')+
|
||||
coloringLine("path",'d="M 235 445 Q 275 410 315 445 Q 355 410 395 445 Q 440 410 485 445 Q 525 410 565 445" fill="none"',2)+
|
||||
coloringLine("path",'d="M 325 245 H 475 M 270 340 H 530" fill="none"',2)+
|
||||
coloringLine("path",'d="M 382 115 L 418 135 M 382 145 L 418 165" fill="none"',3)+
|
||||
coloringLine("circle",'cx="340" cy="320" r="9" fill="none"',3)+coloringLine("circle",'cx="460" cy="320" r="9" fill="none"',3),
|
||||
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 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("path",'d="M 705 397 Q 720 407 733 396" 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),
|
||||
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("circle",'cx="394" cy="402" r="5" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="425" cy="402" r="5" fill="#26344a" stroke="none"')+
|
||||
coloringLine("path",'d="M 393 427 Q 410 440 428 426 M 565 292 Q 545 265 530 260 M 635 292 Q 655 265 670 260" fill="none"',2)+
|
||||
coloringLine("path",'d="M 525 365 L 485 345 M 525 410 L 480 420 M 675 365 L 715 345 M 675 410 L 720 420" fill="none"',3),
|
||||
windmill:
|
||||
coloringLine("path",'d="M 380 250 H 455 V 320 H 380 Z M 417 250 V 320 M 380 285 H 455" fill="none"')+
|
||||
coloringLine("path",'d="M 328 65 L 414 210 M 625 135 L 445 220 M 500 410 L 422 245 M 200 310 L 392 220" fill="none"',2)+
|
||||
coloringLine("path",'d="M 325 82 L 345 68 M 605 135 L 615 160 M 500 388 L 475 402 M 218 304 L 230 330" fill="none"',3)+
|
||||
coloringLine("path",'d="M 65 520 Q 130 500 195 520 M 545 520 Q 620 495 700 520" fill="none"',2),
|
||||
rocket:
|
||||
coloringLine("path",'d="M 335 330 H 465 M 352 385 H 448" fill="none"')+
|
||||
coloringLine("circle",'cx="400" cy="225" r="32" fill="none"',2)+
|
||||
coloringLine("path",'d="M 383 225 Q 400 240 417 225" fill="none"',3)+
|
||||
coloringLine("circle",'cx="382" cy="210" r="4" fill="#26344a" stroke="none"',3)+coloringLine("circle",'cx="418" cy="210" r="4" fill="#26344a" stroke="none"',3)+
|
||||
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:
|
||||
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 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 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),
|
||||
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 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 160 255 V 290 M 225 255 V 290 M 575 255 V 290 M 640 255 V 290" fill="none"',2)+
|
||||
coloringLine("path",'d="M 193 55 V 25 M 608 55 V 25 M 193 80 H 285 M 608 80 H 700" fill="none"',3)+
|
||||
coloringLine("path",'d="M 365 535 Q 400 515 435 535 M 350 570 Q 400 545 450 570" fill="none"',3),
|
||||
"four-seasons":
|
||||
coloringLine("path",'d="M 395 230 Q 325 180 265 135 M 400 230 Q 485 175 565 135 M 405 250 Q 505 300 565 355 M 385 250 Q 300 315 225 355" fill="none"')+
|
||||
coloringLine("path",'d="M 495 165 l 18 -28 M 548 215 l 20 -25" fill="none"',2)+
|
||||
coloringLine("path",'d="M 500 310 l 45 45 M 545 310 l -45 45" fill="none"',3)+
|
||||
coloringLine("path",'d="M 170 310 h 70 M 205 275 v 70 M 180 285 l 50 50 M 230 285 l -50 50" fill="none"',3),
|
||||
"eco-city":
|
||||
coloringLine("circle",'cx="402" cy="240" r="22" fill="none"')+coloringLine("path",'d="M 402 240 L 402 225 M 402 240 L 415 248" fill="none"')+
|
||||
coloringLine("path",'d="M 120 160 H 235 M 160 135 L 150 190 M 205 135 L 195 190 M 600 105 H 700 M 635 80 L 625 135 M 670 80 L 660 135" fill="none"',2)+
|
||||
coloringLine("circle",'cx="285" cy="495" r="10" fill="none"',3)+
|
||||
coloringLine("path",'d="M 15 545 H 160 M 360 545 H 520 M 625 545 H 780" fill="none"',3),
|
||||
mandala:
|
||||
coloringLine("circle",'cx="400" cy="300" r="118" fill="none"',2)+coloringLine("circle",'cx="400" cy="300" r="205" fill="none"',3)+
|
||||
coloringLine("path",'d="M 400 95 V 505 M 195 300 H 605 M 255 155 L 545 445 M 545 155 L 255 445" fill="none"',3)+
|
||||
coloringLine("circle",'cx="400" cy="300" r="18" fill="none"',3),
|
||||
ecosystem:
|
||||
coloringLine("circle",'cx="350" cy="385" r="7" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="460" cy="385" r="7" fill="#26344a" stroke="none"')+
|
||||
coloringLine("path",'d="M 365 438 Q 405 465 445 438" fill="none"')+
|
||||
coloringLine("path",'d="M 320 465 l -35 28 M 340 475 l -20 35 M 470 465 l 35 28 M 450 475 l 20 35" fill="none"',2)+
|
||||
coloringLine("path",'d="M 570 255 H 600 M 568 280 H 602 M 570 305 H 600 M 220 500 Q 405 540 585 500" fill="none"',3)
|
||||
});
|
||||
function coloringRefined(id,svg){
|
||||
const details=COLORING_REFINEMENTS[id]||"";
|
||||
return svg.replace("\n </g>\n </svg>",`\n <g class="coloring-recognition" data-scene="${id}">${details}</g>\n </g>\n </svg>`);
|
||||
}
|
||||
|
||||
const COLORING_PAGES=Object.freeze([
|
||||
{id:"butterfly",theme:"animals",years:[1,2],title:{nl:"Blije vlinder",en:"Happy butterfly"},svg:sceneButterfly()},
|
||||
{id:"autumn",theme:"seasons",years:[1,2],title:{nl:"Herfstboom",en:"Autumn tree"},svg:sceneAutumn()},
|
||||
{id:"cake",theme:"culture",years:[1,2],title:{nl:"Feesttaart",en:"Party cake"},svg:sceneCake()},
|
||||
{id:"ocean",theme:"animals",years:[3,4],title:{nl:"Vrienden in zee",en:"Ocean friends"},svg:sceneOcean()},
|
||||
{id:"garden",theme:"nature",years:[3,4],title:{nl:"Kleine tuindieren",en:"Little garden animals"},svg:sceneGarden()},
|
||||
{id:"windmill",theme:"culture",years:[3,4],title:{nl:"Molen in de polder",en:"Windmill in the polder"},svg:sceneWindmill()},
|
||||
{id:"rocket",theme:"science",years:[5,6],title:{nl:"Raket door de ruimte",en:"Rocket through space"},svg:sceneRocket()},
|
||||
{id:"rainforest",theme:"nature",years:[5,6],title:{nl:"Regenwoud",en:"Rainforest"},svg:sceneRainforest()},
|
||||
{id:"castle",theme:"culture",years:[5,6],title:{nl:"Kasteel en dorp",en:"Castle and village"},svg:sceneCastle()},
|
||||
{id:"four-seasons",theme:"seasons",years:[7,8],title:{nl:"Boom van vier seizoenen",en:"Four seasons tree"},svg:sceneFourSeasons()},
|
||||
{id:"eco-city",theme:"science",years:[7,8],title:{nl:"Duurzame stad",en:"Sustainable city"},svg:sceneEcoCity()},
|
||||
{id:"mandala",theme:"culture",years:[7,8],title:{nl:"Geometrische mandala",en:"Geometric mandala"},svg:sceneMandala()},
|
||||
{id:"ecosystem",theme:"nature",years:[7,8],title:{nl:"Leven rond de vijver",en:"Life around the pond"},svg:sceneEcosystem()}
|
||||
{id:"butterfly",theme:"animals",years:[1,2],title:{nl:"Blije vlinder",en:"Happy butterfly"},svg:coloringRefined("butterfly",sceneButterfly())},
|
||||
{id:"autumn",theme:"seasons",years:[1,2],title:{nl:"Herfstboom",en:"Autumn tree"},svg:coloringRefined("autumn",sceneAutumn())},
|
||||
{id:"cake",theme:"culture",years:[1,2],title:{nl:"Feesttaart",en:"Party cake"},svg:coloringRefined("cake",sceneCake())},
|
||||
{id:"farmyard",theme:"animals",years:[1,2],title:{nl:"Boerderijvrienden",en:"Farmyard friends"},svg:coloringRefined("farmyard",sceneFarmyard())},
|
||||
{id:"rainbow-weather",theme:"seasons",years:[1,2],title:{nl:"Regenboogweer",en:"Rainbow weather"},svg:coloringRefined("rainbow-weather",sceneRainbowWeather())},
|
||||
{id:"construction-site",theme:"science",years:[1,2],title:{nl:"Grote graafmachine",en:"Big excavator"},svg:coloringRefined("construction-site",sceneConstruction())},
|
||||
{id:"forest-picnic",theme:"nature",years:[1,2],title:{nl:"Picknick in het bos",en:"Forest picnic"},svg:coloringRefined("forest-picnic",sceneForestPicnic())},
|
||||
{id:"ocean",theme:"animals",years:[3,4],title:{nl:"Vrienden in zee",en:"Ocean friends"},svg:coloringRefined("ocean",sceneOcean())},
|
||||
{id:"garden",theme:"nature",years:[3,4],title:{nl:"Kleine tuindieren",en:"Little garden animals"},svg:coloringRefined("garden",sceneGarden())},
|
||||
{id:"windmill",theme:"culture",years:[3,4],title:{nl:"Molen in de polder",en:"Windmill in the polder"},svg:coloringRefined("windmill",sceneWindmill())},
|
||||
{id:"dinosaur-valley",theme:"science",years:[3,4],title:{nl:"Dinosaurusvallei",en:"Dinosaur valley"},svg:coloringRefined("dinosaur-valley",sceneDinosaurValley())},
|
||||
{id:"spring-nest",theme:"seasons",years:[3,4],title:{nl:"Vogelnest in de lente",en:"Spring bird nest"},svg:coloringRefined("spring-nest",sceneSpringNest())},
|
||||
{id:"fire-station",theme:"culture",years:[3,4],title:{nl:"Brandweerkazerne",en:"Fire station"},svg:coloringRefined("fire-station",sceneFireStation())},
|
||||
{id:"bee-meadow",theme:"nature",years:[3,4],title:{nl:"Bijen in de bloemenwei",en:"Bees in the meadow"},svg:coloringRefined("bee-meadow",sceneBeeMeadow())},
|
||||
{id:"rocket",theme:"science",years:[5,6],title:{nl:"Raket door de ruimte",en:"Rocket through space"},svg:coloringRefined("rocket",sceneRocket())},
|
||||
{id:"rainforest",theme:"nature",years:[5,6],title:{nl:"Regenwoud",en:"Rainforest"},svg:coloringRefined("rainforest",sceneRainforest())},
|
||||
{id:"castle",theme:"culture",years:[5,6],title:{nl:"Kasteel en dorp",en:"Castle and village"},svg:coloringRefined("castle",sceneCastle())},
|
||||
{id:"coral-reef",theme:"animals",years:[5,6],title:{nl:"Koraalrif",en:"Coral reef"},svg:coloringRefined("coral-reef",sceneCoralReef())},
|
||||
{id:"mountain-camp",theme:"seasons",years:[5,6],title:{nl:"Bergkamp",en:"Mountain camp"},svg:coloringRefined("mountain-camp",sceneMountainCamp())},
|
||||
{id:"robot-workshop",theme:"science",years:[5,6],title:{nl:"Robotwerkplaats",en:"Robot workshop"},svg:coloringRefined("robot-workshop",sceneRobotWorkshop())},
|
||||
{id:"canal-street",theme:"culture",years:[5,6],title:{nl:"Straat langs de gracht",en:"Canal street"},svg:coloringRefined("canal-street",sceneCanalStreet())},
|
||||
{id:"four-seasons",theme:"seasons",years:[7,8],title:{nl:"Boom van vier seizoenen",en:"Four seasons tree"},svg:coloringRefined("four-seasons",sceneFourSeasons())},
|
||||
{id:"eco-city",theme:"science",years:[7,8],title:{nl:"Duurzame stad",en:"Sustainable city"},svg:coloringRefined("eco-city",sceneEcoCity())},
|
||||
{id:"mandala",theme:"culture",years:[7,8],title:{nl:"Geometrische mandala",en:"Geometric mandala"},svg:coloringRefined("mandala",sceneMandala())},
|
||||
{id:"ecosystem",theme:"nature",years:[7,8],title:{nl:"Leven rond de vijver",en:"Life around the pond"},svg:coloringRefined("ecosystem",sceneEcosystem())},
|
||||
{id:"solar-observatory",theme:"science",years:[7,8],title:{nl:"Sterrenwacht",en:"Solar observatory"},svg:coloringRefined("solar-observatory",sceneSolarObservatory())},
|
||||
{id:"savanna-web",theme:"animals",years:[7,8],title:{nl:"Leven op de savanne",en:"Life on the savanna"},svg:coloringRefined("savanna-web",sceneSavannaWeb())},
|
||||
{id:"japanese-garden",theme:"culture",years:[7,8],title:{nl:"Japanse tuin",en:"Japanese garden"},svg:coloringRefined("japanese-garden",sceneJapaneseGarden())}
|
||||
]);
|
||||
|
||||
function coloringPagesFor(yearGroup,theme="all"){
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ import {readFile} from 'node:fs/promises';
|
|||
import {runInNewContext} from 'node:vm';
|
||||
|
||||
async function coloringContext(){
|
||||
const source=await readFile('public/js/widgets/coloring.js','utf8');
|
||||
const [extra,widget]=await Promise.all([
|
||||
readFile('public/js/widgets/coloring-scenes-extra.js','utf8'),readFile('public/js/widgets/coloring.js','utf8')
|
||||
]),source=extra+'\n'+widget;
|
||||
const context={};
|
||||
runInNewContext(source+`;
|
||||
globalThis.__coloring={
|
||||
|
|
@ -23,6 +25,8 @@ test('kleurplatenwidget laadt vóór het bord en is als creatieve leerlingwidget
|
|||
readFile('public/js/pupil.js','utf8'),readFile('public/js/cast.js','utf8'),
|
||||
readFile('public/js/core.js','utf8'),readFile('public/css/coloring.css','utf8')
|
||||
]);
|
||||
assert.ok(html.indexOf('js/widgets/coloring-scenes-extra.js')>0);
|
||||
assert.ok(html.indexOf('js/widgets/coloring-scenes-extra.js')<html.indexOf('js/widgets/coloring.js'));
|
||||
assert.ok(html.indexOf('js/widgets/coloring.js')>0);
|
||||
assert.ok(html.indexOf('js/widgets/coloring.js')<html.indexOf('js/board.js'));
|
||||
assert.match(html,/css\/coloring\.css\?v=__V__/);
|
||||
|
|
@ -35,27 +39,52 @@ test('kleurplatenwidget laadt vóór het bord en is als creatieve leerlingwidget
|
|||
}
|
||||
});
|
||||
|
||||
test('elk leerjaar heeft meerdere passende kleurplaten met thema en drie detailniveaus',async()=>{
|
||||
test('elk leerjaar heeft zeven herkenbare kleurplaten met diverse thema’s en drie detailniveaus',async()=>{
|
||||
const {api}=await coloringContext();
|
||||
const pages=JSON.parse(JSON.stringify(api.pages));
|
||||
assert.equal(pages.length,13);
|
||||
assert.equal(pages.length,28);
|
||||
assert.equal(new Set(pages.map(page=>page.id)).size,pages.length);
|
||||
const added=[
|
||||
'farmyard','rainbow-weather','construction-site','forest-picnic',
|
||||
'dinosaur-valley','spring-nest','fire-station','bee-meadow',
|
||||
'coral-reef','mountain-camp','robot-workshop','canal-street',
|
||||
'solar-observatory','savanna-web','japanese-garden'
|
||||
];
|
||||
assert.equal(added.filter(id=>pages.some(page=>page.id===id)).length,15);
|
||||
for(let year=1;year<=8;year++){
|
||||
const suitable=JSON.parse(JSON.stringify(api.pagesFor(year)));
|
||||
assert.ok(suitable.length>=3,`groep ${year} heeft minimaal drie kleurplaten`);
|
||||
assert.equal(suitable.length,7,`groep ${year} heeft zeven kleurplaten`);
|
||||
assert.ok(suitable.every(page=>year>=page.years[0]&&year<=page.years[1]));
|
||||
assert.ok(new Set(suitable.map(page=>page.theme)).size>=3,`groep ${year} heeft diverse thema's`);
|
||||
assert.equal(new Set(suitable.map(page=>page.theme)).size,5,`groep ${year} heeft alle vijf thema's`);
|
||||
}
|
||||
for(const page of pages){
|
||||
assert.ok(api.themes[page.theme],page.id+' heeft een bekend thema');
|
||||
assert.ok(page.title.nl&&page.title.en,page.id+' heeft een tweetalige titel');
|
||||
assert.match(page.svg,/data-fillable="true"/);
|
||||
const parts=[...page.svg.matchAll(/data-part="([^"]+)"/g)].map(match=>match[1]);
|
||||
const details=(page.svg.match(/class="coloring-detail"/g)||[]).length;
|
||||
const openFillablePaths=[...page.svg.matchAll(/<path data-fillable="true" data-part="([^"]+)"[^>]* d="([^"]+)"/g)]
|
||||
.filter(match=>!/[zZ]\s*$/.test(match[2])).map(match=>match[1]);
|
||||
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.deepEqual(openFillablePaths,[],page.id+' heeft alleen gesloten aanklikbare paden');
|
||||
assert.ok(details>=4,page.id+' heeft voldoende herkenbaar binnenlijnwerk');
|
||||
assert.match(page.svg,new RegExp(`data-scene="${page.id}"`));
|
||||
assert.match(page.svg,/data-level="2"/);
|
||||
assert.match(page.svg,/data-level="3"/);
|
||||
assert.doesNotMatch(page.svg,/<script|on\w+=/i);
|
||||
}
|
||||
assert.equal(api.pagesFor(5,'science').length,1);
|
||||
assert.equal(api.pagesFor(3,'science').length,0);
|
||||
const landmarks={
|
||||
farmyard:['barn','cow-body','cow-head','farm-sun'],
|
||||
'dinosaur-valley':['volcano','dino-body','dino-head','dino-tail'],
|
||||
'robot-workshop':['robot-head','robot-body','robot-arm-a','gear-a'],
|
||||
'japanese-garden':['pagoda-base','bridge','cherry-trunk','koi-a']
|
||||
};
|
||||
for(const [id,names] of Object.entries(landmarks)){
|
||||
const page=pages.find(item=>item.id===id);
|
||||
names.forEach(name=>assert.ok(page.svg.includes(`data-part="${name}"`),`${id} mist ${name}`));
|
||||
}
|
||||
assert.equal(api.pagesFor(5,'science').length,2);
|
||||
assert.equal(api.pagesFor(3,'science').length,1);
|
||||
});
|
||||
|
||||
test('potlood reageert op echte pendruk en bouwt kleur transparant op',async()=>{
|
||||
|
|
@ -67,6 +96,7 @@ 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);
|
||||
const css=await readFile('public/css/coloring.css','utf8');
|
||||
assert.match(css,/mix-blend-mode:multiply/);
|
||||
assert.match(css,/\.coloring-detail\{stroke-width:4\.5;pointer-events:none\}/);
|
||||
});
|
||||
|
||||
test('verfemmer vult een SVG-vak in één keer en state bewaart potlood én vlakkleuren',async()=>{
|
||||
|
|
|
|||
Loading…
Reference in a new issue