diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index f673a71..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5502 -} \ No newline at end of file diff --git a/agent.html b/agent.html deleted file mode 100644 index 48df1f0..0000000 --- a/agent.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - - - - - - - - SpaceTraders - - - - - -
-

PAGE D'ACCEUIL

-
- - - - - \ No newline at end of file diff --git a/css/auth.css b/css/auth.css index aa4a0d6..5bb0acb 100644 --- a/css/auth.css +++ b/css/auth.css @@ -1,63 +1,165 @@ -/* Copyright © 2023 Entreprise SpaceTarders */ +/* Copyright © 2023 Entreprise SkamCraft */ + +/* @font-face { + font-family: M42; + src: url(/fonts/m42.TTF); +} */ * { - background-color: #272727; + font-family: "Montserrat", sans-serif; + font-size: 16px; + color: #ffffff; + margin: 0; + padding: 0; + text-decoration: none; + list-style: none; } body { - text-align: center; + background-color: #212121; +} + +.logo { display: flex; justify-content: center; align-items: center; - height: 100vh; } -.container-auth { - border-radius: 10px; +.logo img { + width: 80px; + padding: 20px; +} + +.logo h4 { + font-size: 30px; +} + +.form { + --input-focus: #a37b03; + --font-color: #323232; + --font-color-sub: #666666; + --bg-color: beige; + --main-color: black; padding: 20px; + background: #eab308; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; text-align: center; - max-width: 400px; - width: 100%; + gap: 20px; + border-radius: 20px; + border: 2px solid var(--main-color); + box-shadow: 4px 4px var(--main-color); + width: 20%; + margin: auto; + margin-top: 10%; +} + +.title { + color: var(--font-color); + font-weight: 900; + font-size: 20px; } -h1 { - font-weight: bold; - font-size: 24px; - line-height: 30px; +.title span { + color: var(--font-color-sub); font-weight: 600; + font-size: 17px; } -h2 { - font-weight: 400; - font-size: 16px; - line-height: 20px; - color: #fa777c; +.input { + width: 250px; + height: 40px; + border-radius: 5px; + border: 2px solid var(--main-color); + background-color: var(--bg-color); + box-shadow: 4px 4px var(--main-color); + font-size: 15px; + font-weight: 600; + color: var(--font-color); + padding: 5px 10px; + outline: none; } -label { - font-weight: 700; - font-size: 12px; - color: #b5bac1; - line-height: 16px; +.input::placeholder { + color: var(--font-color-sub); + opacity: 0.8; } -input { - color: #fff; - width: 100%; - height: 30px; +.input:focus { + border: 2px solid var(--input-focus); +} + +.select * { + color: var(--main-color); +} + +.button-confirm { + width: 120px; + height: 40px; border-radius: 5px; - padding: 5px; + border: 2px solid var(--main-color); + background-color: var(--bg-color); + box-shadow: 4px 4px var(--main-color); + font-size: 17px; + font-weight: 600; + color: var(--font-color); + cursor: pointer; } -button { - font-weight: 500; - font-size: 16px; - line-height: 24px; - color: #fff; - margin-top: 10px; - padding: 10px 20px; +.button-confirm:active { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.link-connection { + position: relative; + display: inline-block; +} + +.link-connection:hover { cursor: pointer; - border-radius: 10px; - width: 100%; - margin-bottom: 10px; -} \ No newline at end of file + text-underline-offset: 2px; + text-decoration: underline; + transform: scale(1.1); + transition: 0.3s; +} + +.alert { + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 10%; + border-radius: 0.5rem; + border-width: 0.25rem; + border-color: #ef4444; + background-color: #fee2e2; + padding: 1rem; + width: 300px; + max-width: 90%; + text-align: center; +} + +.alert-inner { + display: flex; + align-items: center; + gap: 0.5rem; + color: #ef4444; +} + +.icon { + height: 1.25rem; + width: 1.25rem; + fill: #d94848; +} + +.message { + color: #d94848; + font-weight: 500; +} + +.content { + margin-top: 0.5rem; + font-size: 0.875rem; + color: #d94848; +} diff --git a/css/global.css b/css/global.css index 3116868..2521b66 100644 --- a/css/global.css +++ b/css/global.css @@ -1,4 +1,4 @@ -/* Copyright © 2023 Entreprise SpaceTarders */ +/* Copyright © 2023 Entreprise SkamCraft */ * { font-family: "Inter", sans-serif; @@ -33,21 +33,19 @@ html { max-height: 50px; } -.page-change-link { - padding-right: 10px; +.page-change-button { + padding-left: 10px; } -.page-change-link a { +button { margin: 2px; color: black; background-color: white; border: 2px solid white; border-radius: 10px; - - text-decoration: none; } -.page-change-link a:hover { +button:hover { border-color: #eab308; background-color: #eab308; transition: all 1s; @@ -57,6 +55,13 @@ main { flex: 1; } +#credits { + background-color: white; + border: 2px solid white; + border-radius: 10px; + color: black; +} + /* Footer */ footer { color: white; @@ -67,33 +72,3 @@ footer p { 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; -} */ \ No newline at end of file diff --git a/fonts/m42.TTF b/fonts/m42.TTF new file mode 100644 index 0000000..3609477 Binary files /dev/null and b/fonts/m42.TTF differ diff --git a/img/Skamkraft.png b/img/Skamkraft.png new file mode 100644 index 0000000..ee79f5a Binary files /dev/null and b/img/Skamkraft.png differ diff --git a/img/galaxy.png b/img/galaxy.png deleted file mode 100644 index e722e55..0000000 Binary files a/img/galaxy.png and /dev/null differ diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index bd2485d..0000000 Binary files a/img/logo.png and /dev/null differ diff --git a/index.html b/index.html index c78c3c7..b6de163 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,54 @@ - + + + + + + + + + + + + + SkamCraft + - - - - - - - - - - - - SpaceTraders - - - - - -
-

PAGE D'ACCEUIL

-
+
+ - - +
- \ No newline at end of file + + + diff --git a/login.html b/login.html index 566ee28..053d1c7 100644 --- a/login.html +++ b/login.html @@ -1,40 +1,65 @@ - + - + + + + + Skamkraft + - - - - - - - - - - - - SpaceTraders - + - -
-
-

Connexion

-

-

+ + + + + + + + + +
+
+ Bienvenue sur Skamkraft,
Entrez votre token pour continuer +
+ + +
+ Sign Up +
+
-
- - -
+ -

- - - \ No newline at end of file + + diff --git a/register.html b/register.html index 4682833..36aebfa 100644 --- a/register.html +++ b/register.html @@ -1,45 +1,68 @@ - + - + + + + + Skamkraft + - - - - - - - - - - - - SpaceTraders - + - -
-
-

S'inscrire

-

-

+ + + + + + + + -
- - -
+
+
+ Bienvenue sur Skamkraft,
+ Entrez votre symbol pour continuer +
+ + + +
+ Login +
+
-
- - -
+ -

- - - \ No newline at end of file + + diff --git a/scripts/api.js b/scripts/api.js new file mode 100644 index 0000000..82263a1 --- /dev/null +++ b/scripts/api.js @@ -0,0 +1,125 @@ +// Copyright © 2023 Entreprise SkamKraft + +"use strict"; + +const spacetradersApiUrl = "https://api.spacetraders.io/v2/"; + +const REQUEST = async (url, method, headers, data) => { + try { + const response = await $.ajax(url, { + method, + headers, + data, + }); + + return response.data; + } catch (error) { + return error; + } +}; + +export default { + Agent: { + create: (symbol, faction) => { + const url = `${spacetradersApiUrl}register`; + const headers = { "Content-Type": "application/json" }; + const data = JSON.stringify({ symbol, faction }); + + return REQUEST(url, "POST", headers, data); + }, + + get: (token) => { + const url = `${spacetradersApiUrl}my/agent`; + const headers = { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "GET", headers); + }, + + getPublic: (symbol) => { + const url = `${spacetradersApiUrl}agents/${symbol}`; + const headers = { Accept: "application/json" }; + + return REQUEST(url, "GET", headers); + }, + + list: (limit, page) => { + const url = `${spacetradersApiUrl}agents`; + const headers = { Accept: "application/json" }; + const data = { limit, page }; + + return REQUEST(url, "GET", headers, data); + }, + }, + + Faction: { + list: (limit, page) => { + const url = `${spacetradersApiUrl}factions`; + const headers = { Accept: "application/json" }; + const data = { limit, page }; + + return REQUEST(url, "GET", headers, data); + }, + }, + + System: { + list: (limit, page) => { + const url = `${spacetradersApiUrl}systems/`; + const headers = { Accept: "application/json" }; + const data = { limit, page }; + + return REQUEST(url, "GET", headers, data); + }, + + get: (symbol) => { + const url = `${spacetradersApiUrl}systems/${symbol}`; + const headers = { Accept: "application/json" }; + + return REQUEST(url, "GET", headers); + }, + }, + + Waypoint: { + list: (limit, page, systemSymbol) => { + const url = `${spacetradersApiUrl}systems/${systemSymbol}/waypoints`; + const headers = { Accept: "application/json" }; + const data = { limit, page }; + + return REQUEST(url, "GET", headers, data); + }, + + get: (systemSymbol, waypointSymbol, token) => { + const url = `${spacetradersApiUrl}systems/${systemSymbol}/waypoints/${waypointSymbol}/market`; + const headers = { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "GET", headers); + }, + }, + + Contract: { + list: (token) => { + const url = `${spacetradersApiUrl}my/contracts/`; + const headers = { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "GET", headers); + }, + + get: async (contratId, token) => { + const url = `${spacetradersApiUrl}my/contracts/${contratId}`; + const headers = { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }; + + return REQUEST(url, "GET", headers); + }, + }, +}; diff --git a/scripts/api/agent.js b/scripts/api/agent.js deleted file mode 100644 index 6bd2115..0000000 --- a/scripts/api/agent.js +++ /dev/null @@ -1,88 +0,0 @@ -// Copyright © 2023 Entreprise SpaceTarders - -"use strict"; - -export async function createAgent(symbol, faction) { - let agent; - - await $.ajax("https://api.spacetraders.io/v2/register", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - data: JSON.stringify({ - symbol: symbol, - faction: faction, - }), - success: function (response) { - agent = response.data; - }, - error: function (error) { - return error; - }, - }); - - return agent; -} - -export async function getAgent(token) { - let agent; - - await $.ajax("https://api.spacetraders.io/v2/my/agent", { - method: "GET", - headers: { - Accept: "application/json", - Authorization: `Bearer ${token}`, - }, - success: function (response) { - agent = response.data; - }, - error: function (error) { - return error; - }, - }); - - return agent; -} - -export async function listAgents(limit, page) { - let agents; - - await $.ajax("https://api.spacetraders.io/v2/agents", { - method: "GET", - headers: { - Accept: "application/json", - }, - data: { - limit: limit, - page: page, - }, - success: function (response) { - agents = response.data; - }, - error: function (error) { - console.log(error); - }, - }); - - return agents; -} - -export async function getPublicAgent(agentSymbol) { - let agent; - - await $.ajax(`https://api.spacetraders.io/v2/agents/${agentSymbol}`, { - method: "GET", - headers: { - Accept: "application/json", - }, - success: function (response) { - agent = response.data; - }, - error: function (error) { - console.log(error); - }, - }); - - return agent; -} diff --git a/scripts/api/systems.js b/scripts/api/systems.js deleted file mode 100644 index 60c1c19..0000000 --- a/scripts/api/systems.js +++ /dev/null @@ -1,117 +0,0 @@ -// Copyright © 2023 Entreprise SpaceTarders - -"use strict"; - -export async function listSystems(limit, page) { - let systems; - - await $.ajax("https://api.spacetraders.io/v2/systems/", { - method: "GET", - headers: { - Accept: "application/json", - }, - data: { - limit: limit, - page: page, - }, - success: function (response) { - systems = response.data; - }, - error: function (error) { - console.log(error); - }, - }); - - return systems; -} - -export async function getSystem(systemSymbol) { - let system; - - await $.ajax(`https://api.spacetraders.io/v2/systems/${systemSymbol}`, { - method: "GET", - headers: { - Accept: "application/json", - }, - success: function (response) { - system = response.data; - }, - error: function (error) { - console.log(error); - }, - }); - - return system; -} - -export async function listWaypointsInSystem(limit, page, systemSymbol) { - let waypoints; - - await $.ajax( - `https://api.spacetraders.io/v2/systems/${systemSymbol}/waypoints`, - { - method: "GET", - headers: { - Accept: "application/json", - }, - data: { - limit: limit, - page: page, - }, - success: function (response) { - waypoints = response.data; - }, - error: function (error) { - console.log(error); - }, - } - ); - - return waypoints; -} - -export async function getWaypoint(systemSymbol, waypointSymbol) { - let waypoint; - - await $.ajax( - `https://api.spacetraders.io/v2/systems/${systemSymbol}/waypoints/${waypointSymbol}`, - { - method: "GET", - headers: { - Accept: "application/json", - }, - success: function (response) { - waypoint = response.data; - }, - error: function (error) { - console.log(error); - }, - } - ); - - return waypoint; -} - -export async function getMarket(systemSymbol, waypointSymbol, token) { - let market; - - await $.ajax( - `https://api.spacetraders.io/v2/systems/X1-KD70/waypoints/X1-KD70-AA1X/market`, - { - method: "GET", - headers: { - Accept: "application/json", - Authorization: `Bearer ${token}`, - }, - success: function (response) { - console.log(response); - market = response; - }, - error: function (error) { - console.log(error); - }, - } - ); - - return market; -} diff --git a/scripts/auth.js b/scripts/auth.js index 0eaa0d8..5fd96b6 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -1,60 +1,83 @@ -// Copyright © 2023 Entreprise SpaceTarders +// Copyright © 2023 Entreprise SkamCraft "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 +import SpaceTraders from "./api.js"; + +const $inputToken = $("#input-token"); +const $inputSymbol = $("#input-symbol"); +const $inputFaction = $("#input-faction"); +const $alert = document.querySelector("#box-alert"); +const $error = $("#error-message"); + +const showError = (message) => { + $alert.removeAttribute("hidden"); + $error.text(message); +}; + +const redirectToIndex = () => { + window.location.href = "/index.html"; +}; + +export default { + login: async () => { + const token = $inputToken.val(); + + if (!token) { + showError("Token manquant"); + return; + } + + try { + await SpaceTraders.Agent.get(token); + localStorage.setItem("token", token); + redirectToIndex(); + } catch { + showError("Token invalide"); + } + }, + + register: async () => { + const symbol = $inputSymbol.val(); + + if (!symbol) { + showError("Symbol manquant"); + return; + } + + const faction = $inputFaction.val(); + + console.log(faction); + + if (!faction) { + showError("Faction manquante"); + return; + } + + try { + const agent = await SpaceTraders.Agent.create(symbol, faction); + + if (agent.token !== undefined) { + localStorage.setItem("token", agent.token); + redirectToIndex(); + } else { + showError("Symbol ou faction invalide"); + } + } catch { + showError("Erreur lors de l'inscription"); + } + }, + + isLogin: async () => { + const token = localStorage.getItem("token"); + + if (!token) return false; + + try { + await SpaceTraders.Agent.get(token); + return true; + } catch { + return false; + } + }, +}; diff --git a/scripts/main.js b/scripts/main.js index 631fc7a..844bdb1 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,25 +1,84 @@ -// Copyright © 2023 Entreprise SpaceTarders +// Copyright © 2023 Entreprise SkamCraft "use strict"; -import { login } from './auth.js' -import { register } from './auth.js' -import { isLogin } from './auth.js'; +import AUTH from "./auth.js"; +import SpaceTraders from "./api.js"; $(document).ready(async function () { + //Auth + if (document.URL.includes("login.html")) { + $("#btn-login").on("click", () => { + AUTH.login(); + }); + return; + } - if (document.URL.includes('login.html')) { - $('#btn-login').on('click', () => { - login(); - }); - return; - } - if (document.URL.includes('register.html')) { - $('#btn-register').on('click', () => { - register(); - }) - return; - } - - if (!await isLogin()) window.location.href = '/login.html'; + if (document.URL.includes("register.html")) { + const factions = await SpaceTraders.Faction.list(10, 1); + factions.forEach((faction) => { + const option = ``; + $("#group-faction").append(option); + }); + + $("#btn-register").on("click", () => { + AUTH.register(); + }); + return; + } + + if (!(await AUTH.isLogin())) window.location.href = "login.html"; + + agent(); + + //Buttons + $("#btn-contract").on("click", () => { + contract(); + }); + $("#btn-faction").on("click", () => {}); + $("#btn-ship").on("click", () => {}); + $("#btn-system").on("click", () => {}); + $("#btn-logout").on("click", () => { + logout(); + }); }); + +function loadPage(page) { + $("main").load(`templates/${page}.html`); +} + +function logout() { + localStorage.removeItem("token"); + window.location.href = "login.html"; +} + +async function agent() { + let token = localStorage.getItem("token"); + let agent = await SpaceTraders.Agent.get(token); + + $("#credits").text(agent.credits.toLocaleString() + " $"); +} + +async function contract() { + const token = localStorage.getItem("token"); + const contracts = await SpaceTraders.Contract.list(token); + + $("main").empty(); + + contracts.forEach((contract) => { + let card = `
+
+

${contract.id}

+
+
+ +
+ +
+ + +
+
;`; + $("main").append(card); + }); +} diff --git a/templates/contract.html b/templates/contract.html new file mode 100644 index 0000000..ee9d8d9 --- /dev/null +++ b/templates/contract.html @@ -0,0 +1 @@ +
diff --git a/templates/faction.html b/templates/faction.html new file mode 100644 index 0000000..c5b5593 --- /dev/null +++ b/templates/faction.html @@ -0,0 +1 @@ +