parent
4f362e00cc
commit
dcec328025
23 changed files with 70 additions and 151 deletions
@ -0,0 +1 @@ |
|||||||
|
/.vs/ |
@ -1,5 +0,0 @@ |
|||||||
canvas { |
|
||||||
width: 50%; |
|
||||||
border: 2px solid black; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
@ -0,0 +1,14 @@ |
|||||||
|
<nav> |
||||||
|
<div class=".nav-brand"> |
||||||
|
<img src="assets/" /> |
||||||
|
</div> |
||||||
|
<ul class="nav-links"> |
||||||
|
<li class="nav-link">Contracts</li> |
||||||
|
<li class="nav-link">System</li> |
||||||
|
<li class="nav-link">Ships</li> |
||||||
|
<li class="nav-link">Profile</li> |
||||||
|
<li class="nav-link">Ships</li> |
||||||
|
</ul> |
||||||
|
</nav> |
||||||
|
<main id="block-content"></main> |
||||||
|
<footer></footer> |
@ -0,0 +1,2 @@ |
|||||||
|
<p>Coucou</p> |
||||||
|
<button id="btn1">Btn 1</button> |
@ -0,0 +1,2 @@ |
|||||||
|
<p>Hello</p> |
||||||
|
<button id="btn2">Btn 2</button> |
@ -0,0 +1,12 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title></title> |
||||||
|
<link rel="stylesheet" href="css/style.css" /> |
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
||||||
|
<script type="module" src="js/index.js" defer></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
@ -1,41 +0,0 @@ |
|||||||
class renderer { |
|
||||||
constructor(canvas) { |
|
||||||
this.canvas = canvas; |
|
||||||
this.ctx = canvas.getContext("2d"); |
|
||||||
this.waypoints = []; |
|
||||||
this.ships = []; |
|
||||||
} |
|
||||||
|
|
||||||
drawSystem() { |
|
||||||
const canvas = document.getElementById("canvas"); |
|
||||||
let w = canvas.width; |
|
||||||
let h = canvas.height;
|
|
||||||
const ctx = canvas.getContext("2d"); |
|
||||||
|
|
||||||
this.waypoints.forEach(waypoint => { |
|
||||||
switch (waypoint.type) { |
|
||||||
case "PLANET":
|
|
||||||
drawWaypoint(waypoint, ctx, w/2, h/2, 'green'); |
|
||||||
break; |
|
||||||
case "ASTEROID":
|
|
||||||
drawWaypoint(waypoint, ctx, w/2, h/2, 'blue'); |
|
||||||
break; |
|
||||||
case "GAS_GIANT":
|
|
||||||
drawWaypoint(waypoint, ctx, w/2, h/2, 'red'); |
|
||||||
break;
|
|
||||||
} |
|
||||||
|
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
drawShips() { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
drawWaypoint(wayPoint, ctx, w, h, color) { |
|
||||||
ctx.beginPath(); |
|
||||||
ctx.fillStyle = color; |
|
||||||
ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, 1, 0, 2 * Math.PI); |
|
||||||
ctx.fill(); |
|
||||||
} |
|
||||||
} |
|
@ -0,0 +1,12 @@ |
|||||||
|
import {UIRenderer} from "./ui/templeting_engine.js"; |
||||||
|
|
||||||
|
let UI = new UIRenderer("html"); |
||||||
|
|
||||||
|
UI.render("templates/test.html"); |
||||||
|
|
||||||
|
UI.add_event("#btn1", "click", () => { |
||||||
|
UI.render("templates/test2.html"); |
||||||
|
}); |
||||||
|
UI.add_event("#btn2", "click", () => { |
||||||
|
UI.render("templates/test.html"); |
||||||
|
}) |
@ -1,85 +0,0 @@ |
|||||||
let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw"; |
|
||||||
let offset = { |
|
||||||
x: 10, |
|
||||||
y: 10 |
|
||||||
}; |
|
||||||
|
|
||||||
function initGame() { |
|
||||||
const settings = { |
|
||||||
async: true, |
|
||||||
crossDomain: true, |
|
||||||
url: 'https://api.spacetraders.io/v2/register', |
|
||||||
method: 'POST', |
|
||||||
headers: { |
|
||||||
'Content-Type': 'application/json', |
|
||||||
Accept: 'application/json' |
|
||||||
}, |
|
||||||
processData: false, |
|
||||||
data: '{\n "faction": "COSMIC",\n "symbol": "ANNNNulax1225",\n "email": ""\n}' |
|
||||||
}; |
|
||||||
|
|
||||||
$.ajax(settings).done(function (response) { |
|
||||||
console.log(response); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function getAgent() { |
|
||||||
const settings = { |
|
||||||
async: true, |
|
||||||
crossDomain: true, |
|
||||||
url: 'https://api.spacetraders.io/v2/my/agent', |
|
||||||
method: 'GET', |
|
||||||
headers: { |
|
||||||
Accept: 'application/json', |
|
||||||
Authorization: `Bearer ${token}` |
|
||||||
} |
|
||||||
}; |
|
||||||
$.ajax(settings).done(function (reponse) { |
|
||||||
$('.main-window').prepend(` |
|
||||||
<article class="agent-card"> |
|
||||||
<p class="account">${reponse.data.accountId}</p> |
|
||||||
<p class="symbol">${reponse.data.symbol}</p> |
|
||||||
<p class="headquarters">${reponse.data.headquarters}</p> |
|
||||||
<p class="credits">${reponse.data.credits}</p> |
|
||||||
<p class="startingFaction">${reponse.data.startingFaction}</p> |
|
||||||
<p class="shipCount">${reponse.data.shipCount}</p> |
|
||||||
</article> |
|
||||||
`);
|
|
||||||
let metaSystem = reponse.data.headquarters.split("-"); |
|
||||||
getSystem(metaSystem[0] + "-" + metaSystem[1]); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function getWayPoint(wayPoint) { |
|
||||||
const settings = { |
|
||||||
async: true, |
|
||||||
crossDomain: true, |
|
||||||
url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/waypointSymbol`, |
|
||||||
method: 'GET', |
|
||||||
headers: { |
|
||||||
Accept: 'application/json' |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
$.ajax(settings).done(function (response) { |
|
||||||
console.log(response); |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
function getSystem(system) { |
|
||||||
const settings = { |
|
||||||
async: true, |
|
||||||
crossDomain: true, |
|
||||||
url: `https://api.spacetraders.io/v2/systems/${system}`, |
|
||||||
method: 'GET', |
|
||||||
headers: { |
|
||||||
Accept: 'application/json' |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
$.ajax(settings).done(function (response) { |
|
||||||
drawSystem(response.data.waypoints); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
getAgent(); |
|
@ -0,0 +1,27 @@ |
|||||||
|
export class UIRenderer { |
||||||
|
constructor(path) { |
||||||
|
this.templatePath = path; |
||||||
|
} |
||||||
|
render(template) { |
||||||
|
this.get_template((reponse) => { |
||||||
|
$('body').html(reponse); |
||||||
|
this.get_template((reponse) => { |
||||||
|
$('#block-content').html(reponse); |
||||||
|
}, template) |
||||||
|
}); |
||||||
|
} |
||||||
|
get_template(callback, template = "") { |
||||||
|
let url = template === "" ? `${this.templatePath}/template.html`: `${this.templatePath}/${template}`; |
||||||
|
let data = $.ajax(url,{ |
||||||
|
async: false, |
||||||
|
method: "GET", |
||||||
|
success: callback, |
||||||
|
fail: (err) => { |
||||||
|
console.log(err); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
add_event(tag, action, callback) { |
||||||
|
$("body").on(action, tag, callback); |
||||||
|
} |
||||||
|
} |
@ -1,19 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
<link rel="stylesheet" href="../css/style.css"> |
|
||||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> |
|
||||||
<script src="../js/main.js"></script> |
|
||||||
<title>Space traders</title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<main class="main-window"> |
|
||||||
<input id="token" type="text"> |
|
||||||
<br> |
|
||||||
<canvas id="canvas"></canvas> |
|
||||||
</main> |
|
||||||
</body> |
|
||||||
</html> |
|
@ -1 +0,0 @@ |
|||||||
eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQU5OTk5VTEFYMTIyNSIsInZlcnNpb24iOiJ2Mi4xLjEiLCJyZXNldF9kYXRlIjoiMjAyMy0xMS0wNCIsImlhdCI6MTcwMDIyNDU5MSwic3ViIjoiYWdlbnQtdG9rZW4ifQ.r05mWtD5FjC4s6Td-ycmHdzL7C2s75lz3q7OBmWeCqUUZ1ejPsRGQRWJDPmIh1kAqO4D9FFs3GCTPZUn1KsnQ-xmDvsIi_mqC1gJV-Q0irI7gwfsGXbfLaVCXo-Q98C_QWRh-O_xkrbhJkCcvnwdEhZm7FnZ3PL4XXKrG0XNa98JrnmG0qlz0cv8V9Q0sSIwXZbvA9BrhuV8PK7_YzPc6LZuNqgPeKiX_B-tSIHHl6Sr1EzuydnczmuS-xKQnbhmcqnpaCXzQmJr7tA8KLgu70KqpPCvA8AI6PLmBlvPWtZ20RdzezqlBh6S9SrBzQ9R0zr_9RyJxq28ws2jnHpVPw |
|
Loading…
Reference in New Issue