Skip to content

Commit

Permalink
Map now shows... something
Browse files Browse the repository at this point in the history
  • Loading branch information
@Not-A-Normal-Robot
Not-A-Normal-Robot committed Jan 13, 2024
1 parent d9d3ed1 commit 77f30fe
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 101 deletions.
2 changes: 1 addition & 1 deletion data/map/vanilla.json
View file

Large diffs are not rendered by default.

128 changes: 65 additions & 63 deletions js/background.js
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,83 @@
const bgCanvas = document.getElementById("bg");
const bgContext = bgCanvas.getContext("2d");
{
const bgCanvas = document.getElementById("bg");
const bgContext = bgCanvas.getContext("2d");

let bgEnabled = localStorage.getItem('bgEnabled');
if(bgEnabled === null) {
bgEnabled = "true";
localStorage.setItem('bgEnabled', bgEnabled);
}
bgEnabled = bgEnabled === "true";

const bgToggle = document.getElementById("bg-toggle");
if(bgToggle !== null) {
bgToggle.checked = bgEnabled;
bgToggle.addEventListener('change', () => {
bgEnabled = bgToggle.checked;
let bgEnabled = localStorage.getItem('bgEnabled');
if(bgEnabled === null) {
bgEnabled = "true";
localStorage.setItem('bgEnabled', bgEnabled);
});
}
}
bgEnabled = bgEnabled === "true";

let width = bgCanvas.offsetWidth;
let height = bgCanvas.offsetHeight;
const bgToggle = document.getElementById("bg-toggle");
if(bgToggle !== null) {
bgToggle.checked = bgEnabled;
bgToggle.addEventListener('change', () => {
bgEnabled = bgToggle.checked;
localStorage.setItem('bgEnabled', bgEnabled);
});
}

let lastTimestamp = performance.now();
let stars = [];
let width = bgCanvas.offsetWidth;
let height = bgCanvas.offsetHeight;

function random(min, max){ return Math.random() * (min - max) + max }
let lastTimestamp = performance.now();
let stars = [];

function resize(){
width = bgCanvas.offsetWidth;
height = bgCanvas.offsetHeight;
function random(min, max){ return Math.random() * (min - max) + max }

bgCanvas.width = width;
bgCanvas.height = height;
function resize(){
width = bgCanvas.offsetWidth;
height = bgCanvas.offsetHeight;

let starCount = Math.floor(width * height * 6e-4)
stars = new Array(starCount);
bgCanvas.width = width;
bgCanvas.height = height;

for (let i = 0; i < starCount; i++) {
let size = random(2.6, 4)
stars[i] = {
size: size,
x: random(-10, width + 10),
y: random(-10, height + 10),
dx: random(-0.001, 0.001) * size,
dy: random(-0.001, 0.001) * size
let starCount = Math.floor(width * height * 6e-4)
stars = new Array(starCount);

for (let i = 0; i < starCount; i++) {
let size = random(2.6, 4)
stars[i] = {
size: size,
x: random(-10, width + 10),
y: random(-10, height + 10),
dx: random(-0.001, 0.001) * size,
dy: random(-0.001, 0.001) * size
}
}
}
}

function draw(timestamp){
let dt = timestamp - lastTimestamp;
lastTimestamp = timestamp;
function draw(timestamp){
let dt = timestamp - lastTimestamp;
lastTimestamp = timestamp;

if(width !== bgCanvas.offsetWidth || height !== bgCanvas.offsetHeight) resize();
if(width !== bgCanvas.offsetWidth || height !== bgCanvas.offsetHeight) resize();

bgContext.clearRect(0, 0, width, height);
bgContext.clearRect(0, 0, width, height);

if(!bgEnabled) {
return requestAnimationFrame(draw);
}

// move stars
for (let i = 0; i < stars.length; i++) {
const star = stars[i];
star.x += (star.dx * dt)
star.y += (star.dy * dt)
star.x %= width + 10
star.y %= height + 10
}
if(!bgEnabled) {
return requestAnimationFrame(draw);
}
// move stars
for (let i = 0; i < stars.length; i++) {
const star = stars[i];
star.x += (star.dx * dt)
star.y += (star.dy * dt)
star.x %= width + 10
star.y %= height + 10
}

// draw stars
bgContext.fillStyle = "#FFFFFFAF"
for (let i = 0; i < stars.length; i++) {
const star = stars[i];
bgContext.fillRect(star.x, star.y, star.size, star.size);
// draw stars
bgContext.fillStyle = "#FFFFFFAF"
for (let i = 0; i < stars.length; i++) {
const star = stars[i];
bgContext.fillRect(star.x, star.y, star.size, star.size);
}
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
}

resize();
draw(performance.now());
resize();
draw(performance.now());
}
18 changes: 1 addition & 17 deletions js/faq.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,8 @@
const faqSection = document.getElementsByClassName('faq')[0];

// if(faqSection === undefined){
// console.error("Could not find FAQ section!");
// alert("ERROR: Could not find the FAQ section. Is faq.js being loaded on the wrong page?");
// } else {
// fetch('../data/faq.json')
// .then(response => response.json())
// .then(faqObject => {
// if(faqSection === undefined){
// console.error("Could not find FAQ section!");
// alert("ERROR: Could not find the FAQ section. Is faq.js being loaded on the wrong page?");
// } else { addFAQEntries(faqObject); }
// });
// }

addButtonListeners();

const faqLastUpdatedElement = document.getElementById('last-updated');
if(faqLastUpdatedElement !== undefined) {
// fetch github api to get date of last edit of faq.json
// fetch github api to get date of last edit of FAQ
fetch('https://api.github.com/repos/techmino-hub/techmino-hub.github.io/commits?path=faq.html')
.then(response => response.json())
.then(json => {
Expand Down
54 changes: 35 additions & 19 deletions js/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ const mapContext = mapCanvas.getContext("2d");
const urlParams = new URLSearchParams(window.location.search);
const mapName = urlParams.get("m") ?? 'vanilla';


let map = {};
let camX = 0;
let camY = 0;
let camZoom = 1;
let camZoom = 0.999;
let area = mapCanvas.width * mapCanvas.height;
let prevTimestamp = performance.now();
let selected = null;

Expand All @@ -16,7 +18,7 @@ function loadMapData(){

fetch(mapURL)
.then(response => {
if (!response.ok) throw new Error("${response.status} - ${response.statusText}");
if (!response.ok) throw new Error(`${response.status} - ${response.statusText}`);
return response.json();
})
.then(_map => {
Expand All @@ -30,28 +32,42 @@ function loadMapData(){
window.location.href = "/";
})
}
loadMapData(); // Error loading map: TypeError: map is undefined Press OK to return to home page.
loadMapData();

function getMapCoords(x, y, r) {
let scaleFactor = camZoom * (1280 * 720) / area;
x += camX; y += camY;
x *= scaleFactor; y *= scaleFactor; r *= scaleFactor;
x += mapCanvas.width / 2; y += mapCanvas.height / 2;
return [x, y, r, r];
}

function drawMap(timestamp){
let dt = timestamp - prevTimestamp;
prevTimestamp = timestamp;

mapCanvas.width = mapCanvas.offsetWidth;
mapCanvas.height = mapCanvas.offsetHeight;

mapContext.translate(camX, camY);
mapContext.scale(camZoom, camZoom);
for (let i = 0; i < map.length; i++) {
const node = map[i];

// node.name;
// node.x;
// node.y;
// node.size;
// node.icon;
// node.unlock;
// node.shape;

mapContext.clearRect(0, 0, mapCanvas.offsetWidth, mapCanvas.offsetHeight);

if(mapCanvas.width !== mapCanvas.offsetWidth || mapCanvas.height !== mapCanvas.offsetHeight) {
mapCanvas.width = mapCanvas.offsetWidth - 2;
mapCanvas.height = mapCanvas.width * 0.5625;
area = mapCanvas.width * mapCanvas.height;
}

mapContext.fillStyle = "#FFFFFFFF";
for(mode of Object.values(map.modes)){
mapContext.fillRect(...getMapCoords(mode.x, mode.y, mode.size));
}

requestAnimationFrame(drawMap);
}
}

function moveMap(dx, dy){
camX += dx;
camY += dy;

// clamp camX and camY in bounds
camX = Math.min(Math.max(camX, map.min_x - mapCanvas.width / 2), map.max_x + mapCanvas.width / 2);
camY = Math.min(Math.max(camY, map.min_y - mapCanvas.height / 2), map.max_y + mapCanvas.height / 2);
}
2 changes: 1 addition & 1 deletion map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h1>

<section class="content">
<h1 class="title">Map</h1>
<h1>(this page doesn't work atm, sorry!)</h1>
<h1>(in development!)</h1>
<noscript><h1>This page requires JavaScript to function properly.</h1></noscript>
<canvas id="map"></canvas>
</section>
Expand Down

0 comments on commit 77f30fe

Please sign in to comment.