ElementalCode / elemental

A drag and drop block-based coding environment for front-end web technologies.
http://elementalcode.herokuapp.com
35 stars 10 forks source link

Rework Blocks Code #248

Closed mrjacobbloom closed 7 years ago

mrjacobbloom commented 7 years ago

I guess we're back at it! Copied from forum:

Something I never loved about how Elemental was structured was that the code that makes blocks is kinda flimsy (no offense FD), like a block is just some HTML elements with some event listeners on them. Compare it to Blockly, which has gorgeous constructors and blocks are actual objects. I'd love to overhaul the blocks if we're picking this back up

The issue was probably that the dragging was developed first and I made the dragging too tightly coupled to the actual parsing logic… I might be interested in refactoring it actually stream of consciousness stuff

have some data structure to keep track of blocks maybe a dict/hash map with md5 hashes correponding to block ids and then ondragcomplete on the block update the position and (if applicable) where it is in a given block stack, relative to a specific preceding id that way the dragging would just be a way to modify the internal structure instead of having the external structure be the defining data somehow store block stacks in possibly another dict/hash map with keys of the id of the top block so that way we can combine stacks and stuff

iamunknown2 commented 7 years ago

NP. Just don't get stuck in the Hurd loop:

Good Code

iamunknown2 commented 7 years ago

Also, it's probably going to be a pretty annoying task, considering that we've even built a tutorial on top of Elemental already.

mrjacobbloom commented 7 years ago

I'll make an effort to keep the HTML working exactly the same way, then the tutorial should continue to function. And worst case I can rework them too

mrjacobbloom commented 7 years ago

I'm working on this

benajaero commented 7 years ago

Just a question: Why not just use blockly?

mrjacobbloom commented 7 years ago

'cause I'm having too much fun doing it myself also see #26

BookOwl commented 7 years ago

also see #26

pls don't i was so immature and ridiculous.

mrjacobbloom commented 7 years ago

lots of progress on this, it's still partially-done but I'm excited

mrjacobbloom commented 7 years ago

also see #26

pls don't i was so immature and ridiculous.

😈

BookOwl commented 7 years ago

hey, I was 14. 'nuf said

matthewr6 commented 7 years ago

What but you said you're 17 now

also I was also... different :P

BookOwl commented 7 years ago

it was a couple months before i turned 15

or I was 15 and I just can't count :P

matthewr6 commented 7 years ago

To be 17 now you were 16 by 4/11/2016 and 15 by 4/11/2015 :P

iamunknown2 commented 7 years ago

Srsly though, wouldn't it be much faster if we just used Blockly? They even have a block-making web interface! Edit: I've already made the h1 and text blocks in Blockly (took me about an hour to understand how Blockly works by going through docs and stuff, but development will be pretty quick after you go through the docs and get a brief understanding of how everything works). Will push the code to GitHub later. It's here. The page can be found here (case sensitive, / needed at the end for some reason)

matthewr6 commented 7 years ago

But it's fun

BookOwl commented 7 years ago

And Elemental's blocks look better.

matthewr6 commented 7 years ago

Thanks to... @PullJosh I think

iamunknown2 commented 7 years ago

Can't we reskin the Blockly blocks?

Seriously, I think Blockly is the way to go here.

mrjacobbloom commented 7 years ago

But I'm having fuuuuun and I'm most of the way done anyway

iamunknown2 commented 7 years ago

I can probably finish most of the blocks very quickly (most of the blocks follow a similar template).

matthewr6 commented 7 years ago

fun though

iamunknown2 commented 7 years ago

fun

We should do things the easiest and most standard way possible, not the most fun way possible. Plus, aren't we sort of violating DRY (don't repeat yourself) when we re-invent the wheel when we could just use the wheel somebody has already invented?

mrjacobbloom commented 7 years ago

I already have all of the blocks working fully, right now I'm working on file i/o

mrjacobbloom commented 7 years ago

We should do things the easiest and most standard way possible, not the most fun way possible. Plus, aren't we sort of violating DRY (don't repeat yourself) when we re-invent the wheel when we could just use the wheel somebody has already invented?

I feel like one of the unstated goals of this project was to have fun building it, if we wanted to do everything the most efficient way we would've started with a website template and Blockly and we never would've attempted a backend, but I also would've abandoned the project far sooner because building something from the ground-up is a lot more fun

iamunknown2 commented 7 years ago

I feel like one of the unstated goals of this project was to have fun building it

Citation needed

If our goals of the project were to have fun building it, maybe we should have built our own browser to implement our site in machine code from the ground up.

Also, do you have any specs for your implementation of the object system so we can all use it?

PullJosh commented 7 years ago

have fun

machine code

iamunknown2 commented 7 years ago

have fun

machine code

Hey, but your idea of fun is writing stuff from the ground up...

mrjacobbloom commented 7 years ago

Let's stop squabbling and take it to a vote: React 👍 for Blockly React 👎 for #249 React ❤️ to keep the current system

matthewr6 commented 7 years ago

Go ahead and finish the PR before writing specs because there's probably still potential for change :P (assuming #249 is what we go with)

Also I really don't want to keep the current system because that stream-of-consciousness post I made caused me to realize the flaws the current system has... which would pretty much require a rewrite

The vote will provide the citation you request so I guess that works

also blockly is ugly and I can't find how to restyle it

TheInitializer commented 7 years ago

I can't react because mobile but

Fun

iamunknown2 commented 7 years ago

also blockly is ugly and I can't find how to restyle it

It took some fiddling, but once I figured that the styling was put in blockly/core/css.js and the constants were put in blockly/core/constants.js, I put a white border around every block, changed the saturation and value of the CSV (which is hardcoded to keep things consistent, apparently) and changed up the background colors to create something like this:

Elemental in Blockly

The menu bar looks awful, but it's an improvement.

BookOwl commented 7 years ago

still looks ugly. (no offense to you, but blockly is inherently ugly, and unless you do something like scratch-blocks we can't do much about it.)

benajaero commented 7 years ago

But you can style blockly anyway you want. Like scratch-blocks did

BookOwl commented 7 years ago

But if we have to go to all that trouble just to get OK looking blocks it would be easier to just keep what we already have.

benajaero commented 7 years ago

I understand it requires work but think about it.

Blockly gives you everything you need but only requires that you style it. I personally think the benefits outweigh the cons.

matthewr6 commented 7 years ago

anyway [sic] you want

not as far as we've seen

we've pretty much decided to go with #249 based on the vote of past and current contributors

TheInitializer commented 7 years ago

Fun

mrjacobbloom commented 7 years ago

closing since #258 was merged