diff --git a/latus.yml b/latus.yml index 6b95e50..2e56ffb 100644 --- a/latus.yml +++ b/latus.yml @@ -13,6 +13,7 @@ '@avocado/react': {} '@avocado/resource': { 'persea.controllers': [ + '@avocado/behavior/persea', '@avocado/graphics/persea', '@avocado/entity/persea', '@avocado/sound/persea', diff --git a/packages/core/src/components/persea/index.scss b/packages/core/src/components/persea/index.scss index b462d96..5113227 100644 --- a/packages/core/src/components/persea/index.scss +++ b/packages/core/src/components/persea/index.scss @@ -147,7 +147,7 @@ a { color: lighten($color-active, 20%); } -input { +input, textarea { background: #333; border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; @@ -155,6 +155,43 @@ input { padding: 0.5em; } +textarea { + overflow: hidden; + resize: none; +} + +.grow-wrap { + /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ + display: grid; +} +.grow-wrap::after { + /* Note the weird space! Needed to preventy jumpy behavior */ + content: attr(data-replicated-value) " "; + + /* This is how textarea text behaves */ + white-space: pre-wrap; + + /* Hidden from view, clicks, and screen readers */ + visibility: hidden; +} +.grow-wrap > textarea { + /* You could leave this, but after a user resizes, then it ruins the auto sizing */ + resize: none; + + /* Firefox shows scrollbar on growth, you can hide like this. */ + overflow: hidden; +} +.grow-wrap > textarea, +.grow-wrap::after { + /* Identical styling required!! */ + border: 1px solid black; + padding: 0.5rem; + font: inherit; + + /* Place on top of each other */ + grid-area: 1 / 1 / 2 / 2; +} + fieldset { background-color: #151515; border: 1px solid rgba(255, 255, 255, 0.1); diff --git a/packages/core/src/components/project/sidebar/img/script.png b/packages/core/src/components/project/sidebar/img/script.png new file mode 100644 index 0000000..8755c17 Binary files /dev/null and b/packages/core/src/components/project/sidebar/img/script.png differ diff --git a/packages/core/src/components/project/sidebar/index.scss b/packages/core/src/components/project/sidebar/index.scss index 1497756..3f5b51d 100644 --- a/packages/core/src/components/project/sidebar/index.scss +++ b/packages/core/src/components/project/sidebar/index.scss @@ -28,6 +28,9 @@ $sidebar-basis: 12rem; &.ImageComponent { background-image: url('./img/image.png'); } + &.ScriptComponent { + background-image: url('./img/script.png'); + } &.SoundComponent { background-image: url('./img/music.png'); } diff --git a/yarn.lock b/yarn.lock index 3bf9ad5..bcb8305 100644 --- a/yarn.lock +++ b/yarn.lock @@ -115,11 +115,13 @@ "@avocado/persea@^1.0.0": version "1.0.0" - resolved "http://npm.cha0sdev/@avocado%2fpersea/-/persea-1.0.0.tgz#818d2b04456d9e5f1ca797b314725b48259ffcbe" - integrity sha512-p4Ra3u9Q3ieWM/oKmDnGVaW8TMPfskX7KAm/Fnll31lNjvIJnC7/nJa18iPLrAxs99UQJI6ilE/XyF+EMOmYCw== + resolved "http://npm.cha0sdev/@avocado%2fpersea/-/persea-1.0.0.tgz#1a307b6c4b0d49db5295d2d1233773cd3c1c2f51" + integrity sha512-Hw9rcNR+yRMuVPCqJTGNbZY+nKZJDvGhDBnARjFtC8fnv4GfYSa+4HwpBi0qyuWHGKLjHYXO4UsB26nK3VZUlA== dependencies: "@latus/react" "^2.0.0" + ace-builds "^1.4.12" deepmerge "^4.2.2" + react-ace "^9.4.0" react-json-editor-ajrm "^2.5.13" react-modal "^3.12.1" @@ -2945,6 +2947,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7: mime-types "~2.1.24" negotiator "0.6.2" +ace-builds@^1.4.12: + version "1.4.12" + resolved "http://npm.cha0sdev/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7" + integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg== + acorn-jsx@^5.3.1: version "5.3.1" resolved "http://npm.cha0sdev/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b" @@ -4909,6 +4916,11 @@ dezalgo@^1.0.0: asap "^2.0.0" wrappy "1" +diff-match-patch@^1.0.4: + version "1.0.5" + resolved "http://npm.cha0sdev/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37" + integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw== + diff@5.0.0: version "5.0.0" resolved "http://npm.cha0sdev/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b" @@ -7684,6 +7696,11 @@ lodash.get@^4.4.2: resolved "http://npm.cha0sdev/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= +lodash.isequal@^4.5.0: + version "4.5.0" + resolved "http://npm.cha0sdev/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" + integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA= + lodash.ismatch@^4.4.0: version "4.4.0" resolved "http://npm.cha0sdev/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37" @@ -9802,6 +9819,17 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-ace@^9.4.0: + version "9.4.0" + resolved "http://npm.cha0sdev/react-ace/-/react-ace-9.4.0.tgz#5c68423b5c7d4bc9332fc8b651187799c0bc97f6" + integrity sha512-fpY3AGViE1OglXThgn3wZWcPoAxr0bqRYqeG3jY3m1L7OIHo0GfZ3bJI0grhrADDy2i9jQoip9xZfpOFupQCsw== + dependencies: + ace-builds "^1.4.12" + diff-match-patch "^1.0.4" + lodash.get "^4.4.2" + lodash.isequal "^4.5.0" + prop-types "^15.7.2" + react-autosuggest@^10.1.0: version "10.1.0" resolved "http://npm.cha0sdev/react-autosuggest/-/react-autosuggest-10.1.0.tgz#4d25b8acc78bb518eb70189bb96bcd777dc71ffb"