Blokkify
/
blokkify-lang
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Compare commits

base: Blokkify:0.1.0
Branches Tags
Blokkify:main
Blokkify:legacy
Blokkify:0.2.1
Blokkify:0.2.0
Blokkify:0.1.2
Blokkify:0.1.1
Blokkify:0.1.0
Blokkify:0.0.0
...
compare: Blokkify:main
Branches Tags
Blokkify:main
Blokkify:legacy
Blokkify:0.2.1
Blokkify:0.2.0
Blokkify:0.1.2
Blokkify:0.1.1
Blokkify:0.1.0
Blokkify:0.0.0

10 Commits
0.1.0 ... main

Author SHA1 Message Date
onez++ 24d6fea9ce new, more logical API 2024-05-02 19:11:53 -04:00
onez++ a96587ae8a fix bugs with window resize and clicking func 2024-05-01 15:00:30 -04:00
onez++ 60840a5a13 1920x1080 downscaled is now default res 2024-05-01 14:31:48 -04:00
onez++ 74194a6a69 a little cluttered 2024-05-01 06:37:50 -04:00
onez++ 689f1876a4 fix ui stuff 2024-04-29 21:09:03 -04:00
onez++ f0161cad3b vi indentation 2024-04-29 03:50:42 -04:00
onez++ 9f31abd1f7 docs 2024-04-28 04:27:16 -04:00
onez++ c4f9d7a808 performance fixes 2024-04-26 21:10:53 -04:00
onez++ dea6f3f1cd stuff happens 2024-04-22 14:10:14 -04:00
onez++ b801c4cad0 better icons 2024-04-13 14:17:16 -04:00
20 changed files with 1747 additions and 1738 deletions
Show Stats Expand all files Collapse all files

0
README.md
View File

323
css/core.css
View File

@ -1,292 +1,321 @@
body {
font-family: sans-serif;
font-family: sans-serif;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
display: grid;
grid-template-rows: 50px 1fr;
display: grid;
grid-template-rows: 50px 1fr;
}
.bottom {
display: grid;
grid-template-columns: 1fr min-content;
display: grid;
grid-template-columns: 1fr min-content;
}
.top {
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
background: #2a3140;
overflow-x: auto;
border-radius: 0;
overflow-y: hidden;
position: sticky;
top: 0
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
background: #2a3140;
overflow-x: auto;
border-radius: 0;
overflow-y: hidden;
position: sticky;
top: 0
}
.margin {
margin-left: 10px;
margin-right: 10px;
height: 100%;
width: 2px;
background: #7f828a;
margin-left: 10px;
margin-right: 10px;
height: 100%;
width: 2px;
background: #7f828a;
}
.top a {
margin: 5px;
text-decoration: none;
color: #fff;
font-weight: 700
margin: 5px;
text-decoration: none;
color: #fff;
font-weight: 700
}
.top a.icon {
background: #fff;
color: #ff7474;
padding: 5px;
margin-right: 25px;
font-weight: 900;
font-size: 1.3em;
border-radius: 10px
background: #fff;
color: #ff7474;
padding: 5px;
margin-right: 25px;
font-weight: 900;
font-size: 1.3em;
border-radius: 10px
}
.top a,
.sprites p,
.assetlist p {
margin: 5px;
margin: 5px;
}
.assetlist p {
display: inline-block;
display: inline-block;
}
.right {
display: grid;
grid-template-rows: min-content 1fr;
display: grid;
grid-template-rows: min-content 1fr;
}
canvas {
background: rgb(200, 200, 200);
background: rgb(200, 200, 200);
}
.embed .top,
.embed .sprites,
.embed .left,
.embed .top {
display: none;
display: none;
}
.embed canvas {
display: block;
width: 100vw;
height: calc(100vh - 120px);
display: block;
width: 100vw;
height: calc(100vh - 120px);
}
.embed,
.embed .bottom {
display: block;
display: block;
}
.block {
overflow-y: scroll;
height: 90vh;
overflow-y: scroll;
height: 90vh;
}
.block div,
.block textarea,
.clicker {
padding: 2px;
margin: 2px;
min-width: 20px;
max-width: 50vw;
overflow: visible;
display: inline-block;
width: max-content;
vertical-align: middle;
background: rgb(241, 241, 241);
border: solid rgb(0, 0, 0, 0.2) 2px;
border-radius: 10px;
padding: 1px;
margin: 1px;
font-size: 15px;
min-width: 20px;
max-width: 50vw;
overflow: visible;
display: inline-block;
width: max-content;
vertical-align: middle;
background: rgb(241, 241, 241);
border: solid rgb(0, 0, 0, 0.2) 2px;
border-radius: 5px;
}
.block div div div {
margin-left: 10px;
margin-left: 10px;
}
.clicker, .block div.menu, .tooltip.clicker {
width: initial;
.clicker,
.block div.menu,
.tooltip.clicker {
width: initial;
}
.block div.block-control {
width: 500px;
width: 500px;
}
.block textarea {
height: 1rem;
height: 1rem;
}
.block .block-comment {
font-family: monospace;
white-space: pre-wrap;
background: rgb(244, 247, 217);
color: rgb(0, 0, 0);
background: rgb(244, 247, 217);
color: rgb(0, 0, 0);
}
.block .block-text {
font-family: monospace;
white-space: pre-wrap;
background: rgb(54, 54, 54);
color: rgb(255, 255, 255);
background: rgb(54, 54, 54);
color: rgb(255, 255, 255);
}
.block .block-control {
background: rgb(255, 238, 191);
}
.block .block-data {
background: rgb(244, 191, 255);
}
.block .block-logic {
background: rgb(217, 255, 191);
.block .block-text textarea,
.block .block-comment textarea {
font-family: monospace;
white-space: pre-wrap;
margin-left: 5px;
font-size: 11px;
}
.block .block-string {
background: rgb(255, 191, 223);
background: rgb(255, 191, 191);
}
.block .block-variable {
background: rgb(255, 217, 191);
}
.block .block-control {
background: rgb(255, 238, 191);
}
.block .block-math {
background: rgb(238, 255, 191);
background: rgb(238, 255, 191);
}
.block .block-variable {
background: rgb(255, 217, 191);
.block .block-logic {
background: rgb(217, 255, 191);
}
.block .block-output {
background: rgb(191, 255, 220);
background: rgb(191, 255, 207);
}
.block .block-motion {
background: rgb(191, 211, 255);
}
.block .block-input {
background: rgb(191, 255, 250);
background: rgb(191, 255, 230);
}
.block .block-motion {
background: rgb(191, 224, 255);
}
.block .block-pen {
background: rgb(191, 197, 255);
}
.block .block-looks {
background: rgb(210, 191, 255);
}
.block .block-data {
background: rgb(255, 191, 250);
}
.block div.block-control>div,
.block div.block-control {
display: block;
display: block;
}
.block .block-none {
padding: 0;
min-width: initial;
margin: 0;
background: none;
border: hidden;
display: flex;
flex-direction: column;
padding: 0;
min-width: initial;
margin: 0;
background: none;
border: hidden;
display: flex;
flex-direction: column;
}
.top a {
text-decoration: none;
text-decoration: none;
}
audio {
display: none;
display: none;
}
.block div.block-control>div.button {
display: inline-block;
display: inline-block;
}
.block div.button {
text-align: center;
display: inline-block;
padding: 0px;
background: rgb(0, 0, 0, 0.2);
color: black;
width: 25px;
margin: 2px;
text-align: center;
display: inline-block;
padding: 0px;
background: rgb(0, 0, 0, 0.2);
color: black;
width: 25px;
margin: 2px;
}
.block div.button:hover {
background: rgb(0, 0, 0, 0.1);
border: solid white 2px;
background: rgb(0, 0, 0, 0.1);
border: solid white 2px;
}
.block div.button.red {
background: rgb(255, 140, 120);
color: black;
background: rgb(255, 140, 120);
color: black;
}
.block div.button.nuke {
background: rgb(78, 37, 30);
color: white;
background: rgb(78, 37, 30);
color: white;
}
.clicker {
text-decoration: none;
font-size: 0.8rem;
margin: 2px;
text-decoration: none;
font-size: 0.8rem;
margin: 2px;
}
.menu {
top: 0;
position: sticky;
top: 0;
position: sticky;
}
.tooltip {
z-index: 10;
transform: translate(15px, 15px);
z-index: 10;
transform: translate(15px, 15px);
}
input,
textarea {
border: solid rgb(196, 196, 196) 1px;
padding: 5px;
border-radius: 5px;
background: #f5f5f5;
display: block;
margin-top: 10px;
margin-bottom: 10px
border: solid rgb(196, 196, 196) 1px;
padding: 5px;
border-radius: 5px;
background: #f5f5f5;
display: block;
margin-top: 10px;
margin-bottom: 10px
}
iframe {
border: none;
width: 100%;
height: 100%;
border: none;
width: 100%;
height: 100%;
}
.sprites a {
background: rgb(66, 55, 55);
color: white;
text-decoration: none;
border-radius: 10px;
padding: 5px;
padding: 3px;
text-decoration: none;
display: inline-block;
border-radius: 5px;
background: rgb(58, 180, 89);
border: solid rgb(45, 155, 96) 2px;
color: rgb(255, 255, 255);
margin: auto;
margin-top: auto;
margin-bottom: auto;
margin-top: 2px;
margin-bottom: 2px;
font-weight: bold;
font-size: 1.1rem;
}
.ico {
width: 50px;
height: 50px;
margin: 5px;
width: 50px;
height: 50px;
margin: 5px;
}
.embed .no_embed {
display: none;
display: none;
}
.embed .the_buttons img {
width: 75px;
height: 75px;
width: 75px;
height: 75px;
}
.block .odd_depth {
background-image: linear-gradient(to bottom, rgb(0,0,0,0.07), rgb(0,0,0,0.07));
}
background-image: linear-gradient(to bottom, rgb(0, 0, 0, 0.07), rgb(0, 0, 0, 0.07));
}
.menu pre {
margin: 0;
font-family: sans-serif;
white-space: pre-wrap;
}

140
example.svg
View File

@ -2,74 +2,74 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="113.05566"
height="113.05565"
viewBox="0 0 113.05566 113.05565"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="main.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="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="0.51213161"
inkscape:cx="242.12526"
inkscape:cy="200.14387"
inkscape:window-width="1880"
inkscape:window-height="1019"
inkscape:window-x="16"
inkscape:window-y="37"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-54.329883,-114.76255)">
<path
id="path1"
style="fill:#c4ebff;fill-opacity:1;stroke:none;stroke-width:6.61458;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 164.07825,171.29037 a 53.220539,53.220539 0 0 1 -53.22054,53.22054 53.220539,53.220539 0 0 1 -53.220537,-53.22054 53.220539,53.220539 0 0 1 53.220537,-53.22053 53.220539,53.220539 0 0 1 53.22054,53.22053 z" />
<path
id="path8"
style="fill:#93d9ff;fill-opacity:1;stroke:none;stroke-width:6.61458;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 164.07825,171.29037 c 0,27.59418 -21.00059,50.28341 -47.89112,52.95703 -0.17693,-0.66033 17.7051,-19.75931 17.7051,-52.30465 0,-32.50562 -18.45178,-53.67836 -18.45178,-53.67836 27.24744,2.32382 48.6378,25.17691 48.6378,53.02598 z"
sodipodi:nodetypes="scscs" />
<path
id="path6"
style="fill:#e3f9ff;fill-opacity:1;stroke:none;stroke-width:6.6146;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 100.27965,144.91448 A 12.175846,12.175846 0 0 1 88.103811,157.09033 12.175846,12.175846 0 0 1 75.927964,144.91448 12.175846,12.175846 0 0 1 88.103811,132.73863 12.175846,12.175846 0 0 1 100.27965,144.91448 Z" />
<path
style="fill:none;fill-opacity:1;stroke:#002ead;stroke-width:6.6146;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 114.95105,140.94035 c 0,0 1.29302,7.95839 1.26186,17.63744 -0.0434,13.47185 -1.2964,18.12022 -1.2964,18.12022"
id="path4"
sodipodi:nodetypes="csc" />
<path
style="fill:none;fill-opacity:1;stroke:#002ead;stroke-width:6.61458;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 145.10846,200.91516 c 0,0 -7.95839,4.84264 -17.63744,4.72594 -13.47185,-0.16243 -18.12022,-4.8553 -18.12022,-4.8553"
id="path5"
sodipodi:nodetypes="csc" />
<path
id="path7"
style="fill:none;fill-opacity:1;stroke:#3dbdff;stroke-width:6.61458;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 164.07825,171.29037 a 53.220539,53.220539 0 0 1 -53.22054,53.22054 53.220539,53.220539 0 0 1 -53.220537,-53.22054 53.220539,53.220539 0 0 1 53.220537,-53.22053 53.220539,53.220539 0 0 1 53.22054,53.22053 z" />
<path
style="fill:none;fill-opacity:1;stroke:#002ead;stroke-width:6.6146;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 142.46559,140.94035 c 0,0 1.29302,7.95839 1.26186,17.63744 -0.0434,13.47185 -1.2964,18.12022 -1.2964,18.12022"
id="path9"
sodipodi:nodetypes="csc" />
</g>
width="113.05566"
height="113.05565"
viewBox="0 0 113.05566 113.05565"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="main.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="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="0.51213161"
inkscape:cx="242.12526"
inkscape:cy="200.14387"
inkscape:window-width="1880"
inkscape:window-height="1019"
inkscape:window-x="16"
inkscape:window-y="37"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-54.329883,-114.76255)">
<path
id="path1"
style="fill:#c4ebff;fill-opacity:1;stroke:none;stroke-width:6.61458;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 164.07825,171.29037 a 53.220539,53.220539 0 0 1 -53.22054,53.22054 53.220539,53.220539 0 0 1 -53.220537,-53.22054 53.220539,53.220539 0 0 1 53.220537,-53.22053 53.220539,53.220539 0 0 1 53.22054,53.22053 z" />
<path
id="path8"
style="fill:#93d9ff;fill-opacity:1;stroke:none;stroke-width:6.61458;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 164.07825,171.29037 c 0,27.59418 -21.00059,50.28341 -47.89112,52.95703 -0.17693,-0.66033 17.7051,-19.75931 17.7051,-52.30465 0,-32.50562 -18.45178,-53.67836 -18.45178,-53.67836 27.24744,2.32382 48.6378,25.17691 48.6378,53.02598 z"
sodipodi:nodetypes="scscs" />
<path
id="path6"
style="fill:#e3f9ff;fill-opacity:1;stroke:none;stroke-width:6.6146;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 100.27965,144.91448 A 12.175846,12.175846 0 0 1 88.103811,157.09033 12.175846,12.175846 0 0 1 75.927964,144.91448 12.175846,12.175846 0 0 1 88.103811,132.73863 12.175846,12.175846 0 0 1 100.27965,144.91448 Z" />
<path
style="fill:none;fill-opacity:1;stroke:#002ead;stroke-width:6.6146;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 114.95105,140.94035 c 0,0 1.29302,7.95839 1.26186,17.63744 -0.0434,13.47185 -1.2964,18.12022 -1.2964,18.12022"
id="path4"
sodipodi:nodetypes="csc" />
<path
style="fill:none;fill-opacity:1;stroke:#002ead;stroke-width:6.61458;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 145.10846,200.91516 c 0,0 -7.95839,4.84264 -17.63744,4.72594 -13.47185,-0.16243 -18.12022,-4.8553 -18.12022,-4.8553"
id="path5"
sodipodi:nodetypes="csc" />
<path
id="path7"
style="fill:none;fill-opacity:1;stroke:#3dbdff;stroke-width:6.61458;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 164.07825,171.29037 a 53.220539,53.220539 0 0 1 -53.22054,53.22054 53.220539,53.220539 0 0 1 -53.220537,-53.22054 53.220539,53.220539 0 0 1 53.220537,-53.22053 53.220539,53.220539 0 0 1 53.22054,53.22053 z" />
<path
style="fill:none;fill-opacity:1;stroke:#002ead;stroke-width:6.6146;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 142.46559,140.94035 c 0,0 1.29302,7.95839 1.26186,17.63744 -0.0434,13.47185 -1.2964,18.12022 -1.2964,18.12022"
id="path9"
sodipodi:nodetypes="csc" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

67
img/asset.svg
View File

@ -23,9 +23,9 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.9825758"
inkscape:cx="156.91135"
inkscape:cy="105.27813"
inkscape:zoom="1.4912879"
inkscape:cx="165.62865"
inkscape:cy="163.61696"
inkscape:window-width="1918"
inkscape:window-height="1062"
inkscape:window-x="0"
@ -40,45 +40,26 @@
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;stroke:#000000;stroke-width:31.2782;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 17.390736,99.034969 125,15.864055 232.60926,99.034969"
id="path1"
sodipodi:nodetypes="ccc" />
<path
style="fill:none;stroke:#000000;stroke-width:25;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers;stroke-dasharray:none"
d="M 125,13.334075 V 236.66592"
id="path2" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 13.722212,160.91669 c 1.346471,-4.08519 1.97185,-8.49438 2.305903,-12.79146 0.24852,-3.19682 0.335281,-6.39929 0.335281,-9.61314 0,-1.09767 -0.02481,-2.59627 0,-2.60211 0.499629,-0.11759 0.399093,0.94742 0.641538,1.39983 0.725746,1.35427 1.542281,2.65808 2.337214,3.97293 3.236652,5.35354 6.396039,10.96094 9.79241,16.24568 2.687112,3.65829 0.07045,-0.0414 1.881288,2.83603 0.0352,0.0559 0.469762,0.96904 0.590506,0.74587 0.936647,-1.7312 0.793484,-4.48987 1.122057,-6.33209 1.6271,-7.76162 0.266674,-0.78528 1.219536,-6.80128 0.121263,-0.7656 0.346392,-1.51497 0.426969,-2.28592 0.128559,-1.23003 -0.192484,-2.5842 0,-3.81093 0.207345,-1.32144 0.436884,-2.15655 0.436884,-3.45488"
id="path5" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 50.689765,142.6522 c -4.068549,-0.87073 -5.195205,0.50805 -6.424429,3.95181 -0.118808,0.33285 -0.191925,0.6828 -0.335281,1.00584 -0.106176,0.23926 -0.522595,0.4349 -0.408664,0.67056 0.534973,1.10658 3.634266,1.4638 4.439358,1.73919 0.565176,0.19332 1.013037,0.63797 1.551103,0.89736 1.417203,0.6832 4.080871,0.76216 4.95554,0.76216"
id="path6" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 45.1054,149.28468 c -0.311717,3.79255 -0.809604,7.54453 -0.809604,11.35139 0,0.40738 -0.197796,3.42606 0,3.63302 0.313845,0.32837 4.433505,0.29485 5.149559,0.34113 0.295172,0.0191 5.790833,0.61273 6.010331,0.43783 0.176004,-0.14025 0.153388,-0.43591 0.304759,-0.60244"
id="path7" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 61.025829,142.71818 c 0.813347,1.58176 0.931654,3.39151 1.552903,5.03396 0.314541,0.83157 0.957826,1.52011 1.230884,2.36622 0.148221,0.45928 -0.05543,0.96841 0,1.44782 0.07095,0.61358 0.233811,1.21341 0.377181,1.81421 2.200211,9.22011 -0.622243,-2.73995 1.591171,5.47874 0.718025,2.66612 1.091782,5.6508 2.178434,8.22835 0.133795,0.31736 0.195344,-0.66087 0.309916,-0.98566 0.922642,-2.61559 0.696286,-2.38405 1.463015,-5.54955 0.484756,-2.00135 1.124701,-3.96814 1.498665,-5.99312 0.454537,-2.46128 0.262923,-4.94495 0.83813,-7.2738 0.08039,-0.32549 -0.137008,-0.69983 0,-1.00584 0.778594,-1.739 -0.164367,1.98664 0.756509,-1.49552 0.154253,-0.58328 0.130304,-1.21123 0.335281,-1.77868 0.732555,-2.02797 0.670561,-0.34519 0.670561,-1.34112 0,-0.10168 -0.01787,0.20493 0,0.30503 0.124818,0.69924 0.249408,1.39992 0.427103,2.08763 0.27278,1.05569 0.642715,2.08445 0.923178,3.13814 1.006152,3.78006 0.694244,3.3842 1.781557,6.70866 0.450548,1.37755 1.064733,2.70351 1.431215,4.10577 0.466187,1.78377 0.264224,3.21545 1.14604,4.80468 0.452266,0.81509 1.036342,-1.57213 1.345307,-2.45159 0.359987,-1.02469 0.647356,-2.08328 0.799382,-3.15867 0.267221,-1.89024 -0.05573,-10.01332 1.119263,-11.18831"
id="path8" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 150.8006,146.23425 c 5.30582,1.2731 10.76064,0.93205 16.16414,0.93205"
id="path9" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 159.25742,147.1663 c 0.87255,7.34201 0.38991,14.78677 -0.16687,22.12883 -0.0704,0.92849 0.60716,2.46778 -0.26996,2.78039 -1.38561,0.49383 -6.6844,-0.32162 -7.43992,-0.37337 -1.09549,-0.075 -2.2515,0 -3.3528,0 -0.10193,0 0.20467,-0.0128 0.30579,0 0.8654,0.10971 1.71965,0.32809 2.5911,0.36723 4.05161,0.18197 8.11743,0.2213 12.16708,0 1.2105,-0.0661 2.41417,-0.27801 3.59416,-0.55609 3.45231,-0.81357 1.11512,-0.77335 2.38861,-0.77335"
id="path10" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 179.88246,171.0372 c -1.16644,-6.14855 -0.74552,-12.43239 -0.74552,-18.65562 0,-0.77596 -0.37573,-2.8324 0.40866,-3.51381 1.17047,-1.01681 1.70457,2.59095 2.51706,3.91147 3.57394,5.80861 1.12161,1.74926 3.41459,4.59666 0.7581,0.94141 1.13281,1.83302 1.40358,1.43747 0.49592,-0.72449 0.45979,-1.64225 0.77525,-2.42442 0.48525,-1.20315 0.99734,-2.70238 1.51857,-3.99851 0.18761,-0.46652 0.85165,-1.54403 1.0508,-1.08231 2.18315,5.06171 0.54756,2.21647 2.12172,7.11866 0.99119,3.08674 1.49938,2.97433 2.11255,5.87872 0.0763,0.36138 -0.0628,0.74408 0,1.10804 0.26321,1.5253 0.34134,0.18278 0.67056,1.51155 0.33749,1.36218 0.21917,3.22742 0.86298,4.21462"
id="path11" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 215.82238,150.85981 c -3.9938,-0.56775 -5.09704,-0.71132 -7.40108,2.80697 -1.17477,1.79389 -2.28801,3.62777 -3.38995,5.4673 -1.29189,2.15663 -3.61012,6.49764 -2.0585,9.21344 0.53819,0.94201 1.26537,1.08179 2.03965,1.70553 1.80536,1.45435 2.89479,2.0732 5.15116,2.81037 1.03303,0.3375 3.42566,1.29929 4.63953,0.69235 1.03132,-0.51565 1.24358,-2.7039 1.51411,-3.59563 0.31996,-1.05467 2.23455,-6.76829 1.95056,-7.11475 -0.63506,-0.77474 -5.79122,-0.30734 -7.27077,-0.30734"
id="path12" />
id="rect3"
style="fill:none;fill-opacity:1;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stroke:#fd9e7d;stroke-opacity:1;stroke-dasharray:none"
d="M 157.85547 55.259766 A 32.711185 32.701084 0 0 0 125.14258 87.960938 A 32.711185 32.701084 0 0 0 157.85547 120.66211 A 32.711185 32.701084 0 0 0 190.56641 87.960938 A 32.711185 32.701084 0 0 0 157.85547 55.259766 z M 99.783203 156.55859 C 61.315866 156.83285 26.044922 172.04937 26.044922 196.6543 L 26.044922 207.62891 C 26.044922 214.69301 37.905433 220.37891 52.638672 220.37891 L 207.24023 220.37891 C 212.97533 220.37891 218.26096 219.50809 222.5957 218.03906 C 224.39558 215.46412 225.45898 212.33304 225.45898 208.93945 L 225.45898 187.36523 C 220.7043 185.22111 214.31219 183.90234 207.24023 183.90234 C 187.04981 183.90234 153.15448 161.2733 116.37109 157.37109 C 110.83881 156.78419 105.27853 156.51941 99.783203 156.55859 z " />
<rect
style="fill:none;fill-opacity:1;stroke:none;stroke-width:32;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect1"
width="154.98897"
height="154.94112"
x="47.505524"
y="86.070168"
rx="15.877564"
ry="15.877564" />
<rect
style="fill:none;fill-opacity:1;stroke:#fd9e7d;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect2"
width="200.91689"
height="200.85484"
x="24.541573"
y="23.962133"
rx="15.877565"
ry="15.877565" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

72
img/blocks.svg
View File

@ -39,64 +39,40 @@
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#e1d892;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers;stroke-dasharray:none"
style="fill:none;fill-opacity:1;stroke:#4abe33;stroke-width:16;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect1"
width="204.03856"
height="57.270153"
x="22.980722"
y="66.144127"
ry="28.635077" />
height="98.171036"
x="22.980721"
y="27.539116"
ry="28.635077"
rx="28.635077" />
<rect
style="fill:#887025;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers;stroke-dasharray:none"
style="fill:none;fill-opacity:1;stroke:#4abe33;stroke-width:8;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect2"
width="143.16351"
height="34.483772"
x="53.41824"
y="77.212479"
ry="17.241886" />
height="59.111202"
x="53.418243"
y="46.512203"
ry="17.241886"
rx="17.241886" />
<rect
style="fill:#a3e396;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
style="fill:none;fill-opacity:1;stroke:#4abe33;stroke-width:16;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect3"
width="204.03856"
height="57.270153"
x="22.980722"
y="122.58572"
ry="28.635077" />
height="98.171036"
x="22.980721"
y="124.28985"
ry="28.635077"
rx="28.635077" />
<rect
style="fill:#4abe33;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
style="fill:none;fill-opacity:1;stroke:#4abe33;stroke-width:8;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect4"
width="143.16351"
height="34.483772"
x="53.467762"
y="132.32571"
ry="17.241886" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="M 21.703555,56.890912 C 32.18168,40.399165 42.659805,23.907419 53.137931,7.4156717 c 2.348767,0.215104 4.964889,0.09243 7.046301,0.645312 1.068952,0.283944 1.403899,1.285947 2.230442,1.818856 0.611326,0.3941503 1.692876,0.3728453 2.071235,0.9546263 0.835895,1.285308 1.094624,6.43325 0.805361,8.410669 -0.09794,0.669523 -1.421758,5.003895 -2.338353,5.951725 -5.066645,5.239302 -12.0303,5.208395 -17.146842,6.338845 -0.39819,0.08798 -0.867956,0.424178 -1.249576,0.474159 -0.606382,0.07942 -4.641121,0.416087 -5.202937,0 -0.791131,-0.585919 0.45896,-0.474159 -0.647058,-0.474159 -0.138436,0 0.29559,-0.02568 0.415308,0 0.642574,0.137814 1.294977,0.268129 1.86419,0.488889 2.505987,0.97191 6.6736,3.964857 6.774565,6.705809 0.07101,1.927774 -0.197827,3.968631 -0.370054,5.998651 -0.10646,1.254815 -0.36903,3.288011 -2.406469,4.53388 -4.121597,2.520307 -8.435614,3.821718 -12.532953,5.362615 -3.759926,1.414006 -6.951713,3.721244 -10.685763,5.018689 -0.701095,0.243605 -3.471029,1.137695 -2.753715,0.0087"
id="path1" />
<path
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 84.663775,10.480888 c -0.988138,1.555252 -5.652545,9.809592 -6.957344,10.950314 -0.2279,0.199242 -0.548435,0.274235 -0.775417,0.474158 -0.618483,0.544748 -9.967866,15.670696 -10.062647,15.837816 -0.790216,1.39334 -1.315954,2.763168 -2.122858,4.15751 -2.988237,5.163715 -6.820408,10.373602 -9.873991,15.540888 2.321433,0.131283 4.759838,0.100962 6.964301,0.393849 0.699507,0.09294 1.040226,0.594076 1.684834,0.755285 3.135527,0.784163 6.865,1.696111 10.338088,2.12179 5.760587,0.706045 -0.987135,-0.964354 4.574343,0.618947"
id="path2" />
<path
style="fill:none;stroke:#000000;stroke-width:5.00001;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 91.862653,58.226095 c 1.343293,-6.729747 3.33278,-13.78866 7.576284,-21.269403 2.125183,-3.746421 4.773443,-7.513032 7.160173,-11.269549 4.22397,-6.64821 5.70954,-9.081844 13.33134,-13.644702 1.12213,-0.671779 2.28481,-1.851718 3.34715,-2.0999563 6.34945,-1.483655 15.34695,1.9026743 15.22503,7.1659693 -0.10408,4.492677 -2.41804,7.033213 -5.59611,12.556795 -1.62141,2.818057 -0.61095,2.70662 -2.8668,5.455084 -0.24068,0.293343 -0.71583,0.354671 -0.99151,0.634599 -3.25128,3.301491 -6.0693,7.382848 -10.21644,10.037151 -5.28506,3.382629 2.78702,-2.837429 -3.56281,1.903792 -9.35548,6.985449 -16.545642,13.672876 -23.406307,10.53022 z"
id="path3" />
<path
style="fill:none;stroke:#000000;stroke-width:5.00001;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 166.59718,23.002981 c 2.54583,-4.006946 3.12185,-4.458705 4.45743,-7.941612 1.00374,-2.617538 3.36547,-10.3268324 -3.33815,-5.4419923 -1.55276,1.1314683 -2.85599,2.5841643 -4.36016,3.7910853 -1.2763,1.024082 -2.78043,1.757647 -3.95304,2.87926 -1.39487,1.334226 -2.1785,2.931826 -3.53957,4.287543 -0.25659,0.25558 -0.50901,-0.255964 -0.76494,0 -7.01924,7.019925 -10.00959,16.824692 -11.99034,23.336181 -1.02186,3.359298 -2.73364,6.578592 -1.01485,8.751243 0.52425,0.66269 2.22304,0.423822 3.13002,0.646082 1.88824,0.462719 2.43167,1.328168 5.37904,0.136358"
id="path4" />
<path
style="fill:none;stroke:#000000;stroke-width:5.00001;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 162.07615,51.442302 c 12.44909,-14.717681 2.33608,-2.061635 11.06104,-14.682256 5.33296,-7.714123 4.38553,-5.047209 8.60179,-12.391947 2.39086,-4.164879 4.18885,-8.642321 7.53246,-12.862901 1.13481,-1.43244 4.41894,-5.0692553 5.24488,-6.3692171"
id="path5" />
<path
style="fill:none;stroke:#000000;stroke-width:5.00001;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 204.93081,12.989244 c 1.00236,-0.467318 2.14412,-0.591807 3.00709,-1.401952 0.65355,-0.613546 -1.43004,0.270874 -2.18971,0.634598 -1.96026,0.93857 -3.9318,2.040337 -5.87234,3.225491 -7.5896,4.635225 -15.35233,10.095467 -22.41334,15.798591 1.79346,2.479762 1.56196,19.095623 6.16426,19.095623"
id="path6" />
<path
style="fill:none;stroke:#000000;stroke-width:5.00001;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 233.6405,15.414187 c 3.86378,-5.328521 1.74321,-15.58172711 -6.72371,-10.0081987 -4.69494,3.0905354 -9.88304,12.0388797 -11.95144,15.9316587 -3.56487,6.709133 2.81773,7.066516 5.66375,9.589149 0.0803,0.0712 1.64547,1.109729 1.67792,1.281337 0.0374,0.1978 -0.45601,0.554276 -0.50454,0.794099 -0.1615,0.798332 0.0842,1.42365 -0.10788,2.233312 -1.11127,4.682771 -5.37956,10.335806 -8.50163,15.24971 -0.88134,1.38716 -1.43505,2.551449 -3.00749,3.807586 -2.35486,1.881165 -6.29125,3.450156 -8.59823,4.155445 -3.06858,0.938131 -6.46133,0.995433 -8.81502,0.642867 -1.33765,-0.200371 -1.83284,-1.280795 -3.34397,-1.280795"
id="path7" />
height="59.111202"
x="53.418243"
y="142.98589"
ry="17.241886"
rx="17.241886" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

66
img/code.svg
View File

@ -23,9 +23,9 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.1089995"
inkscape:cx="157.42062"
inkscape:cy="105.26318"
inkscape:zoom="1.4912878"
inkscape:cx="157.58192"
inkscape:cy="105.94869"
inkscape:window-width="1918"
inkscape:window-height="1062"
inkscape:window-x="0"
@ -39,61 +39,17 @@
inkscape:groupmode="layer"
id="layer1">
<path
d="M 88.679309,163.16635 18.217283,132.04066 V 121.85923 L 88.679309,86.661045 v 17.017275 l -48.524356,22.54434 48.524356,19.9264 z M 154.3471,73.716144 115.70193,177.56569 H 96.088725 L 134.73391,73.716144 Z m 6.97358,72.432916 48.52434,-19.9264 -48.52434,-22.54434 V 86.661045 l 70.46203,35.198185 v 10.18143 l -70.46203,31.12569 z"
id="text4"
style="font-weight:bold;font-size:13.3333px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';stroke-width:9.99999;stroke-linecap:round;stroke-linejoin:bevel;paint-order:stroke fill markers;fill:#684f68;fill-opacity:1"
aria-label="&lt;/&gt;" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 34.564738,24.820694 c 1.75299,0 3.627566,-0.191133 5.25897,0 1.744133,0.204339 3.121449,0.832293 4.752877,1.172974 2.627435,0.548672 5.711591,0.530237 8.606251,0.738056 12.72098,0.913284 25.86137,0.785584 39.09908,0.785584"
style="opacity:0.995397;fill:none;fill-opacity:0.992157;stroke:#e269e2;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 79.35088,58.84915 -68.702093,68.7021 63.599603,63.5996"
id="path2" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 69.553056,26.307716 c -6.52609,8.436597 -8.66097,17.010402 -11.86281,25.378837 -0.62586,1.635777 -2.02152,3.300443 -2.58904,4.931805 -0.18157,0.521922 0.0404,0.982892 -0.0847,1.498776 -0.30167,1.244273 -1.45152,2.764968 -2.12549,4.048797"
id="path3" />
style="opacity:0.995397;fill:none;fill-opacity:0.992157;stroke:#e269e2;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 100.19378,231.4325 149.80622,18.567496"
id="path3"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 126.52163,24.670576 c -6.33892,-1.773489 -3.27995,-1.541474 -8.53005,-1.541474 -1.00339,0 -5.80656,-0.536593 -6.88791,0 -6.48319,3.217138 -7.9632,6.784852 -10.23142,11.105515 -0.3452,0.657575 -1.004164,1.348893 -1.035624,1.972722 -0.0111,0.220557 0.467454,0.270039 0.443204,0.493181 -0.0415,0.38178 -0.759774,0.859726 -0.626454,1.193308 0.11541,0.288741 3.327354,0.984636 3.331674,0.986361 0.87683,0.350744 1.37354,1.013803 2.36002,1.263353 1.39166,0.352056 3.13039,0.292813 4.64289,0.508201 2.56959,0.365929 8.21779,1.80536 11.43923,0.152133"
style="opacity:0.995397;fill:none;fill-opacity:0.992157;stroke:#e269e2;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 170.64912,58.84915 68.70209,68.7021 -63.5996,63.5996"
id="path4" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 99.276396,38.785671 c -3.80734,7.087523 -7.68581,14.122974 -10.34384,21.154143 -0.24728,0.654099 -1.40983,1.486126 -1.03562,1.972722 0.14637,0.190329 0.73233,0 1.09849,0 1.17609,0 2.39084,-0.06639 3.52828,0 7.28335,0.42513 14.458974,0.651769 21.990554,0.651769"
id="path5" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 144.66956,26.420443 c 5.28782,9.036019 12.46049,17.755323 14.53562,28.131727 0.0476,0.238187 1.08159,3.686704 0.93363,3.968561"
id="path6" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 129.30249,60.640513 c 6.53195,-5.570184 14.35039,-10.590124 21.01997,-16.089456 5.56606,-2.540815 6.74574,-6.379768 10.26797,-9.519852 2.43124,-2.167465 -0.79171,1.891816 2.19327,-1.503066 0.28047,-0.319056 0.20599,-0.674446 0.51781,-0.986361 0.22047,-0.220557 0.70933,-0.282943 0.96101,-0.493181 1.17922,-0.985128 3.88153,-4.785301 5.47557,-4.785301"
id="path7" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 196.19523,24.065118 c 9.45722,0.61958 19.24359,0.603051 29.08261,0.603051"
id="path8" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 212.68421,25.161349 c -5.34054,9.910166 -9.59589,19.656158 -14.78741,29.545346"
id="path9" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 91.908985,202.85222 c -12.498335,-7.7291 -28.462726,4.21377 -35.192216,11.20231 -2.313176,2.40222 -5.532545,8.85343 -4.980659,11.34956 0.532641,2.40912 13.934279,3.96678 16.863445,1.49116 0.974218,-0.82337 1.096295,-2.0883 1.551974,-2.95631"
id="path10" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 98.264505,231.30976 c -2.312006,-1.0298 -6.974465,-0.38571 -9.56476,-1.26148 -0.245339,-0.083 0.478174,-0.40298 0.264138,-0.50315 -1.054705,-0.49358 -2.781759,-0.61155 -3.769557,-1.13731 -5.612696,-2.98748 4.475011,-10.32517 8.721218,-13.4061 4.746637,-3.44402 8.309726,-7.02458 14.570406,-9.9676 1.75925,-0.82699 6.04859,-2.89637 8.46865,-2.59191 14.75518,1.85633 10.80388,9.79842 6.06669,16.52203 -0.73182,1.0387 -17.66465,10.34912 -19.51666,11.04515 -1.59372,0.59895 -3.49343,0.86692 -5.240125,1.30037 z"
id="path11" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 133.16637,232.49142 c 0.90405,0 2.70441,-2.70587 2.41671,-3.31951 -0.0974,-0.20783 -0.68868,-0.27263 -0.7186,-0.49319 -0.81256,-5.98703 10.09277,-15.66824 10.32776,-21.53511 8.20087,0.27322 10.90319,0.7235 14.70556,3.34906 0.48159,0.33253 1.31344,0.56824 1.42775,1.00436 0.27514,1.04973 -1.45571,3.84735 -1.60145,4.94745 -0.0548,0.41346 0.60637,0.70292 0.62758,1.10758 0.0386,0.73594 -6.00253,5.66764 -7.27823,6.41584 -5.42526,3.18192 -13.41171,5.90945 -19.90708,8.52352 z"
id="path12" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 193.30065,210.00626 c -10.69534,-2.16167 -8.7628,0.10245 -12.84641,5.15566 -1.7929,2.21863 -6.66893,6.78864 -4.64678,8.88676 0.28332,0.29391 1.2295,0.2724 1.69613,0.49319 3.80044,1.79815 5.76558,1.48914 11.945,1.48914 0.96666,0 1.97236,0.29193 2.89998,0 1.77209,-0.55771 -2.59803,-1.3079 -3.30216,-1.3079"
id="path13" />
<path
style="fill:none;fill-opacity:1;stroke:#684f68;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 174.63579,223.96564 c -1.05131,2.00261 -2.10262,4.00522 -3.15393,6.00783 -0.22139,0.42173 -2.09483,4.64082 -1.5382,4.82712 0.94219,0.31534 14.92127,0.183 15.20195,-0.35165"
id="path14" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

65
img/delete.svg
View File

@ -37,62 +37,17 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><path
style="display:inline;fill:#657aff;fill-opacity:1;stroke:#683232;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 34.188168,11.948174 213.41479,191.17482"
style="display:inline;fill:#657aff;fill-opacity:1;stroke:#683232;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 19.445132,20.290595 228.84386,229.7094"
id="path6" /><path
style="display:inline;fill:#657aff;fill-opacity:1;stroke:#683232;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 214.87926,11.948174 35.652633,191.17482"
style="display:inline;fill:#657aff;fill-opacity:1;stroke:#683232;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 230.55487,20.290595 21.156134,229.7094"
id="path8" /><rect
style="display:inline;fill:none;fill-opacity:1;stroke:#683232;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="display:inline;fill:none;fill-opacity:1;stroke:#683232;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect8"
width="78.402031"
height="78.402039"
x="85.332703"
y="63.092731"
width="113.62638"
height="113.63696"
x="68.186806"
y="69.037132"
rx="15.877564"
ry="15.877564" /><path
style="display:inline;fill:#657aff;fill-opacity:1;stroke:#683232;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 124.93502,3.628581 -10e-6,195.473709"
id="path9" /><path
style="display:inline;fill:#657aff;fill-opacity:1;stroke:#683232;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 235.1301,102.16403 -218.603939,2e-5"
id="path10" /><path
style="fill:none;stroke:#683232;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 20.064012,242.31772 c 0.806306,-1.27679 1.004044,-2.23547 1.572542,-3.50332 1.152403,-2.56998 2.642139,-5.15925 3.906865,-7.73608 5.436042,-11.07568 3.813327,-7.78042 11.531311,-20.00189 1.549127,-2.45305 3.098247,-4.90609 4.647372,-7.35912 7.628921,-0.60658 9.895884,1.81027 12.854645,4.85023 2.314826,2.37835 4.530027,6.1815 3.970702,9.45184 -0.376026,2.19861 -3.657998,9.08063 -5.970616,11.38017 -0.597473,0.59409 -1.599602,1.08926 -2.235453,1.67646 -6.295744,5.81421 -4.544924,5.78304 -14.513713,9.7078 -3.111961,1.2252 -5.334923,1.99979 -8.624068,2.91518 -0.732655,0.20391 -1.613512,-0.10666 -2.364249,0 -2.135747,0.30326 -3.55458,0.73421 -5.563287,0.73421"
id="path11" /><path
style="fill:none;stroke:#683232;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 98.561956,205.20273 c -1.072548,0.2416 -11.480318,1.50942 -12.870345,2.29403 -1.14944,0.64882 -1.733292,1.51737 -2.621577,2.27087 -4.342183,3.68329 -6.339292,6.66742 -7.981602,10.4764 -0.08523,0.19767 -1.293285,1.91357 -0.79589,2.19201 1.659072,0.92864 13.576365,1.81018 14.699303,0.032"
id="path12" /><path
style="fill:none;stroke:#683232;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 75.057797,222.88864 c -1.536249,2.43267 -3.072486,4.8653 -4.608734,7.29797 -0.534202,0.84591 -7.435006,11.33823 -7.308154,11.5725 0.1409,0.26017 1.070355,-0.0491 1.550274,0 1.192868,0.12142 2.278688,0.36073 3.483545,0.46823 0.727369,0.065 4.791572,0.33847 5.79828,0 0.491045,-0.16515 0.369264,-0.58475 0.553898,-0.87711"
id="path13" /><path
style="fill:none;stroke:#683232;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 117.34267,203.94592 c -5.77383,9.95316 -13.39969,19.82305 -19.674005,29.75851 -0.608244,0.96315 -6.043401,8.43836 -5.695194,9.01835 0.580895,0.96761 12.425009,-1.20994 14.316659,-1.20994"
id="path14" /><path
style="fill:none;stroke:#683232;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 149.57027,198.05429 c -2.89935,1.05766 -3.76098,1.28139 -5.531,5.08093 -0.39774,0.85381 -0.88638,1.72498 -1.07174,2.60801 -1.57677,7.51094 2.0504,10.24752 1.38288,15.71059 -0.10732,0.87678 -0.59029,1.80582 -0.73322,2.69165 -0.0386,0.23988 0.26171,0.27415 0.21592,0.51538 -0.23826,1.25633 -0.68934,2.53053 -1.03403,3.7958 -1.86747,6.85539 -2.5714,9.59653 -7.51554,14.87725 -0.52036,0.55578 -0.97244,1.34722 -1.54128,1.70963 -0.57602,0.36706 -3.14468,0.11669 -3.59708,0 -0.61403,-0.15848 -0.76207,-1.01463 -1.46563,-1.01463"
id="path15" /><path
style="fill:none;stroke:#683232;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 147.12643,244.4128 c 2.96098,-11.30376 6.15128,-22.62919 10.26703,-33.85138 0.79707,-2.17298 2.67676,-8.17908 4.68967,-7.13632 0.9377,0.48581 4.67664,3.72325 4.52694,5.21631 -0.45345,4.52218 -5.32953,11.3995 -7.88822,14.96136 -0.73303,1.02042 -1.52271,1.96774 -2.24555,3.00048 -0.10242,0.14628 -0.0212,0.40035 -0.14052,0.51592 -0.42738,0.41335 -2.85995,1.02147 -2.62704,0.16662"
id="path16" /><path
style="fill:none;stroke:#683232;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 160.83916,244.84811 c 1.34469,-3.00704 1.99035,-6.14541 2.82678,-9.21588 1.51136,-5.54811 3.12009,-10.95353 4.87298,-16.47972 0.12926,-0.40785 1.10478,-5.52304 1.67138,-6.13542 0.99037,-1.07042 5.12024,2.02977 5.83779,3.26836 0.39395,0.68003 0.58731,2.75561 0.53698,3.87994 -0.10422,2.32815 -1.88138,4.10739 -3.4955,5.08258 -0.25037,0.15132 -0.45018,-0.12446 -0.70149,0 -2.20804,1.09311 -0.53087,0.81756 -2.19675,1.53122 -0.23796,0.1019 -0.44234,-0.21582 -0.66514,0 -0.65597,0.63536 -1.1601,1.56534 -1.6994,2.39331 -0.32102,0.49284 -1.69808,2.35833 -1.52499,3.02306 0.28462,1.09312 1.40676,1.19274 1.96512,1.99422 0.46825,0.67218 0.69306,1.63203 1.10671,2.37198 0.77812,1.392 2.29813,2.11137 2.90139,3.55123"
id="path17" /><path
style="fill:none;stroke:#683232;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 184.22883,211.54985 c 3.92198,0.68957 8.15214,0.5149 12.32121,0.5149"
id="path18" /><path
style="fill:none;stroke:#683232;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 191.02405,212.02473 c -2.271,7.46527 -3.63177,15.16362 -6.48167,22.48274 -0.16719,0.4295 -0.99949,3.10313 -1.31555,3.54179 -0.82847,1.14979 -3.12969,0.96258 -4.00501,0.96258 -0.0932,0 0.182,0.018 0.27928,0 2.13567,-0.44192 4.06345,-0.51629 6.09373,-0.51629"
id="path19" /><path
style="fill:none;stroke:#683232;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 203.38397,215.55779 c 3.19474,-1.15735 6.31577,-1.78433 9.51905,-2.93271 1.99052,-0.71361 4.02145,-1.9369 5.99409,-2.48216 2.30189,-0.63629 0.82311,0.72653 2.01224,-0.50732"
id="path20" /><path
style="fill:none;stroke:#683232;stroke-width:5.00001;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 211.92706,213.97139 c -1.00988,7.0247 -0.50687,11.9973 -0.70924,18.16143 -0.0557,1.69662 -0.34969,3.23645 -0.23329,4.70773 0.0791,0.99951 0.55177,2.98989 0.77033,4.57366"
id="path21" /><path
style="fill:none;stroke:#683232;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 236.34257,207.56379 c -3.17696,-1.46813 -6.29199,0.35456 -9.5068,3.03772 -0.80351,0.67061 1.28582,8.60755 1.41693,9.3258 0.28351,1.55332 3.50059,1.53288 4.74808,1.10826 0.93873,-0.31947 1.89333,-0.946 2.83642,-1.32347 0.54562,-0.21854 4.65056,-1.02995 3.09757,-1.02995"
id="path22" /><path
style="fill:none;stroke:#683232;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 228.21579,226.00043 c -1.00406,2.18533 -0.13302,3.64693 -0.45787,5.58747 -0.0997,0.59625 -0.39905,1.21433 -0.49285,1.80925 -0.50464,3.20335 2.84336,3.35393 4.23198,3.78071 1.28335,0.39442 2.02664,0.67306 3.43858,0.67306 0.98374,0 3.50049,-0.20793 4.41467,-1.01463"
id="path23" /></g></svg>
ry="15.877564" /></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

58
img/embed.svg
View File

@ -23,9 +23,9 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="1.0544998"
inkscape:cx="156.47229"
inkscape:cy="59.743967"
inkscape:zoom="2.1089996"
inkscape:cx="157.42061"
inkscape:cy="59.743966"
inkscape:window-width="1918"
inkscape:window-height="1062"
inkscape:window-x="0"
@ -41,48 +41,22 @@
transform="matrix(1.5726526,0,0,1.5726526,-66.023893,-136.20245)"
style="display:inline;stroke-width:0.635868"><path
id="path7"
style="fill:none;fill-opacity:1;stroke:none;stroke-width:9.53802512;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
style="fill:none;fill-opacity:1;stroke:none;stroke-width:10.17389346;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 174.68659,166.09036 a 53.220539,53.220539 0 0 1 -53.22054,53.22054 53.220539,53.220539 0 0 1 -53.220548,-53.22054 53.220539,53.220539 0 0 1 53.220548,-53.22053 53.220539,53.220539 0 0 1 53.22054,53.22053 z" /><path
id="rect1"
style="fill:#657aff;stroke:#657aff;stroke-width:9.53802512;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-dasharray:none;fill-opacity:1"
d="M 80.478618 102.50353 C 67.958258 102.50353 57.879212 112.58258 57.879212 125.10294 L 57.879212 127.66629 L 83.041963 127.66629 L 83.041963 102.50353 L 80.478618 102.50353 z M 159.89013 102.50353 L 159.89013 127.66629 L 185.05288 127.66629 L 185.05288 125.10294 C 185.05288 112.58258 174.97383 102.50353 162.45347 102.50353 L 159.89013 102.50353 z M 57.879212 204.51445 L 57.879212 207.0778 C 57.879212 219.59816 67.958258 229.6772 80.478618 229.6772 L 83.041963 229.6772 L 83.041963 204.51445 L 57.879212 204.51445 z M 159.89013 204.51445 L 159.89013 229.6772 L 162.45347 229.6772 C 174.97383 229.6772 185.05288 219.59816 185.05288 207.0778 L 185.05288 204.51445 L 159.89013 204.51445 z " /><path
style="fill:#657aff;fill-opacity:1;stroke:#657aff;stroke-width:9.53802512;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 64.483779,109.1081 178.44831,223.07264"
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:10.1739;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 75.079369,94.127275 c -14.169661,0 -25.576414,11.406755 -25.576414,25.576415 v 2.90102 H 77.980382 V 94.127275 Z m 89.872351,0 v 28.477435 h 28.47743 v -2.90102 c 0,-14.16966 -11.40676,-25.576415 -25.57642,-25.576415 z M 49.502955,209.57604 v 2.90102 c 0,14.16966 11.406753,25.57641 25.576414,25.57641 h 2.901013 v -28.47743 z m 115.448765,0 v 28.47743 h 2.90101 c 14.16966,0 25.57642,-11.40675 25.57642,-25.57641 v -2.90102 z" /><path
style="fill:#657aff;fill-opacity:1;stroke:#657aff;stroke-width:10.1739;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 58.390578,102.92909 184.54152,229.09218"
id="path6" /><path
style="fill:#657aff;fill-opacity:1;stroke:#657aff;stroke-width:9.53802512;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 178.44831,109.1081 64.483779,223.07264"
style="fill:#657aff;fill-opacity:1;stroke:#657aff;stroke-width:10.1739;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 184.54152,102.92909 58.390578,229.09218"
id="path8" /><rect
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:9.53802512;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:10.1739;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect8"
width="49.853371"
height="49.853374"
x="96.53936"
y="141.16368"
width="64.917007"
height="64.917007"
x="89.007545"
y="133.63187"
rx="10.096041"
ry="10.096041" /><g
id="g20"
transform="matrix(1,0,-0.28289607,1,31.833643,0)"><path
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 99.720853,102.92337 c -0.300613,0.49573 -4.212259,0.2285 -4.555914,0.4886 -0.122571,0.0928 0,3.01563 0,3.94424 0,0.14041 0.10516,3.08122 0.213194,3.24254 0.01701,0.0254 3.355508,0 3.991946,0"
id="path13" /><path
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 95.378133,110.59875 c -0.205424,2.51649 -0.363517,5.03728 -0.616271,7.54946 -0.02425,0.24103 -0.176389,0.45533 -0.213195,0.69477 -0.03505,0.22804 0.05366,0.46776 0,0.69215 -0.04246,0.17759 -0.372531,0.17111 -0.216486,0.42463 0.145137,0.2358 2.585239,0 3.102841,0 0.355324,0 0.710648,0 1.065971,0 0.209839,0 0.708483,0.19441 0.629515,0 -0.255037,-0.62788 -0.624124,-1.20315 -0.936187,-1.80473"
id="path14" /><path
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 103.78358,121.65577 c 0.43476,-5.32743 0.0568,-1.53792 0.57363,-5.48527 0.17517,-1.33783 0.38765,-2.67066 0.55648,-4.00931 0.10864,-0.86141 0.14214,-1.73161 0.26271,-2.59144 0.29508,-2.10433 0.59494,-3.64793 0.59494,-5.65279 0,-0.0452 -0.006,0.0908 0,0.1357 0.0677,0.53996 0.0699,1.09455 0.21974,1.61771 0.47132,1.64594 1.413,3.11931 2.08763,4.69289 0.817,1.90564 1.4483,3.89985 1.85617,5.93434 0.0419,0.20904 -0.064,0.43625 0,0.63959 0.0343,0.10904 0.24217,0.10198 0.26866,0.21319 0.12256,0.51451 -0.0713,1.34445 0.27018,1.82429 0.2751,0.38652 0.51679,-0.81134 0.64763,-1.26736 0.51636,-1.7997 1.28343,-4.74925 1.57532,-6.58227 0.0693,-0.43529 -0.0507,-0.88448 0,-1.32232 0.0427,-0.36804 0.18532,-0.71747 0.27798,-1.0762 0,-0.38594 -0.0413,-0.7741 0,-1.15782 0.0185,-0.17213 0.3612,-2.01139 0.74317,-1.97913 0.0782,0.007 -0.0297,0.1627 0,0.23527 0.12988,0.31698 0.33267,0.60001 0.4707,0.91353 0.25215,0.57274 0.52885,1.14022 0.69864,1.74254 1.37482,4.87702 0.15319,0.7859 0.49412,3.55462 0.0484,0.39291 0.18238,0.77046 0.27357,1.15569 0.15112,0.9576 0.34045,1.90996 0.45336,2.87282 0.0385,0.32889 -0.0492,0.66596 0,0.99343 0.0579,0.38579 0.21319,0.45631 0.21319,0.84017"
id="path15" /><path
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 122.7009,119.58111 c -0.31884,0 -0.64033,0.041 -0.95652,0 -0.0135,-0.002 0,-0.67384 0,-0.71954 0,-0.49745 0.0556,-0.99803 0,-1.49236 -0.0535,-0.47528 -0.23683,-0.93111 -0.27833,-1.40759 -0.0518,-0.59502 0,-1.19453 0,-1.7918 0,-0.43333 0.0365,-0.8682 0,-1.29999 -0.24915,-2.94681 -0.61706,-5.76839 -0.27885,-8.78313 1.01605,-0.12127 2.90973,-0.89741 4.13082,-0.54853 0.99476,0.28422 1.61773,1.62352 1.98283,2.4433 1.4867,3.33816 -0.46471,6.35788 -4.00616,6.35788 -0.0343,0 0.0687,0 0.10302,0 0.54973,0 0.2743,-0.0583 0.81721,0.21319 0.98222,0.49111 0.93159,0.59664 1.85756,1.59436 0.14472,0.15594 0.37587,0.2381 0.47492,0.42639 0.0739,0.14054 -0.0362,0.3218 0,0.47642 0.10674,0.45541 0.46604,2.14363 0.2132,2.56512 -0.23255,0.38766 -0.63086,0.73527 -0.89927,1.11296 -0.10057,0.14151 -0.0905,0.35234 -0.2132,0.47519 -0.31067,0.3111 -1.16035,0.75456 -1.58271,0.89535 -0.46146,0.15382 -0.92082,-0.31789 -1.36452,-0.51722 z"
id="path16" /><path
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 136.94676,105.04306 c -0.98086,0.0566 -1.96108,0.12596 -2.94259,0.1699 -0.13492,0.006 -2.73765,-0.005 -2.74146,0 -0.50382,0.64378 0.0394,5.60493 0.0911,6.34186 0.0454,0.64853 -0.35819,1.62855 0.21319,1.93868 0.66667,0.36183 3.42315,-0.1648 4.23709,-0.43287 0.16404,-0.054 0.27144,-0.22258 0.4261,-0.24925"
id="path17" /><path
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 131.567,113.4935 c -1.47557,1.83686 0.14464,3.86149 -0.094,5.77034 -0.031,0.24777 -0.46235,1.39338 -0.21319,1.70555 0.31602,0.39593 3.8718,-0.30896 4.35634,-0.47594 0.32681,-0.11262 0.24941,-0.43142 0.45263,-0.66183"
id="path18" /><path
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 143.29427,103.45339 c -0.28664,3.86846 -0.75098,7.69212 -0.75098,11.57193 0,0.96039 -0.15747,2.03987 0,2.98472 0.0261,0.15675 0.17465,0.27223 0.21319,0.42639 0.10342,0.41366 -0.0537,0.85617 0,1.27917 0.13912,1.09577 0.21702,0.85888 0.21702,2.00203"
id="path19" /><path
style="fill:none;fill-opacity:1;stroke:#657aff;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 143.29427,103.45339 c 0.36486,0.60722 0.67029,1.25438 1.09458,1.82167 0.3038,0.40617 0.95219,0.36057 1.28627,0.85668 0.73772,1.09549 1.94121,2.76852 2.28564,4.03182 0.47577,1.74501 0.0248,0.0881 0.21319,1.83581 0.36514,3.38751 -0.0539,4.09511 -1.28037,7.11266 -0.25579,0.62932 -0.85541,1.24143 -1.11339,1.81039 -0.41847,0.92292 -1.17405,0.77401 -1.32968,0.90443 -0.0454,0.038 0.0396,0.13365 0,0.17769 -0.33538,0.3729 -0.98696,-0.18017 -1.47701,-0.28691"
id="path20" /></g></g></g></svg>
ry="10.096041" /></g></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

47
img/run.svg
View File

@ -24,53 +24,24 @@
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.1089996"
inkscape:cx="123.75536"
inkscape:cx="124.22952"
inkscape:cy="151.73071"
inkscape:window-width="1918"
inkscape:window-height="1062"
inkscape:window-x="0"
inkscape:window-y="16"
inkscape:window-maximized="1"
inkscape:current-layer="layer1-5" /><defs
inkscape:current-layer="g5" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><g
id="layer1-5"
transform="matrix(1.5726526,0,0,1.5726526,-66.023893,-136.20245)"
style="display:inline;stroke-width:0.635868"><rect
style="display:inline;fill:none;fill-opacity:1;stroke:#81a650;stroke-width:9.53802;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect8"
width="49.853371"
height="49.853374"
x="67.722145"
y="146.53348"
rx="10.096041"
ry="10.096041" /><rect
style="display:inline;fill:none;fill-opacity:1;stroke:#81a650;stroke-width:9.53802;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect1"
width="49.853371"
height="49.853374"
x="159.99489"
y="-33.690868"
rx="10.096041"
ry="10.096041"
transform="rotate(45)" /><rect
style="display:inline;fill:none;fill-opacity:1;stroke:#81a650;stroke-width:9.53802;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect2"
width="49.853371"
height="49.853374"
x="19.009069"
y="213.34106"
rx="10.096041"
ry="10.096041"
transform="rotate(-29.813287)" /><path
style="fill:none;stroke:#81a650;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 62.885698,238.78165 c -0.449624,-2.08243 0.182776,-4.18004 0.788908,-6.4387 1.226681,-4.57105 2.453366,-9.14211 3.680048,-13.71316 0.536734,-2.00006 1.852834,-9.27498 3.844167,-10.93333 0.619763,-0.51613 1.747845,-0.37424 2.298468,-0.37424 0.804006,0 1.714318,-0.24892 2.412019,0 1.579206,0.56345 3.589777,2.17174 3.348452,4.15719 -0.497283,4.09128 -4.885128,5.35388 -7.818196,7.95149 -1.694747,1.50092 -1.079864,1.42456 -2.929298,2.88783 -0.560562,0.44351 -2.082913,1.09825 -2.001632,1.84127 0.123943,1.13302 0.795564,1.36333 1.551516,2.37889 0.571553,0.76782 1.010104,1.64527 1.661525,2.34519 1.529366,1.64322 3.62037,2.85542 4.748251,4.8775"
id="path2" /><path
style="fill:none;stroke:#81a650;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 86.522819,212.99354 c -0.302281,0.7519 -0.604562,1.50381 -0.906842,2.25571 -0.408272,0.6499 -0.929984,1.26814 -1.22482,1.94972 -0.685674,1.58509 -1.099901,3.20412 -1.695709,4.80173 -1.833183,4.91553 -0.62295,0.84704 -1.866195,5.47981 -0.249995,0.93157 -0.715651,1.88695 -0.749982,2.7947 -0.03413,0.90226 0.984371,3.00611 1.674302,3.57571 0.361839,0.29872 0.889598,0.39752 1.266171,0.6802 0.340306,0.25546 1.212856,1.15808 1.879423,0.91006 1.211478,-0.45077 1.741856,-1.09387 2.638412,-2.09203 0.201882,-0.22476 3.375822,-4.08712 3.798212,-4.8152 2.20202,-3.79558 3.45555,-8.70146 3.83758,-12.56808 0.0567,-0.57396 0.44607,-2.28488 0.13721,-2.7205"
id="path5" /><path
style="fill:none;stroke:#81a650;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 94.954001,239.55064 c 1.61337,-4.17325 2.74408,-8.38539 4.06842,-12.58748 0.84133,-2.66952 1.592059,-5.41987 1.764519,-8.00885 0.11352,-1.70409 1.00356,-3.7396 1.47008,-5.47801 0.0171,-0.0637 -0.0577,0.13159 -0.0513,0.19128 0.14025,1.30864 0.28071,2.61825 0.48999,3.90178 0.19223,1.17902 0.52203,2.30257 0.71387,3.48174 1.30355,8.01232 0.33554,2.02769 0.6816,6.86165 0.0544,0.75983 0.41563,3.00208 0.37066,3.88585 -0.0164,0.32179 -0.25142,0.6667 -0.26512,0.98793 -0.0167,0.39203 0.13397,3.2486 0.29337,3.66086 0.0543,0.14037 0.49771,-0.52202 1.2256,-2.69113 1.08001,-3.21846 2.02466,-6.73479 2.67005,-9.94958 0.16332,-0.81352 0.10959,-1.60219 0.25463,-2.4143 0.3657,-2.04763 1.12722,-4.20043 1.68175,-6.26679"
id="path6" /></g></g></svg>
style="display:inline;stroke-width:0.635868"><g
id="g5"
transform="translate(-5.8441499,11.726151)"><path
id="rect1"
style="display:inline;fill:none;stroke:#81a650;stroke-width:10.1739;stroke-linecap:round;stroke-linejoin:round"
d="m 67.088975,140.07211 h 64.886765 l -5.04402,-42.046325 68.33822,56.338445 -68.33822,56.33842 5.04402,-42.04633 H 67.088975 c -3.261643,0 -5.88743,-2.58175 -5.88743,-5.78871 v -17.00676 c 0,-3.20696 2.625787,-5.78874 5.88743,-5.78874 z"
sodipodi:nodetypes="scccccssss" /></g></g></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

50
img/stop.svg
View File

@ -24,7 +24,7 @@
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.9825758"
inkscape:cx="156.07315"
inkscape:cx="156.24079"
inkscape:cy="106.61925"
inkscape:window-width="1918"
inkscape:window-height="1062"
@ -41,34 +41,20 @@
transform="matrix(1.5726526,0,0,1.5726526,-66.023893,-136.20245)"
style="display:inline;stroke-width:0.635868"><path
id="path7"
style="display:inline;fill:none;fill-opacity:1;stroke:none;stroke-width:9.53802512;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 174.68659,166.09036 a 53.220539,53.220539 0 0 1 -53.22054,53.22054 53.220539,53.220539 0 0 1 -53.220549,-53.22054 53.220539,53.220539 0 0 1 53.220549,-53.22053 53.220539,53.220539 0 0 1 53.22054,53.22053 z" /><path
style="display:inline;fill:#657aff;fill-opacity:1;stroke:#ff6565;stroke-width:9.53802512;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 64.018176,108.64249 177.98271,222.60704"
id="path6" /><path
style="display:inline;fill:#657aff;fill-opacity:1;stroke:#ff6565;stroke-width:9.53802512;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 178.91392,108.64249 64.949383,222.60704"
id="path8" /><rect
style="display:inline;fill:none;fill-opacity:1;stroke:#ff6565;stroke-width:9.53802512;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect8"
width="49.853371"
height="49.853374"
x="96.53936"
y="141.16368"
rx="10.096041"
ry="10.096041" /><path
style="fill:none;stroke:#ff6565;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 107.87076,95.549329 c -3.24166,-0.171787 -7.35804,0.357163 -9.801732,4.960311 -1.79925,3.38919 -3.917459,6.95866 -4.454661,10.40717 -0.303069,1.94552 1.927067,2.92088 2.752511,3.79898 0.81336,0.86525 0.96405,1.24092 1.44233,2.12783 0.11341,0.21024 0.33235,0.35408 0.34177,0.6293 0.0198,0.57857 -0.3843,1.24721 -0.57645,1.87081 -1.07054,3.47431 -4.5341,6.39125 -7.059308,5.26672"
id="path1" /><path
style="fill:none;stroke:#ff6565;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 114.84331,96.222031 c 2.72747,-0.21581 5.29046,0.271766 8.03104,0 0.9138,-0.09053 1.65988,-0.320848 2.51656,-0.320848"
id="path2" /><path
style="fill:none;stroke:#ff6565;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 121.37135,96.212978 c -0.62066,2.973029 -2.24519,6.107832 -2.79454,9.069422 -1.15566,6.23033 0.19191,-0.7424 -0.95821,6.62406 -0.28127,1.80146 -1.05856,3.58818 -1.3407,5.3356 -0.0585,0.36256 0.075,0.66894 0.0164,1.0315 -0.22654,1.40317 -0.93122,3.02218 -1.37662,4.46767"
id="path3" /><path
style="fill:none;stroke:#ff6565;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 126.61565,123.73264 c -0.92337,-3.67245 -0.6237,-7.00232 0.74596,-11.44743 1.12552,-3.65278 2.08046,-6.98222 4.07547,-10.52109 0.38538,-0.68359 2.04864,-3.577674 3.02225,-4.379618 2.63603,-2.171216 6.56697,-2.415604 7.64561,-0.01492 1.1599,2.581614 0.35546,11.915658 -1.39484,15.348938 -0.26939,0.52845 -0.74156,0.95488 -1.06047,1.46342 -0.48378,0.77139 -0.82138,1.61313 -1.34025,2.36462 -0.37198,0.53877 -1.00146,0.78514 -1.45255,1.25289 -1.9131,1.98377 -2.80845,2.52091 -4.84697,4.1697 -0.38469,0.31115 -4.24578,2.7099 -4.43696,2.68244 -0.46492,-0.0668 -0.63815,-0.61267 -0.95723,-0.91901 z"
id="path4" /><path
style="fill:none;stroke:#ff6565;stroke-width:3.17934;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 141.84299,125.13328 c 1.84512,-3.66274 1.99136,-7.29893 3.33761,-10.98457 0.76675,-2.09932 1.88419,-4.22328 2.81603,-6.23086 1.51381,-3.26144 3.18483,-9.146834 5.61044,-11.911643 1.17111,-1.334873 3.74753,0.741235 4.28274,1.333966 0.62303,0.689974 1.15259,2.137549 1.05937,3.318727 -0.12213,1.54813 -2.14717,6.87346 -3.35185,8.09184 -1.69907,1.71829 -6.42047,4.22881 -8.3377,4.22881"
id="path5" /></g></g></svg>
style="display:inline;fill:none;fill-opacity:1;stroke:none;stroke-width:10.1739;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 185.43206,166.09037 a 63.966005,63.966005 0 0 1 -63.966,63.966 63.966005,63.966005 0 0 1 -63.966022,-63.966 63.966005,63.966005 0 0 1 63.966022,-63.966 63.966005,63.966005 0 0 1 63.966,63.966 z" /><path
sodipodi:type="star"
style="opacity:1;fill:none;stroke:#ff6565;stroke-width:13.3122;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path1"
inkscape:flatsided="true"
sodipodi:sides="6"
sodipodi:cx="76.365341"
sodipodi:cy="18.55092"
sodipodi:r1="86.381554"
sodipodi:r2="74.808624"
sodipodi:arg1="0"
sodipodi:arg2="0.52359878"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 162.74689,18.55092 -43.19077,74.80862 -86.381556,0 -43.190776,-74.80862 43.190776,-74.808619 86.381556,0 z"
transform="matrix(0.764253,0,0,0.764253,63.103605,151.91278)" /></g></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

28
img/variables.svg
View File

@ -40,32 +40,28 @@
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;stroke:#987a44;stroke-width:25;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers;stroke-dasharray:none;fill-opacity:1"
d="M 14.334388,65 H 235.66561"
style="fill:none;fill-opacity:1;stroke:#ff8c59;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 14.33439,65.000003 H 235.66561"
id="path1" />
<path
style="fill:none;fill-opacity:1;stroke:#987a44;stroke-width:25;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 185,13.334075 V 236.66592"
style="fill:none;fill-opacity:1;stroke:#ff8c59;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 125,13.334078 V 236.66592"
id="path2" />
<path
style="fill:none;fill-opacity:1;stroke:#987a44;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 25.443243,100.75328 c -5.897984,15.30255 -6.926088,30.32038 -7.776899,44.79132 -0.197999,3.36767 0.354042,5.54902 -0.204329,8.91701 -0.146972,0.88647 -1.212167,2.02252 -0.928246,2.7114 0.512294,1.24295 2.991892,-3.92893 5.848173,-8.1461 3.39671,-5.0151 7.32078,-9.75439 10.632036,-14.81025 2.538921,-3.8766 10.56201,-19.34313 12.251453,-24.27798"
style="fill:none;fill-opacity:1;stroke:#ff8c59;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 33.268523,105.2863 56.658182,56.65818"
id="path3" />
<path
style="fill:none;fill-opacity:1;stroke:#987a44;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 47.004841,156.36857 c 2.493002,-8.68929 6.788394,-17.25569 10.543948,-25.77725 1.08819,-2.46918 1.350723,-5.00211 2.551446,-7.45277 1.224273,-2.49872 3.336256,-4.67933 4.874958,-7.08041 1.442191,-2.25049 3.045737,-6.02281 5.19888,-7.78337 1.824975,-1.49222 0.322516,13.32496 -0.01938,15.17719 -1.095834,5.93666 -2.688084,11.96544 -3.616487,17.86825 -0.180562,1.14802 -0.259271,5.05499 -0.581592,5.99649"
style="fill:none;fill-opacity:1;stroke:#ff8c59;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 90.182775,105.03023 33.012456,162.20055"
id="path4" />
<path
style="fill:none;fill-opacity:1;stroke:#987a44;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 53.79869,138.10531 c 6.273335,-2.75115 12.544708,-4.46749 19.032494,-4.46749"
style="fill:none;fill-opacity:1;stroke:#ff8c59;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 154.9786,100.76435 26.2579,26.2579"
id="path5" />
<path
style="fill:none;fill-opacity:1;stroke:#987a44;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 80.803795,157.39114 c 1.113452,-6.97262 2.00354,-13.90113 3.340354,-20.91787 0.47323,-2.48389 1.725375,-5.03981 2.588062,-7.55971 1.940742,-5.6689 2.842163,-6.81919 7.77203,-10.97557 1.583286,-1.33486 2.967411,-3.08859 4.67337,-4.12712 3.225679,-1.96367 5.791179,-1.78365 8.880239,-2.73034 0.97444,-0.29864 4.8605,-1.87664 5.43304,-0.82809 0.76435,1.39984 -0.31803,2.37656 -0.68182,4.14042 -1.58704,7.69493 -4.26615,18.0007 -14.223806,20.55665 -1.92366,0.49377 -6.193439,1.84006 -7.639999,0.82809 -0.24941,-0.17447 -0.220793,-0.62698 -0.448045,-0.82809 -0.01365,-0.0122 -0.988283,0.0122 -0.991585,0 -0.05955,-0.23313 0.386098,-0.63564 0.288595,-0.84298 -0.163962,-0.34869 -3.133142,0 -3.575541,0 -0.159449,0 0.363934,-0.0812 0.478348,0 2.970156,2.10654 5.967689,4.18623 8.736948,6.53587 4.052028,3.43803 6.789465,9.10975 7.953615,14.77543 0.26453,1.28735 2.58187,3.02337 2.27191,3.92879"
style="fill:none;fill-opacity:1;stroke:#ff8c59;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 211.89285,100.50828 154.72253,157.6786"
id="path6" />
<path
style="fill:none;fill-opacity:1;stroke:#987a44;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 147.54934,119.1963 c 0.50647,-1.47939 1.22324,-2.97674 1.5194,-4.43817 0.13607,-0.67124 -4.58539,-2.23931 -5.35786,-2.42775 -3.22523,-0.78673 -10.19226,5.43912 -12.36776,8.6912 -1.18916,1.77764 -3.54554,6.7313 -3.82278,9.0175 -1.11544,9.19816 9.56456,10.15254 12.75524,15.99613 0.2638,0.48315 0.30618,3.60744 0.16399,3.76696 -2.42475,2.72048 -5.4337,4.77334 -7.97405,7.37765 -1.61972,1.66051 -2.83582,3.72819 -4.52785,5.29993 -5.61578,5.21653 -10.51356,5.58527 -15.83384,5.58527"
id="path7" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

110
index.html
View File

@ -1,67 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<!-- Metadata -->
<title>Blokkify</title>
<head>
<!-- Metadata -->
<title>Blokkify</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/core.css">
<link rel="stylesheet" href="css/core.css">
<script src="js/block.js" defer></script>
<script src="js/sprite.js" defer></script>
<script src="js/draw.js" defer></script>
<script src="js/sprite.js" defer></script>
<script src="js/loader.js" defer></script>
<script src="js/view.js" defer></script>
<script src="js/commands.js" defer></script>
<script src="js/code.js" defer></script>
<script src="js/assets.js" defer></script>
<script src="js/block.js" defer></script>
<script src="js/sprite.js" defer></script>
<script src="js/draw.js" defer></script>
<script src="js/sprite.js" defer></script>
<script src="js/loader.js" defer></script>
<script src="js/view.js" defer></script>
<script src="js/commands.js" defer></script>
<script src="js/code.js" defer></script>
<script src="js/assets.js" defer></script>
<script src="js/main.js" defer></script>
</head>
<script src="js/main.js" defer></script>
</head>
<body>
<div class='top'>
<a href="https://blokkify.net/" target="_blank" class="icon">Blokkify Studio</a>
<a href='#' onclick='loader.download()'>Download</a>
<a href='#' onclick='loader.upload()'>Upload</a>
<div class='margin'></div>
<a href='#' onclick='loader.toStorage()'>Share</a>
</div>
<div class='bottom'>
<body>
<div class='top'>
<a href="https://blokkify.net/" target="_blank" class="icon">Blokkify Studio</a>
<a href='#' onclick='loader.download()'>Download</a>
<a href='#' onclick='loader.upload()'>Upload</a>
<div class='margin'></div>
<a href='#' onclick='loader.toStorage()'>Share</a>
</div>
<div class='bottom'>
<textarea class='left'></textarea>
<div style='display: none;' class='left block'>
<div class='menu'></div>
<textarea class='left'></textarea>
<div style='display: none;' class='left block'>
<div class='menu'></div>
</div>
<div style='display: none;' class='left dat'>
</div>
<div style='display: none;' class='left dat'>
</div>
<div class='right'>
<canvas width='480' height='360' id='canvas-main'></canvas>
<div class='the_buttons'>
<a href='#' onclick='view.code()' class='no_embed'><img class='ico' src='img/code.svg'></a>
<a href='#' onclick='view.blocks()' class='no_embed'><img class='ico' src='img/blocks.svg'></a>
<a href='#' onclick='view.dat()' class='no_embed'><img class='ico' src='img/variables.svg'></a>
<br/>
<a href='#' onclick='view.run()'><img class='ico' src='img/run.svg'></a>
<a href='#' onclick='view.stop()'><img class='ico' src='img/stop.svg'></a>
<a href='#' onclick='view.embed()'><img class='ico' src='img/embed.svg'></a>
<br/>
<a href='#' onclick='view.del()' class='no_embed'><img class='ico' src='img/delete.svg'></a>
<a href='#' onclick='loader.uploadAsset()' class='no_embed'><img class='ico' src='img/asset.svg'></a>
<div class='sprites'>
</div>
</div>
<canvas width='480' height='360' style='display: none;' id="canvas-test1"></canvas>
<canvas width='480' height='360' style='display: none;' id="canvas-test2"></canvas>
</div>
</div>
<iframe style='display: none;'></iframe>
<input type="file" style="display: none;">
</body>
</div>
<div class='right'>
<canvas width='480' height='360' id='canvas-main'></canvas>
<div class='the_buttons'>
<span class='buttonse'>
<a href='#' onclick='view.run()'><img class='ico' src='img/run.svg'></a>
<a href='#' onclick='view.stop()'><img class='ico' src='img/stop.svg'></a>
<a href='#' onclick='view.embed()'><img class='ico' src='img/embed.svg'></a>
<br/>
<a href='#' onclick='view.code()' class='no_embed'><img class='ico' src='img/code.svg'></a>
<a href='#' onclick='view.blocks()' class='no_embed'><img class='ico' src='img/blocks.svg'></a>
<a href='#' onclick='view.dat()' class='no_embed'><img class='ico' src='img/variables.svg'></a>
<br/>
<a href='#' onclick='view.del()' class='no_embed'><img class='ico' src='img/delete.svg'></a>
<a href='#' onclick='loader.uploadAsset()' class='no_embed'><img class='ico' src='img/asset.svg'></a>
</span>
<div class='sprites'>
</div>
</div>
<canvas width='480' height='360' style='display: none;' id="canvas-test1"></canvas>
<canvas width='480' height='360' style='display: none;' id="canvas-test2"></canvas>
</div>
</div>
<iframe style='display: none;'></iframe>
<input type="file" style="display: none;">
</body>
</html>

302
js/block.js
View File

@ -1,211 +1,211 @@
function BlockMenu(sprite) {
this.selType = 'text';
this.sprite = sprite;
this.listeners = [];
this.selType = 'text';
this.sprite = sprite;
this.listeners = [];
}
BlockMenu.prototype.fixCode = function (c, sprite, rerun) {
let newCode = '';
let newCode = '';
let lastLevel = 0;
let lastCtrl = 0;
let ignoreLevel = -1;
let doNext = false;
for (let i in c) {
let e = c[i];
if (ignoreLevel == e.level) {
ignoreLevel = -1;
continue;
}
let lastLevel = 0;
let lastCtrl = 0;
let ignoreLevel = -1;
let doNext = false;
for (let i in c) {
let e = c[i];
if (ignoreLevel == e.level) {
ignoreLevel = -1;
continue;
}
let cmd = e.data; //.trim();
if (cmd == '' && e.level > lastLevel) {
ignoreLevel = e.level;
continue;
}
let ln = '';
if (commands[e.data] && commands[e.data].type == 'control') {
ln = `\n${' '.repeat(Math.max(0, e.level - 1))}`;
lastCtrl = e.level + 1;
}
if (doNext || (e.level <= lastCtrl)) {
ln = `\n${' '.repeat(Math.max(0, e.level - 1))}`;
}
if (e.level == 0) {
lastCtrl = 0;
}
doNext = (e.level <= lastCtrl);
if (e.level > lastLevel) {
newCode += `${ln}(${e.data}`;
lastLevel = e.level;
} else if (e.level < lastLevel) {
newCode += `)${ln}${e.data}`;
lastLevel = e.level;
} else {
newCode += `${e.data}`;
}
}
let cmd = e.data; //.trim();
if (cmd == '' && e.level > lastLevel) {
ignoreLevel = e.level;
continue;
}
let ln = '';
if (commands[e.data] && commands[e.data].type == 'control') {
ln = `\n${' '.repeat(Math.max(0, e.level - 1))}`;
lastCtrl = e.level + 1;
}
if (doNext || (e.level <= lastCtrl)) {
ln = `\n${' '.repeat(Math.max(0, e.level - 1))}`;
}
if (e.level == 0) {
lastCtrl = 0;
}
doNext = (e.level <= lastCtrl);
if (e.level > lastLevel) {
newCode += `${ln}(${e.data}`;
lastLevel = e.level;
} else if (e.level < lastLevel) {
newCode += `)${ln}${e.data}`;
lastLevel = e.level;
} else {
newCode += `${e.data}`;
}
}
if (!rerun) {
this.fixCode(new Parser().parseBrace(newCode || ''), sprite, true);
return;
}
if (!rerun) {
this.fixCode(new Parser().parseBrace(newCode || ''), sprite, true);
return;
}
sprite.code = newCode;
sprite.code = newCode;
let ta = document.querySelector('.left');
ta.value = sprite.code || '';
view.blocks(); // wow
let ta = document.querySelector('.left');
ta.value = sprite.code || '';
view.blocks(); // wow
}
BlockMenu.prototype.delTo = function (from, level, obj) {
let c = new Parser().parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
let c = new Parser().parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
let command = c[from].data.replaceAll(/\s+/g, '');
let isComment = command == 'comment' || command == 'text';
c.splice(from, 1 + isComment * 1, {
level: level - 2,
data: ''
});
let command = c[from].data.replaceAll(/\s+/g, '');
let isComment = command == 'comment' || command == 'text';
c.splice(from, 1 + isComment * 1, {
level: level - 2,
data: ''
});
this.fixCode(c, this.sprite.sprites[this.sprite.sel]);
this.fixCode(c, this.sprite.sprites[this.sprite.sel]);
}
BlockMenu.prototype.nukeTo = function (from, level, obj) {
let c = new Parser().parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
let c = new Parser().parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
let levelOrg = level;
let levelOrg = level;
while (c[from].level >= levelOrg - 1) {
c.splice(from, 1);
from--;
while (c[from].level >= levelOrg - 1) {
c.splice(from, 1);
from--;
console.log(c[from].level)
}
console.log(c[from].level)
}
this.fixCode(c, this.sprite.sprites[this.sprite.sel]);
this.fixCode(c, this.sprite.sprites[this.sprite.sel]);
}
BlockMenu.prototype.pushTo = function (from, level, obj, sel = false, sugg = false) {
let c = new Parser().parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
let c = new Parser().parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
let cmdData = commands[sel || this.selType] || {};
let cmdData = commands[sel || this.selType] || {};
c.splice(from + 1, 0, {
data: sel || this.selType,
level: level
}, {
data: '',
level: level - 1
});
c.splice(from + 1, 0, {
data: sel || this.selType,
level: level
}, {
data: '',
level: level - 1
});
this.fixCode(c, this.sprite.sprites[this.sprite.sel]);
this.fixCode(c, this.sprite.sprites[this.sprite.sel]);
if (!cmdData.argsTemplate) return;
if (!cmdData.argsTemplate) return;
let template = !sugg ? cmdData.argsTemplate : templates[sugg];
let template = !sugg ? cmdData.argsTemplate : templates[sugg];
for (let i = template.length - 1; i >= 0; i--) {
let ent = template[i];
this.pushTo(from + 1, level + 1 + ent.depth, obj, ent.type, ent.sugg);
}
for (let i = template.length - 1; i >= 0; i--) {
let ent = template[i];
this.pushTo(from + 1, level + 1 + ent.depth, obj, ent.type, ent.sugg);
}
}
BlockMenu.prototype.changeTo = function (from, level, obj) {
let c = new Parser().parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
c[from].data = obj.querySelector('textarea').value.replaceAll('(', '\\(').replaceAll(')', '\\)').replaceAll('\\\\', '\\');
let c = new Parser().parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
c[from].data = obj.querySelector('textarea').value.replaceAll('(', '\\(').replaceAll(')', '\\)').replaceAll('\\\\', '\\');
this.fixCode(c, this.sprite.sprites[this.sprite.sel]);
this.fixCode(c, this.sprite.sprites[this.sprite.sel]);
}
BlockMenu.prototype.renderBlocks = function (data, from, level) {
let command = data[from].data.replaceAll(/\s+/g, '');
let command = data[from].data.replaceAll(/\s+/g, '');
let div = document.createElement('div');
let div = document.createElement('div');
let c = commands[command];
let c = commands[command];
div.textContent = c.alias || command;
div.textContent = c.alias || command;
if (c && c.type) div.classList.add('block-' + c.type);
if (level % 2 == 1 && level != 1) div.classList.add('odd_depth');
if (c && c.type) div.classList.add('block-' + c.type);
if (level % 2 == 1 && level != 1) div.classList.add('odd_depth');
let inn = div;
if (command == 'text' || command == 'comment') {
inn = document.createElement('textarea');
inn.id = `textarea-${from}`
div.appendChild(inn);
}
let inn = div;
if (command == 'text' || command == 'comment') {
inn = document.createElement('textarea');
inn.id = `textarea-${from}`
div.appendChild(inn);
}
let args = 0;
let argC = commands[command].args;
if (argC == -1) argC = 1;
let args = 0;
let argC = commands[command].args;
if (argC == -1) argC = 1;
let i = from + 1;
for (i = from + 1; i < data.length; i++) {
let entry = data[i];
if (entry.level < level - 1) break;
let i = from + 1;
for (i = from + 1; i < data.length; i++) {
let entry = data[i];
if (entry.level < level - 1) break;
if (entry.level != level) continue;
if (entry.level != level) continue;
if (command == 'text' || command == 'comment') {
inn.textContent += entry.data;
continue;
}
if (command == 'text' || command == 'comment') {
inn.textContent += entry.data;
continue;
}
if (entry.data == '') continue;
if (entry.data == '') continue;
let d = this.renderBlocks(data, i, level + 1);
let d = this.renderBlocks(data, i, level + 1);
div.innerHTML += `<div class='button green' onclick='blocks.pushTo(${i - 1},${level},this)'>+</div>`
div.appendChild(d);
args++;
div.innerHTML += `<div class='button green' onclick='blocks.pushTo(${i - 1},${level},this)'>+</div>`
div.appendChild(d);
args++;
//if (args == argC) break;
}
//if (args == argC) break;
}
div.id = `div-${from}`;
div.id = `div-${from}`;
if (command == 'text' || command == 'comment') {
div.innerHTML += `<div class='button red' onclick='blocks.delTo(${from},${level + 1},this)'>-</div>`
} else {
div.innerHTML += `<div class='button green' onclick='blocks.pushTo(${i - 1},${level},this)'>+</div>`
div.innerHTML += `<div class='button red' onclick='blocks.delTo(${from},${level},this)'>-</div>`
div.innerHTML += `<div class='button nuke' onclick='blocks.nukeTo(${i - 1},${level},this)'>X</div>`
if (command == 'text' || command == 'comment') {
div.innerHTML += `<div class='button red' onclick='blocks.delTo(${from},${level + 1},this)'>-</div>`
} else {
div.innerHTML += `<div class='button green' onclick='blocks.pushTo(${i - 1},${level},this)'>+</div>`
div.innerHTML += `<div class='button red' onclick='blocks.delTo(${from},${level},this)'>-</div>`
div.innerHTML += `<div class='button nuke' onclick='blocks.nukeTo(${i - 1},${level},this)'>X</div>`
if (commands[command].args != -1 && args >= argC) {
for (let g of div.querySelectorAll(`#div-${from} > .green`)) g.remove();
}
}
if (commands[command].args != -1 && args >= argC) {
for (let g of div.querySelectorAll(`#div-${from} > .green`)) g.remove();
}
}
let that = this;
this.listeners.push(function (e) {
if (e.target.id != `textarea-${from}`) {
return;
}
for (let listener of that.listeners) {
document.removeEventListener("change", listener);
}
that.listeners = [];
blocks.changeTo(from + 1, level + 1, document.querySelector(`#div-${from}`));
})
let that = this;
this.listeners.push(function (e) {
if (e.target.id != `textarea-${from}`) {
return;
}
for (let listener of that.listeners) {
document.removeEventListener("change", listener);
}
that.listeners = [];
blocks.changeTo(from + 1, level + 1, document.querySelector(`#div-${from}`));
})
document.addEventListener('change', this.listeners[this.listeners.length - 1]);
document.addEventListener('change', this.listeners[this.listeners.length - 1]);
return div;
return div;
}
BlockMenu.prototype.reselect = function (type) {
for (let click of document.querySelectorAll('.clicker')) {
click.style.display = 'none';
}
let displayed = [
...document.querySelectorAll('.typer'),
...document.querySelectorAll('.tooltip'),
...document.querySelectorAll('.block-' + type)
];
for (let click of displayed) {
click.style.display = '';
}
}
for (let click of document.querySelectorAll('.clicker')) {
click.style.display = 'none';
}
let displayed = [
...document.querySelectorAll('.typer'),
...document.querySelectorAll('.tooltip'),
...document.querySelectorAll('.block-' + type)
];
for (let click of displayed) {
click.style.display = '';
}
}

132
js/code.js
View File

@ -1,87 +1,87 @@
function Parser() {
this.variables = {};
this.variables = {};
}
Parser.prototype.parseBrace = function (str) {
let out = [{
"level": 0,
"data": ""
}];
let out = [{
"level": 0,
"data": ""
}];
let level = 0;
for (let j in str) {
let i = str[j];
if (((i != '(' && i != ')') || (j > 0 && str[j-1] == '\\')) && i) {
out[out.length - 1].data += i;
continue;
}
level += (i == '(') ? 1 : 0;
level -= (i == ')') ? 1 : 0;
level = Math.max(level,0);
out.push({
level,
"data": ""
});
}
let level = 0;
for (let j in str) {
let i = str[j];
if (((i != '(' && i != ')') || (j > 0 && str[j-1] == '\\')) && i) {
out[out.length - 1].data += i;
continue;
}
level += (i == '(') ? 1 : 0;
level -= (i == ')') ? 1 : 0;
level = Math.max(level,0);
out.push({
level,
"data": ""
});
}
let strLevel = Infinity;
for (let i in out) {
if (out[i].level > strLevel) {
continue;
} else {
strLevel = Infinity;
}
out[i].data = out[i].data.replaceAll(/\s+/gm, " ").trim();
if (out[i].data == 'text') strLevel = out[i].level;
}
let strLevel = Infinity;
for (let i in out) {
if (out[i].level > strLevel) {
continue;
} else {
strLevel = Infinity;
}
out[i].data = out[i].data.replaceAll(/\s+/gm, " ").trim();
if (out[i].data == 'text') strLevel = out[i].level;
}
return out;
return out;
}
Parser.prototype.parseCode = async function (data, from, level) {
let result = false;
let command = data[from].data;
let result = false;
let command = data[from].data;
let args = [];
let args = [];
for (let i = from + 1; i < data.length; i++) {
if (this.stop) {
return false;
}
for (let i = from + 1; i < data.length; i++) {
if (this.stop) {
return false;
}
let entry = data[i];
if (entry.level < level - 1) break;
let entry = data[i];
if (entry.level < level - 1) break;
if (command == 'text') {
result = result || "";
result += entry.data.replaceAll('\\','');
continue;
}
if (command == 'text') {
result = result || "";
result += entry.data.replaceAll('\\','');
continue;
}
if (entry.level != level) continue;
if (entry.level != level) continue;
let ij = Object.keys(commands).indexOf(command);
let argC = (ij != -1) ? commands[command].args : -1;
let ij = Object.keys(commands).indexOf(command);
let argC = (ij != -1) ? commands[command].args : -1;
if (ij != -1 && commands[command].control && args.length == argC - 1 && entry.data != '') {
return await commands[command].func(this,args,data,i,level+1);
} else {
if (entry.data == '') continue;
let c = await this.parseCode(data, i, level + 1);
if (c && c.ignore) continue;
args.push(c);
if (ij == -1) continue;
}
if (ij != -1 && commands[command].control && args.length == argC - 1 && entry.data != '') {
return await commands[command].func(this,args,data,i,level+1);
} else {
if (entry.data == '') continue;
let c = await this.parseCode(data, i, level + 1);
if (c && c.ignore) continue;
args.push(c);
if (ij == -1) continue;
}
if (!commands[command].control && args.length == argC) {
return await commands[command].func(this,args);
}
if (!commands[command].control && args.length == argC) {
return await commands[command].func(this,args);
}
}
}
if (!result && commands[command] && commands[command].func && (commands[command].args == 0 || commands[command].isArray)) {
return await commands[command].func(this,args);
}
return result;
}
if (!result && commands[command] && commands[command].func && (commands[command].args == 0 || commands[command].isArray)) {
return await commands[command].func(this,args);
}
return result;
}

1545
js/commands.js
View File

File diff suppressed because it is too large Load Diff

99
js/draw.js
View File

@ -1,52 +1,81 @@
function CanvasManager(sprite, canv) {
this.elem = canv || document.querySelector('canvas');
this.ctx = this.elem.getContext('2d');
this.sprite = sprite;
this.elem = canv || document.querySelector('canvas');
this.ctx = this.elem.getContext('2d');
this.sprite = sprite;
}
CanvasManager.prototype.drawSprite = function(spr) {
let sprite = this.sprite.sprites[spr];
if (!sprite.p) return;
CanvasManager.prototype.drawSprite = function (spr) {
let sprite = this.sprite.sprites[spr];
if (!sprite.p) return;
if (sprite.p.variables["hidden"]) return;
let img = sprite.p.variables["costume"];
if (!img) return;
let {
xPos,
yPos,
costume,
sizePos,
rotation,
hidden,
fontSize,
fontFamily,
penFill,
penStrokeColor,
penStrokeWidth,
flipped,
text
} = sprite.p.intVariables;
let size = sprite.p.variables["size"] / 100;
if (hidden) return;
let img = costume;
if (!img) return;
let x2 = sprite.p.variables["x position"] * 1;
let y2 = sprite.p.variables["y position"] * 1;
let size = sizePos / 100;
let x = x2 - (img.width * size / 2) + canvasWidth / 2;
let y = y2 - (img.height * size / 2) + canvasHeight / 2;
let x2 = xPos * 1;
let y2 = yPos * 1;
let ctx = this.ctx;
let x = x2 - (img.width * size / 2) + canvasWidth / 2;
let y = y2 - (img.height * size / 2) + canvasHeight / 2;
ctx.save();
ctx.translate(canvasWidth / 2 + x2, canvasHeight / 2 + y2);
if (sprite.p.variables["flipped"]) {
ctx.scale(-1, 1);
}
ctx.rotate(Math.PI / 180 * (sprite.p.variables["rotation"] - 90));
ctx.translate(-canvasWidth / 2 - x2, -canvasHeight / 2 - y2);
let d = {
x1: x,
x2: x + img.width * size,
y1: y,
y2: y + img.height * size
};
ctx.drawImage(img, x, y, img.width * size, img.height * size);
ctx.restore();
if (((x > canvasWidth) ^ (x + img.width * size < 0)) || ((y > canvasHeight) ^ (y + img.height * size < 0))) {
return d;
}
ctx.font = `${sprite.p.variables["font size"] * 1}px ${sprite.p.variables["font family"]}`;
ctx.fillStyle = sprite.p.variables["fill color"];
ctx.strokeStyle = sprite.p.variables["stroke color"];
ctx.lineWidth = sprite.p.variables["stroke size"] * 1;
ctx.fillText(sprite.p.variables["text"] || '', x, y);
ctx.strokeText(sprite.p.variables["text"] || '', x, y);
let ctx = this.ctx;
ctx.save();
ctx.translate(canvasWidth / 2 + x2, canvasHeight / 2 + y2);
if (flipped) {
ctx.scale(-1, 1);
}
ctx.rotate(Math.PI / 180 * (rotation - 90));
ctx.translate(-canvasWidth / 2 - x2, -canvasHeight / 2 - y2);
ctx.drawImage(img, x, y, img.width * size, img.height * size);
ctx.restore();
ctx.font = `${fontSize * 1}px ${fontFamily}`;
ctx.fillStyle = penFill;
ctx.strokeStyle = penStrokeColor
ctx.lineWidth = penStrokeWidth * 1;
ctx.fillText(text || '', x, y);
ctx.strokeText(text || '', x, y);
return d;
}
CanvasManager.prototype.draw = function() {
this.ctx.clearRect(0, 0, this.elem.width, this.elem.height);
CanvasManager.prototype.draw = function () {
this.ctx.clearRect(0, 0, this.elem.width, this.elem.height);
for (let spr of this.sprite.spritesI) {
this.drawSprite(spr, this.ctx);
}
for (let spr of this.sprite.spritesI) {
this.drawSprite(spr);
}
}

108
js/loader.js
View File

@ -1,76 +1,76 @@
function FileLoader(sprite) {
this.elem = document.querySelector('input[type=file]');
this.sprite = sprite;
this.change();
this.type = "project";
this.elem = document.querySelector('input[type=file]');
this.sprite = sprite;
this.change();
this.type = "project";
}
FileLoader.prototype.download = function (isData) {
let codes = { __origin: thing2 ? thing2.split('/projects/')[1] : '' };
for (let i in this.sprite.sprites) {
if (this.sprite.sprites[i].isClone) continue;
codes[i] = {};
codes[i].code = this.sprite.sprites[i].code;
}
if (isData) return codes;
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(codes));
var dlAnchorElem = document.createElement('a');
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "project.json");
dlAnchorElem.click();
let codes = { __origin: thing2 ? thing2.split('/projects/')[1] : '' };
for (let i in this.sprite.sprites) {
if (this.sprite.sprites[i].isClone) continue;
codes[i] = {};
codes[i].code = this.sprite.sprites[i].code;
}
if (isData) return codes;
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(codes));
var dlAnchorElem = document.createElement('a');
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "project.json");
dlAnchorElem.click();
}
FileLoader.prototype.change = function () {
let that = this;
this.elem.onchange = async function (e) {
let that = this;
this.elem.onchange = async function (e) {
let formData = new FormData();
let f = e.target.files[0];
let formData = new FormData();
let f = e.target.files[0];
if (that.type == 'project') {
let reader = new FileReader();
reader.onload = function (evt) {
loaderFunc(JSON.parse(evt.target.result))
}
reader.readAsText(f, "UTF-8");
return;
}
if (that.type == 'project') {
let reader = new FileReader();
reader.onload = function (evt) {
loaderFunc(JSON.parse(evt.target.result))
}
reader.readAsText(f, "UTF-8");
return;
}
formData.append('file', f);
formData.append('tokenIn', tokenIn);
formData.append('file', f);
formData.append('tokenIn', tokenIn);
let dat = await fetch('https://api.blokkify.net/upload/asset', {
body: formData,
method: "POST"
});
let datJson = await dat.json();
let {filesR} = datJson;
let dat = await fetch('https://api.blokkify.net/upload/asset', {
body: formData,
method: "POST"
});
let datJson = await dat.json();
let {filesR} = datJson;
let str = `(set (text (costume)) (image (text (https://api.blokkify.net/raw?sub=assets&id=${filesR}))))`;
if (f.name.endsWith('mp3')) {
str = `(play (audio (text (https://api.blokkify.net/raw?sub=assets&id=${filesR}))))`;
}
let str = `(set (text (costume)) (image (text (https://api.blokkify.net/raw?sub=assets&id=${filesR}))))`;
if (f.name.endsWith('mp3')) {
str = `(play (audio (text (https://api.blokkify.net/raw?sub=assets&id=${filesR}))))`;
}
document.querySelector('.left').value = document.querySelector('.left').value + str;
view.blocks();
return;
}
document.querySelector('.left').value = document.querySelector('.left').value + str;
view.blocks();
return;
}
}
FileLoader.prototype.upload = function () {
this.type = "project";
document.querySelector('input[type=file]').click();
this.type = "project";
document.querySelector('input[type=file]').click();
}
FileLoader.prototype.uploadAsset = function () {
this.type = "asset";
document.querySelector('input[type=file]').click();
this.type = "asset";
document.querySelector('input[type=file]').click();
}
FileLoader.prototype.toStorage = function() {
let pop = window.open('https://blokkify.net/upload#section_project','_blank');
let that = this;
setTimeout(function() {
pop.postMessage(that.download(true), 'https://blokkify.net');
},1000);
}
let pop = window.open('https://blokkify.net/upload#section_project','_blank');
let that = this;
setTimeout(function() {
pop.postMessage(that.download(true), 'https://blokkify.net');
},1000);
}

108
js/main.js
View File

@ -1,12 +1,12 @@
function sanitize(text) {
const decoder = document.createElement('div')
decoder.textContent = text;
const sanitized = decoder.innerHTML;
return sanitized;
const decoder = document.createElement('div')
decoder.textContent = text;
const sanitized = decoder.innerHTML;
return sanitized;
}
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
return new Promise((resolve) => setTimeout(resolve, time));
}
let parser = new Parser();
@ -18,51 +18,55 @@ let view = new ViewManager(parser, sprite,blocks);
let thing2;
let canvasWidth = 480;
let canvasHeight = 360;
let canvasWidth = 1920;
let canvasHeight = 1080;
async function loaderFunc(inDat) {
let dat = new URL(window.location).searchParams;
let dat = new URL(window.location).searchParams;
let h, w;
let h, w;
document.querySelector('#canvas-test1').width = document.querySelector('#canvas-test2').width =
c.width = canvasWidth = w = dat.get('width') || 480;
document.querySelector('#canvas-test1').height = document.querySelector('#canvas-test2').height =
c.height = canvasHeight = h = dat.get('height') || 360;
document.querySelector('#canvas-test1').width = document.querySelector('#canvas-test2').width =
c.width = canvasWidth = w = dat.get('width') || 1920;
document.querySelector('#canvas-test1').height = document.querySelector('#canvas-test2').height =
c.height = canvasHeight = h = dat.get('height') || 1080;
if (dat.get('embed')) {
c.style.width = `calc(min(100vw, ${w / h * 100}vh) - ${w / h * 120}px)`
c.style.height = `calc(min(100vh, ${h / w * 100}vw) - 120px)`
if (dat.get('embed')) {
c.style.width = `calc(min(100vw, ${w / h * 100}vh) - ${w / h * 120}px)`;
c.style.height = `calc(min(100vh, ${h / w * 100}vw) - 120px)`;
document.body.classList.add('embed');
}
thing2 = dat.get('data');
if (!thing2 && !inDat) {
view.blocks();
return;
}
let thing = inDat || await fetch(thing2);
if (!inDat) thing = await thing.json();
sprite.sprites = thing;
document.body.classList.add('embed');
} else {
c.style.width = w / 4 + 'px';
c.style.height = h / 4 + 'px';
}
for (let sprite2 in sprite.sprites) {
if (sprite2.startsWith('__')) delete sprite.sprites[sprite2];
}
thing2 = dat.get('data');
if (!thing2 && !inDat) {
view.blocks();
return;
}
let thing = inDat || await fetch(thing2);
if (!inDat) thing = await thing.json();
sprite.sprites = thing;
document.querySelector('.left').value = sprite.sprites[sprite.sel].code;
for (let sprite2 in sprite.sprites) {
if (sprite2.startsWith('__')) delete sprite.sprites[sprite2];
}
sprite.updateSprite();
document.querySelector('.left').value = sprite.sprites[sprite.sel].code;
if (dat.get('embed')) {
document.addEventListener('click', function () {
if (rMode) return;
rMode = !rMode;
view.run();
});
}
sprite.updateSprite();
view.blocks();
if (dat.get('embed')) {
document.addEventListener('click', function () {
if (rMode) return;
rMode = !rMode;
view.run();
});
}
view.blocks();
}
var c = document.querySelector('canvas');
@ -85,24 +89,30 @@ window.onkeydown = function (e) { pressedKeys[e.key] = true; }
var mouseX = 0;
var mouseY = 0;
var mouseClick = false;
var bounding = c.getBoundingClientRect();
window.onresize = function() { bounding = c.getBoundingClientRect(); }
c.ontouchstart = c.onmousedown = function (e) { mouseClick = true; }
c.ontouchend = c.ontouchcancel = c.onmouseup = function (e) { mouseClick = false; }
c.onmousemove = function (e) {
mouseX = e.clientX - bounding.left - canvasWidth / 2; mouseY = e.clientY - bounding.top - canvasHeight / 2;
console.log(bounding);
mouseX = (e.clientX - bounding.left) * canvasWidth / bounding.width;
mouseX -= canvasWidth / 2;
mouseY = (e.clientY - bounding.top) * canvasHeight / bounding.height;
mouseY -= canvasHeight / 2;
}
document.body.onmousemove = function (e) {
let t = document.querySelector('.tooltip');
t.className = 'tooltip clicker block-' + commands[blocks.selType].type;
t.style.top = e.clientY + 'px';
t.style.left = e.clientX + 'px';
t.textContent = blocks.selType;
let t = document.querySelector('.tooltip');
t.className = 'tooltip clicker block-' + commands[blocks.selType].type;
t.style.top = e.clientY + 'px';
t.style.left = e.clientX + 'px';
t.textContent = blocks.selType;
}
for (let sprite2 in sprite.sprites) {
sprite.parse(sprite2, false);
sprite.parse(sprite2, false);
}
let canvA = new CanvasManager(sprite,document.querySelector('#canvas-test1'));
@ -117,6 +127,6 @@ p.set('token','');
u.search = p;
if (tokenIn && tokenIn.length > 1) {
window.history.replaceState(null,null,u);
window.localStorage.setItem('token',tokenIn);
}
window.history.replaceState(null,null,u);
window.localStorage.setItem('token',tokenIn);
}

30
js/sprite.js
View File

@ -2,18 +2,18 @@ function SpriteManager() {
this.sprites = {
"Starter": {
"code":
`(comment (
` (comment (
Welcome!
))
(set (text (costume)) (image (text (./example.svg))))
(setCostume (image (text (./example.svg))))
(summon (do (forever (do
(play (audio (text (./example.mp3))))
))))
(summon (do (forever (do
(set (text (size)) (multiply (get (text (size))) (text (1.001)) ))
(setSizePos (multiply (getSizePos) (text (1.01)) ))
))))`,
}
};
@ -25,27 +25,15 @@ function SpriteManager() {
SpriteManager.prototype.parse = async function (sprite, runCode = true) {
let spr = this.sprites[sprite] || {};
let img = new Image();
img.src = './example.svg';
if (spr.p) spr.p.stop = true;
spr.p = new Parser();
spr.p.variables = {
"x position": 0,
"y position": 0,
"costume": img,
"size": 100,
"rotation": 90,
"layer": 0,
"hidden": false,
"font size": 16,
"font family": "sans-serif",
"fill color": "black",
"stroke size": "0",
"me": sprite
};
spr.p.intVariables = {...varTemp};
spr.p.intVariables.myId = sprite;
spr.p.variables = {};
spr.clones = 0;
this.resort();
@ -57,10 +45,10 @@ SpriteManager.prototype.parse = async function (sprite, runCode = true) {
SpriteManager.prototype.updateSprite = function () {
this.spriteMenu.innerHTML = '';
this.spriteMenu.innerHTML += `<p><input placeholder='New Sprite' onchange='sprite.sprites[this.value] = {}; sprite.updateSprite();'></p>`
for (let sprite in this.sprites) {
this.spriteMenu.innerHTML += `<p><a href='#' onclick='view.switch(this.textContent)'>${sanitize(sprite)}</a></p>`
}
this.spriteMenu.innerHTML += `<p><input placeholder='New Sprite' onchange='sprite.sprites[this.value] = {}; sprite.updateSprite();'></p>`
}
SpriteManager.prototype.update = function () {
@ -92,5 +80,5 @@ SpriteManager.prototype.update = function () {
}
SpriteManager.prototype.resort = function() {
this.spritesI = Object.keys(this.sprites).sort((a, b) => (this.sprites[a].p ? this.sprites[a].p.variables['layer'] : 0) - (this.sprites[b].p ? this.sprites[b].p.variables['layer'] : 0));
this.spritesI = Object.keys(this.sprites).sort((a, b) => (this.sprites[a].p ? this.sprites[a].p.intVariables['layer'] : 0) - (this.sprites[b].p ? this.sprites[b].p.intVariables['layer'] : 0));
}

135
js/view.js
View File

@ -1,109 +1,112 @@
function ViewManager(parser, sprite, block) {
this.elem = document.querySelectorAll('.left');
this.parser = parser;
this.sprite = sprite;
this.block = block;
this.elem = document.querySelectorAll('.left');
this.parser = parser;
this.sprite = sprite;
this.block = block;
}
ViewManager.prototype.cmdSort = function (a, b) {
return (commands[a].type + " " + a).localeCompare(commands[b].type + " " + b)
return (commands[a].type + " " + a).localeCompare(commands[b].type + " " + b)
}
ViewManager.prototype.cmdSortList = function () {
let th = this;
return Object.keys(commands).sort(function (a, b) { return th.cmdSort(a, b) }).filter(x => x.length > 1);
let th = this;
return Object.keys(commands).sort(function (a, b) { return th.cmdSort(a, b) }).filter(x => x.length > 1);
}
ViewManager.prototype.change = function () {
for (let elem of this.elem) {
elem.style = 'display: none';
}
for (let elem of this.elem) {
elem.style = 'display: none';
}
}
ViewManager.prototype.code = function () {
this.change();
document.querySelector('textarea.left').style = '';
this.change();
document.querySelector('textarea.left').style = '';
}
ViewManager.prototype.dat = function () {
this.change();
document.querySelector('.dat.left').style = '';
this.change();
document.querySelector('.dat.left').style = '';
}
ViewManager.prototype.embed = function () {
window.open(window.location + '&embed=true');
window.open(window.location);
}
let initTimer = 0;
ViewManager.prototype.run = function () {
initTimer = (+new Date);
this.stop();
this.switch(this.sprite.sel);
for (let sprite2 in this.sprite.sprites) {
this.sprite.parse(sprite2);
}
initTimer = (+new Date);
this.stop();
this.switch(this.sprite.sel);
for (let sprite2 in this.sprite.sprites) {
this.sprite.parse(sprite2);
}
}
ViewManager.prototype.switch = function (tag) {
let ta = document.querySelector('.left');
if (this.sprite.sprites[this.sprite.sel]) this.sprite.sprites[this.sprite.sel].code = ta.value;
this.sprite.sel = tag;
ta.value = this.sprite.sprites[this.sprite.sel].code || '';
this.blocks();
let ta = document.querySelector('.left');
if (this.sprite.sprites[this.sprite.sel]) this.sprite.sprites[this.sprite.sel].code = ta.value;
this.sprite.sel = tag;
ta.value = this.sprite.sprites[this.sprite.sel].code || '';
this.blocks();
}
ViewManager.prototype.stop = function () {
for (let el of document.querySelectorAll('audio')) {
el.pause();
el.remove();
}
for (let sprite2 in this.sprite.sprites) {
let sprite = this.sprite.sprites[sprite2];
if (sprite.p) sprite.p.stop = true;
if (sprite.isClone) delete this.sprite.sprites[sprite2];
}
this.sprite.update();
for (let el of document.querySelectorAll('audio')) {
el.pause();
el.remove();
}
for (let sprite2 in this.sprite.sprites) {
let sprite = this.sprite.sprites[sprite2];
if (sprite.p) sprite.p.stop = true;
if (sprite.isClone) delete this.sprite.sprites[sprite2];
}
this.sprite.update();
}
ViewManager.prototype.del = function () {
let prompt = confirm("Are you sure you want to delete this sprite?");
if (!prompt) return;
delete this.sprite.sprites[this.sprite.sel];
this.sprite.updateSprite();
this.switch(Object.keys(this.sprite)[0]);
let prompt = confirm("Are you sure you want to delete this sprite?");
if (!prompt) return;
delete this.sprite.sprites[this.sprite.sel];
this.sprite.updateSprite();
this.switch(Object.keys(this.sprite)[0]);
}
ViewManager.prototype.blocks = function () {
if (this.sprite.sprites[this.sprite.sel]) this.sprite.sprites[this.sprite.sel].code = document.querySelector('.left').value;
this.change();
let th = document.querySelector('.block.left');
if (this.sprite.sprites[this.sprite.sel]) this.sprite.sprites[this.sprite.sel].code = document.querySelector('.left').value;
this.change();
let th = document.querySelector('.block.left');
th.style = '';
th.innerHTML = '<div class="tooltip" style="position: fixed;"></div> <div class="menu"></div>';
th.style = '';
th.innerHTML = '<div class="tooltip" style="position: fixed;"></div> <div class="menu"></div>';
let cmds = this.cmdSortList();
let cmds = this.cmdSortList();
let types = [];
let types = [];
let menu = th.querySelector('.menu');
let menu = th.querySelector('.menu');
for (let command of cmds) {
let type = commands[command].type;
if (command == '') continue;
if (types.indexOf(type) == -1) {
types.push(type);
menu.innerHTML += `<a href='#' class='clicker block-${type} typer' onclick='blocks.reselect(this.textContent)'><b>${sanitize(type)}</b></a>`
}
}
menu.innerHTML += `<br/>`
for (let command of cmds) {
let type = commands[command].type;
if (command == '') continue;
if (types.indexOf(type) == -1) {
types.push(type);
menu.innerHTML += `<a href='#' class='clicker block-${type} typer' onclick='blocks.reselect(this.textContent);'><b>${sanitize(type)}</b></a>`
}
}
menu.innerHTML += `<br/>`
for (let command of cmds) {
let type = commands[command].type;
if (command == '') continue;
menu.innerHTML += `<a href='#' class='clicker block-${type}' onclick='blocks.selType = "${sanitize(command)}";' style='display: none;'>${sanitize(commands[command].alias) || sanitize(command)}</a>`
}
for (let command of cmds) {
let type = commands[command].type;
if (command == '') continue;
menu.innerHTML += `<a href='#' class='clicker block-${type}' onclick='blocks.selType = "${sanitize(command)}"; document.querySelector(".selt").innerHTML = (sanitize(commands["${sanitize(command)}"].desc) || "This block is not documented.");' style='display: none;'>${sanitize(commands[command].alias) || sanitize(command)}</a>`
}
let data = this.parser.parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
th.appendChild(this.block.renderBlocks(data, 0, 1));
}
menu.innerHTML += '<pre><b>Documentation</b>\n<span class="selt"></span></pre>';
let data = this.parser.parseBrace(this.sprite.sprites[this.sprite.sel].code || '');
th.appendChild(this.block.renderBlocks(data, 0, 1));
}