hey everyone today we're gonna build a live updating league table using Ember.js
alright so this is what we're gonna be building on the left hand side there
is a list of games or the most recent games played these are at random two
teams are picked and a random score is assigned to them and those results of
those games drive this table on the right league table and is sorted by the
number of points and it tracks the number of games that a team has played
how many it has one drawn and lost and how many go to the score it for and
against and the difference between that which is the goal difference and it also
shows the previous five games the forum for that team so I'm going to reload the
page and this will start simulating another two hundred and eighty games or
so and this is going to be very fast it's a very short delay in between the
game simulations modern amber is lightning fast this is really nice to
see so I'm using amber 3.5 September data
amber C lion amber all on three point five it's about creating new app amber
League table okay so if I run the app and reserve so the app is running on
localhost 4200 so we get this little Welcome page so the first thing I'll do
is remove this welcome message so that's in application template so there are two
models that we need to create and one is for the team I'll be a simple model with
a name and the second is for a game so I'm going to create those two models now
amber generate model team and game
so the team is gonna be very simple it's simply gonna have a name just a string
and the game will have a couple of other things it'll have a home team that
belongs to the team and it will also have an away team now we need to specify
the inverse because they will have a different key on the team model so this
will be home games to universe here I'll be away games will also keep track of
the score so the the home goals which will be a simple integer number there
will be away goals as well so the goal is that the way team scored I will also
keep track of when it was played so that we can source and this will be late okay
so that's our game model the team model needs a couple of other things it needs
the inverse relationship for the Home & Away team so we will have a has many so
a team will have many games a lot many home games the start has many and this
will be a game this will be a game and the inverse this time will be what we
call it here so it'll be the home team
and we'll do the same for way games it is a game and the inverse will be
waiting all right so I'm going to start working on the skeleton UI and something
I always do now is install ember CLI Tailwind
which brings in let me open up the repo so it brings in tailwind CSS which is a
really great framework for rapidly building UIs
so I believe I have to restart the server okay so if I go to the
application template and just put in a little tag let's say Amber Lee why do we
call this amber League table and if I add a class to make it text blue let's
say I should give us probably okay great so it's working all right so we're gonna
create two components one this thing the left which will be we call it game
results and this and the right which will be League table so I'm gonna use
generators for this and regenerate component game results and league table
okay so we can invoke them here game results and League table
all right so these are obviously curly is this an old way of invoking amber
components so I'm going to use the new way which is angle bracket components so
you should see that should work you know it will do the same for league table the
curly implications so we needed a way to simulate the games there's a few
different ways of doing this I'm going to create a service which is going to be
responsible for on a timer generating the games so amber generates service and
we call this game simulator
all right so in its anise I'm gonna just put console.log for a second we're gonna
inject this into the application controller we don't have one yet so I'm
going to generate one and Brett generate controller application okay
and what we want to do is inject our game simulator service into this
controller so I'm gonna import the service and check to us service okay so
it's cold game simulator now notice that we don't get our console log from the
service because we haven't actually used this service so even though we've marked
it for injection because we haven't used it yet it doesn't yeah it isn't
instantiated so we could simply do this and then you can see that that does
indeed instantiate the service all right so let's modify the service to seed some
teams
so let's just define some teams right so she say and that's just dude team to
team three team four so for each of these teams we want to create a team
model so let's just use a for loop because we can use the the value of I as
the ID for the model
so we want to create a model at this point so this starts store that create
record and of course we're gonna have to inject the store ok so this dot store a
crate record and we're gonna create a team and the name is gonna be come from
the teams array I'm actually gonna rename not to team names ok with
actually because when I can't persist this will just give it an ID of I okay
teams is not defined of course because I renamed it so it's team names so if we
have a look at the Emirates vector here at data we should see we have four teams
so now we have teams the next thing we want to do is simulate a game so I'm
gonna do this in a run later which will also have to import and that's from
amber run loop so later takes this context and then a function which it
will call simulate game and then a number of milliseconds which in our case
will do it every second so this function is called simulate game so guess we want
to get the team's we want to pick two teams at random pick two scores at
random and then create the game so the teams to the teams we can get from the
store Pico
I'll give us all of the records currently loaded in the store for of
that type and we want to shuffle them um there's an Adam I know I want to use
later that also happens to have a shuffle function in it and it's amber
composable helpers this is one of a handful of add-ons that I basically
added to start a very amber project I work on and so it's got got a bunch of
cool handlebars helpers here including shuffle and so we can use that in
handlebars but it also has a function oops in here in here which it exports so
we can use that so let me install that alone
all right so we start the server okay so now I can import this function so it's
in helper is shuffle
and then our shuffle teams so I think we pass in a right to it that's all that's
required and it will return a shuffled array okay so our home team will be
shuffled teams the fur at the first index and the away team will be the next
so let's just check if this is actually working
okay so we have a home team its name is team three and the way team its team two
ok seems good so the next thing we want to do is randomly create my score so
there will be home goals and this will be some function that we craz which will
be random score and it will be the same with way goals so let's implement that
function
okay
to make it a little more realistic let's give the home team a little more of a
chance of scoring so it's passing maximum goals and we'll say that the
maximum goals for a home team is four and for the away team is three so the
home team will be slightly more likely to win so this will be will multiply
maximum girls by math dot random so Matt that random just gives you a random
number between zero and one so if we multiply it by 5 and random shall give
us a score and we should be able to let me just lock this edge so we're gonna
have homegirls oh my girls and this should give us a
random swirl throw 2 1 2 1 1 okay so now we can create our game so this starts
store right record and this time it's a game the data is home team way team hug
girls away girls
and played on which we will give the current date a little typo
okay so we should see a game which we do and so the final thing one do is when we
simulate the game I'm going to schedule and you're going to be simulated one
second later so now we should see a new game pop in every second all right so
let's now that we have models let's start passing some of this data into our
components so I guess we can make the service have a list of games so this
will simply return the query from the store
okay and I need to import computed
so I should be able to know your game simulator duh GameStop Lent okay and
that's updating great all right so let's pass those games into the game results
component
okay and we'll do the same for the league table okay so we'll do game
results first so this should have access to games which it does so we'll iterate
over those each games ask game
so just a foot and some data for each game
we'll start with the home team and the girls
and the away girls and the waiting
okay cool okay so let's add some style to our app get rid of that and I'm gonna
add a door container and it will have to enter dibs
okay
and I'll get these the height of the full screen okay and then I'll just move
these components in there
so one thing I want to do is pull this ad into a constant so that we can adjust
have fast we generate the games so we'll set up to something faster now let's say
100 milliseconds I'll use it here as well
oops I'm going to use it here as well
that should be much faster so we want to cop the number that we show here so
let's say we just want to show the first 20 so one of the things that ember
composable helpers gives us is a helper called
take so we can use this to just take a number of entries from an array so let's
say take ten from games and this will restrict it to ten but what we want to
do is show the newest games rather than the oldest first so there is another
helper called reverse and it just takes an array and reverses it so we can
reverse the game's array and I should work okay so let's change that to 25 and
then let's work on styling this content here so and I'm like div for each of
them make it light blue give it some padding's margined it's gonna be flex
and bold
so we're gonna have four dips the other two will be flexed once a little take
they'll expand into space the inner two will be shrink these will be for the
scores
okay I start to look better this should also have a border this time on the left
instead of the right okay
okay and we also want this green header at the top h2 games played is games the
length and this will have a text green dark probably okay I have a typo okay
and I want to Center that text
okay then get rid of the red and blue backgrounds could you suggest a little
bit of padding
should be a screen okay let's start working on the league
table so I'm going to use a table for this and what I'll do is just put some
dummy data in there for now so this is going to have four width
okay so we want to iterate over each team we don't currently have a list of
teams but we will pass it in from the application controller and so we're
gonna do something like this
okay so from the application controller we will also pass in a list an array of
teams which will get from our service so our service will also have computer
properties similar to this
okay so if that worked we should have a row for each team which we do so now we
can start filling in some of these rows so this is going to be the index so we
can get the index from the each helper
and these are zero indexed so we want to add one to them yeah I don't believe
that amber composable helpers has it but
there is a math helpers add-on which does have it so let me install that
I'll restart the server so now we should be able to its called add add one to the
index
okay so for a second column is the team name okay and played so we don't
currently have access to that I guess we want to do something like games played
Lent so if I go to the team what we do have is a home-and-away game so really
what we want to do is join them together um let me just quickly check the docs
for computed macros and there is a union which takes a couple of arrays or it
takes a list of arrays and joins them together so let's use that what did we
call us we called it games played well let's just call it games it's the union
of home games and away games
okay yeah we can see it's a day so the next ones we want to work on are one
drone and lost so let's do drawn first games drawn so we can import another
macro called filter by which will allow us to filter all games where we'll have
to add a property to it but let's call it is draw it's gonna be true so we need
to implement this is draw property on game and this is going to be cuter
property and it will have two keys home girls and away goes and it will compare
them so if if they're equal it's a draw and so I'll need to import computed
remember object and now I need to take my UI here team does games drawn that I
was it the next one
so let's wait for a drawer to come in and see if these updates what there's no
drawers oh here's one okay so it worked man United in team
tree drew great ok so let's do games one so for this I think what we're gonna
need is the split up by home games and away games who can go home games one
which will be a property and then will be a away games one and it will do it
unison on them so like game strong will use filter by on the games array and
we'll create another computer property cold is home win and it will do the same
for away games one and this will filter on is a way win so we need to implement
these two properties in game I said it's actually gonna be quite similar so I'm
just to placate that a couple times is home win is going to be if the home
girls are greater than the Wiggles and is a way win will be if home goals are
less than anyway goes so home games one away games one so we can add those
together or create a unison of them and call it games one which is going to be
unison
okay so if that works we should have a games team games one that lent em we
have an error unison is not defined so we're using this here oh it's Union not
unison okay we're not saying one home games 108 games one games one Union home
games one filter by games is home when it's how would let's just put it the
burger in here okay they must have messed up our template
yeah that's a typo should be games one games one okay our
debugger is being hit so that's running let's get rid of that okay that seems to
be updating so let's do games lost and that's gonna be similar so we'll be home
games lost lost games lost
and in this case the home games loss is gonna be when it's a and away when
because of it when it's a home game for us and the way team wins that's a loss
for us so this is its homeland so we have the games that we lost at home and
away and then we do a union of those four games lost so now we have team
games lost dot land and they should be updating now and it seems to be so
Manchester United lost the first two oh no that's not right okay so for some
reason it seems like loss is not working correctly and let me see if I can figure
this 8o is a way when if home goals are less than Wiggles is home wind so this
is incorrect home win should be if the home goals are greater than weight goals
so okay that seems to have fix it and so I think what I do now is add 20 proper
team names so we have a full set of data before we continue
okay so let's do the next three which are all goals so like we did here four
games one we will calculate the goals that were scored at home and then the
goals are scored away for a team and then some of them and I will be our
total and there is a some computer property macro which we can use and if
you give it a string key which is an array and it will sum all the values and
but in order to use it we have to put crate we have to create a computer
property with that array so I'm gonna create a computer property called home
goals scored array and this will come from we will call math by which is
another computer property which what I will import so this is gonna be the home
games and it's gonna map the home goals so now this will give us an array which
we can sum so we'll call this so we'll call a new property home girls scored
which will be the sum total of this property above
I'm called scored so now we can for those scores of teen home goals scored
and if this works this will give us a total which it seems to be updating
anyway yeah okay so let's do the same for away goes which is gonna be the away
games and the away goes and then we will sum that array and then we want a and
then we want a new property called goals scored which is the total of that this
will take two properties home go and go score it and and away goes scourge and
it will simply return I will simply return this some of those
all right so I am missing a return statement so inhale it now they seem to
be updating which is good and so let's do the same for goals conceded so it
will be something similar to this it will be sorry home goals conceded and
this will be conceded conceded consider to concede it and this will be for home
games this will be away goals will be the number that we have conceded and
then we will sum that array and then the way goals conceded will be our wig games
will be the home girls Scourge and we will sum that and then we will sum the
totals of these conceded goals so now we have goals conceded which is against
okay sir that's updating there okay and a goal difference so that should be
simple go so this will be gold scored and goals conceded
okay goal difference so that's at the updated template okay that seems to be
working 2 minus 1 is 1 1 minus 6 is minus 5 cool
so points so this will be a computer property and it will for every game that
we win we get 3 points for every game that we draw we get a single point so we
are interested in the length of the games 1 and the length of the games
drawn
sorry I'm doing this wrong um so for each game one we get three points and
for each game drawn we get a single point so that should do it here okay so
my Chester City won the game yeah okay
so it seems that we have an error here like Newcastle United for Manchester
City too but mine Chester City got three points that's how you play the game so
we have some mistake in our logic I guess if we had tests it would be pretty
easy to spot it but let me just eyeball the code and see if we can figure it out
actually what I'm gonna do is just come at the edge this so we got a single game
coming in easier to the book okay so Fulham won the game yes but it
also says lost is one which can't be correct because they wanna and it also
says that Everton won and lost okay so one a loss is always returning the same
so games won games lost okay so sum things up what games won and games lost
home games won away games won ah
okay so we're filtering on all the games and we're saying give me all the games
that is home has a home win but this should be on our home games not on all
games so if I change this to home games sister home games and then sorry there
should be away games so away games one and then away games lost should be
bonded away games and home games lost should be on home games games drawn can
be on all games because a draw the draw no matter what if you're at
home or away so this looks better because Manchester United won that game
so they won one they haven't lost one they scored two goals they conceded one
their goal difference is one they got three points and Huddersfield played one
lost one and scored one conceded to my negative one goal difference so looks
like it's working yeah okay so let's come and tap back in and make these a
little faster again okay so now that we have points less actually source the
table so there's another handy helper and ember composable helper it's called
soar play do you give it a the name of the property you want to sort by and you
can pass multiple and then the name of the array so in our case we want to sort
by points and that should sort by points so we should never see all that starting
the wrong way the teams with the most points are at the bottom so you can
specify descending sort order like this
so now teams that win the most points should be at the top and if teams have
got the same points we should sort on goal difference so if you scored if you
got a higher goal difference and the same points you should be on top and so
we can give a secondary property of goal difference and like points this will be
descending all right so we're almost done functionally I guess we need to
implement this the form to show the previous five results and before I do
that let's actually style the table a little bit better
you
Toller
okay that's looking pretty pretty good finally let's do the form so we have
access to teamed gamestop the length so this will tell us
the number of games that particular team was played see there so now we can go
each we want to take five from team games as game so let's just put a chi
there for a second comment that a so we should see g's pop
up as games have been played okay so if the game is a draw game is draw we want
to show D else else if the game so we we can use draw we can use this home win
because we don't know if it's up our game is if we're playing at home or not
so what we can do is compare the winning team with our own team so if the game if
we add a winning team computer property so that's had a winning team computer
property
that's gonna depend on if it's a home win or if it's and way win
I'm also going to specify home team and away team we know that these are going
to change in Iraq but just as good practice I like to be sure that all keys
that we access all of the properties that we access our that could change our
defining the array of dependent keys so if this is a home win we want to return
the home team better wise if it's an away win or turn the away team and if
the draw will just return undefined alright so now that we have the winning
team we can compare it winning team the ID is equal to the team ID so if it is
we know were a winner
otherwise or loser
so you can see that the teams at the top I've got at the last game was a win and
teams to win three in a row have nine points which is seems to be working and
let's see if some drawers there yeah okay and it should only show five right
actually what I'll do is I will speed this right up okay I nobody shows five
at a time even though there's lots of games in there
so we've one final thing to do with this which is to source team games so we want
to sort them by when they were played so we have a three games played on we're
gonna sort them by played on descending so we get the newest first I know I
should be perfect you can see they're coming into the right um so let's finish
up the styling on this get rid of the Lent so let's create a span what some
classes give it some padding some margin right gray for a draw and give it with
eight and then it's just to dig in it sound
okay so let's do the same for a win and a loss except if you lose it's red and
if you want it's green
actually I'm gonna make this a flex container make the text white and this
so I can get rid of this class
I'm gonna make the text small and I'm gonna Center it and now they're all the
same width so the final thing I want to do is bring this to lay down to zero
milliseconds and just enjoy how fast our amber app is all right I'll be you
enjoyed it thanks bye bye
For more infomation >> MOUKĪTĀBEN ~ Episode 4: Erotic Stories For Punjabi Widows (ft. Dark Mouki & Cookie) - Duration: 19:02. 
For more infomation >> The dark history of the bunny ears sign ⎥BBC Ideas - Duration: 1:40. 
For more infomation >> Cùng chơi Dark Souls III - #11: Chúa tể tối cao Wolnir của Catacombs. - Duration: 35:43. 
For more infomation >> Real Life Frankenstein Scares a Man to Death | Dark History - Duration: 4:03. 
For more infomation >> Libertarian endorses Rosendale in Senate race; cites `dark money' mailer - Duration: 0:57. 
For more infomation >> Libertarian endorses Rosendale in Senate race; cites 'dark money' mailer - Duration: 1:01. 
For more infomation >> Libertarian endorses Rosendale in Senate race, cites 'dark money' mailer - Duration: 0:58. 
For more infomation >> Mayoral Candidate Orman Calls Rival Webb's Campaign Funds 'Dark Money' - Duration: 1:46. 
For more infomation >> Libertarian endorses Rosendale in Senate race; cites 'dark money' mailer - Duration: 0:58. 
For more infomation >> Investigating Allegations of "Dark Money" in Bentonville Mayoral Race (fox) - Duration: 3:15. 
For more infomation >> Wait, She Had Sex With How Many Ghosts? - Duration: 3:09. 