Describe FoodChain

[jrtechs]

I'm going to use this issue to document and coordinate my work for describing the FoodChain project for the HFOSS final project. People on this assignment:

• @jrtechs
• @iggyvolz
• @eza5640

Although we can get most of the stuff hashed out in this issue in an async fashion, I'm open to other forms of synchronous communication like Discord -- I believe @iggyvolz uses discord a bunch.

A good goal for this would be to get the description of this done by the end of the weekend so we can work on the implementation things starting next week Monday.

[jrtechs]

Basics

Code

The code for this project can be found here: https://github.com/llaske/sugarizer/tree/master/activities/FoodChain.activity

What is the game

This is a javascript sugar game that aims to teach kids the names of animals and the basics of the food chain: who eats who.

Running

I cloned and downloaded the main sugarizer activity and ran it. This activity is included in that project. However, it is possible to simply copy the foodchain activity and insert it into the HFOSS sugarizer-lite repo. I followed the main running instructions on the readme.

What this looks like

The goal of this activity is to sort the images by the order that they would get eaten in the food chain. So there is a click and drag component of this, there is also button GUI components. After you click the button it tells you whether or not you got the arrangement correct. There is also a sound component, as the images appear you hear a recording of their names.

Let's talk code

According to the documentation, this uses the Sugar web framework and the enyo framework.

Enyo

Enyo is a HTML5 framework that bosts itself at being cross-platform and fast. Like many javascript frameworks, this is used to make DOM manipulation easier. Although this does have some graphic components they are relatively simple -- svg drawing and canvas manipulation.

Sugar Web Framework

Although there is a framework called sugar framework, that is not the one being referenced by this project. That is a web framework for Elixir, this project is using the actual sugar web framework for sugar labs. The best reference I could find for this was the sugar-docs repository under the sugarlabs github org. https://github.com/sugarlabs/sugar-docs

[jrtechs]

I got most of the basic description done. Going into more details, we should break down exactly how the Sugar Web and Enyo frameworks are being used

[eza5640]

From what I was able to find and understand from the code, it appears that Enyo is utilized entirely as a baseline to help generate/manipulate the design and interactivity of the activity. It includes UI widgets, data storage and loading (both locally and on the server if you are connected), and the ability to create models (similar to a 'class' in other languages.) It appears as though Enyo is entirely used for back-end development. I was unable to find out exactly what Enyo is doing in the back-end, as the code is all minified to prevent readability and reproduction. All I could see was what Sugar used the Enyo code for.

The code for the actual graphics, HTML/CSS and JS are all contained within the sugar web framework. The framework provides the needs for generating objects, UI elements, etc. Using this framework, the developers were able to generate the content of the activity on top of the framework code, making it very easy for them to modify the design and UI aspects to fit the needs of this activity. Unlike Enyo, the sugar-web framework is all readable and is easy to tell what is occurring where. Most of the code I could find was basically their simplified version of what Enyo is already doing to simplify things for them.

[jrtechs]

The last thing we need to do for this issue is to transfer this information to the hfoss folder in this repo. I can quickly do that but I'm going to let @eza5640 or @iggyvolz take lead on this. LMK if you two can't get to this today.