POC: add a sprite

[aquino-luane]

What this PR does?

Adds a sprite to library:

Reference: https://gist.github.com/summerscar/586b88772c598efdbfecffa3c1212b79

How to setup mock API?

We are using Mockoon for API mock
Here are the files you need to set the mock API:

• route-get-image.json
• 60f720956ab1840431dcf0616ce98f14.svg

Link to drive: https://drive.google.com/drive/folders/1ASWqP-JZXjmFqD_akaFnZ5IdqY4hKGRQ

To import the route to Mockoon, you copy the contents of the json file, then in Mockoon you select from the menu Routes>Add routes from clipboard
https://mockoon.com/docs/latest/mockoon-data-files/environment-clipboard-copy/#create-a-new-route-from-clipboards-data

After you import the route, you need to update the file path to point to the image you downloaded:

[hissy]

Thank you very much.

Could you find the difference between costumes and sprites? Must we create both json files?

Also, can you update this PR to get json data from a mock API?
If you can, we can create a sprites database on the Concrete CMS side.

[aquino-luane]

Could you find the difference between costumes and sprites?

It is a good question 😄. The difference is small:

• if you are in the "Costumes" tab and select a costume you can stay in the same place, but if you select a sprite you go to "Code" tab
  
• costumes.json is what is shown in here:
  
• you can keep a list of customized sprites
  

Must we create both json files?

sprites.json is needed. If we don't need the functionality to choose costumes then we don't need to create the costumes.json file

---

while I was searching about what you asked, I found that when I select Neko from the costumes, it is giving this error. I will investigate

@hissy

[aquino-luane]

Also, can you update this PR to get json data from a mock API?
If you can, we can create a sprites database on the Concrete CMS side.

@hissy do you mean an API to return sprites.json?
would we still download the sprite by requesting it by its md5 id like http://localhost:3000/image/${asset.assetId}.${asset.dataFormat} ?

[hissy]

@aquino-luane

do you mean an API to return sprites.json?

Yes.

would we still download the sprite by requesting it by its md5 id like http://localhost:3000/image/${asset.assetId}.${asset.dataFormat} ?

Yes.

Please check this sequence diagram, this is what I thought about loading sprites

https://cacoo.com/diagrams/nfYGhe7SZMAEv6sh/699AB

[aquino-luane]

@hissy
It seems to have no way to download the json and save to a specific location, because security reasons the file can only be saved into the downloads folder https://spin.atomicobject.com/create-export-react-frontend

The other way would be to save the json in redux. As it might be a big file, I am not sure if is good way, what do you think?

Will there be frequent update in the sprites and costumes? is it an option to keep the file locally without the request to server?

[hissy]

@aquino-luane

The other way would be to save the json in redux. As it might be a big file, I am not sure if is good way, what do you think?

I think there's no problem. sprites.json is not small, but the same size will be removed from the built JS file.

Will there be frequent update in the sprites and costumes? is it an option to keep the file locally without the request to server?

If API returns json data with cache-control header, your browser will keep it locally.

[aquino-luane]

@hissy I committed the code to get json from API, could you review please?

Also uploaded the routes and files to drive:
route-get-sprites.json
route-get-costumes.json
costumes.json
sprites.json

[hissy]

@aquino-luane

Thanks, it looks fine for now. Let's wait for the API doc.

[hissy]

Please change to get from the APIs instead of mock APIs.
Please check the design doc.
https://docs.google.com/document/d/1m8f_VfWhc2BbnyFnzLbr4iE4WsF2NjJ-uiD8b1_P6wY/edit?usp=sharing