Improvement: use sprites for loading the images

[qgustavor]

When the images are being loaded the recipes are shown incomplete, using sprites it can be loaded faster. Also improving bandwidth use by allowing a lower quality version of the images for non-retina screens.

[ProfChaos]

I'll start working on it right away

[qgustavor]

I'm posting a commit soon with some changes on the HTML, Javascript and folder organization:

• HTML:
  • Put scripts on the bottom, to make it seem that load faster;
  • Make the javascript have it's own file, so it's easier to edit and debug;
• Javascript:
  • Put all the code on a anonymous function, minimizing globals, then making the code faster and better to minimize. If you want to debug a variable use breakpoints, debugger or make the variables you're debugging global.
  • The code is now passing on JSHint;
• Folders:
  • Each thing on this folder, like HTML5 Boilerplate.

[ProfChaos]

Sweet! I was planning to clean the code a bit and comment it.

[qgustavor]

qgustavor@3bee0bf

My commit still have a problem: sometimes when I click the content disappears.
I'm trying to clean the code to make debugging easier.
How about...

• ... changing the responsible behavior from javascript to CSS?
• ... using to render blocks instead of using renders of the images, with CSS sprite sheets as fallback?
• ... use a custom terrain.png/items.png to make it load faster
• ... prepare website for internationalization (but it's a dilemma for me: my website, for example, it's not).

Also, is there better ways to store item and crafting data? Find a way to stop storing some integers as strings?

Edit: after this big commit, for now only small commits.

[ProfChaos]

• changing the responsible behavior from javascript to CSS?

Almost all of the responsive behavior is CSS, but some is not. Like the hiding and showing the item list, hiding the crafting table and vice versa.

If you know of a better way to do it, go for it! I might learn something!

• using to render blocks instead of using renders of the images, with CSS sprite sheets as fallback?

using what to render blocks? I was looking for sprite sheets for minecraft. Might have to make my own.

• use a custom terrain.png/items.png to make it load faster

Sounds good

• prepare website for internationalization (but it's a dilemma for me: my website, for example, it's not).

For the items as well as all the static text?

• Also, is there better ways to store item and crafting data? Find a way to stop storing some integers as strings?

I guess we could change it to floats from 5-1 to 5,1, or nest it as a sub array somehow?!

[qgustavor]

So change all responsible behavior to CSS, I don't saw any @media query on the CSS so I think you're talking about bootstrap responsible css. You can use bootstrap helper classes to hide then, or make your own.

All images are renders, so as the game pick a texture and make it a block let's do the same, so we can reduce the size of some images to their original size. Some blocks that need special rendering can use a separate space on the spritesheet.

Minecraft is internationalized, so, at least, it can use the block names from the game languages. I'm don't play on my native language, but I know people that play, and there's a huge difference between the original and the translated name for some blocks.

I will make some tests for each one, first the hidden button bug, that's annoying me, then the spritesheets.