Split flappy.svg into multiple files

[niccokunzmann]

Problem Currently, all layers are in flappy.svg. This causes the following problems:

• Merge conflict when two people edit the flappy.svg at a time
• Not obvious what was changed, hard review
• A huge file, maybe too big to edit for tome people
• Always you edit all layers when saving -> Could be problematic if we add animations or custom SVG code

Solution Split the flappy.svg file into several files. SVGs can be embedded in SVGs, so no problem there.

• for each layer create a svg file
• embed each layer into the flappy.svg e.g. using JavaScript

Comment if you want to do this and please outline a plan on what your solution looks like. Change is hard once coding began, so the plan should be good first.

[Cepe6]

I would like to solve this issue. My plan consist of the following points:

1. Create folders to contain the specific layers:

   • characters/ will contain the layers of all the characters in the game
   • environment/ will contain the layers of all the backgrounds of the game - environment/obstacles/ will contain the layers of all the obstacles in the game
   • basic_layers/ will contain the basic layers such as: startscreen, scoring_board etc.

2. Move all of the layers to their specific locations

3. Leave flappy.svg only with the border of the game

[niccokunzmann]

Sounds good to me. Please go ahead.

[Cepe6]

I forgot to mention that I will place all those folders in one folder layers/ if that is ok

[niccokunzmann]

If you do not modify flappy.svg but add flappy2.svg, and index2.svg, we can have several merges and people helping you on the gh-pages branch.

[niccokunzmann]

I forgot to mention that I will place all those folders in one folder layers/ if that is ok

Sure.

[Cepe6]

OK I will not modify it then :)

[niccokunzmann]

@Abhi2424shek Have a look here, what do you think?

[abishekvashok]

@niccokunzmann we could make the use of JavaScript as you mentioned. I think there is a JavaScript library for that, but we could easily do it without it too.

Do you want me to open up my terminal :)

[niccokunzmann]

This issue is important for our high-quality workflow^^. So, if you have some more suggestions of how to solve it, I would like to read your pull-requests. The idea: It makes it easier to review pull-requests, undo them and harder to make mistakes in the flappy.svg file.

[abishekvashok]

Give me some time I got a n exam tomorrow and it's the last and the most tough so I would do a PR after that can you give me that much if time plz.

If yes expect a PR from me in 6 hours.

[niccokunzmann]

@Abhi2424shek You have all the time you want and you do not need to do it. I wanted to point you here because you may like the challenge.

[abishekvashok]

I am on it then @niccokunzmann got this one.

[abishekvashok]

@niccokunzmann got a tidy fix but that would be a big change shall I go on, I would need to work arround maybe whole of the javascript in the site, so I taught I should ask your permission to submit a massive change on!

[niccokunzmann]

Please commit the change to the flappy2.svg file.

[niccokunzmann]

When all works, we just move it.

[niccokunzmann]

I do not have much time today.

[abishekvashok]

@niccokunzmann I won't finish it today but it sure that I will learn a lot!

[abishekvashok]

@Cepe6 could you see issue #228

[jayvdb]

@Cepe6 could you see issue #228

Is #228 still needed?

@niccokunzmann , was this issue completely fixed in https://github.com/fossasia/flappy-svg/pull/227 and https://github.com/fossasia/flappy-svg/pull/231 ?

[abishekvashok]

Nope we need to fix the JavaScript as well @jayvdb since labels can no longer be used

[abishekvashok]

This is the progress. We have splitter the characters and backgrounds and made them to be embedded inside a particular page, now the JavaScript needs refraction, the major problem is that the label tag can no longer work instead we should use id's. The flappysvg2 is the effort. So thing we should do to solve this issue is only to refractor JavaScript.

[hkveeranki]

@niccokunzmann @abishekvashok what refractor are you speaking about?

[abishekvashok]

@harry-7 pls refer the code, we have successfully split the svg file into multiple svg files and included them in an html file. But the code would need some refractor, currently the indetifiers used has become nested and therefore those indetifiers parts need a refractor.