diff --git a/VERSION b/VERSION index 3f05c4a..565bcc8 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.4.78-beta +0.4.79-beta diff --git a/public/js/core.js b/public/js/core.js index d515853..3e0135e 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -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.78-beta"; +const VERSION = "0.4.79-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 diff --git a/public/js/widgets/coloring-scenes-advanced.js b/public/js/widgets/coloring-scenes-advanced.js index 217b0eb..6f0c4c5 100644 --- a/public/js/widgets/coloring-scenes-advanced.js +++ b/public/js/widgets/coloring-scenes-advanced.js @@ -5,60 +5,81 @@ "use strict"; function plateSeasons(){ - /* één boom, vier seizoenen: de kroon is in vier kwarten verdeeld en de grond - eronder loopt mee, van links (lente) naar rechts (winter) */ - /* de kroon is een cirkel in vier kwarten: linksonder lente, linksboven zomer, - rechtsboven herfst, rechtsonder winter. De grond eronder loopt in vier - banen mee, dus de plaat leest van links naar rechts als een jaar. */ + /* vier eigen boompjes naast elkaar - één per seizoen - in plaats van één + cirkel in kwarten: dat las als een bal met een kruis erdoorheen. Zo + draagt elke boom zijn eigen seizoen (bloesem, blad, herfstkleur, kale + takken met sneeuw) en is de volgorde meteen duidelijk. */ + const cy=200; + const seasonCrown=(cx)=>{ + const n=coloringRound; + return `M ${n(cx)} ${n(cy-64)} C ${n(cx+34)} ${n(cy-64)} ${n(cx+60)} ${n(cy-42)} ${n(cx+62)} ${n(cy-11)}`+ + ` C ${n(cx+83)} ${n(cy-4)} ${n(cx+81)} ${n(cy+26)} ${n(cx+59)} ${n(cy+38)}`+ + ` C ${n(cx+64)} ${n(cy+60)} ${n(cx+38)} ${n(cy+72)} ${n(cx+11)} ${n(cy+64)}`+ + ` C ${n(cx+4)} ${n(cy+75)} ${n(cx-19)} ${n(cy+75)} ${n(cx-29)} ${n(cy+64)}`+ + ` C ${n(cx-53)} ${n(cy+69)} ${n(cx-75)} ${n(cy+53)} ${n(cx-71)} ${n(cy+26)}`+ + ` C ${n(cx-86)} ${n(cy+15)} ${n(cx-83)} ${n(cy-15)} ${n(cx-60)} ${n(cy-23)}`+ + ` C ${n(cx-53)} ${n(cy-49)} ${n(cx-26)} ${n(cy-64)} ${n(cx)} ${n(cy-64)} Z`; + }; + const trunk=(cx)=>`M ${cx-16} 452 C ${cx-14} 400 ${cx-12} 340 ${cx-10} 270 L ${cx+10} 270 C ${cx+12} 340 ${cx+14} 400 ${cx+16} 452 Z`; return coloringScene("four-seasons", coloringBackdrop("sky","#3b7dd8")+ - coloringFlat("ground-spring","M 4 452 C 70 442 140 448 200 456 L 200 596 L 4 596 Z","#3fae6a")+ - coloringFlat("ground-summer","M 200 456 C 260 462 340 456 400 448 L 400 596 L 200 596 Z","#f7c948")+ - coloringFlat("ground-autumn","M 400 448 C 460 440 540 446 600 454 L 600 596 L 400 596 Z","#f28c3c")+ - coloringFlat("ground-winter","M 600 454 C 660 460 730 454 796 446 L 796 596 L 600 596 Z","#ffffff")+ - coloringGroup("tree", - coloringContour("trunk","M 344 452 C 356 400 364 340 366 250 L 434 250 C 436 340 444 400 456 452 Z","#8b5a3c")+ - /* geschulpte buitenrand per kwart: een gladde cirkel las als een bal in - plaats van als bladerdek */ - coloringContour("crown-summer","M 400 210 L 250 210 C 240 186 240 160 258 140 C 276 118 300 112 320 92 C 340 70 372 56 400 60 Z","#3fae6a")+ - coloringContour("crown-autumn","M 400 210 L 400 60 C 428 56 460 70 480 92 C 500 112 524 118 542 140 C 560 160 560 186 550 210 Z","#f28c3c")+ - coloringContour("crown-spring","M 400 210 L 400 360 C 372 364 340 350 320 328 C 300 308 276 302 258 280 C 240 260 240 234 250 210 Z","#d85aa5")+ - coloringContour("crown-winter","M 400 210 L 550 210 C 560 234 560 260 542 280 C 524 302 500 308 480 328 C 460 350 428 364 400 360 Z","#2fb7a8")+ - /* ronde plukken in plaats van losse spitse blaadjes: die lazen als ogen - of los tegen de rand geplakte snippers. Alle plukken staan ruim - binnen hun kwart, niet op de scheidslijnen, en in drie maten zodat - ze niet als een paar ogen naast elkaar staan */ - coloringGroup("tree-detail", - coloringCircle("blossom-a",300,270,20,"#ffffff")+ - coloringCircle("blossom-b",340,318,16,"#ffffff")+ - coloringCircle("blossom-c",278,310,13,"#ffffff")+ - coloringCircle("leaf-a",294,130,20,"#f7c948")+ - coloringCircle("leaf-b",340,102,15,"#f7c948")+ - coloringCircle("leaf-c",460,124,19,"#e0554d")+ - coloringCircle("leaf-d",500,158,14,"#e0554d")+ - coloringCircle("snow-clump",470,270,20,"#ffffff")+ - coloringCircle("snow-clump-b",506,308,14,"#ffffff")+ - coloringFlat("trunk-knot","M 384 372 C 396 362 412 362 420 372 C 412 386 396 386 384 372 Z","#f2b38f")+ - coloringFlat("hollow","M 386 418 C 396 406 410 406 418 418 C 410 434 396 434 386 418 Z","#26344a"),2)+ - coloringLine("M 376 392 C 394 384 410 384 426 392 M 372 424 C 390 416 408 416 424 424",2)+ - coloringLine("M 400 60 L 400 360 M 250 210 L 550 210",3))+ - coloringGroup("season-props", - coloringContour("tulip-cup","M 78 448 C 78 424 90 408 108 408 C 126 408 138 424 138 448 C 122 458 94 458 78 448 Z","#e0554d")+ - coloringFlat("tulip-stem","M 100 526 C 96 500 96 474 100 448 L 116 448 C 112 474 112 500 116 526 Z","#3fae6a")+ - coloringFlat("sunflower-petal-a",coloringPetalPath(268,486,-90,48,20),"#f7c948")+ - coloringFlat("sunflower-petal-b",coloringPetalPath(268,486,-18,48,20),"#f7c948")+ - coloringFlat("sunflower-petal-c",coloringPetalPath(268,486,54,48,20),"#f7c948")+ - coloringFlat("sunflower-petal-d",coloringPetalPath(268,486,126,48,20),"#f7c948")+ - coloringFlat("sunflower-petal-e",coloringPetalPath(268,486,198,48,20),"#f7c948")+ - coloringCircle("sunflower-core",268,486,26,"#8b5a3c","coloring-contour")+ - coloringFlat("pumpkin","M 484 552 C 484 518 508 498 540 498 C 572 498 596 518 596 552 C 596 578 572 590 540 590 C 508 590 484 578 484 552 Z","#f28c3c")+ - coloringGroup("season-props-detail", - coloringFlat("pumpkin-stem","M 532 498 C 532 484 536 474 546 468 C 552 480 550 492 546 500 Z","#3fae6a")+ - coloringLine("M 512 506 C 506 528 506 566 512 584 M 568 506 C 574 528 574 566 568 584",2)+ - coloringFlat("snowman-body","M 668 552 C 668 526 686 508 710 508 C 734 508 752 526 752 552 C 752 576 734 588 710 588 C 686 588 668 576 668 552 Z","#ffffff")+ - coloringCircle("snowman-head",710,478,32,"#ffffff")+ - coloringDot(700,472,5)+coloringDot(720,472,5),2)+ - coloringLine("M 108 526 C 128 508 148 500 166 498 M 268 512 C 264 542 264 566 268 586",3)) + coloringFlat("ground-spring","M 4 452 C 54 446 100 448 200 452 L 200 596 L 4 596 Z","#3fae6a")+ + coloringFlat("ground-summer","M 200 452 C 250 448 350 448 400 452 L 400 596 L 200 596 Z","#f7c948")+ + coloringFlat("ground-autumn","M 400 452 C 450 448 550 448 600 452 L 600 596 L 400 596 Z","#f28c3c")+ + coloringFlat("ground-winter","M 600 452 C 650 448 746 448 796 452 L 796 596 L 600 596 Z","#ffffff")+ + coloringGroup("spring-tree", + coloringContour("spring-trunk",trunk(102),"#8b5a3c")+ + coloringContour("spring-crown",seasonCrown(102),"#d85aa5")+ + coloringGroup("spring-detail", + coloringCircle("spring-leaf-a",70,190,16,"#3fae6a")+ + coloringCircle("spring-leaf-b",130,165,13,"#3fae6a")+ + coloringCircle("spring-leaf-c",100,235,12,"#3fae6a"),2)+ + coloringGroup("spring-ground", + coloringFlat("spring-flower-stem","M 46 486 C 44 470 44 456 46 444 L 54 444 C 56 456 56 470 54 486 Z","#3fae6a")+ + coloringCircle("spring-flower-heart",50,432,12,"#f7c948")+ + coloringCircle("spring-petal-a",50,414,9,"#d85aa5")+coloringCircle("spring-petal-b",66,432,9,"#d85aa5")+ + coloringCircle("spring-petal-c",50,450,9,"#d85aa5")+coloringCircle("spring-petal-d",34,432,9,"#d85aa5"),2))+ + coloringGroup("summer-tree", + coloringContour("summer-trunk",trunk(300),"#8b5a3c")+ + coloringContour("summer-crown",seasonCrown(300),"#3fae6a")+ + coloringGroup("summer-detail", + coloringCircle("summer-leaf-a",270,182,17,"#2fb7a8")+ + coloringCircle("summer-leaf-b",332,168,14,"#2fb7a8")+ + coloringCircle("summer-leaf-c",300,230,13,"#2fb7a8")+ + coloringCircle("summer-fruit-a",256,222,8,"#e0554d")+coloringCircle("summer-fruit-b",320,205,8,"#e0554d"),2)+ + coloringGroup("summer-ground", + coloringLine("M 244 486 C 240 462 244 444 254 428 M 260 490 C 258 464 262 446 272 430 M 276 486 C 274 462 280 446 290 432")+ + coloringCircle("summer-tuft-a",258,470,10,"#3fae6a")+coloringCircle("summer-tuft-b",274,478,9,"#3fae6a"),2))+ + coloringGroup("autumn-tree", + coloringContour("autumn-trunk",trunk(500),"#8b5a3c")+ + coloringContour("autumn-crown",seasonCrown(500),"#f28c3c")+ + coloringGroup("autumn-detail", + coloringCircle("autumn-leaf-a",470,186,17,"#e0554d")+ + coloringCircle("autumn-leaf-b",532,170,14,"#f7c948")+ + coloringCircle("autumn-leaf-c",500,232,13,"#e0554d"),2)+ + coloringGroup("autumn-ground", + coloringFlat("autumn-leaf-drop-a","M 444 470 C 456 460 472 462 478 474 C 466 486 450 486 444 470 Z","#e0554d")+ + coloringFlat("autumn-leaf-drop-b","M 466 494 C 478 486 492 488 496 500 C 486 510 472 510 466 494 Z","#f7c948"),2))+ + coloringGroup("winter-tree", + coloringContour("winter-trunk",trunk(698),"#8b5a3c")+ + /* geen bladerkroon: drie echte, gevulde takken (geen dunne lijnen die + vanuit één punt uitwaaieren - dat las als vuurwerk) met dunne twijgjes + en sneeuwklompjes op de uiteinden */ + coloringFlat("winter-branch-left",coloringPetalPath(698,278,-130,85,14),"#8b5a3c")+ + coloringFlat("winter-branch-mid",coloringPetalPath(698,278,-90,95,13),"#8b5a3c")+ + coloringFlat("winter-branch-right",coloringPetalPath(698,278,-50,85,14),"#8b5a3c")+ + coloringLine("M 643 213 L 613 196 M 643 213 L 637 179 M 698 183 L 685 147 M 698 183 L 711 147"+ + " M 753 213 L 759 179 M 753 213 L 783 196")+ + coloringGroup("winter-snow", + coloringCircle("snow-tip-a",613,196,11,"#ffffff")+coloringCircle("snow-tip-b",637,179,10,"#ffffff")+ + coloringCircle("snow-tip-c",685,147,11,"#ffffff")+coloringCircle("snow-tip-d",711,147,10,"#ffffff")+ + coloringCircle("snow-tip-e",759,179,11,"#ffffff")+coloringCircle("snow-tip-f",783,196,10,"#ffffff")+ + coloringCircle("snow-crook",698,278,10,"#ffffff"))+ + coloringLine("M 690 230 C 694 246 696 262 698 278 M 706 230 C 704 246 702 262 700 278",3)+ + coloringGroup("winter-ground", + coloringCircle("snowman-body",668,478,20,"#ffffff")+ + coloringCircle("snowman-head",668,448,14,"#ffffff")+ + coloringDot(663,444,3)+coloringDot(673,444,3),2)) ); } @@ -70,11 +91,13 @@ function plateEcoCity(){ coloringFlat("far-hills","M 4 328 C 120 282 220 322 320 296 C 410 272 480 308 560 292 C 650 274 720 306 796 292 L 796 372 L 4 372 Z","#2fb7a8")+ coloringFlat("street","M 4 492 L 796 492 L 796 596 L 4 596 Z","#26344a")+ coloringFlat("park","M 4 372 L 796 372 L 796 492 L 4 492 Z","#3fae6a")+ + /* drie wieken precies 120 graden uit elkaar: eerder stonden ze scheef + (twee dicht bij elkaar, één ver weg), waardoor het geen molen leek */ coloringGroup("turbines", coloringFlat("turbine-mast","M 128 372 L 148 372 L 142 176 L 134 176 Z","#ffffff")+ - coloringFlat("turbine-blade-a","M 138 176 L 146 168 L 236 108 L 240 124 Z","#ffffff")+ - coloringFlat("turbine-blade-b","M 138 176 L 130 170 L 60 244 L 74 252 Z","#ffffff")+ - coloringFlat("turbine-blade-c","M 138 176 L 146 182 L 168 284 L 152 286 Z","#ffffff")+ + coloringFlat("turbine-blade-a",coloringPetalPath(138,176,-50,112,15),"#ffffff")+ + coloringFlat("turbine-blade-b",coloringPetalPath(138,176,70,112,15),"#ffffff")+ + coloringFlat("turbine-blade-c",coloringPetalPath(138,176,190,112,15),"#ffffff")+ coloringCircle("turbine-hub",138,176,13,"#26344a","coloring-contour"))+ coloringGroup("tower-block", coloringContour("tower","M 296 492 L 296 196 L 412 196 L 412 492 Z","#f2b38f")+ diff --git a/public/js/widgets/coloring-scenes-middle.js b/public/js/widgets/coloring-scenes-middle.js index 4dd5b7e..dbe131e 100644 --- a/public/js/widgets/coloring-scenes-middle.js +++ b/public/js/widgets/coloring-scenes-middle.js @@ -162,35 +162,34 @@ function plateDinosaur(){ coloringGroup("ferns", coloringFlat("fern-left","M 64 552 C 46 500 66 452 104 424 C 116 464 112 508 90 546 C 84 556 72 558 64 552 Z","#2fb7a8")+ coloringFlat("fern-right","M 712 548 C 694 496 714 448 752 420 C 764 460 760 504 738 542 C 732 552 720 554 712 548 Z","#2fb7a8"))+ - /* volledig hertekend: een gracieuze S-hals met een echte snuit in plaats - van een rechte staaf met een los blokje erboven, en vier duidelijk - gescheiden poten met elk een eigen voet in plaats van twee brede - lapjes die als "twee poten" oogden */ + /* de klassieke, meteen herkenbare langnekdino: een heel lange gracieuze + hals, een groot rond lijf, een lange dunne staart en een klein koppie + met een grote vriendelijke oog - de verhoudingen die ieder kind al + kent, in plaats van een korte dikke nek op een gewone ovale romp */ coloringGroup("dinosaur", - coloringFlat("dino-tail","M 232 452 C 160 434 90 438 40 462 C 62 490 112 502 168 498 C 202 494 224 476 236 460 Z","#3fae6a")+ - coloringFlat("dino-hind-leg-far","M 388 470 L 424 470 L 420 526 L 430 566 L 396 570 L 386 526 Z","#3fae6a")+ - coloringFlat("dino-fore-leg-far","M 266 472 L 300 472 L 298 522 L 306 566 L 274 570 L 264 522 Z","#3fae6a")+ - coloringContour("dino-body","M 220 460 C 224 396 278 356 350 356 C 426 356 480 396 484 452 C 488 500 434 528 352 528 C 276 528 216 504 220 460 Z","#3fae6a")+ - /* een echte S-bocht in plaats van een rechte buis, en kop+snuit als één - doorlopende ovale vorm in plaats van een los aangeplakt snuitje */ - coloringContour("dino-neck","M 452 420 C 460 372 486 330 522 296 C 540 280 552 270 566 262 L 594 292 C 578 302 560 318 540 340 C 508 372 486 402 478 434 C 468 440 452 434 452 420 Z","#3fae6a")+ - coloringFlat("dino-hind-leg-near","M 350 480 L 390 480 L 388 534 L 398 574 L 358 578 L 346 534 Z","#3fae6a")+ - coloringFlat("dino-fore-leg-near","M 244 482 L 282 482 L 280 530 L 288 574 L 250 578 L 240 530 Z","#3fae6a")+ - coloringContour("dino-head","M 572 278 C 558 252 570 222 600 212 C 630 202 658 218 664 246 C 670 272 654 296 624 302 C 598 306 580 298 572 278 Z","#3fae6a")+ + coloringFlat("dino-tail","M 210 452 C 132 434 60 440 16 460 C 46 484 98 498 156 494 C 188 490 206 470 214 452 Z","#3fae6a")+ + coloringFlat("dino-hind-leg-far","M 365 468 L 402 468 L 398 524 L 408 566 L 372 570 L 362 524 Z","#3fae6a")+ + coloringFlat("dino-fore-leg-far","M 222 470 L 258 470 L 256 520 L 264 566 L 230 570 L 220 520 Z","#3fae6a")+ + coloringContour("dino-body","M 155 460 C 155 394 220 348 300 348 C 384 348 445 394 445 452 C 445 506 380 536 300 536 C 224 536 155 510 155 460 Z","#3fae6a")+ + /* een lange, hoge S-bocht in plaats van een korte diagonale buis */ + coloringContour("dino-neck","M 425 405 C 460 350 505 300 555 265 C 575 248 590 230 600 210 L 636 232 C 622 254 604 274 582 300 C 538 342 500 380 480 420 C 458 428 432 422 425 405 Z","#3fae6a")+ + coloringFlat("dino-hind-leg-near","M 322 480 L 364 480 L 362 534 L 372 574 L 330 578 L 318 534 Z","#3fae6a")+ + coloringFlat("dino-fore-leg-near","M 198 482 L 238 482 L 236 530 L 244 574 L 204 578 L 196 530 Z","#3fae6a")+ + coloringContour("dino-head","M 578 220 C 562 188 580 154 616 144 C 652 134 684 154 690 188 C 696 218 676 246 642 252 C 610 258 588 246 578 220 Z","#3fae6a")+ coloringGroup("dino-detail", - coloringFlat("dino-belly","M 240 480 C 268 508 312 522 356 522 C 400 522 440 508 466 484 C 456 512 408 528 352 528 C 296 528 250 510 240 480 Z","#f7c948")+ - coloringFlat("dino-back-plate-a","M 296 368 C 304 342 322 328 342 332 C 328 348 316 360 310 374 Z","#f28c3c")+ - coloringFlat("dino-back-plate-b","M 350 358 C 358 330 376 316 396 320 C 382 336 372 348 366 362 Z","#f28c3c")+ - coloringFlat("dino-back-plate-c","M 404 362 C 412 334 428 322 446 328 C 432 342 424 354 418 368 Z","#f28c3c")+ - coloringCircle("dino-eye",632,244,11,"#ffffff")+ - coloringDot(633,245,5)+ - coloringFlat("dino-nostril","M 570 264 C 563 260 556 262 553 268 C 558 274 566 274 570 269 Z","#8b5a3c")+ - coloringFlat("dino-foot-hind-far","M 380 560 L 436 560 L 434 574 L 384 578 Z","#8b5a3c")+ - coloringFlat("dino-foot-fore-far","M 258 560 L 312 560 L 310 574 L 262 578 Z","#8b5a3c")+ - coloringFlat("dino-foot-hind-near","M 340 568 L 404 568 L 402 584 L 344 588 Z","#8b5a3c")+ - coloringFlat("dino-foot-fore-near","M 232 568 L 294 568 L 292 584 L 236 588 Z","#8b5a3c"),2)+ - coloringLine("M 560 274 C 553 280 550 288 552 296")+ - coloringLine("M 272 466 C 306 478 356 484 404 482 M 480 400 C 500 380 522 358 546 338 M 96 484 C 140 492 180 492 216 486 M 300 526 C 314 534 330 534 344 528",3))+ + coloringFlat("dino-belly","M 200 480 C 228 508 268 522 308 522 C 350 522 388 508 415 484 C 405 512 360 528 305 528 C 250 528 208 510 200 480 Z","#f7c948")+ + coloringFlat("dino-back-plate-a","M 250 366 C 258 338 278 322 300 328 C 284 346 270 358 264 372 Z","#f28c3c")+ + coloringFlat("dino-back-plate-b","M 305 350 C 313 320 333 306 355 312 C 339 330 325 342 319 356 Z","#f28c3c")+ + coloringFlat("dino-back-plate-c","M 360 356 C 368 326 386 314 408 320 C 392 338 380 350 374 364 Z","#f28c3c")+ + coloringCircle("dino-eye",655,180,15,"#ffffff")+ + coloringDot(657,181,7)+ + coloringFlat("dino-nostril","M 588 208 C 580 204 572 206 568 212 C 574 218 583 218 588 213 Z","#8b5a3c")+ + coloringFlat("dino-foot-hind-far","M 356 560 L 414 560 L 412 574 L 360 578 Z","#8b5a3c")+ + coloringFlat("dino-foot-fore-far","M 214 560 L 268 560 L 266 574 L 218 578 Z","#8b5a3c")+ + coloringFlat("dino-foot-hind-near","M 312 568 L 378 568 L 376 584 L 316 588 Z","#8b5a3c")+ + coloringFlat("dino-foot-fore-near","M 188 568 L 250 568 L 248 584 L 192 588 Z","#8b5a3c"),2)+ + coloringLine("M 576 216 C 568 222 564 230 566 238")+ + coloringLine("M 240 466 C 274 478 324 484 372 482 M 460 380 C 486 356 514 332 542 310 M 60 480 C 100 490 140 490 178 484 M 280 526 C 294 534 310 534 324 528",3))+ coloringGroup("eggs", coloringFlat("egg-a","M 168 566 C 156 546 162 522 180 516 C 198 522 204 546 192 566 Z","#f7c948")+ coloringFlat("egg-b","M 214 570 C 202 552 208 530 224 524 C 240 530 246 552 234 570 Z","#f7c948")+