Single page application

front/doc/component.md

@@ -0,0 +1,116 @@
+# `Component`
+
+--------------------------------------------------------------------------------
+
+The Component class is a custom HTML element that extends the HTMLElement class.
+It provides a foundation for creating reusable and customizable web components.
+
+This class is an abstract class, and must not be instantiated.
+
+--------------------------------------------------------------------------------
+
+# Redefined Methods
+
+## render
+
+Returns the HTML content to be rendered inside the component.
+
+```javascript
+render() {
+  const message = 'Hello World!'
+  return `
+    <div>
+      <h1>${message}</h1>
+    </div>
+    `;
+}
+```
+
+## style
+
+Returns the CSS content to be rendered inside the component.
+
+```javascript
+style() {
+  return `
+    <style>
+      h1 {
+        color: red;
+      }
+    </style>
+    `;
+}
+```
+
+## postRender
+
+Executed after the component has been rendered.
+
+```javascript
+postRender() {
+  this.title = this.querySelector('h1');
+  super.addComponentEventListener('click', this.handleClick);
+}
+```
+
+## update
+
+Executed when the component is updated.
+
+```javascript
+update() {
+  this.title.textContent = 'updated!';
+}
+```
+
+--------------------------------------------------------------------------------
+
+# Inherited Methods
+
+## addComponentEventListener
+
+Adds an event listener to the component.
+
+Component event listener ensures that the "this" instance in the
+callback is always defined as the instance of the component. Additionally, this
+system prevents event listener leaks even when the callbacks are anonymous
+functions.
+
+```javascript
+this.username = this.querySelector('#username');
+super.addComponentEventListener(this.username, 'input', this.#usernameHandler);
+```
+
+### Parameters
+
+> | name       | data type   | description                                                       | type       |
+> |------------|-------------|-------------------------------------------------------------------|------------|
+> | `element`  | HTMLElement | Selected HTMLElement                                              | Required   |
+> | `event`    | String      | A case-sensitive string representing the event type to listen for | Required   |
+> | `callback` | Function    | Function call when an event is trigger                            | Required   |
+
+## removeComponentEventListener
+
+Removes an event listener from the component.
+
+```javascript
+super.removeComponentEventListener(this.username, 'input');
+```
+
+### Parameters
+
+> | name       | data type   | description                                                                       | type       |
+> |------------|-------------|-----------------------------------------------------------------------------------|------------|
+> | `element`  | HTMLElement | Selected HTMLElement                                                              | Required   |
+> | `event`    | String      | A string which specifies the type of event for which to remove an event listener  | Required   |
+
+
+## removeAllComponentEventListeners
+
+Removes all event listeners from the component.
+
+Automatically called when a component is removed from the DOM.
+
+```javascript
+super.removeAllComponentEventListeners();
+```

front/doc/cookies.md

@@ -0,0 +1,62 @@
+# `Cookies`
+
+--------------------------------------------------------------------------------
+
+The Cookies class provides a simple and convenient way to manage cookies in a
+web application. It offers methods for retrieving, adding, and removing cookies
+with additional options for security.
+
+It is defined as static, so there's no need to create an instance.
+
+--------------------------------------------------------------------------------
+
+## get
+
+Returns the value of the cookie with the specified name.
+
+```javascript
+Cookies.get('username');
+```
+
+### Parameters
+
+> | name   | data type | description            | type     |
+> |--------|-----------|------------------------|----------|
+> | `name` | String    | The name of the cookie | Required |
+
+### Return
+
+> | data type | value                             | description                       |
+> |-----------|-----------------------------------|-----------------------------------|
+> | null      | null                              | The cookie does not exist         |
+> | String    | The value of the specified cookie | The value of the specified cookie |
+
+## add
+
+Adds a new cookie with the given name and value.
+
+```javascript
+Cookies.add('username', 'John Doe');
+```
+
+### Parameters
+
+> | name    | data type | description             | type     |
+> |---------|-----------|-------------------------|----------|
+> | `name`  | String    | The name of the cookie  | Required |
+> | `value` | String    | The value of the cookie | Required |
+
+
+## remove
+
+Removes the cookie with the specified name.
+
+```javascript
+Cookies.remove('username');
+```
+
+### Parameters
+
+> | name   | data type | description            | type     |
+> |--------|-----------|------------------------|----------|
+> | `name` | String    | The name of the cookie | Required |

front/doc/front.md

@@ -5,29 +5,19 @@
 The front-end microservice operates without a database and is solely used to
 construct our single-page application using a component-based architecture. The
 constraints of the 42 subjects require us not to use any front-end frameworks,
-which is why we've developed our own system to easily load components without
-requiring extensive JavaScript.
+which is why we've developed our own system to easily load components using
+custom elements.
 
-## `loadComponent`
-
-### Load a component from JS Vanilla without reload the page
-
-```async function loadComponent(uri, parentId, setState = true)```
-
-### Parameters
-
-> | name       | data type | description                                                   | type                    |
-> |------------|-----------|---------------------------------------------------------------|-------------------------|
-> | `uri`      | String    | Component URI                                                 | Required                |
-> | `parentId` | String    | Identifier of the parent where the component will be inserted | Required                |
-> | `setState` | Boolean   | Add component to browser history                              | Optional (default=true) |
-
-#### Return
+--------------------------------------------------------------------------------
 
-> | data type | value | description                          |
-> |-----------|-------|--------------------------------------|
-> | Boolean   | false | error, component could not be loaded |
-> | Boolean   | true  | component successfully loaded        |
+> ### [Router](router.md)
+>
+> ##### A client side router for single page application
 
---------------------------------------------------------------------------------
+> ### [Component](component.md)
+> 
+> ##### A custom HTML element for building web components
 
+> ### [Cookies](cookies.md)
+> 
+> ##### A simple and convenient way to manage cookies in a web application

front/doc/router.md

@@ -0,0 +1,105 @@
+# `Router`
+
+--------------------------------------------------------------------------------
+
+The Router class is a class designed to facilitate client-side routing in web
+applications.
+It allows to define routes and associated custom elements,
+enabling seamless navigation within a single-page application (SPA).
+
+The router automatically manages page history in the browser.
+
+--------------------------------------------------------------------------------
+
+## Instantiation
+
+To use the Router class, instantiate it with the following parameters:
+
+```javascript
+const app = document.querySelector('#app'); // Replace '#app' with the selector of your application container
+const router = new Router(app, [
+  // Define your routes here using the Route class
+]);
+```
+
+### Parameters
+
+> | name     | data type   | description            | type     |
+> |----------|-------------|------------------------|----------|
+> | `app`    | HTMLElement | Application container  | Required |
+> | `routes` | Array       | Array of route objects | Optional |
+
+## addRoute
+
+Add a new route to the router.
+Each route consists of a path and a custom element associated with that path.
+
+```javascript
+router.addRoute('/example/', 'example-component');
+```
+
+#### Route Parameters
+
+Routes can include parameters denoted by :param in the path.
+These parameters are captured and passed to the associated custom element.
+
+```javascript
+router.addRoute('/users/:id/', 'user-profile-component');
+```
+
+#### Default Route
+
+If no routes match the current path, a default route (with an empty path) is
+used.
+This is useful for defining a home page or fallback route.
+
+```javascript
+router.addRoute('', 'home-component');
+```
+
+### Parameters
+
+> | name            | data type | description                       | type     |
+> |-----------------|-----------|-----------------------------------|----------|
+> | `path`          | String    | Route path                        | Required |
+> | `customElement` | String    | Name of custom element to display | Required |
+
+## navigate
+
+Navigate between routes by specifying the new path.
+
+```javascript
+router.navigate('/example/');
+```
+
+### Parameters
+
+> | name             | data type   | description                         | type       |
+> |------------------|-------------|-------------------------------------|------------|
+> | `newPath`        | String      | New path to navigate                | Required   |
+
+### Return
+
+> | data type   | value       | description             |
+> |-------------|-------------|-------------------------|
+> | null        | null        | Error, path not found   |
+> | HTMLElement | HTMLElement | Custom element instance |
+
+--------------------------------------------------------------------------------
+
+## Example
+
+```javascript
+const app = document.querySelector('#app');
+
+const router = new Router(app, [
+  new Route('/singleplayer/', 'singleplayer-component'),
+  new Route('/multiplayer/', 'multiplayer-component'),
+  new Route('/tournaments/', 'tournaments-component'),
+  new Route('/signin/', 'signin-component'),
+  new Route('/signup/', 'signup-component'),
+  new Route('', 'home-component'),
+]);
+
+window.router = router;
+```