Pavel’s Chess Corner 2.0

It took me almost two months to finish 2.0 version of my chess application. The goal of the project was to develop a web app which allows users to compete with each other over the virtual chess board. In the project I used only latest technologies available on the market: both for server and client side.

The core technology stack consist of:

  • ASP.NET5
  • MVC6
  • Entity Framework 7
  • ECMAScript 6
  • SignalR

Despite it is 2.0 version of the app, I decided to build it from scratch, in fact the app shares almost no code with the previous version of the project.

My work is available at http://chess2.koryakinp.com

 

Advertisements
Pavel’s Chess Corner 2.0

Pavel’s Chess corner

My final project of the WDDM program is a chess application. It allows two players to compete with each over the chess board.

I kept the design very simple and was more focused on the functionality. Application prompts user to start the game immediately after page loads. My idea was allow user to start to play without creating an account, subscribing to the service etc.

As soon as there are pair of players waiting for the game, it starts.

I found an interesting technique to use several layers of canvases positioned absolute one on top another. It allows to redraw moves without redrawing the chess board. I used 4 layers: chess board, pieces, legal moves highlight and field highlight.

Screen Shot 2016-02-08 at 7.35.03 PM.png

To code the logic behind the movement of the pieces was not really hard, however it was not easy to code an exceptional moves such as castling, promotion and en passant capture. Also, I found very challenging to account for the draw by threefold repetition and draw by 50 moves rule.

In order to minimize the number of trips to the database I used stored procedures on the database side. It is very convenient, from performance point of view, to encapsulate all the database related logic from my PHP code and keep on MySQL side.

Another challenge was to guarantee sequential execution of AJAX requests. It was not an option to use timer and call the server every several seconds due to inconsistency of execution time of the request. I came up with a nice solution to call AJAX request recursively in it is own callback. That technique guarantees sequential execution of requests and minimizes the delay between them. For example:

Screen Shot 2016-02-08 at 8.26.45 PM

I tried to keep my code as efficient as possible by reusing classes and methods but even though it took my approximately 3000 lines of javascript to finish my project, which I very proud of.

I used YUIdocs to generate my documentation. It helped me to organize my code and even find couple of bugs. Also, I used bower, SASS and gulp during the development, and of course Adobe Illustrator to create wireframe and mockup.

I have some plans how to improve my project: first of all, I would like to practice with web sockets and use it instead of AJAX requests, secondly I would like to to remaster server side of the application. I believe ASP.NET server side is more appropriate for the needs of the application and lastly, I would like to change the design. I hope I will fulfill my plans if I have time and inspiration.

My project is available here.

Overall, I really enjoyed working on the project, as well as to study in WDDM program in general.

And lastly, I would like to thank Humber College faculty for such a wonderful program. Especially big thanks to Thomas for his commitment, brilliant lectures and deep knowledge of HTML5, CSS3 and PHP, which he shared with me and my classmates, also big thanks to Mark for his awesome and inspiring Illustrator classes, and of course to Ben for his CSS3, jQuery lessons and sense of humour.

Sincerely, Pavel

 

 

Pavel’s Chess corner

Nostalgic Web Campaign

 

My web campaign dedicate to XXII Olympic Games which was held in Moscow in 1980. It was summer olympic and was famous for boycott initiated by United States and supporting nations.

I used fullpage.js plugin for the layout of my one-page scrolling website. It is relatively simple, but yet powerful plugin, which makes easier to create one-page-scrollers. Other plugins which I used are: slimscrolljquery-validatejquery-autocomplete.
 
I used strong colours like yellow, red and white to draw attention of the user. I also used old soviet fonts to better reflect the nature of my web campaign.
For interactive part of my project I recreated Moscow subway map exactly as it was 1980. Everything on the map is drawn by javascript in an HTML5 canvas. All the data for the map is coming from the database and processed by client-side script. The map responsive, so script redraws it based on window size. The hardest part was to implement routing algorithm between the stations. It took me almost one thousand lines of javascript to do it.
 
The subscription form is very simple, but the form validates and processes asynchronously. Another challenge was to code HTML email based on the table layout and limited CSS set of rules and fonts.
 
Banners for my web campaign are very rudimentary, but they looks cool.
 
I used smart comments to generate comments for my javascript functions, properties and classes. And this resource to generate documentation for my subway map. I also used SASS, gulp and bower during the development.
 
It was very interesting and fun project to work on. I really enjoy working with javascript and SASS, as well as develop prototypes, markups and documentations.
 
My work is available here.
Nostalgic Web Campaign

Composite One: Html Web SIte

The goal of my project is to remaster, at least partially, The Atheist Experience TV Show website. The Atheist Experience is a local TV show based in Texas, but they broadcast around the globe via the internet. The show is about atheism, religion and related philosophical questions.

I keep the design strict and simple and avoid fancy colours to better reflect the nature of the show. The website consist of 5 pages, and it is fully responsive. The responsiveness of the website achieved by four breakpoints to target mobile, tablets and desktop clients.

Three main steps of the development process:

  • mockup with Illustrator
  • HTML5 markup
  • CSS styling

Put some effort to make web site responsive and cross browser compatible.

Here is my work: http://koryakinp.com/composite

Screen Shot 2015-10-16 at 10.18.27 AM

Some important links:

w3c markup validator

Mark’s Web Checklist

responsive Web

Illustrator mockup: link

Composite One: Html Web SIte