Frontend

[DavidVasilev1]

Homepage

Contain main information on the App and Game with brief descriptions.

• Navbar with links to all pages, containing logo
• Frontpage with name of algorithm with definition (simple)
• Section summarizing app element of site
• Section summarizing game element of site

App Page

Create editable canvas that guides user through creating node graph and running Dijkstra.

• Navbar with links to all pages, containing logo
• Panel showing instruction on how to use canvas
• Canvas with ability to place, remove, and link nodes to run Dijkstra on
  • Joint JS - creates editable canvas for node and path placement
  • Calculate distances of paths to
  • package data into JSON and send to backend
  • fetch path from backend algorithm and display for user

Game Page (tentative)

Create generated graph with clickable paths and pre-defined start and end nodes.

• Generate graph with nodes and paths
• Selectable paths for the user to select and submit their guess
  • Pull data from the backend on the path and display on frontend
  • Comparison between actual path and user path to calculate score
• Have leaderboard that shows the score and the score of other users
• Login to have separate users

Login Page (tentative)

Generic login page for users to document their scores from the game element

• Have login page, generic
• Sending data to backend for registration and pulling data from backend to log user scores
  Optional:
• JWT or Firebase

Leaderboard Page (tentative)

Display all data from the users, including score and name

• Pull data from backend, displaying data with jQuery

About Page

Show major information on Dijkstra in an interactive way

• Have frontpage, showing the topic of the page
• Split into 5 main sections:
  • The Algorithm - what is it
  • How it Works - nodes and weighted paths
  • Frontend - JointJS, Svelte and Windtail, DaisyUI
  • Backend - Code, Database, JSON connections
  • Summary/Conclusion - main concepts (Java, API, JointJS, Svelte and Windtail, DaisyUI)
• Include sections of code, images, animations