good conditions tracing3
parent
36d18e0e76
commit
6999ec9b5b
|
|
@ -7,23 +7,262 @@
|
||||||
viewBox="0 0 100 100"
|
viewBox="0 0 100 100"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
id="svg5"
|
id="svg5"
|
||||||
|
inkscape:export-filename="a.l1svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="a.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:zoom="1.4478969"
|
||||||
|
inkscape:cx="172.3189"
|
||||||
|
inkscape:cy="215.48496"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1011"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1">
|
||||||
|
<sodipodi:guide
|
||||||
|
position="50.044837,106.13694"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide61"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="-6.8261376,96.826178"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide65"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="34.933229,103.49635"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide67"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="74.707741,24.892522"
|
||||||
|
orientation="0,-1"
|
||||||
|
id="guide69"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="109.48582,93.369913"
|
||||||
|
orientation="0,-1"
|
||||||
|
id="guide71"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="65.121878,12.99501"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide550"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
</sodipodi:namedview>
|
||||||
<defs
|
<defs
|
||||||
id="defs2" />
|
id="defs2">
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="Arrow2"
|
||||||
|
refX="0"
|
||||||
|
refY="0"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
inkscape:stockid="Arrow2"
|
||||||
|
markerWidth="7.6999998"
|
||||||
|
markerHeight="5.5999999"
|
||||||
|
viewBox="0 0 7.7 5.6"
|
||||||
|
inkscape:isstock="true"
|
||||||
|
inkscape:collect="always"
|
||||||
|
preserveAspectRatio="xMidYMid">
|
||||||
|
<path
|
||||||
|
transform="scale(0.7)"
|
||||||
|
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
|
||||||
|
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
|
||||||
|
id="arrow2L" />
|
||||||
|
</marker>
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="Arrow2-3"
|
||||||
|
refX="0"
|
||||||
|
refY="0"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
inkscape:stockid="Arrow2"
|
||||||
|
markerWidth="7.6999998"
|
||||||
|
markerHeight="5.5999999"
|
||||||
|
viewBox="0 0 7.7 5.6"
|
||||||
|
inkscape:isstock="true"
|
||||||
|
inkscape:collect="always"
|
||||||
|
preserveAspectRatio="xMidYMid">
|
||||||
|
<path
|
||||||
|
transform="scale(0.7)"
|
||||||
|
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
|
||||||
|
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
|
||||||
|
id="arrow2L-6" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
<g
|
<g
|
||||||
id="layer1">
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
style="display:inline">
|
||||||
|
<g
|
||||||
|
id="g19985"
|
||||||
|
style="display:none">
|
||||||
<path
|
<path
|
||||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
d="m 42.014207,78.885553 33.868367,0.105865"
|
||||||
id="path127" />
|
id="path1106" />
|
||||||
<path
|
<path
|
||||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
|
||||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
d="M 54.585716,79.075266 44.449435,78.916887"
|
||||||
id="path3061" />
|
id="path9586"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="circle9592"
|
||||||
|
cx="-78.125687"
|
||||||
|
cy="44.021099"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-88.91827)" />
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="41.672253"
|
||||||
|
y="79.868111"
|
||||||
|
id="text9761"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9759"
|
||||||
|
style="stroke-width:0.117792"
|
||||||
|
x="41.672253"
|
||||||
|
y="79.868111">4</tspan></text>
|
||||||
|
</g>
|
||||||
<path
|
<path
|
||||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
d="M 49.392708,9.2082826 C 49.531367,8.0491252 27.044036,72.244814 27.044036,72.244814"
|
||||||
id="path3063" />
|
id="path127"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<g
|
||||||
|
id="g650"
|
||||||
|
transform="translate(-0.41310827,-0.00731495)"
|
||||||
|
inkscape:transform-center-x="0.058802502"
|
||||||
|
inkscape:transform-center-y="-0.015142275">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="46.800331"
|
||||||
|
y="15.960659"
|
||||||
|
id="text9342"
|
||||||
|
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9340"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
x="46.800331"
|
||||||
|
y="15.960659">1</tspan></text>
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="path9448"
|
||||||
|
cx="-48.065395"
|
||||||
|
cy="-13.491238"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-178.67073)" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
|
||||||
|
d="m 42.981079,26.489528 c 0.740859,-2.014661 3.661919,-9.743031 3.661919,-9.743031"
|
||||||
|
id="path13743"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="1.9143729"
|
||||||
|
inkscape:transform-center-y="5.0531116" />
|
||||||
|
<path
|
||||||
|
style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 49.945039,9.1516334 C 50.028779,9.4481077 73.189935,72.317745 73.189935,72.317745"
|
||||||
|
id="path15674"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<g
|
||||||
|
id="g1205"
|
||||||
|
transform="translate(0.35203906,0.62379443)"
|
||||||
|
style="display:none">
|
||||||
|
<g
|
||||||
|
id="g1198"
|
||||||
|
transform="translate(-0.48682415,0.59660565)"
|
||||||
|
style="display:none">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="49.768463"
|
||||||
|
y="10.649764"
|
||||||
|
id="text15678"
|
||||||
|
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan15676"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
x="49.768463"
|
||||||
|
y="10.649764">2</tspan></text>
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="circle15680"
|
||||||
|
cx="-50.731476"
|
||||||
|
cy="-8.3328476"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-178.35508)" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
|
||||||
|
d="M 54.145899,21.77088 C 53.442717,19.74276 50.806456,11.912664 50.806456,11.912664"
|
||||||
|
id="path15682"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="-1.6158511"
|
||||||
|
inkscape:transform-center-y="4.8664848" />
|
||||||
|
<g
|
||||||
|
id="g1238"
|
||||||
|
style="display:inline"
|
||||||
|
transform="translate(-0.35203906,-0.62379443)">
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 36.897143,48.164759 26.507248,0.07809"
|
||||||
|
id="path1108" />
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
|
||||||
|
d="M 48.768524,48.161093 39.639351,48.31565"
|
||||||
|
id="path9576"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="-4.8199192"
|
||||||
|
inkscape:transform-center-y="0.3134404" />
|
||||||
|
<g
|
||||||
|
id="g21538"
|
||||||
|
transform="translate(-21.46967,-27.579792)"
|
||||||
|
style="display:inline">
|
||||||
|
<ellipse
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||||
|
id="circle9582"
|
||||||
|
cx="-74.661598"
|
||||||
|
cy="60.70055"
|
||||||
|
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
|
||||||
|
rx="1.2146922"
|
||||||
|
ry="1.1834064" />
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||||
|
x="59.531094"
|
||||||
|
y="75.579971"
|
||||||
|
id="text9714"
|
||||||
|
transform="scale(0.98702867,1.0131418)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9712"
|
||||||
|
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||||
|
x="59.531094"
|
||||||
|
y="75.579971">3</tspan></text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -7,23 +7,257 @@
|
||||||
viewBox="0 0 100 100"
|
viewBox="0 0 100 100"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
id="svg5"
|
id="svg5"
|
||||||
|
inkscape:export-filename="a_l1.svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="a_l2.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:zoom="1.4478969"
|
||||||
|
inkscape:cx="172.3189"
|
||||||
|
inkscape:cy="215.48496"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1011"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1">
|
||||||
|
<sodipodi:guide
|
||||||
|
position="50.044837,106.13694"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide61"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="-6.8261376,96.826178"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide65"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="34.933229,103.49635"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide67"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="74.707741,24.892522"
|
||||||
|
orientation="0,-1"
|
||||||
|
id="guide69"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="109.48582,93.369913"
|
||||||
|
orientation="0,-1"
|
||||||
|
id="guide71"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="65.121878,12.99501"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide550"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
</sodipodi:namedview>
|
||||||
<defs
|
<defs
|
||||||
id="defs2" />
|
id="defs2">
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="Arrow2"
|
||||||
|
refX="0"
|
||||||
|
refY="0"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
inkscape:stockid="Arrow2"
|
||||||
|
markerWidth="7.6999998"
|
||||||
|
markerHeight="5.5999999"
|
||||||
|
viewBox="0 0 7.7 5.6"
|
||||||
|
inkscape:isstock="true"
|
||||||
|
inkscape:collect="always"
|
||||||
|
preserveAspectRatio="xMidYMid">
|
||||||
|
<path
|
||||||
|
transform="scale(0.7)"
|
||||||
|
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
|
||||||
|
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
|
||||||
|
id="arrow2L" />
|
||||||
|
</marker>
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="Arrow2-3"
|
||||||
|
refX="0"
|
||||||
|
refY="0"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
inkscape:stockid="Arrow2"
|
||||||
|
markerWidth="7.6999998"
|
||||||
|
markerHeight="5.5999999"
|
||||||
|
viewBox="0 0 7.7 5.6"
|
||||||
|
inkscape:isstock="true"
|
||||||
|
inkscape:collect="always"
|
||||||
|
preserveAspectRatio="xMidYMid">
|
||||||
|
<path
|
||||||
|
transform="scale(0.7)"
|
||||||
|
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
|
||||||
|
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
|
||||||
|
id="arrow2L-6" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
<g
|
<g
|
||||||
id="layer1">
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
style="display:inline">
|
||||||
|
<g
|
||||||
|
id="g19985"
|
||||||
|
style="display:none">
|
||||||
<path
|
<path
|
||||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
d="m 42.014207,78.885553 33.868367,0.105865"
|
||||||
id="path127" />
|
id="path1106" />
|
||||||
<path
|
<path
|
||||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
|
||||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
d="M 54.585716,79.075266 44.449435,78.916887"
|
||||||
id="path3061" />
|
id="path9586"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="circle9592"
|
||||||
|
cx="-78.125687"
|
||||||
|
cy="44.021099"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-88.91827)" />
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="41.672253"
|
||||||
|
y="79.868111"
|
||||||
|
id="text9761"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9759"
|
||||||
|
style="stroke-width:0.117792"
|
||||||
|
x="41.672253"
|
||||||
|
y="79.868111">4</tspan></text>
|
||||||
|
</g>
|
||||||
<path
|
<path
|
||||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
d="M 49.392708,9.2082826 C 49.531367,8.0491252 27.044036,72.244814 27.044036,72.244814"
|
||||||
id="path3063" />
|
id="path127"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<g
|
||||||
|
id="g650"
|
||||||
|
transform="translate(-0.41310827,-0.00731495)"
|
||||||
|
inkscape:transform-center-x="0.058802502"
|
||||||
|
inkscape:transform-center-y="-0.015142275"
|
||||||
|
style="display:none">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="46.800331"
|
||||||
|
y="15.960659"
|
||||||
|
id="text9342"
|
||||||
|
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9340"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
x="46.800331"
|
||||||
|
y="15.960659">1</tspan></text>
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="path9448"
|
||||||
|
cx="-48.065395"
|
||||||
|
cy="-13.491238"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-178.67073)" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
|
||||||
|
d="m 42.981079,26.489528 c 0.740859,-2.014661 3.661919,-9.743031 3.661919,-9.743031"
|
||||||
|
id="path13743"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="1.9143729"
|
||||||
|
inkscape:transform-center-y="5.0531116" />
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 49.945039,9.1516334 C 50.028779,9.4481077 73.189935,72.317745 73.189935,72.317745"
|
||||||
|
id="path15674"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<g
|
||||||
|
id="g1198"
|
||||||
|
transform="translate(-0.13478509,1.2204001)"
|
||||||
|
style="display:inline">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="49.768463"
|
||||||
|
y="10.649764"
|
||||||
|
id="text15678"
|
||||||
|
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan15676"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
x="49.768463"
|
||||||
|
y="10.649764">2</tspan></text>
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="circle15680"
|
||||||
|
cx="-50.731476"
|
||||||
|
cy="-8.3328476"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-178.35508)" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
|
||||||
|
d="m 54.497938,22.394674 c -0.703182,-2.02812 -3.339443,-9.858216 -3.339443,-9.858216"
|
||||||
|
id="path15682"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="-1.6158511"
|
||||||
|
inkscape:transform-center-y="4.8664848" />
|
||||||
|
<g
|
||||||
|
id="g1238"
|
||||||
|
style="display:none">
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 36.897143,48.164759 26.507248,0.07809"
|
||||||
|
id="path1108" />
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
|
||||||
|
d="M 48.768524,48.161093 39.639351,48.31565"
|
||||||
|
id="path9576"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="-4.8199192"
|
||||||
|
inkscape:transform-center-y="0.3134404" />
|
||||||
|
<g
|
||||||
|
id="g21538"
|
||||||
|
transform="translate(-21.46967,-27.579792)"
|
||||||
|
style="display:inline">
|
||||||
|
<ellipse
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||||
|
id="circle9582"
|
||||||
|
cx="-74.661598"
|
||||||
|
cy="60.70055"
|
||||||
|
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
|
||||||
|
rx="1.2146922"
|
||||||
|
ry="1.1834064" />
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||||
|
x="59.531094"
|
||||||
|
y="75.579971"
|
||||||
|
id="text9714"
|
||||||
|
transform="scale(0.98702867,1.0131418)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9712"
|
||||||
|
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||||
|
x="59.531094"
|
||||||
|
y="75.579971">3</tspan></text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -7,23 +7,253 @@
|
||||||
viewBox="0 0 100 100"
|
viewBox="0 0 100 100"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
id="svg5"
|
id="svg5"
|
||||||
|
inkscape:export-filename="a_l3.svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="a.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:zoom="1.4478969"
|
||||||
|
inkscape:cx="172.3189"
|
||||||
|
inkscape:cy="215.48496"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1011"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1">
|
||||||
|
<sodipodi:guide
|
||||||
|
position="50.044837,106.13694"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide61"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="-6.8261376,96.826178"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide65"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="34.933229,103.49635"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide67"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="74.707741,24.892522"
|
||||||
|
orientation="0,-1"
|
||||||
|
id="guide69"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="109.48582,93.369913"
|
||||||
|
orientation="0,-1"
|
||||||
|
id="guide71"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="65.121878,12.99501"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide550"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
</sodipodi:namedview>
|
||||||
<defs
|
<defs
|
||||||
id="defs2" />
|
id="defs2">
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="Arrow2"
|
||||||
|
refX="0"
|
||||||
|
refY="0"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
inkscape:stockid="Arrow2"
|
||||||
|
markerWidth="7.6999998"
|
||||||
|
markerHeight="5.5999999"
|
||||||
|
viewBox="0 0 7.7 5.6"
|
||||||
|
inkscape:isstock="true"
|
||||||
|
inkscape:collect="always"
|
||||||
|
preserveAspectRatio="xMidYMid">
|
||||||
|
<path
|
||||||
|
transform="scale(0.7)"
|
||||||
|
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
|
||||||
|
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
|
||||||
|
id="arrow2L" />
|
||||||
|
</marker>
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="Arrow2-3"
|
||||||
|
refX="0"
|
||||||
|
refY="0"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
inkscape:stockid="Arrow2"
|
||||||
|
markerWidth="7.6999998"
|
||||||
|
markerHeight="5.5999999"
|
||||||
|
viewBox="0 0 7.7 5.6"
|
||||||
|
inkscape:isstock="true"
|
||||||
|
inkscape:collect="always"
|
||||||
|
preserveAspectRatio="xMidYMid">
|
||||||
|
<path
|
||||||
|
transform="scale(0.7)"
|
||||||
|
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
|
||||||
|
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
|
||||||
|
id="arrow2L-6" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
<g
|
<g
|
||||||
id="layer1">
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
style="display:inline">
|
||||||
|
<g
|
||||||
|
id="g19985"
|
||||||
|
style="display:none">
|
||||||
<path
|
<path
|
||||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
d="m 42.014207,78.885553 33.868367,0.105865"
|
||||||
id="path127" />
|
id="path1106" />
|
||||||
<path
|
<path
|
||||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
|
||||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
d="M 54.585716,79.075266 44.449435,78.916887"
|
||||||
id="path3061" />
|
id="path9586"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="circle9592"
|
||||||
|
cx="-78.125687"
|
||||||
|
cy="44.021099"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-88.91827)" />
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="41.672253"
|
||||||
|
y="79.868111"
|
||||||
|
id="text9761"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9759"
|
||||||
|
style="stroke-width:0.117792"
|
||||||
|
x="41.672253"
|
||||||
|
y="79.868111">4</tspan></text>
|
||||||
|
</g>
|
||||||
<path
|
<path
|
||||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
d="M 49.392708,9.2082826 C 49.531367,8.0491252 27.044036,72.244814 27.044036,72.244814"
|
||||||
id="path3063" />
|
id="path127"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<g
|
||||||
|
id="g650"
|
||||||
|
transform="translate(-0.41310827,-0.00731495)"
|
||||||
|
inkscape:transform-center-x="0.058802502"
|
||||||
|
inkscape:transform-center-y="-0.015142275"
|
||||||
|
style="display:none">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="46.800331"
|
||||||
|
y="15.960659"
|
||||||
|
id="text9342"
|
||||||
|
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9340"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
x="46.800331"
|
||||||
|
y="15.960659">1</tspan></text>
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="path9448"
|
||||||
|
cx="-48.065395"
|
||||||
|
cy="-13.491238"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-178.67073)" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
|
||||||
|
d="m 42.981079,26.489528 c 0.740859,-2.014661 3.661919,-9.743031 3.661919,-9.743031"
|
||||||
|
id="path13743"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="1.9143729"
|
||||||
|
inkscape:transform-center-y="5.0531116" />
|
||||||
|
<path
|
||||||
|
style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 49.945039,9.1516334 C 50.028779,9.4481077 73.189935,72.317745 73.189935,72.317745"
|
||||||
|
id="path15674"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<g
|
||||||
|
id="g1198"
|
||||||
|
transform="translate(-0.13478509,1.2204001)"
|
||||||
|
style="display:none">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
x="49.768463"
|
||||||
|
y="10.649764"
|
||||||
|
id="text15678"
|
||||||
|
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan15676"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
x="49.768463"
|
||||||
|
y="10.649764">2</tspan></text>
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="circle15680"
|
||||||
|
cx="-50.731476"
|
||||||
|
cy="-8.3328476"
|
||||||
|
r="1.2760839"
|
||||||
|
transform="rotate(-178.35508)" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
|
||||||
|
d="m 54.497938,22.394674 c -0.703182,-2.02812 -3.339443,-9.858216 -3.339443,-9.858216"
|
||||||
|
id="path15682"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="-1.6158511"
|
||||||
|
inkscape:transform-center-y="4.8664848" />
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 36.897143,48.164759 26.507248,0.07809"
|
||||||
|
id="path1108" />
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
|
||||||
|
d="m 48.762611,48.287559 -9.130472,-0.01297"
|
||||||
|
id="path9576"
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
inkscape:transform-center-x="-4.8133567"
|
||||||
|
inkscape:transform-center-y="0.4018269" />
|
||||||
|
<g
|
||||||
|
id="g21538"
|
||||||
|
transform="translate(-21.46967,-27.579792)"
|
||||||
|
style="display:inline">
|
||||||
|
<ellipse
|
||||||
|
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||||
|
id="circle9582"
|
||||||
|
cx="-74.661598"
|
||||||
|
cy="60.70055"
|
||||||
|
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
|
||||||
|
rx="1.2146922"
|
||||||
|
ry="1.1834064" />
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||||
|
x="59.531094"
|
||||||
|
y="75.579971"
|
||||||
|
id="text9714"
|
||||||
|
transform="scale(0.98702867,1.0131418)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan9712"
|
||||||
|
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||||
|
x="59.531094"
|
||||||
|
y="75.579971">3</tspan></text>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg height="150px" width="150px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.001 512.001" xml:space="preserve" fill="#00ff00"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#00ff00;" d="M496.396,61.776c20.807,20.807,20.807,54.664,0,75.471L248.82,384.822 c-6.895,6.895-15.951,10.342-25.007,10.342c-9.056,0-18.112-3.447-25.007-10.342l-120.34-120.34 c-20.807-20.807-20.807-54.664,0-75.471s54.664-20.807,75.471,0l69.876,69.862L420.925,61.776 c10.41-10.397,24.063-15.609,37.742-15.609C472.319,46.167,485.999,51.379,496.396,61.776z M477.052,117.904 c10.137-10.15,10.137-26.648,0-36.785c-10.137-10.137-26.648-10.137-36.785,0L241.16,280.227 c-4.637,4.637-10.793,7.182-17.346,7.182c-6.553,0-12.708-2.544-17.332-7.182l-71.887-71.873 c-5.075-5.075-11.724-7.606-18.386-7.606c-6.662,0-13.324,2.531-18.399,7.606c-10.137,10.137-10.137,26.634,0,36.785l120.34,120.34 c3.119,3.119,8.208,3.119,11.327,0L477.052,117.904z"></path> <path style="fill:#00ff00;" d="M477.052,81.119c10.137,10.137,10.137,26.634,0,36.785L229.477,365.479 c-3.119,3.119-8.208,3.119-11.327,0L97.81,245.139c-10.137-10.15-10.137-26.648,0-36.785c5.075-5.075,11.737-7.606,18.399-7.606 c6.662,0,13.31,2.531,18.386,7.606l71.887,71.873c4.624,4.637,10.78,7.182,17.332,7.182s12.708-2.544,17.346-7.182L440.268,81.119 C450.404,70.982,466.916,70.982,477.052,81.119z"></path> <path style="fill:#00ff00;" d="M449.72,239.845c0.383,5.308,0.575,10.739,0.575,16.156c0,124.143-100.997,225.141-225.141,225.141 S0,380.144,0,256S101.011,30.86,225.154,30.86c49.165,0,95.867,15.568,135.046,45.006c6.046,4.542,7.264,13.119,2.722,19.152 c-4.542,6.046-13.119,7.264-19.152,2.722c-34.418-25.855-75.43-39.521-118.617-39.521C116.086,58.219,27.359,146.946,27.359,256 s88.727,197.781,197.795,197.781c109.055,0,197.781-88.727,197.781-197.781c0-4.761-0.178-9.535-0.506-14.186 c-0.547-7.538,5.13-14.09,12.654-14.637C442.634,226.644,449.173,232.307,449.72,239.845z"></path> </g></svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,29 +1,131 @@
|
||||||
|
---
|
||||||
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
<Layout title="Guided Letter Tracing Game">
|
||||||
<main>
|
<main>
|
||||||
<div>
|
<div>
|
||||||
<button onclick="useDiv()">Use Div</button>
|
|
||||||
<div id="myDiv">
|
|
||||||
This is the div to hide.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||||
</main>
|
</main>
|
||||||
|
</Layout>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
let usageCount = 0;
|
const isMobile = window.innerWidth <= 768;
|
||||||
const maxUsage = 3; // Change this to the desired limit
|
const config = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
function useDiv() {
|
width: window.innerWidth,
|
||||||
usageCount++;
|
height: window.innerHeight,
|
||||||
|
backgroundColor: 0xFFFFFF,
|
||||||
if (usageCount >= maxUsage) {
|
scale: {
|
||||||
hideDiv();
|
mode: Phaser.Scale.FIT,
|
||||||
|
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||||
|
},
|
||||||
|
scene: {
|
||||||
|
preload: preload,
|
||||||
|
create: create,
|
||||||
|
update: update
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
const game = new Phaser.Game(config);
|
||||||
|
|
||||||
|
const customWidth = window.innerWidth;
|
||||||
|
const customHeight = window.innerHeight;
|
||||||
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
|
let graphics;
|
||||||
|
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||||
|
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||||
|
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||||
|
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
||||||
|
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
||||||
|
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
||||||
|
this.load.audio('slide', '/assets/audio/slide.mp3');
|
||||||
|
this.load.image('topLogo', '/assets/top_logo.png')
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideDiv() {
|
function create() {
|
||||||
const divToHide = document.getElementById('myDiv');
|
|
||||||
if (divToHide) {
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo')
|
||||||
divToHide.style.display = 'none';
|
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
}
|
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||||
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
|
const baseFontSize = 20;
|
||||||
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
this.time.delayedCall(2000, () => {
|
||||||
|
firstScreen.setVisible(false);
|
||||||
|
showLayers.call(this);
|
||||||
|
}, [], this);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showLayers() {
|
||||||
|
let textX, textY;
|
||||||
|
|
||||||
|
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1').setInteractive({ draggable: true });
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
|
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slantLeftAudio = this.sound.add('slantLeft');
|
||||||
|
slantLeftAudio.play();
|
||||||
|
firstLayer.setDepth(1);
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
|
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2').setInteractive({ draggable: true });
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slantRightAudio = this.sound.add('slantRight');
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
secondLayer.setDepth(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
secondLayer.setInteractive({ draggable: true });
|
||||||
|
secondLayer.setVisible(false);
|
||||||
|
|
||||||
|
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3').setInteractive({ draggable: true });
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slideAudio = this.sound.add('slide');
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
thirdLayer.setDepth(1.1);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setInteractive({ draggable: true });
|
||||||
|
thirdLayer.setVisible(false);
|
||||||
|
|
||||||
|
graphics = this.add.graphics();
|
||||||
|
graphics.lineStyle(5, 0xFF0000).setDepth(2); // Set the line style to red
|
||||||
|
|
||||||
|
// Create a variable to track if drawing is in progress
|
||||||
|
let isDrawing = false;
|
||||||
|
|
||||||
|
// Event for starting to draw
|
||||||
|
firstLayer.on('pointerdown', (pointer) => {
|
||||||
|
isDrawing = true;
|
||||||
|
graphics.beginPath();
|
||||||
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Event for drawing while dragging
|
||||||
|
firstLayer.on('pointermove', (pointer) => {
|
||||||
|
if (isDrawing) {
|
||||||
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
|
graphics.strokePath();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Event for stopping drawing
|
||||||
|
firstLayer.on('pointerup', () => {
|
||||||
|
isDrawing = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
// Update any game logic if needed
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
---
|
||||||
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
<Layout title="Guided Letter Tracing Game">
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
<script is:inline>
|
||||||
|
const isMobile = window.innerWidth <= 768;
|
||||||
|
const drawingZone = {
|
||||||
|
x: isMobile ? 0 : window.innerWidth / 4,
|
||||||
|
y: window.innerHeight / 4,
|
||||||
|
width: isMobile ? window.innerWidth : window.innerWidth / 2,
|
||||||
|
height: window.innerHeight / 2,
|
||||||
|
};
|
||||||
|
let draggingAllowed = false;
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
backgroundColor: 0xFFFFFF,
|
||||||
|
scale: {
|
||||||
|
mode: Phaser.Scale.FIT,
|
||||||
|
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||||
|
},
|
||||||
|
scene: {
|
||||||
|
preload: preload,
|
||||||
|
create: create,
|
||||||
|
update: update
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const game = new Phaser.Game(config);
|
||||||
|
const customWidth = window.innerWidth;
|
||||||
|
const customHeight = window.innerHeight;
|
||||||
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
|
let isDragging = false;
|
||||||
|
let lineStartPosition = {x:0 , y:0};
|
||||||
|
let draggingLine;
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||||
|
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||||
|
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||||
|
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
||||||
|
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
||||||
|
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
||||||
|
this.load.audio('slide', '/assets/audio/slide.mp3');
|
||||||
|
this.load.image('topLogo', '/assets/top_logo.png');
|
||||||
|
this.load.image('succesImage', '/assets/svg/tick.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||||
|
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
|
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||||
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
|
const baseFontSize = 20;
|
||||||
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
|
||||||
|
this.time.delayedCall(2000, () => {
|
||||||
|
firstScreen.setVisible(false);
|
||||||
|
showLayers.call(this);
|
||||||
|
}, [], this);
|
||||||
|
this.add.rectangle(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height, 0x000000, 0.2);
|
||||||
|
|
||||||
|
draggingLine = this.add.graphics();
|
||||||
|
draggingLine.lineStyle(10, 0xff0000).setDepth(1.5);
|
||||||
|
|
||||||
|
// draggingLine = this.add.graphics();
|
||||||
|
// draggingLine.lineStyle(10, 0xff0000).setDepth(1.5); //o\\ 5 is the line width, 0xff0000 is the color (red)
|
||||||
|
}
|
||||||
|
|
||||||
|
function showLayers() {
|
||||||
|
let textX, textY;
|
||||||
|
|
||||||
|
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
|
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slantLeftAudio = this.sound.add('slantLeft');
|
||||||
|
slantLeftAudio.play();
|
||||||
|
firstLayer.setDepth(1);
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
|
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slantRightAudio = this.sound.add('slantRight');
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
secondLayer.setDepth(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
secondLayer.setInteractive({ draggable: true });
|
||||||
|
secondLayer.setVisible(false);
|
||||||
|
|
||||||
|
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slideAudio = this.sound.add('slide');
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
thirdLayer.setDepth(1.1);
|
||||||
|
// thirdLayer.setScale(1.15);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setInteractive({ draggable: true });
|
||||||
|
thirdLayer.setVisible(false);
|
||||||
|
|
||||||
|
firstLayer.on('drag', (pointer) => {
|
||||||
|
if (pointer.isDown && isWithinDrawingZone(pointer)) {
|
||||||
|
firstTextLayer.setVisible(false);
|
||||||
|
secondTextLayer.setVisible(true);
|
||||||
|
slantRightAudio.play();
|
||||||
|
secondLayer.setVisible(true);
|
||||||
|
firstLayer.setAlpha(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
draggingAllowed = true;
|
||||||
|
} else {
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
draggingAllowed = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
secondLayer.on('drag', (pointer) => {
|
||||||
|
if (pointer.isDown && isWithinDrawingZone(pointer)) {
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
thirdTextLayer.setVisible(true);
|
||||||
|
slideAudio.play();
|
||||||
|
thirdLayer.setVisible(true);
|
||||||
|
secondLayer.setAlpha(1);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
draggingAllowed = true;
|
||||||
|
} else {
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
draggingAllowed = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
thirdLayer.on('drag', (pointer) => {
|
||||||
|
if (pointer.isDown && isWithinDrawingZone(pointer)) {
|
||||||
|
thirdLayer.setAlpha(1);
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
draggingAllowed = true;
|
||||||
|
} else {
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
draggingAllowed = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointerdown', dragStart);
|
||||||
|
this.input.on('pointerup', dragEnd);
|
||||||
|
this.input.on('pointermove', drag);
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragStart(pointer) {
|
||||||
|
if (pointer.isDown && isWithinDrawingZone(pointer) && draggingAllowed) {
|
||||||
|
isDragging = true;
|
||||||
|
lineStartPosition.x = pointer.x;
|
||||||
|
lineStartPosition.y = pointer.y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drag(pointer) {
|
||||||
|
if (isDragging) {
|
||||||
|
// draggingLine.clear();
|
||||||
|
draggingLine.beginPath();
|
||||||
|
draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
|
||||||
|
draggingLine.lineTo(pointer.x, pointer.y);
|
||||||
|
draggingLine.strokePath();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragEnd() {
|
||||||
|
isDragging = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
// Update any game logic if needed
|
||||||
|
}
|
||||||
|
|
||||||
|
function isWithinDrawingZone(pointer) {
|
||||||
|
return (
|
||||||
|
pointer.x >= drawingZone.x &&
|
||||||
|
pointer.x <= drawingZone.x + drawingZone.width &&
|
||||||
|
pointer.y >= drawingZone.y &&
|
||||||
|
pointer.y <= drawingZone.y + drawingZone.height
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
---
|
||||||
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
<Layout title="Guided Letter Tracing Game">
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
<script is:inline>
|
||||||
|
const isMobile = window.innerWidth <= 768;
|
||||||
|
const drawingZone = {
|
||||||
|
x: isMobile ? 0 : window.innerWidth / 4,
|
||||||
|
y: window.innerHeight / 4,
|
||||||
|
width: isMobile ? window.innerWidth : window.innerWidth / 2,
|
||||||
|
height: window.innerHeight / 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
backgroundColor: 0xFFFFFF,
|
||||||
|
scale: {
|
||||||
|
mode: Phaser.Scale.FIT,
|
||||||
|
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||||
|
},
|
||||||
|
scene: {
|
||||||
|
preload: preload,
|
||||||
|
create: create,
|
||||||
|
update: update
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const game = new Phaser.Game(config);
|
||||||
|
const customWidth = window.innerWidth;
|
||||||
|
const customHeight = window.innerHeight;
|
||||||
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
|
let isDragging = false;
|
||||||
|
let lineStartPosition = {x:0 , y:0};
|
||||||
|
let draggingLine;
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||||
|
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||||
|
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||||
|
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
||||||
|
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
||||||
|
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
||||||
|
this.load.audio('slide', '/assets/audio/slide.mp3');
|
||||||
|
this.load.image('topLogo', '/assets/top_logo.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||||
|
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
|
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||||
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
|
const baseFontSize = 20;
|
||||||
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
|
||||||
|
this.time.delayedCall(2000, () => {
|
||||||
|
firstScreen.setVisible(false);
|
||||||
|
showLayers.call(this);
|
||||||
|
}, [], this);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showLayers() {
|
||||||
|
let textX, textY;
|
||||||
|
|
||||||
|
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
|
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slantLeftAudio = this.sound.add('slantLeft');
|
||||||
|
slantLeftAudio.play();
|
||||||
|
firstLayer.setDepth(1);
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
|
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slantRightAudio = this.sound.add('slantRight');
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
secondLayer.setDepth(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
secondLayer.setInteractive({ draggable: true });
|
||||||
|
secondLayer.setVisible(false);
|
||||||
|
|
||||||
|
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slideAudio = this.sound.add('slide');
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
thirdLayer.setDepth(1.1);
|
||||||
|
// thirdLayer.setScale(1.15);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setInteractive({ draggable: true });
|
||||||
|
thirdLayer.setVisible(false);
|
||||||
|
|
||||||
|
let isDrawing = false;
|
||||||
|
|
||||||
|
firstLayer.on('drag', (pointer) => {
|
||||||
|
isDrawing = true;
|
||||||
|
graphics.beginPath();
|
||||||
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
if (pointer.isDown) {
|
||||||
|
firstTextLayer.setVisible(false);
|
||||||
|
secondTextLayer.setVisible(true);
|
||||||
|
slantRightAudio.play();
|
||||||
|
secondLayer.setVisible(true);
|
||||||
|
firstLayer.setAlpha(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
firstLayer.on('pointermove', (pointer) => {
|
||||||
|
if (isDrawing) {
|
||||||
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
|
graphics.strokePath();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
secondLayer.on('drag', (pointer) => {
|
||||||
|
if (pointer.isDown) {
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
thirdTextLayer.setVisible(true);
|
||||||
|
slideAudio.play();
|
||||||
|
thirdLayer.setVisible(true);
|
||||||
|
secondLayer.setAlpha(1);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
thirdLayer.on('drag', (pointer) => {
|
||||||
|
if (pointer.isDown) {
|
||||||
|
thirdLayer.setAlpha(1);
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
|
||||||
|
} else {
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
// Update any game logic if needed
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,184 @@
|
||||||
|
---
|
||||||
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
<Layout title="Guided Letter Tracing Game">
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
<script is:inline>
|
||||||
|
const isMobile = window.innerWidth <= 768;
|
||||||
|
const drawingZone = {
|
||||||
|
x: isMobile ? 0 : window.innerWidth / 4,
|
||||||
|
y: window.innerHeight / 4,
|
||||||
|
width: isMobile ? window.innerWidth : window.innerWidth / 2,
|
||||||
|
height: window.innerHeight / 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
backgroundColor: 0xFFFFFF,
|
||||||
|
scale: {
|
||||||
|
mode: Phaser.Scale.FIT,
|
||||||
|
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||||
|
},
|
||||||
|
scene: {
|
||||||
|
preload: preload,
|
||||||
|
create: create,
|
||||||
|
update: update
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const game = new Phaser.Game(config);
|
||||||
|
const customWidth = window.innerWidth;
|
||||||
|
const customHeight = window.innerHeight;
|
||||||
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
|
let graphics;
|
||||||
|
let isDrawing = false;
|
||||||
|
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||||
|
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||||
|
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||||
|
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
||||||
|
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
||||||
|
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
||||||
|
this.load.audio('slide', '/assets/audio/slide.mp3');
|
||||||
|
this.load.image('topLogo', '/assets/top_logo.png');
|
||||||
|
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||||
|
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
|
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||||
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
|
const baseFontSize = 20;
|
||||||
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
|
||||||
|
this.time.delayedCall(2000, () => {
|
||||||
|
this.tweens.add({
|
||||||
|
targets: firstScreen,
|
||||||
|
alpha: 0,
|
||||||
|
scaleX: 0.5,
|
||||||
|
scaleY: 0.5,
|
||||||
|
duration: 1000,
|
||||||
|
onComplete: () => {
|
||||||
|
firstScreen.setVisible(false);
|
||||||
|
firstScreen.setScale(1);
|
||||||
|
showLayersWithFadeIn.call(this);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [], this);
|
||||||
|
}
|
||||||
|
function showLayersWithFadeIn() {
|
||||||
|
this.tweens.add({
|
||||||
|
targets: [firstLayer, secondLayer, thirdLayer],
|
||||||
|
alpha: 1,
|
||||||
|
duration: 1000, // Duration of the tween in milliseconds
|
||||||
|
delay: 500, // Delay before the fade-in starts
|
||||||
|
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
|
||||||
|
});
|
||||||
|
|
||||||
|
let textX, textY;
|
||||||
|
|
||||||
|
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
|
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slantLeftAudio = this.sound.add('slantLeft');
|
||||||
|
slantLeftAudio.play();
|
||||||
|
firstLayer.setDepth(1);
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
|
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slantRightAudio = this.sound.add('slantRight');
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
secondLayer.setDepth(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
secondLayer.setInteractive({ draggable: true });
|
||||||
|
secondLayer.setVisible(false);
|
||||||
|
|
||||||
|
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
||||||
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
|
const slideAudio = this.sound.add('slide');
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
thirdLayer.setDepth(1.1);
|
||||||
|
// thirdLayer.setScale(1.15);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setInteractive({ draggable: true });
|
||||||
|
thirdLayer.setVisible(false);
|
||||||
|
|
||||||
|
firstLayer.on('drag', (pointer) => {
|
||||||
|
if (pointer.isDown) {
|
||||||
|
firstTextLayer.setVisible(false);
|
||||||
|
secondTextLayer.setVisible(true);
|
||||||
|
slantRightAudio.play();
|
||||||
|
secondLayer.setVisible(true);
|
||||||
|
firstLayer.setAlpha(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
secondLayer.on('drag', (pointer) => {
|
||||||
|
if (pointer.isDown) {
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
thirdTextLayer.setVisible(true);
|
||||||
|
slideAudio.play();
|
||||||
|
thirdLayer.setVisible(true);
|
||||||
|
secondLayer.setAlpha(1);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
thirdLayer.on('drag', (pointer) => {
|
||||||
|
if (pointer.isDown) {
|
||||||
|
thirdLayer.setAlpha(1);
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
// const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
|
||||||
|
// succesImage.setAlpha(0.2);
|
||||||
|
// this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
|
||||||
|
} else {
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
graphics = this.add.graphics();
|
||||||
|
graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||||
|
|
||||||
|
this.input.on('pointerdown', function (pointer) {
|
||||||
|
isDrawing = true;
|
||||||
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointerup', function () {
|
||||||
|
isDrawing = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointermove', function (pointer) {
|
||||||
|
if (!isDrawing) return;
|
||||||
|
|
||||||
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
|
graphics.strokePath();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
// Update any game logic if needed
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||||
|
<script is:inline>
|
||||||
|
const config = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
scene: {
|
||||||
|
preload: preload,
|
||||||
|
create: create,
|
||||||
|
update: update
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const game = new Phaser.Game(config);
|
||||||
|
|
||||||
|
let graphics;
|
||||||
|
let isDrawing = false;
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
// Preload any assets if needed
|
||||||
|
}
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
graphics = this.add.graphics();
|
||||||
|
graphics.lineStyle(20, 0x05b3a4, 1); // Set line style (width, color, alpha)
|
||||||
|
|
||||||
|
this.input.on('pointerdown', function (pointer) {
|
||||||
|
isDrawing = true;
|
||||||
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointerup', function () {
|
||||||
|
isDrawing = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointermove', function (pointer) {
|
||||||
|
if (!isDrawing) return;
|
||||||
|
|
||||||
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
|
graphics.strokePath();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
// You can add any game logic or updates here
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -38,34 +38,61 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
const customHeight = window.innerHeight;
|
const customHeight = window.innerHeight;
|
||||||
let firstLayer, secondLayer, thirdLayer;
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
let graphics;
|
let graphics;
|
||||||
|
let isDrawing = false;
|
||||||
|
|
||||||
|
|
||||||
function preload() {
|
function preload() {
|
||||||
this.load.svg('letterA', '/assets/letter/a.svg');
|
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||||
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||||
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||||
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
||||||
this.load.audio('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
|
|
||||||
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
||||||
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
||||||
this.load.audio('slide', '/assets/audio/slide.mp3');
|
this.load.audio('slide', '/assets/audio/slide.mp3');
|
||||||
|
this.load.image('topLogo', '/assets/top_logo.png');
|
||||||
|
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function create() {
|
function create() {
|
||||||
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||||
|
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||||
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
|
const baseFontSize = 20;
|
||||||
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
|
||||||
this.time.delayedCall(2000, () => {
|
this.time.delayedCall(2000, () => {
|
||||||
|
this.tweens.add({
|
||||||
|
targets: firstScreen,
|
||||||
|
alpha: 0,
|
||||||
|
scaleX: 0.5,
|
||||||
|
scaleY: 0.5,
|
||||||
|
duration: 1000,
|
||||||
|
onComplete: () => {
|
||||||
firstScreen.setVisible(false);
|
firstScreen.setVisible(false);
|
||||||
showLayers.call(this);
|
firstScreen.setScale(1);
|
||||||
|
showLayersWithFadeIn.call(this);
|
||||||
|
}
|
||||||
|
});
|
||||||
}, [], this);
|
}, [], this);
|
||||||
}
|
}
|
||||||
|
function showLayersWithFadeIn() {
|
||||||
|
this.tweens.add({
|
||||||
|
targets: [firstLayer, secondLayer, thirdLayer],
|
||||||
|
alpha: 1,
|
||||||
|
duration: 1000, // Duration of the tween in milliseconds
|
||||||
|
delay: 500, // Delay before the fade-in starts
|
||||||
|
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
|
||||||
|
});
|
||||||
|
|
||||||
function showLayers() {
|
|
||||||
let textX, textY;
|
let textX, textY;
|
||||||
|
|
||||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left').setTint(0x05b3a4);
|
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantLeftAudio = this.sound.add('slantLeft');
|
const slantLeftAudio = this.sound.add('slantLeft');
|
||||||
slantLeftAudio.play();
|
slantLeftAudio.play();
|
||||||
firstLayer.setDepth(1);
|
firstLayer.setDepth(1);
|
||||||
|
|
@ -74,7 +101,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
|
|
||||||
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right').setTint(0x05b3a4);
|
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantRightAudio = this.sound.add('slantRight');
|
const slantRightAudio = this.sound.add('slantRight');
|
||||||
secondTextLayer.setVisible(false);
|
secondTextLayer.setVisible(false);
|
||||||
secondLayer.setDepth(1);
|
secondLayer.setDepth(1);
|
||||||
|
|
@ -84,11 +111,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
|
|
||||||
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
const thirdTextLayer = this.add.text(textX, textY, '3. Slide').setTint(0x05b3a4);
|
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slideAudio = this.sound.add('slide');
|
const slideAudio = this.sound.add('slide');
|
||||||
thirdTextLayer.setVisible(false);
|
thirdTextLayer.setVisible(false);
|
||||||
thirdLayer.setDepth(1.1);
|
thirdLayer.setDepth(1.1);
|
||||||
thirdLayer.setScale(1.15);
|
// thirdLayer.setScale(1.15);
|
||||||
thirdLayer.setAlpha(0.5);
|
thirdLayer.setAlpha(0.5);
|
||||||
thirdLayer.setInteractive({ draggable: true });
|
thirdLayer.setInteractive({ draggable: true });
|
||||||
thirdLayer.setVisible(false);
|
thirdLayer.setVisible(false);
|
||||||
|
|
@ -109,8 +136,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
|
|
||||||
secondLayer.on('drag', (pointer) => {
|
secondLayer.on('drag', (pointer) => {
|
||||||
if (pointer.isDown) {
|
if (pointer.isDown) {
|
||||||
graphics = this.add.graphics();
|
|
||||||
graphics.lineStyle(50, 0x5e17eb);
|
|
||||||
secondTextLayer.setVisible(false);
|
secondTextLayer.setVisible(false);
|
||||||
thirdTextLayer.setVisible(true);
|
thirdTextLayer.setVisible(true);
|
||||||
slideAudio.play();
|
slideAudio.play();
|
||||||
|
|
@ -125,14 +150,35 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
thirdLayer.on('drag', (pointer) => {
|
thirdLayer.on('drag', (pointer) => {
|
||||||
if (pointer.isDown) {
|
if (pointer.isDown) {
|
||||||
thirdLayer.setAlpha(1);
|
thirdLayer.setAlpha(1);
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
// const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
|
||||||
|
// succesImage.setAlpha(0.2);
|
||||||
|
// this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
|
||||||
} else {
|
} else {
|
||||||
thirdLayer.setAlpha(0.5);
|
thirdLayer.setAlpha(0.5);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
graphics = this.add.graphics();
|
||||||
|
graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||||
|
|
||||||
|
this.input.on('pointerdown', function (pointer) {
|
||||||
|
isDrawing = true;
|
||||||
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointerup', function () {
|
||||||
|
isDrawing = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointermove', function (pointer) {
|
||||||
|
if (!isDrawing) return;
|
||||||
|
|
||||||
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
|
graphics.strokePath();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function update() {
|
function update() {
|
||||||
// Update any game logic if needed
|
// Update any game logic if needed
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue