-
Notifications
You must be signed in to change notification settings - Fork 16
Y STEM Background
Y STEM and Chess
This is the primary front-end component of the web application. We built it using Angular 9. If you are not familiar with Angular here is a good resources to get started learning the fundamentals https://react.dev/learn Let's go through the layout.
Most of the code any of us will have to modify or worry about will be contained within the src/app folder from the root of YStemAndChess. Although, there are important aspects to know within the source folder before entering the app folder.
All of our environment variables for this component are stored in the environments folder. Within this folder there should be two environment files, environment.ts and environment.prod.ts. For development, any new environment variables should be added to the environment.ts file.
All of our images on the site are stored in the assets folder. Within this folder there is a directory for every page on the site with its corresponding images. If you plan to add new images to the site, please add them to the assets folder into the correct page directory.
Most of the functional code you will see on the front-end is contained within the app folder. Here we will find a few directories, header, pages,footer, and _modal. Let's go through the purpose of each.
This is a simple angular module that creates a loading screen on the page when called. Currently it is only used when players are finding a game on our servers within the header component.
####### Header
Within this directory is the code for the header of the site carried across every page. Any code that has to do with the header is stored here, and it is not just styling. Here we have logic for finding a game, leaving a meeting, determining user permissions, and logging out. All of this determines how the header will be displayed to the user.
######### Footer
Within this directory is the footer for the site used across every page. The code in this component is simple with only HTML5 and SCSS.
########## Pages
This directory contains the code for all of the pages across the site. Let's go over the important components to know about.
The play component is a component used across pages to display the chess board to the student or mentor. This component additionally contains the Agora module which is used as our video streaming service. We use web sockets to transfer events on the front-end to our ChessServer component. Once our chess server has sent a socket message back to our play component we post the data to our chess client component. The chess board itself and logic is contained within the ChessClient component outside of Angular.
The 'piece-lessons' component is used to allow students to choose lessons. Code in this component deals with the stock fish server, and GET requests to our API for lessons. The child component of piece-lessons is play-lesson, which will display the chess board to the user.
The other components within the pages directory are all different pages across the site. None of them are a child component in any way, unlike the other components discussed.
########### Local Storage
############ Cookies
Currently cookies are the only form of browser storage use on the web app. Cookies are used to store user information to keep them logged in for a period of time. That way a user can leave or refresh the page and continue to be signed in. We store users information using a JWT web token that is sent to the server and verified. Any information that needs to be stored about the user across pages should be added to the cookie. Cookies are checked and verified in the header component which is embedded into every page on the site within initialization of the page. Information in the cookie is also used to prevent users from accessing pages they should not.
In the future if we need more complex local storage feel free to use other forms of local storage.