web-dev-project

About the project

This is a multiplayer chess game made for Dawson's college web development class. It was made by Guilherme Corrêa and Noah Labrecque in approxematly 30 days.
Our goal for this project was to challenge ourselves in learning key concepts in networking and javascript.
Because of certificate issues we aren't able to make our website interactive on our sonic acount, but you can try it out on this ip -> 70.26.238.78:8000.

How to run locally

Requirements: Python 3.5+
Python packages:

pip install psycopg2 websockets

Starting the server

python3 ss.py 70.26.238.78 34569
(In order to run it you need to be whitelisted in the database.)

TODO

• Link buttons on homepage
• Link github and sonic links in footer

Chess engine

• Piece movement
• Black and White perspective
• King validation
• Finish game
• Show taken pieces
• Clock

Client-Server-API

• Create a game
• Join a game
• Sync move pieces thorugh requests loop
• Single request with server timeout.
• Registration
• Join / Create games
• Board preview
• Reconnect with right turn

Server

• Accept POST requests
• Handle multiple games at the same time
• Reconnect system
• stop password

HTML / CSS

• Lobby prototype
• Main page
• Login Page
• Register Page
• User page
• About Us
• Lobby filtering/search

Project Requirements

General

• Test on several web browsers (Chrome, Firefox, IE, Safari) !!!!!
• Upload to sonic server

Technical Required Inclusions

• Tables (For data/Images not layout)
• Graphic title or logo on each page (Custom if possible)
• Footer including (On each page):
  • Copyright/year
  • for each member:
    • Name (Clickable bringing user to current page on sonic account)
    • Student-Id
    • Sonic link to current page
• Forms
  • logic/registration
  • Contact page (Email AND Chat features in two seperate forms)
• Menu Bar (home link must be first option, vertical or horozontal)
• Must use icons beside text for menu bar options
• Each page must have favicon

Layout and Positioning

• Use html symantic elements +(Divs/Spans)
• Use fluid layout (Flex...?)
  • (Structure, number of columns and exact layout is up to us)
• Use (relative, absolute, sticky, and fixed) attributes to position different part of your layout

Head Section

• Minimum 3 meta tags (i.e. keyword , description, utf, ...)
• Use any SEO/Search engine ranking tag
• Titles for each page

Content

• Paragraph or heading on each page
• Required Inclusion:
  • At least one link to external site
  • Simple rollover effects (:hover or image based)

Styling/CSS

• THREE external CSS files:
  • pagestyle.css to style the layout and structure of your pages.
    • Font family/size for: body, paragraph, and heading text
    • Attributes for link states I.E. visited, focus, hover, active
    • Attributes for form element states (pseudo-classes) including different types of inputs.
    • Table styling
    • Background images/colors for containers
  • menu.css to style all your menus (horizontal and vertical)
  • one css file called tabs.css to style the tabs (see tabs section) (?)

JavaScript

On contact.html Page (last menu option) (DONE)

• 4 tabs (adress, call, e-mail, chat)
• adress and call tabs contain the adress and telephone numbers respectivly (no form)
• e-mail tab: form appears where you can enter
  • Email adress
  • Topic of message
  • Type of text
  • Submit button
• Chat tab:
  • message form
  • Send button

Submission

• Once properly tested in your LOCAL DRIVE/420-120/, upload the whole project to your sonic account.
• Test the page remotely by pointing url to: https:// sonic.dawsoncollege.qc.ca/~YOUR_USER_NAME/420-120/Project/home.html
• Submit to LEA the entry (first) page only
• Put your name/id and the name/id of the other members
• Only one member must submit the page to LEA.
• However, all members must have the same copy of the project in their respective server account
• Deadline: DEC 1st