toofz is a Crypt of the NecroDancer information website, featuring information on items and enemies, fast and easy to navigate leaderboards, and player profiles which showcase a player's personal bests.
This repo contains the frontend which is an AngularJS-based Single-Page Application (SPA) written in TypeScript. It uses ASP.NET Core as a thin supporting layer and relies on toofz API for data.
Information about other projects that support toofz can be found in the meta-repository.
- .NET Core 2.0
Contributions are welcome for toofz.
- Want to report a bug or request a feature? File a new issue.
- Join in design conversations.
- Fix an issue or add a new feature.
- Aside from trivial issues, please raise a discussion before submitting a pull request.
Depending on what code you're working with, you may need to be familiar with TypeScript, SCSS, AngularJS, or AngularUI Router. Otherwise, knowledge of JavaScript or CSS can be sufficient for many tasks.
- Visual Studio 2017
- Node.js
- WebStorm (optional) - Visual Studio can be flaky in how it handles TypeScript. WebStorm is recommended for editing TypeScript files.
From the src/toofz.NecroDancer.Web directory, run:
npm install
npm run build-dev
You may now start the application through Visual Studio.
In order to run tests, run:
npm run build-dev-test
npm test
Scripts that produce optimized code ready for production (build-prod and build-prod-test) are also available.
Note: Test build scripts produce slightly different output for app.js (code is instrumented and wrapped to make it easier to test). This means that
if you've built a non-test build and you want to test, you must run a test build script. Likewise, if you've built a test build and you want to view the
site in your browser, you must run a non-test build script.
To view a code coverage report (after running tests), run:
npm run report
This will open a code coverage report in your browser.
wwwrootapp- build output directory
lib- customized 3rd party librariessrccharacters- character icons (used in the leaderboards dropdown and on the leaderboards page)currency- currency icons (used on items, enemies, and leaderboard pages)dropdown- dropdown menu (used in the navbar)enemies- enemy sectionentry-filters- AngularJS filters that formats leaderboard entry data for displayitems- item sectionlanding- landing pageleaderboard- displays leaderboard entriesleaderboards- leaderboards search pagenavbar- main navigation element featured at the top of every pageordinal- AngularJS filter that formats leaderboard entry rank as an ordinal (used on the profile page)otherwise- page served when a URL cannot be routed topage-title- service that manages changes to the page titlepagination- pagination controlsprofile- player profile sectionroot- root template and routesearch- search featureslug- AngularJS filter that formats player names into URL slugstitlecase- AngularJS filter that formats a string in titlecasetoofz-rest-api- toofz API clientapp.module.ts- main entry pointapp.scss- site-wide styles
testViewsShared_Layout.cshtml- the main template for the site
toofz is released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent