-
Notifications
You must be signed in to change notification settings - Fork 0
/
documentation.txt
185 lines (135 loc) · 7.68 KB
/
documentation.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
Ping Pong app Documentation
The app is written in React and Redux. It currently uses Firebase to store
its data.
Like every React app, PPongs is a SPA that is broken up into components. This
document will attempt to explain each of them and how they interact.
Users:
Currently, the user information is actually gathered in the header. If
already logged into your corporation's office 365 network, no logging in will
be required. If not, then you will be redirected to the corporation's single
sign on page. You should also be automatically enrolled in a league based on
your corporation. One logged in, you should see a navbar with the options:
Home | About | Games | Leagues | HeadToHead | My Profile | Game confirmations (9)
The source for the header is all located at
/reactredux/src/components/common/Header.js
It's primary function is to check if the user is authenticated or not - if
not, it will hide the navbar and redirect the user to log in. It currently
checks for authentication by looking at whether or not the user data is
correctly stored in local storage. It also handles the creation of the links
in the navigation bar.
Components:
About
The about page is the most simple. Right now, it only contains a brief text
description of how to use the application. In the future, it could be used to
share video tutorials or screenshots of how to use the app, as well as creator
or version information.
Common
The common folder contains the source code for the Header, the LoadingDots,
the SelectInput, and the TextInput. I already have covered header earlier.
LoadingDots is what you see in the navbar to indicate if a page is still
loading in information or not. TextInput and SelectInput are generic wrappers
for html input types - these are used in the different places that forms
appear in the app.
Game
Game is the folder that contains the tools that build up the way games are
displayed as well as how they are added. It is probably the most complicated
piece of the app.
GameListRow contains the code for each row of the table that the displays the
game history of the leagues. It shows the players of each side, the score of
the game, and who won.
GameList is a table built up of GameListRows. It takes a league and displays
all the game history of that league.
GamesPage is what you will find when navigating your browser to /games. It
contains a GameList for each individual league that you belong to.
ManageGamePage just nests a GameForm
GameForm is a form for adding a game to the records. It contains SelectInputs
for the type of game, the league that the game will be in, and the names of
the players,filtered from those who belong in the selected league as well as
a TextInput for the scores. If the league supports live mode, than above
the score boxes, you would have
the ability to press the go live button to enter the live scoreboard mode
instead of typing in the score, if so desired.
The submission to the database ususes the react redux model. There in an api
connected to the store in the api folder. The one that manages games is
called ppongApi.js. It simply allows to either submit a game to add to the
database or to download the updated database (which is what is connected to
the store, as per usual with redux).
Live
The live page is quite simple, it simply listens to changes in the database
triggered by the amazon dash buttons, so long as a connected app is running on
the same network as the buttons. (The code for this is here was well, but I
was unable to get it running on windows hosts, so Linux or Mac only due to
issues with the required node libraries. Ideally a raspberry pi sitting
in the corner always on would get the job done).
When the score hits 21, it automatically submits to the database.
Confirmations
A game that is submitted to the database does not immediatley get added to the
games, first it is tagged as unconfirmed. When the player who was designated
as the opponent checks their game confirmations tab, they will be presented
with the list of games that they participated in that are still unconfirmed.
They can also press buttons inline to confirm or deny whether or not the
results of the game are accurate. This could easily be abused by a sore
loser, but I weighted that as safer than just allowing people to continually
add games, which could completley break the system, especially the player
skill ranking.
Head to Head
This is the most simple. It is effectivley just an implementation of
GamesPage, but it allows you to use select menus to filter the games down to
only show games that contain certain people.
Leagues
League are also fairly simple. There is a list of the leagues that the player
belongs to. If any of them are clicked on, they naviage to their page, which
shows the list of players in the league, their standings, and the history of
the games that occurred in the league.
The add league buttons lets the player select the name of the league to be
joined and a blank to enter the secret pin number of the league. Create a
league allows you to specify the name of the league you'd like to create and
the secret entry pin others will have to enter to join your league.
Api
Inside of the api folder, there is a api for every action that the software
can make. All that it really does is communicate with the firebase database
that it uses to store the data. It also provides some simple validation to
ensure all entries work. There are apis for users, games, leagues, and the
live feed. Each one functions almost identically, they handle differnt data
sets but for the most part just do pushing and pulling from the database. The
only thing that changes substantially each time is the validation, and which
elements are added before posting to the server (eg. the users get profile
pictures added while the games get time and date added).
npm scripts:
the command npm start will deploy the src folder to localhost:3000
The command npm run build will minify and translate the code with babel into
the dist folder before deploying it to firebase.
actions folder:
these should not be altered unless new apis are added. They are all clones of
eachother, helping map the dispatches to the store actions. (redux stuff).
What is crucial is that in making a new api or element in the store, a new
version with all of the same actions is created.
store
There are three files here. The configureStore.js file helps select which
ont to build. The other two files are for use in development or production
simply because there are some react features that need to be disabled in
production as they are good for debugging but are fairly inneficient.
Reducers:
Reducers are a part of the communication layer in react. Each element in the
store is bound to a reducer that handles the different actions that it makes.
controller.js:
terminal client for live page. Basically just sends ajax requests to
firebase.
network.js:
code that runs to scan for the amazon dash buttons and make the ajax call on
firebase (note, currently *nix only)
Adal
Adal-request houses the code that interacts with Azure Active Directory. It
has the functions for making requests to Azure as well as things like logging
in and out. Adal-config stores the information about the specific Active
directory and azure tenant that the app is connected to.
Index.html
html that loads in the spa and some of the required components for the
database.
Index.js
Script that sets up the spa - initializes the stores, Adal, and the history,
as well as inserting the app into the page.
routes.js
Sets up the way that the spa will handle routing based on urls. Can use the
/: syntax in order to take in variables from the url to use in the code (for
an example look at the user profiles page).