good conditions tracing3
parent
36d18e0e76
commit
6999ec9b5b
|
|
@ -7,23 +7,262 @@
|
|||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
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: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
|
||||
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
|
||||
id="layer1">
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
style="display:inline">
|
||||
<g
|
||||
id="g19985"
|
||||
style="display:none">
|
||||
<path
|
||||
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 42.014207,78.885553 33.868367,0.105865"
|
||||
id="path1106" />
|
||||
<path
|
||||
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 54.585716,79.075266 44.449435,78.916887"
|
||||
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
|
||||
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"
|
||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
||||
id="path127" />
|
||||
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 49.392708,9.2082826 C 49.531367,8.0491252 27.044036,72.244814 27.044036,72.244814"
|
||||
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:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
||||
id="path3061" />
|
||||
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:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
||||
id="path3063" />
|
||||
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>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -7,23 +7,257 @@
|
|||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
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: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
|
||||
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
|
||||
id="layer1">
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
style="display:inline">
|
||||
<g
|
||||
id="g19985"
|
||||
style="display:none">
|
||||
<path
|
||||
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 42.014207,78.885553 33.868367,0.105865"
|
||||
id="path1106" />
|
||||
<path
|
||||
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 54.585716,79.075266 44.449435,78.916887"
|
||||
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
|
||||
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"
|
||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
||||
id="path127" />
|
||||
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 49.392708,9.2082826 C 49.531367,8.0491252 27.044036,72.244814 27.044036,72.244814"
|
||||
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:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
||||
id="path3061" />
|
||||
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:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
||||
id="path3063" />
|
||||
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>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -7,23 +7,253 @@
|
|||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
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: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
|
||||
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
|
||||
id="layer1">
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
style="display:inline">
|
||||
<g
|
||||
id="g19985"
|
||||
style="display:none">
|
||||
<path
|
||||
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 42.014207,78.885553 33.868367,0.105865"
|
||||
id="path1106" />
|
||||
<path
|
||||
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 54.585716,79.075266 44.449435,78.916887"
|
||||
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
|
||||
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"
|
||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
||||
id="path127" />
|
||||
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 49.392708,9.2082826 C 49.531367,8.0491252 27.044036,72.244814 27.044036,72.244814"
|
||||
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:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
||||
id="path3061" />
|
||||
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:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
||||
id="path3063" />
|
||||
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>
|
||||
</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 @@
|
|||
<main>
|
||||
<div>
|
||||
<button onclick="useDiv()">Use Div</button>
|
||||
<div id="myDiv">
|
||||
This is the div to hide.
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="Guided Letter Tracing Game">
|
||||
<main>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let usageCount = 0;
|
||||
const maxUsage = 3; // Change this to the desired limit
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
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;
|
||||
|
||||
function useDiv() {
|
||||
usageCount++;
|
||||
|
||||
if (usageCount >= maxUsage) {
|
||||
hideDiv();
|
||||
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() {
|
||||
const divToHide = document.getElementById('myDiv');
|
||||
if (divToHide) {
|
||||
divToHide.style.display = 'none';
|
||||
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').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>
|
||||
|
|
@ -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,101 +38,147 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
|
||||
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, () => {
|
||||
firstScreen.setVisible(false);
|
||||
showLayers.call(this);
|
||||
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 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').setTint(0x05b3a4);
|
||||
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').setTint(0x05b3a4);
|
||||
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').setTint(0x05b3a4);
|
||||
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);
|
||||
}
|
||||
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;
|
||||
|
||||
secondLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
graphics = this.add.graphics();
|
||||
graphics.lineStyle(50, 0x5e17eb);
|
||||
secondTextLayer.setVisible(false);
|
||||
thirdTextLayer.setVisible(true);
|
||||
slideAudio.play();
|
||||
thirdLayer.setVisible(true);
|
||||
secondLayer.setAlpha(1);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
} else {
|
||||
secondLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
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 });
|
||||
|
||||
thirdLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
thirdLayer.setAlpha(1);
|
||||
} else {
|
||||
thirdLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
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>
|
||||
Loading…
Reference in New Issue