adamjo / dota2-minimap-spectator Goto Github PK

pause is called when switching from expand-match to live game
pause is called when switching from locked game to unlocked game

pause should only occur when game is being watched and duration is the same.

Smooth animations for router transitions.

• initial load

Menu

• upcoming games
• live games

QOL

• smooth and seamless transition between all route animations

• Pause variable
• Pause UI on Map
• Pause animations

Go through guide to see what I can do and add.

• https://angular.io/docs/ts/latest/guide/testing.html
• https://angular-2-training-book.rangle.io/handout/testing/

• start in landscape mode for phone
  • if initial load window size is 600px or below a message is displayed for 5 seconds to use landscape.
• make buttons slightly bigger on mobile
  • clicking is hard on mobile
• have previous games branch off into two columns instead of on giant one
  • better desgin to show winner.

Create new Issues if I chose to do one of these.

• loading game
• animations for ultimates #22
  • I would have to go through each ultimate and keep track of when it goes from 0 to any
  • possibly add this and previous position to backend
• add when game is paused (#6)
• tourny brackets
• at work redirect panic button
• lints to reddit/twitch
• click hero, show info
• expand - show all 5 games at the same time (#7)
• show previous 5 games (#14)
• service worker / universal / web worker / AoT #12
• new domain name #17
  • dotahub.watch
  • dotavita.watch
  • everdota.watch
• animation for expand-match scoreboard (#8)
• player names for scoreboard (#8)
• clean up code base css/rename componets #19
• add animation to expand-match when new hero added to draft (#8)
• add option for twitch stream?
• add ultimate cooldown next to draft option in scoreboard

[SC]

• show game is finished #23
  • smooth out UI when game finishes
• resize to make it fit on whole screen
• Safari support/testing (partial) #22
  • https://angular.io/docs/ts/latest/guide/browser-support.html#!#sts=Polyfills
  • unable to test
  • will have to find the correct polyfills.
  • added es6/reflect to see if that works, may need to add whole thing.
  • issue was invokeMethod with the renderer, the animation only plays on chrome/safari
• put nav on side for desktop when scroll down
• highlight clickable buttons on initial load
• link to Dota Buff, previous game with match ID
  • or add my own info and link to a live league game page
  • adding my own page would add roughly 50 times more data to my website, that is with an average of 250 previous games cataloged. Even if I limited it to ~52 games it would be 10 times more and may not actually be worth the extra traffic.
  • copy match ID to clipboard, move matchID to see it when clicked / hovered
• control zoom to change size (hint for use to change size)

• download and optimize all jpg/png's from the cdn
• webpack configuration
• development
• production

Resouces:

• https://github.com/electron-userland/electron-builder
• https://github.com/electron-userland/electron-packager

Notes:

• https://github.com/NathanWalker/angular2-seed-advanced
• https://github.com/joaogarin/angular2-electron
• https://github.com/cmelo/angular2-electron-starter
• http://onehungrymind.com/electron-angular-2-things/

Right now the project has minimal router configuration. Things like RouterActivateLink and lazy louding could be used for a better user experience.

• RouterActivateLink
  • [routerLinkActiveOptions]
• lazy loading modules
  • need to add in webpack config
• preloading modules
  • waiting on angular 2.1.0
  • on 2.1.0.rc-0 , currently preloading does not support AoT
  • also waiting on fix to enter npm for lazy/preloading loading to work on wildstar routes
    • angular/angular@40b92dd

instead of a flashing symbol, create a small game while loading.

IDEAS:

• invoker spell game
• pong
• meepo ctrl group game

For now going to wait for it to become a little more stable.

• waiting on angular-cli integration.
• AOT
  • may need to switch to CLI - seems that a AOT plugin is being made for it.
  • switched to qdoubles started for lazy loading / AOT support
• Universal
  • https://github.com/angular/universal
  • @ version 2.1.0.rc1
  • universal currently does not work with AoT 10/7/2016
  • check if it works with firebase
    • Does not for now, could check angular/angularfire#191
    • seems to work for now angular/universal-starter#127
      • may need to wait for next update of angularfire2
  • does not work with firebase
• waiting on this [angularfire2] pull request.
• Web Workers
• Service Workers
  • offline plugin webpack may not work with angular
    • https://github.com/NekR/offline-plugin
  • https://github.com/angular/mobile-toolkit

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294#.lklspcwgb

• new domain name
  • dotahub.watch taken
  • dotavita.watch
  • alldota.watch `2 taken
  • mindota.watch `4
  • *minidota.watch `3 actually describes it
  • everdota.watch `1 taken

Transition of Trello cards to GitHub issues.

1.0.0 --

• document and put up on github
• update to angular 2 final
• design logo
• add favicons
  • Resources 1 2; Windows Desktop / Iphone / Android / Web
• website domain name
  • currently minidota.com
  • NOTE: thinking on minidota.watch as well or something with .watch

0.3.0 --

• setup about page / menu
  • info found in footer
• format/restructure folder to angular2-webpack-starter
• eliminate/clean json data from server

0.2.0 --

• show current 5 games
• format whole screen
• move over to RC5
• Draft phase UI
• put up production site
  • NOTE: firbase
• display current game meta info
• show games
  • NOTE: using API from Daily Dota
• animation for draft phase
• scoreboard - hero items and respawn

0.1.0 --

• add buildings
• client pull data from firebase
  • angularfire2
• create custom interface for meta info
• grab and sort info from API
  • Steam Api
• sprite animation
• create backend server and push api data to firebase
• create map and put sprites on them
• get hero icons
• create tests
• get hero meta data
• arrange heroes on map for x y coords
• place map and sprites to anywhere on the screen
• place map and sprites anywhere on screen

• animation for expand-match scoreboard
  • when players change scoreboard option
• player names for scoreboard
• add animation to expand-match when new hero added to draft
  • unable to do since the draft is created with an ngFor and is recreated each time. No ngChange is had and only ngInit is initalized.

• show game is finished (Gilgi)
  • smooth out UI when game finishes
• resize to make it fit on whole screen
• contact DailyDota to let him know I'm using his API.
• Safari support/testing (Gilgi)
  • https://angular.io/docs/ts/latest/guide/browser-support.html#!#sts=Polyfills
  • unable to test
  • will have to find the correct polyfills.
  • added es6/reflect to see if that works, may need to add whole thing.
• put nav on side for desktop when scroll down (Tritz)
• highlight clickable buttons on initial load (Tritz)
• link to Dota Buff, previous game with match ID (Gilgi)
  • or add my own info and link to a live league game page
  • adding my own page would add roughly 50 times more data to my website, that is with an average of 250 previous games cataloged. Even if I limited it to ~52 games it would be 10 times more and may not actually be worth the extra traffic.
  • copy match ID to clipboard, move matchID to see it when clicked / hovered
• control zoom to change size (hint for use to change size) (Gilgi)

• all components should have the correct selector prefix 'app-componentName'
• add '+' to all lazy loaded components.

Users can cycle through games and choose to lock the game they are watching until they it is over. Then switch back to regular.

• add button
• lock games going left / right
• unlock and move to first game in list if current is no longer in queue.
• add animations for locking/unlocking

• donation page
  • patreon / stripe / bitcoin / gratipay / paypal / alipay
• need new page for donation
  • also act as an about page
• strip
  • will have to push key to firebase queue, process on backend server
    • https://www.quora.com/I-am-building-a-React-Redux-App-using-Firebase-as-my-main-Database-and-hosting-How-can-I-integrate-Stripe-and-Twilio
    • https://groups.google.com/forum/#!topic/firebase-talk/6Ihbx2qnVZo
• Paypal
  • there seems to be many issues with paypal,
  • fees / money being taken back
• bitcoin
  • bitcoin.org / bitpay / many other payment systems
• gratipay
  • https://gratipay.com/
• patreon
  • https://www.patreon.com/
• alipay
  • mainly Chinese only option. Can be difficult to sign up due to language barrier.

Zoom out of current game and show all games that are available to watch.

User clicks on game and begin watching that game.

• show all games on one page
• switch to that game to watch
• format to be a mini-live game
  • each match: league (link), team name, duration, series wins, score

• Only show league games, premier and professional, possibly amateur and just put a limit on it.

Got Edge / Safari 9 working by removing the Renderer and using just the DOM for those browsers. Safari 10 is still iffy.

I'm only able to effectively test Edge atm. #22

• grab top games sort by 'average_mmr'
• determine player names
• only minimal data is available
  • added more data, including player position
• setup map and layout

Simple win / lose screen showing many games.

• backed pulls match details
• db deletes old docs after 7 days
  • db.collection.createIndex( { "createdAt": 1 }, { expireAfterSeconds: 604800 } )
  • db.collection.dropIndex({"name": "createdAt_1"})
  • find if expireAfterDays is a thing that works
  • test to see if this works with this long of time
  • https://docs.mongodb.com/manual/tutorial/expire-data/
• split details into pro/premier and amateur
• push to firebase
• add UI
• may just do pro/premier games
• dire/radiant_name
• positive/negative_votes
• game_mode = 1 or 2 or 3
  • game_mode_name
• dire/radiant_score
• cluster_name
• dire/radiant_captain
• duration
• radiant/dire_win
• picks_bans
  • team / hero_id / order / is_pick