Compare commits

...

15 Commits
0.0.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
onez++ 6affb2992f new icons 2024-04-13 13:28:26 -04:00
onez++ 41e9ab9cc3 idk 2024-04-13 13:06:25 -04:00
onez++ bcb17e0e6f the 2024-04-13 13:05:46 -04:00
onez++ e4073ae9ec dumb 2024-04-13 13:03:29 -04:00
onez++ 9118950aa0 popup test 2024-04-13 12:55:45 -04:00
20 changed files with 1805 additions and 1627 deletions

View File

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;
}

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>

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -24,12 +24,12 @@
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="1.4912879"
inkscape:cx="156.57607"
inkscape:cy="105.27813"
inkscape:cx="165.62865"
inkscape:cy="163.61696"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-height="1062"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-y="16"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showgrid="false" />
@ -40,29 +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:#000000;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" />
<text
xml:space="preserve"
style="font-size:67.4669px;text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:5.62093;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
x="125.74213"
y="108.13328"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
x="125.74213"
y="108.13328"
style="text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:5.62093;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers">Add</tspan><tspan
sodipodi:role="line"
x="125.74213"
y="192.4669"
style="text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:5.62093;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="tspan2">Asset</tspan></text>
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>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -27,9 +27,9 @@
inkscape:cx="156.47229"
inkscape:cy="105.73734"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-height="1062"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-y="16"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
@ -39,47 +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" />
<text
xml:space="preserve"
style="font-size:70.2506px;display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:5.85283;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
x="17.586868"
y="151.34396"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
x="17.586868"
y="151.34396"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:5.85283;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers">Blocks</tspan></text>
height="59.111202"
x="53.418243"
y="142.98589"
ry="17.241886"
rx="17.241886" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -23,13 +23,13 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.1089995"
inkscape:cx="156.94646"
inkscape:cy="105.26318"
inkscape:zoom="1.4912878"
inkscape:cx="157.58192"
inkscape:cy="105.94869"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-height="1062"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-y="16"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
@ -39,20 +39,17 @@
inkscape:groupmode="layer"
id="layer1">
<path
d="M 92.238826,159.45038 28.682254,131.40693 v -9.17321 L 92.238826,90.521047 v 15.332133 l -43.768848,20.31188 43.768848,17.95318 z m 59.232184,-80.59236 -34.85785,93.5658 H 98.922101 l 34.857859,-93.5658 z m 6.29015,65.26022 L 201.53,126.16506 157.76116,105.85318 V 90.521047 l 63.55658,31.712673 v 9.17321 l -63.55658,28.04345 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"
aria-label="&lt;/&gt;" />
<text
xml:space="preserve"
style="font-size:80.9649px;display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.74548;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
x="26.789644"
y="155.36182"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
x="26.789644"
y="155.36182"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.74548;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers">Code</tspan></text>
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="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="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" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -9,11 +9,11 @@
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="delete.svg"
xml:space="preserve"
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
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
@ -23,44 +23,31 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.1089996"
inkscape:cx="143.19585"
inkscape:cy="105.73734"
inkscape:zoom="1.4912879"
inkscape:cx="126.06553"
inkscape:cy="197.81559"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-height="1062"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-y="16"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:current-layer="layer1"
showgrid="false" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:#000000;stroke:#c24c4c;stroke-width:25;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers;stroke-dasharray:none"
d="M 46.747597,203.2524 203.2524,46.747596"
id="path1" />
<path
style="fill:#000000;stroke:#c24c4c;stroke-width:25;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers;stroke-dasharray:none"
d="M 46.04027,46.040268 203.95973,203.95973"
id="path2" />
<text
xml:space="preserve"
style="font-size:75.9069px;text-align:center;text-anchor:middle;display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.32408;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
x="123.25411"
y="97.293968"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
x="123.25411"
y="97.293968"
style="text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.32408;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers">Delete</tspan><tspan
sodipodi:role="line"
x="123.2541"
y="192.17764"
style="text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.32408;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="tspan2">Sprite</tspan></text>
</g>
</svg>
id="layer1"><path
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: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:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect8"
width="113.62638"
height="113.63696"
x="68.186806"
y="69.037132"
rx="15.877564"
ry="15.877564" /></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -23,39 +23,40 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="1.4912879"
inkscape:cx="175.35179"
inkscape:cy="105.94869"
inkscape:zoom="2.1089996"
inkscape:cx="157.42061"
inkscape:cy="59.743966"
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="layer1-5"
showgrid="false" /><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="opacity:1;fill:#e5bbc3;fill-opacity:1;stroke:#8f6f6f;stroke-width:6.35868;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke fill markers"
id="rect1"
width="135.84476"
height="102.77511"
x="53.543674"
y="114.7028" /><text
xml:space="preserve"
style="font-size:44.8816px;display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.19148;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
x="44.483013"
y="187.12097"
id="text1"
transform="scale(1.0252876,0.9753361)"><tspan
sodipodi:role="line"
id="tspan1"
x="44.483013"
y="187.12097"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.19148;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers">Embed</tspan></text><path
style="display:inline;stroke-width:0.635868"><path
id="path7"
style="fill:none;fill-opacity:1;stroke:none;stroke-width:4.206;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" /></g></g></svg>
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: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: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:10.1739;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect8"
width="64.917007"
height="64.917007"
x="89.007545"
y="133.63187"
rx="10.096041"
ry="10.096041" /></g></g></svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -24,43 +24,24 @@
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.1089996"
inkscape:cx="156.47229"
inkscape:cy="105.73734"
inkscape:cx="124.22952"
inkscape:cy="151.73071"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-height="1062"
inkscape:window-x="0"
inkscape:window-y="22"
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"><path
id="path1"
style="fill:#6ccdff;fill-opacity:1;stroke:none;stroke-width:4.20627;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.220545,-53.22054 53.220539,53.220539 0 0 1 53.220545,-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:9.53802;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 124.42154,135.74034 c 0,0 2.45846,7.95839 2.39921,17.63744 -0.0825,13.47185 -2.46488,18.12022 -2.46488,18.12022"
id="path4" /><path
style="fill:none;fill-opacity:1;stroke:#002ead;stroke-width:9.53802;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 155.7168,195.71517 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" /><path
id="path7"
style="fill:none;fill-opacity:1;stroke:none;stroke-width:4.206;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.220545,-53.22054 53.220539,53.220539 0 0 1 53.220545,-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:9.53802;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 152.62846,136.89243 c 0,0 2.00155,7.95839 1.95332,17.63744 -0.0672,13.47185 -2.00679,18.12022 -2.00679,18.12022"
id="path2" /><text
xml:space="preserve"
style="font-size:74.3152px;display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.19147;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
x="51.832699"
y="192.24933"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
x="51.832699"
y="192.24933"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.19147;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers">Run</tspan></text></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>

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -23,15 +23,16 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.1089996"
inkscape:cx="156.47229"
inkscape:cy="105.73734"
inkscape:zoom="2.9825758"
inkscape:cx="156.24079"
inkscape:cy="106.61925"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-height="1062"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-y="16"
inkscape:window-maximized="1"
inkscape:current-layer="layer1-5" /><defs
inkscape:current-layer="layer1-5"
showgrid="false" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
@ -39,28 +40,21 @@
id="layer1-5"
transform="matrix(1.5726526,0,0,1.5726526,-66.023893,-136.20245)"
style="display:inline;stroke-width:0.635868"><path
id="path1"
style="fill:#ff6caa;fill-opacity:1;stroke:none;stroke-width:4.20627;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.220545,-53.22054 53.220539,53.220539 0 0 1 53.220545,-53.22053 53.220539,53.220539 0 0 1 53.22054,53.22053 z" /><path
style="fill:none;fill-opacity:1;stroke:#ad0000;stroke-width:9.53802;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 124.42154,135.74034 c 0,0 2.45846,7.95839 2.39921,17.63744 -0.0825,13.47185 -2.46488,18.12022 -2.46488,18.12022"
id="path4" /><path
style="fill:none;fill-opacity:1;stroke:#ad0000;stroke-width:9.53802;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 155.7168,200.31387 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" /><path
id="path7"
style="fill:none;fill-opacity:1;stroke:none;stroke-width:4.206;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.220545,-53.22054 53.220539,53.220539 0 0 1 53.220545,-53.22053 53.220539,53.220539 0 0 1 53.22054,53.22053 z" /><path
style="fill:none;fill-opacity:1;stroke:#ad0000;stroke-width:9.53802;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 152.62846,136.89243 c 0,0 2.00155,7.95839 1.95332,17.63744 -0.0672,13.47185 -2.00679,18.12022 -2.00679,18.12022"
id="path2" /><text
xml:space="preserve"
style="font-size:67.9807px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:5.66372;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
x="49.20261"
y="182.54169"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
x="49.20261"
y="182.54169"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:5.66372;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers">Stop</tspan></text></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>

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -23,13 +23,13 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2.1089996"
inkscape:cx="155.99813"
inkscape:cy="105.73734"
inkscape:zoom="1.4912879"
inkscape:cx="67.726694"
inkscape:cy="121.3716"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-height="1062"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-y="16"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showgrid="false" />
@ -40,23 +40,28 @@
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:#000000;stroke:#000000;stroke-width:25;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers;stroke-dasharray:none"
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:#000000;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"
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" />
<text
xml:space="preserve"
style="font-size:54.3163px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:4.5253;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
x="9.7408781"
y="145.36861"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
x="9.7408781"
y="145.36861"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:4.5253;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers">Variables</tspan></text>
<path
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:#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:#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:#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" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

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='https://blokkify.net/upload#section_project' target="_blank">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>

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 = '';
}
}

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;
}

File diff suppressed because it is too large Load Diff

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);
}
}

View File

@ -1,67 +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 () {
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;
}
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.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();
}
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);
}

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);
}

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));
}

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));
}