habitica/website/client
Keith Holliday e9141ff5c9 New client flurry of fixes (#8973)
* Fixed login/reg styles and on submit

* Fixed duedate display in yesterdailiy modal

* Prevented tutorial from showing after logged in has past created

* Hide premium shirts from creating

* Fixed level up notification

* Updated categoires

* Updated justin message

* Fixed notification changes

* Fixed guild nav in join guild modal

* Added buygems modal

* Removed avatar page click

* Fixed group plan nav

* Fixed death issue

* Fixed party header styles
2017-08-21 13:28:27 -06:00
..
assets New client flurry of fixes (#8973) 2017-08-21 13:28:27 -06:00
components New client flurry of fixes (#8973) 2017-08-21 13:28:27 -06:00
directives [WIP] multiplefixes for items / equipment / stable (#8938) 2017-08-13 18:18:46 +02:00
filters Client Tasks (#8889) 2017-07-22 20:30:08 +02:00
libs [WIP] Client/multiple fixes shops (#8956) 2017-08-16 16:34:25 -06:00
mixins New client party tutorial (#8968) 2017-08-21 09:36:31 -06:00
store New client flurry of fixes (#8973) 2017-08-21 13:28:27 -06:00
.babelrc Client: Header & Menu & Icons (#8770) 2017-06-08 12:04:19 -07:00
.eslintrc Client: Header & Menu & Icons (#8770) 2017-06-08 12:04:19 -07:00
app.vue New client flurry of fixes (#8973) 2017-08-21 13:28:27 -06:00
index.html New client random catchup (#8891) 2017-07-25 08:24:40 -06:00
main.js New client edit avatar (#8955) 2017-08-16 15:51:48 -06:00
README.md minor text fixes: accurate flavour text for Golden Knight testimonies collection quest, etc (#8826) 2017-06-26 22:35:29 +01:00
readme.md minor text fixes: accurate flavour text for Golden Knight testimonies collection quest, etc (#8826) 2017-06-26 22:35:29 +01:00
router.js new client router changes: rename guild.vue to group.vue and GuildPage to GroupPage (#8957) 2017-08-21 08:49:47 +10:00

#Running

  • Open a terminal and type npm run client:dev
  • Open a second terminal and type npm start

#Preparation Reading

  • Vue 2 (https://vuejs.org)

  • Webpack (https://webpack.github.io/) is the build system and it includes plugins for code transformation, right now we have: BabelJS for ES6 transpilation, eslint for code style, less and postcss for css compilation. The code comes from https://github.com/vuejs-templates/webpack which is a Webpack template for Vue, with some small modifications to adapt it to our use case. Docs http://vuejs-templates.github.io/webpack/

  • Were using .vue files that make it possible to have HTML, JS and CSS for each component together in a single location. Theyre implemented as a webpack plugin and the docs can be found here http://vue-loader.vuejs.org/en/

  • SemanticUI is the UI framework http://semantic-ui.com/. So far Ive only used the CSS part, it also has JS plugins but Ive yet to use them. It supports theming so if its not too difficult well want to customize the base theme with our own styles instead of writing CSS rules to override the original styling.

The code is in /website/client. Were using something very similar to Vuex (equivalent of Reacts Redux) for state management http://vuex.vuejs.org/en/index.html

The API is almost the same except that we dont use mutations but only actions because it would make it difficult to work with common code

The project is developed directly in the develop branch as long as well be able to avoid splitting it into a different branch.

So far most of the work has been on the template, so theres no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: its basically a Flux implementation: theres a central store that hold the data for the entire app, and every change to the data must happen through an action, the data cannot be mutated directly.