Workstation Not Rendering in Pizza

[stevekinney]

[stevekinney]

So, you know how you have to open like 4 tabs to get things rolling? When I went back to one of my other tabs after posting the above screen shot, it rendered.

But there was another issue: So, at the first station, you pull the empty plate down and put the dough on. Then you move to the next station and pull down the pizza. Theoretically, you should have a dough that your putting the sauce on, but it's just an empty plate again.

[stevekinney]

I just played it in Safari and the workstation rendered fine. So, whatever.

The bigger issues are as follows:

• There should be 4 pizzas up on that conveyer belt that can be worked on at any given time.
• When you pull down a pizza that has dough and sauce, you should see a pizza that has dough and sauce, not just an empty plate that you are putting cheese on.

I'm going to take a look at that graph issue now!

[ZeeJab]

I'm looking into the pulling down the pizza issue atm

[ZeeJab]

@stevekinney So I've been trying to figure this out... and there aren't any attributes in the html for the plate when you pull it down into the workstation, so I need someone with better js skills to put those attributes in to indicate the state (ie, "dough", "sauce", etc), just like we have it for the conveyor so I can style them with css.

[stevekinney]

@ZeeJab I'll look into this. Maybe @jugglinmike has some information that could point us in the right direction?

[jugglinmike]

I'm happy to implement the hooks as needed. I'll just need a little more info, @ZeeJab:

Right now, the workstaton has two elements: one container <div> for the toppings, and an <img> for the pizza. Currently, the image is an empty plate. You could make the pizza dynamic in one of two ways:

1. Dynamically re-set the src attribute for the <img> tag according to the state of the pizza
2. Swap the <img> tag for a <div>, dynamically re-set an HTML5 data-* attribute (say, data-food-state), and define CSS rules for the different values.

The only problem with #2 is that the browser will not re-size the container to fit the image content. You will likely need to emulate some of the built-in image behavior with background-sizing, which doesn't have the best browser compatibility but may be passable.

If you prefer #1, then I'll need the images first--open up a feature branch, let me know when they're available, and I'll work on top of that. If you prefer #2, then I'll open the feature branch and built out the markup changes with data-food-state so you can define the necessary styling at your leisure. Let me know which you'd like to do.

[ZeeJab]

@jugglinmike let's go with #1 I'll push a branch with the assets this afternoon.

Thanks! :-)