diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/css/auth.css b/css/auth.css new file mode 100644 index 0000000..89c4fda --- /dev/null +++ b/css/auth.css @@ -0,0 +1,61 @@ +* { + background-color: #272727; +} + +body { + text-align: center; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container-auth { + border-radius: 10px; + padding: 20px; + text-align: center; + max-width: 400px; + width: 100%; +} + +h1 { + font-weight: bold; + font-size: 24px; + line-height: 30px; + font-weight: 600; +} + +h2 { + font-weight: 400; + font-size: 16px; + line-height: 20px; + color: #fa777c; +} + +label { + font-weight: 700; + font-size: 12px; + color: #b5bac1; + line-height: 16px; +} + +input { + color: #fff; + width: 100%; + height: 30px; + border-radius: 5px; + padding: 5px; +} + +button { + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #fff; + margin-top: 10px; + padding: 10px 20px; + cursor: pointer; + border-radius: 10px; + width: 100%; + margin-bottom: 10px; +} diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000..6ba3f15 --- /dev/null +++ b/css/global.css @@ -0,0 +1,95 @@ +* { + font-family: "Inter", sans-serif; + box-sizing: border-box; + overflow: hidden; + background-color: #272727; +} + +body, +html { + height: 100%; + display: flex; + flex-direction: column; +} + +/* Menu */ +.menu { + display: flex; + align-items: center; + justify-content: space-between; +} + +.title-section { + color: white; + display: flex; + align-items: center; + padding-left: 10px; +} + +.title-section img { + max-width: 80px; + max-height: 50px; +} + +.page-change-button { + padding-right: 10px; +} + +.page-change-button button { + margin: 2px; + color: black; + background-color: white; + border: 1px solid white; + border-radius: 10px; +} + +.page-change-button button:hover { + border-color: #eab308; + background-color: #eab308; + transition: all 1s; +} + +main { + flex: 1; +} + +/* Footer */ +footer { + color: white; +} + +footer p { + display: flex; + justify-content: center; + margin-bottom: 0px; +} + +/* Canvas system +#canvas-system { + border: 1px solid white; +} + +/* Login modal */ +/* #loginModal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px black; + z-index: 1000; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} */ + +/* #loginModal p { + margin-top: -10px; +} + +#loginModal input { + margin-bottom: 10px; +} */ diff --git a/img/galaxy.png b/img/galaxy.png new file mode 100644 index 0000000..e722e55 Binary files /dev/null and b/img/galaxy.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..bd2485d Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html index 6e64a39..58fd362 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,47 @@ - - - - - - - - SpaceTraders - - - + + + + + + + + + + + + + + SpaceTraders + + + + + +
+

PAGE D'ACCEUIL

+
+ + + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 0000000..bb73ef8 --- /dev/null +++ b/login.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + SpaceTraders + + + +
+
+

Connexion

+

+

+ +
+ + +
+ + + + S'inscrire +

+
+ + + \ No newline at end of file diff --git a/register.html b/register.html new file mode 100644 index 0000000..7d16bf9 --- /dev/null +++ b/register.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + SpaceTraders + + + +
+
+

S'inscrire

+

+

+ +
+ + +
+ +
+ + +
+ + + + Se connecter +

+
+ + + \ No newline at end of file diff --git a/scripts/agent.js b/scripts/api/agent.js similarity index 96% rename from scripts/agent.js rename to scripts/api/agent.js index b2f971c..6acb268 100644 --- a/scripts/agent.js +++ b/scripts/api/agent.js @@ -1,3 +1,5 @@ +"use strict"; + export async function createAgent(symbol, faction) { let agent; @@ -14,7 +16,7 @@ export async function createAgent(symbol, faction) { agent = response.data; }, error: function (error) { - console.log(error); + return error; }, }); @@ -34,7 +36,7 @@ export async function getAgent(token) { agent = response.data; }, error: function (error) { - console.log(error); + return error; }, }); diff --git a/scripts/systems.js b/scripts/api/systems.js similarity index 99% rename from scripts/systems.js rename to scripts/api/systems.js index c5d3587..8d9d4f6 100644 --- a/scripts/systems.js +++ b/scripts/api/systems.js @@ -1,3 +1,5 @@ +"use strict"; + export async function listSystems(limit, page) { let systems; diff --git a/scripts/auth.js b/scripts/auth.js new file mode 100644 index 0000000..3c3198c --- /dev/null +++ b/scripts/auth.js @@ -0,0 +1,58 @@ +"use strict"; + +import { getAgent } from "./api/agent.js"; +import { createAgent } from "./api/agent.js"; + +export async function login() { + let token = $('#input-token').val(); + + if (!token) { + $('#error').text('Token manquant'); + return; + } + + try { + await getAgent(token); + localStorage.setItem('token', token); + window.location.href = '/index.html'; + } catch (error) { + $('#error').text('Token invalide'); + } +} + + +export async function register() { + + let symbol = $('#input-symbol').val(); + if (!symbol) { + $('#error').text('Symbol manquant'); + return; + } + + let faction = $('#input-faction').val(); + if (!faction) { + $('#error').text('Faction manquante'); + return; + } + + try { + await createAgent(symbol, faction); + localStorage.setItem('token', token); + window.location.href = '/index.html'; + } catch { + $('#error').text('Symbol ou faction invalide'); + } +} + +export async function isLogin() { + let token = localStorage.getItem('token'); + + if (!token) return false; + + try { + await getAgent(token); + return true; + } catch { + return false; + } +} \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index e459b9d..ba71e56 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,29 +1,22 @@ "use strict"; -import { createAgent } from "./agent.js"; -import { getAgent } from "./agent.js"; -import { listAgents } from "./agent.js"; -import { getPublicAgent } from "./agent.js"; - -import { listSystems } from "./systems.js"; -import { getSystem } from "./systems.js"; -import { listWaypointsInSystem } from "./systems.js"; -import { getWaypoint } from "./systems.js"; -import { getMarket } from "./systems.js"; - -const token = - "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiVEVTVDUzNTYiLCJ2ZXJzaW9uIjoidjIuMS4yIiwicmVzZXRfZGF0ZSI6IjIwMjMtMTEtMTgiLCJpYXQiOjE3MDA4MzEzOTEsInN1YiI6ImFnZW50LXRva2VuIn0.H4C3rNwgaBf6ych4txV7WO3jwt-ZAsb6jWSnQ3EMZfO7BgVbUW00a3uMtiQ7qCBuZ91YnmtUL8PZSRnR1RzCAjUd6Y64Kwt8cARgSZ56a08zIreXQ66WsXpm-pVXHKlrD7LeA9sHzZGhD9yADnghbJmCy6UoiYhgr8I7OwL9EIf-nb3B5l2UTchiNHTNmKjsggycQDDaK2yCcKXhy6rro8-ptogU5QFFYiIbshCiEos4Sc-CHbKci-DQpzWb9FcsNntb1PdZcm2hhjGDi4KD8Q1Ccvd-m1vTH4SwV1xt66tT5SMMuBA7nblsC2DlNV682PZi27XcpibMIyWoSQ938w"; - -// const systemSym = "X1-KD70"; -// const waypointSym = "X1-KD70-AA1X"; +import { login } from './auth.js' +import { register } from './auth.js' +import { isLogin } from './auth.js'; $(document).ready(async function () { - let systemSymbol = await listSystems(1, 1); - systemSymbol = systemSymbol[0].symbol; - - let waypointSymbol = await listWaypointsInSystem(1, 1, systemSymbol); - waypointSymbol = waypointSymbol[0].symbol; + if (document.URL.includes('login.html')) { + $('#btn-login').on('click', () => { + login(); + }); + return; + } + if (document.URL.includes('register.html')) { + $('#btn-register').on('click', () => { + register(); + }) + return; + } - let market = await getMarket(systemSymbol, waypointSymbol, token); - console.log(market); + if (!await isLogin()) window.location.href = '/login.html'; }); diff --git a/scripts/system.js b/scripts/system.js new file mode 100644 index 0000000..2dd0498 --- /dev/null +++ b/scripts/system.js @@ -0,0 +1,50 @@ +"use strict"; + +// let canvas = document.getElementById("canvas-system"); +// let ctx = canvas.getContext("2d"); + +// window.addEventListener("resize", function () { +// resizeCanvas(canvas, ctx); +// }); + +// resizeCanvas(canvas, ctx); + +// let offset = { +// x: 0, +// y: 0, +// }; + +// drawSystem(canvas, ctx, offset); + +// canvas.addEventListener("mousedown", function (event) { +// let rec = canvas.getBoundingClientRect(); +// let mousePos = { x: event.clientX - rec.x, y: event.clientY - rec.y }; +// offset.x = mousePos.x; +// offset.y = mousePos.y; +// drawSystem(canvas, ctx, offset); +// }); + +// async function drawSystem(canvas, ctx, offset) { +// let waypoints = await listWaypointsInSystem(20, 1, "X1-KD70"); +// ctx.clearRect(0, 0, canvas.width, canvas.height); + +// waypoints.forEach((waypoint) => { +// ctx.beginPath(); +// ctx.arc(waypoint.x, waypoint.y, 10, 0, Math.PI * 2, false); +// ctx.fill(); +// ctx.closePath(); +// }); +// } + +// function resizeCanvas(canvas, ctx) { +// let header = document.getElementById("header"); +// let footer = document.getElementById("footer"); + +// let availableHeight = +// window.innerHeight - header.clientHeight - footer.clientHeight; + +// canvas.width = window.innerWidth - 18; +// canvas.height = availableHeight - 20; + +// ctx.translate(canvas.width / 2, canvas.height / 2); +// }