mapit

easy to use tool for Simcity Buildit at: http://vickailiu.me/mapit

Still in development, bare with the bugs. Using in chrome on desktops(PC/MAC/...) are recommended, currently not really cater for tablet/phone.

use instructions:

• Basics:
  • Add a building - drag & drop
  • During the dragging:
    • press "shift" key - rotate the building
    • press "space" key - place a build on the current position while continue dropping
  • Modify a building - right click on the building and use the toolbox to rotate or delete the selected building
  • Draw road:
    • click on the road icon from the menu, draw the road like using the MSPaint
    • hold "shift" key to draw straight roads
  • Erase building - click on the bulldozer icon from the menu
• coverage and boost
  • statistics bar shows the estimated population, number of houses, the need and the utility capacity
  • click on the toggle besides each type of buildings to see their coverage
  • click on the residence buildings to check individual building population estimation, total boost and boost breakdowns
• save and share
  • click on the share from the menu, copy the link generated and you can share your layout to friends
  • the layout will be automatically save to your computer whenever there is a change. So if by any chance that your browser is refreshed or restarted, you can try to recover it.

todos

Collaborations are welcomed! Do let me know what do you think about this tool or how it can be improved. Just drop me an Email at: [email protected] Here is my list of todos:

• Function wise

  • Intelligent placement of the buildings (e.g. placing it vertical/horizontal)
  • Rectangle selection of buildings on the canvas for modification/duplication

• Infrastructure wise

  • A layout gallery, maybe?

deployment instruction:

you can try it on your own machine for development

(TO BE COMPLETED)

I am using flask and reactjs for the work, so quite standard. As it is my first time trying reactjs, so there are stuffs that quite anti pattern, do bare with that.

credit:

Flask framework: http://flask.pocoo.org/

Reactjs: https://facebook.github.io/react/

Interact.js: http://interactjs.io/ where I see the possibility of creating this tool

Other resources: http://www.getmdl.io/, http://fezvrasta.github.io/bootstrap-material-design/, https://zenorocha.github.io/clipboard.js/, bwilsonvi's http://codepen.io/bwilsonvi/pen/VYygGz