leopard-js / sb-edit

Javascript library for manipulating Scratch project files
MIT License
50 stars 13 forks source link

Cannot read properties of undefined (Reading "0") #85

Closed Erisfiregamer1 closed 1 year ago

Erisfiregamer1 commented 1 year ago

Title, this error is causing me hell when trying to convert a friend's project using Leopard. I tracked the error down to an IO library in the converter. The exact error spot is sb-edit/src/io/leopard/toLeopard.js:927. Full error (Glitch.me, running project Colorlens by Yuski347):

/rbd/pnpm-volume/c3f6456c-ea9a-4017-ae1c-18ff3b9a1c5b/node_modules/sb-edit/lib/io/leopard/toLeopard.js:927 })[0] ^ TypeError: Cannot read properties of undefined (reading '0') at /rbd/pnpm-volume/c3f6456c-ea9a-4017-ae1c-18ff3b9a1c5b/node_modules/sb-edit/lib/io/leopard/toLeopard.js:927:19 at Array.map () at _loop_1 (/rbd/pnpm-volume/c3f6456c-ea9a-4017-ae1c-18ff3b9a1c5b/node_modules/sb-edit/lib/io/leopard/toLeopard.js:921:93) at Project.toLeopard (/rbd/pnpm-volume/c3f6456c-ea9a-4017-ae1c-18ff3b9a1c5b/node_modules/sb-edit/lib/io/leopard/toLeopard.js:949:9)

towerofnix commented 1 year ago

I'm working on a fix for this. It's mostly boiling down to the sb3 including multiple "for this sprite only" variables of the same name (within the same sprite):

export async function fromSb3JSON(json: sb3.ProjectJSON, options: { getAsset: GetAsset }): Promise {
  function getVariables(target: sb3.Target): Variable[] {
    if (target.name === 'Green') {
      console.log(target.variables);
      process.exit();
    }
{
  'E3Of/NR#3]0u6/x!!xm|': [ 'P#', 3 ],
  'g;zPnx=R}.g@(qu{kupn': [ 'State', '0' ],
  '=0#S.sk9B*6c;27Fhe%?': [ 'X', 15 ],
  'fKP9`z}]nI=I`I#%M_*x': [ 'Y', '0' ],
  'jxUJ+O`*7p8@bujnGtQ4': [ 'Direction', '-1' ],
  'wBW6{d{urO:q]}1.u7*Y': [ 'Frame', 93 ],
  'H;8IV6GcA(r[sGE(kLN6': [ 'X speed', 0 ],
  'I-Uk#2,4v4{6Cdq/1`MB': [ 'Y speed', '0' ],
  'C8W_6n?1%6J2aE#onb1:': [ 'i', '1' ],
  '^~=F7V_K6*;lE6-:_/uc': [ 'length', 13 ],
  '5cF6j]4Gstw4~/oqb)NG': [ 'part', '0' ],
  'Kgm,MRLrWUZR~=gR7K4l': [ 'p', 3 ],
  'wurNL9E5{.%?.DqyM6(~': [ 'touching?', '0' ],
  'nYdR29x)Rv4wQ_Fo5wYf': [ 'h', 3 ],
  'jcQQaM0CYDk)QamPq:?T': [ 'HX', 15 ],
  'ySnm=xq;0X6beH%_*W8e': [ 'HY', 0 ],
  '*4N[Juz,lCTWS-noWl-2': [ 'HX size', 0 ],
  '{~r3EI|F!T9yW;cr!Hkz': [ 'HY size', 0 ],
  'DF81}OvNEFbaG-P;D*+q': [ 'Health', '100' ],
  '7Ep%_%(uL^Q.[c.VD@cH': [ 'H damage', 0 ],
  'e^3po#lO?7dPbvtHR-P)': [ 'P#', 0 ],
  '6fTL@K9t!c7,T?WGPHgI': [ 'State', 0 ],
  'f:eC[a=8Rv*4wvNP6wRm': [ 'X', 0 ],
  '.|pZBuHg.e;llv:{U21C': [ 'Y', 0 ],
  '`[5u.bzU`ja[HB7R5|Pn': [ 'Direction', 0 ],
  '+[:E{OR=4uR1BRsAat{k': [ 'Frame', 0 ],
  '(7ugHPeZi!^Yc8O8DOCL': [ 'X speed', 0 ],
  'o1F#PP3?L[@wEkOx^|RP': [ 'Y speed', 0 ],
  'edpV;4+DT])6T#rT9EU,': [ 'i', 0 ],
  ')eM6cmXPL,/(.cgt|Hg9': [ 'length', 0 ],
  'W|Sb?q@UcZU9bTqo|mWI': [ 'part', 0 ],
  'sy3ixQP`L}tv30:`FWbg': [ 'p', 0 ],
  '[`o84exyPm0dixT_6.TS': [ 'touching?', 0 ],
  'ptR4;|W-;pcw;Q=6Ro[`': [ 'h', 0 ],
  'qIB`rNH|]%3a#)EKG*z8': [ 'HX', 0 ],
  'x:)WxI}(]Ppg2XEwX7cP': [ 'HY', 0 ],
  'lx+(8-/qU0IFeOSlnHKG': [ 'HX size', 0 ],
  '|rfB~v+09Jlx12eFQ,#A': [ 'HY size', 0 ],
  'Rb95va)q{bPGgqUPFodJ': [ 'Health', 0 ],
  '{.G]vrA|=c3Y6BGp}4nV': [ 'H damage', 0 ],
  'Spb^9?]0bW,}9uis}IC?': [ 'impact', 0 ],
  '`bB=d7mdtd,56nJRWzr2': [ 'P#', 0 ],
  '+vnhZ7Rl4.C5:Gi)Cq9?': [ 'State', 0 ],
  'K7i*_h*IuyEm8-/{zpE]': [ 'X', 0 ],
  '2qX8pq[MNdweh8DkdY5D': [ 'Y', 0 ],
  '9hs5hpP{zMysm*86vxV`': [ 'Direction', 0 ],
  '|s|K`^(8/:P@l37GreN~': [ 'Frame', 0 ],
  'LoeTepXFf[pAex:^~Rm#': [ 'X speed', 0 ],
  'wza8E6gboTQEBr;r#SC8': [ 'Y speed', 0 ],
  '7Mpr18Qj_}o+0Sbm@^y)': [ 'i', 0 ],
  'H}1|t^J-Jt4HobQ5plh/': [ 'length', 0 ],
  't=_vN?.Oq_m^2VOAt4b[': [ 'part', 0 ],
  'p:`[ZH.ZOT4q}z$io?y(': [ 'p', 0 ],
  'L-%4$3G8Ua+|/ZntQ9{1': [ 'touching?', 0 ],
  ']rPuQ!6~lR5:_R@[aIbn': [ 'h', 0 ],
  'H/uH]O-8q{[t*`@mRwNP': [ 'HX', 0 ],
  'by0laHvm3Qm$RtYsg1Eo': [ 'HY', 0 ],
  'G7%J7nh`7iIDM]$sMKIJ': [ 'HX size', 0 ],
  'pZhW1WX!Q*#e0G90c.aR': [ 'HY size', 0 ],
  'v~M:J2Q$58d]qHc*akbU': [ 'Health', 0 ],
  'ICU!(=q+?(FEfRI!u.FU': [ 'H damage', 0 ],
  'QpLle8fjZvefO:1NP@Pf': [ 'impact', 0 ],
  'ppxHoYcZT?bTG!ovIu5e': [ 'Commands', 0 ],
  'syT2Po@EJ[b[}nN#Ubb?': [ 'command', 0 ]
}

Scratch displays these as though there's only one variable of each name.

This probably has to do with dropping code in from another sprite with same-named sprite-local variables.

towerofnix commented 1 year ago

It's probably possible to just figure out which variable would be used and discard the rest (ex. maybe only the first definition of a variable is ever used in any case) but I don't really feel comfortable making an assumption about Scratch like that. I'm going to see if it's possible to support variables of the same name within sb-edit, then do a more intelligent sweep to only remove 100% unused (duplicate) variables in the toLeopard conversion.

Erisfiregamer1 commented 1 year ago

Can you give a timeline on when this will be fixed? My friend does want to convert his game, and I'll keep up with the bugs.

towerofnix commented 1 year ago

I've got most of the bugs fixed now — I'm working on some runtime issues (in other words, the project is converting to Leopard without any issue, but the actual behavior isn't working 100% yet).

I'm not in charge of the Leopard website or the way that repositories work together, so once I get everything working, would it be OK if I just send you a zip file of the Leopard output? You can also run off of my sb-edit branch (looks like you've already figured out most of how to get Leopard working locally). It just may take a while longer before the fixes get actually pushed to the online Leopard website.

Erisfiregamer1 commented 1 year ago

I'll just run the local Leopard instance. Give me some time to figure out how I'm going to run your sb-edit branch with it. (Thankfully I have Cloudflare R2)

towerofnix commented 1 year ago

No problem. Here's a build of the project in Leopard — I'll have the sb-edit and leopard PR's open soon. If you decide to run sb-edit locally (e.g. because of further changes to the game), you might want to grab the index.html file from this zip anyway: I customized it to look a little nicer for a standalone game!

(16 MB) colorlens.zip

Erisfiregamer1 commented 1 year ago

My friend will be very happy about this once I get it running on Glitch. :D

Erisfiregamer1 commented 1 year ago

UPDATE: Oh god, it's broken, it's broken as fuck. I'm using Leopard from unpkg and it's not working at all ;(

https://zircon-incongruous-tarascosaurus.glitch.me (Project link)

UPDATE 2: The errors stem from this.compare not being defined. Is this because I'm not using your Leopard :/

towerofnix commented 1 year ago

Yeah. Um, I assumed index.esm.js got automatically bundled into the output directory, which... it deffo does not! Oops.

Here's mine for now: dist.zip

Erisfiregamer1 commented 1 year ago

Time to run the sed command again. Fun :D Thank you for being patient with me by the way.

Erisfiregamer1 commented 1 year ago

Okay, it works now! But the font broke. Help? And there's a new error, walking back with any character throws it:

Uncaught TypeError: Cannot destructure property 'text' of 't' as it is undefined. at V._renderBubble (index.esm.js:23:33728) at new V (index.esm.js:23:33452) at X._getSkin (index.esm.js:23:37479) at X.renderSprite (index.esm.js:23:41928) at X._renderLayers (index.esm.js:23:39747) at X.update (index.esm.js:23:40474) at J.render (index.esm.js:23:50620) at J._renderLoop (index.esm.js:23:50870)

towerofnix commented 1 year ago

No problem!

Okay, it works now! But the font broke. Help?

What browser are you working with? In Chrome the costume fonts seem to render correctly for me. There may be browser differences, that's why I'm pointing you to try Chrome if you're on another browser.

Also, that's weird. I don't see that error at all on my end. It looks like it has to do with speech/thought bubbles, which I don't think the project uses at all?

Erisfiregamer1 commented 1 year ago

Chromebook :/

The project URL (if you want to test it, maybe?) is https://zircon-incongruous-tarascosaurus.glitch.me/

towerofnix commented 1 year ago

Dang, no issues at all for me running yours — just the same as when I run it locally.

Can you tell me what version of Chrome OS you're using?

Also, I feel like it's just the last 5 years or so that's formed a new generation of young people programming on Chromebooks (usually gotten for school I'm guessing?). You guys are inspirational, and brave :P

Erisfiregamer1 commented 1 year ago

ChromeOS 109. I also have access to a 103 chromebook (It hit AUE, it's my school loaner LMAO) and it has the same problems...

towerofnix commented 1 year ago

Oh, actually, sorry for the confusion here ^^;; I spent so much time looking at the version of Colorwell that loaded through Leopard that I didn't realize the fonts weren't loading in correctly.

Colorlens main menu; logo and buttons all use serif font

It turns out we just don't support fonts in SVGs yet. See leopard-js/leopard#107. Sorry for the inconvenience! You'll have to make a remix with these costumes converted to bitmap if you want the fonts to show (they'll look a little pixelated, but until we add proper font support, that's probably the best you can do).

By the way, my Leopard and sb-edit pull requests are open now. See #90 (sb-edit branch compat on my fork) and leopard-js/leopard#157 (leopard branch compat-support on my fork). I use sb-edit-playground as a straightforward utility to make linking sb-edit and leopard easier, just see the README there (as long as you're familiar with the command line, assuming glitch.me gives you CLI access).

As for the "cannot destructure" issue, I looked around the code path leading there, and it seems like some sprite's costume is being set to undefined. That generally shouldn't be happening. Since I can't reproduce it, I'm guessing it's an issue with loading the costume files on your device — since we're both using basically the same web browser, maybe Glitch.me had a temporary caching issue. Can you try clearing your cached images and files (just make sure to deselect your history and other settings!!), then opening your glitch.me link again? Alternatively you could try putting the built files on a different host, like GitHub pages.

Erisfiregamer1 commented 1 year ago

I've been getting hard-ratelimited by Glitch because of the SVGs, so Github will have to work I suppose.Can't wait to show my friend once it's all working- Wait, I found more bugs!- Player selection name (P1/P2 above the character telling you which is which) is missing- Settings back button causes the project to crash- Settings sliders all go 1-100 (I just want to be able to use my developer mode :[[[[)

towerofnix commented 1 year ago

In the version I uploaded, I hid those — Leopard doesn't support resizing monitors or positioning them properly when the display canvas is bigger than the actual stage area (e.g. a 480x360 screen showing on a 960x720 webpage view).

You can enable them by searching for .visible = true; and uncommenting the relevant lines. See MainMenu.js, under *whenIReceiveCharacterSelect() { ... }, around line 350.

The variable watchers should show up when they're supposed to, but they won't be positioned quite right if your screen isn't super low resolution. :P

Yeah, I spotted your report on that (https://github.com/leopard-js/leopard/issues/156). I'll check both of these out this afternoon if I can!

towerofnix commented 1 year ago

This isn't a crash (no error), it's just a slight difference in the order Scratch and Leopard work with clones. In the "main menu" receiver, you broadcast "delete all clones" on the same frame as you create the new main menu clones. In Scratch, only the clones which existed at the time of the broadcast receive the message (and thus get deleted). In Leopard, everything extant on the next frame responds to the broadcast — including the ones which were just spawned! That's a compatibility issue, so I'll have a lookie at getting it resolved.

towerofnix commented 1 year ago

And there's a new error, walking back with any character throws it:

Uncaught TypeError: Cannot destructure property 'text' of 't' as it is undefined. at V._renderBubble (index.esm.js:23:33728) ...

While I couldn't reproduce this in your project myself, I found another project with a similar issue. I opened a PR fixing that one (leopard-js/leopard#160), which will hopefully fix your project as well — it turned out to be a compatibility issue instead of failed costume loading.

Erisfiregamer1 commented 1 year ago

And there's a new error, walking back with any character throws it: Uncaught TypeError: Cannot destructure property 'text' of 't' as it is undefined. at V._renderBubble (index.esm.js:23:33728) ...

While I couldn't reproduce this in your project myself, I found another project with a similar issue. I opened a PR fixing that one (leopard-js/leopard#160), which will hopefully fix your project as well — it turned out to be a compatibility issue instead of failed costume loading.

Don't you hate it when stuff like that happens? Ah, whatever, can't complain- you've been really helpful in getting my friend a converted JS project. Now all I have to do is wait for your PRs to be merged...