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