jsolly / geoasteroids

Hello world, I'm John!

Open John's Portfolio

---

How is the ranking calculated?

Most Used Languages

Geospatial Expertise 🌎

Web Dev ❤️

Who I've worked with

Additional Areas of Expertise

geoasteroids's Issues

Adjust music tempo based on score rather than roidCount

Context

Currently, the way the music tempo is calculated doesn't really make sense as the player no longer destroys all the asteroids to go to the next level.

Ideal behavior

Each new level should slightly increase the music tempo

Migrate to requestAnimationFrame( ) from setInterval( )

Current Behavior

We use setInterval to drive animations in main.js

// Set up game loop
setInterval(update, 1000 / FPS)

Although this is an easy way to do it, it does not result in the cleanest animations. See this SO answer for more info.

I looked into the following resources, but I wasn't able to get a firm understanding of the best way to do it for GeoAsteroids
https://blog.webdevsimplified.com/2021-12/request-animation-frame/
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
https://dev.to/moyedx3/10-settimeout-setinterval-and-requestanimationframe-1io4
https://dev.to/suprabhasupi/requestanimationframe-in-javascript-n12

I tried

// Set up game loop
window.requestAnimationFrame(update)

and it results in nothing animating. I think we need to do more than a one-liner.

Add Global Scoreboard

Context

Users should be able to see the global top 10 scores when the game ends

Current Behavior/Workaround

Only showing current user's top score via local storage

Things to consider

Store in a flat file or database?
Any issues with concurrency if using a flat file?
Will need to provide a way to add three-letter username to associate with score
Will need placeholders for the top 10 scores to start

Change sound effects to my voice

things to think about

File size
Quality
Length
Tool (Audacity?)
Format (mp4?)

Add loading animation to show high scores modal

Context

There's a small delay when showing highscores. This feels odd cause the user is just staying at a blank modal until it populates.

This is partly due to /highscores being tied to a serverless function that needs to pull records from MongoDB

Ideal behavior

Use a cool spinner/loader until the DOM is ready to be updated with highscores

Handle case where user has disabled all cookies

Context

If a user blocks all cookies, I believe this also stops any application from modifying local storage.

Current Behavior/Workaround

We currently read/write from local storage to get a user's high score and current score.

Ideal behavior

If the user has blocked all cookies, we should stop reading/writing to localstorage and treat each 'session' as brand new.

Things to consider

How to keep track of high score if we can't access local storage?

Store sound/music preferences in session/localstorage

Current Behavior/Workaround

Music/Sound preferences are lost any time the page is refreshed. The default is off for both. See the constants SOUND_ON and MUSIC_ON.

Ideal behavior

If the user toggles the volume on/off, save that in a cookie/local storage so it is respected when the user returns (if they haven't cleared their cache).

Make a mobile friendly version?

Not sure who would want to play on their phone, but something to think about.

Add leveling functionality back

Context

At some point, we lost 'leveling up' after the user has exceeded NEXT_LEVEL_SCORE, which should activate text on the screen that says
level X where X is the new level reached

Steps to Reproduce

1 - Start shooting asteroids until you exceed NEXT_LEVEL_SCORE (I think it's 1000 right now)
Nothing happens

Expected Behavior

The text 'Level 2" should be shown on screen for TEXT_FADE_TIME seconds

Environment

Dev and Prod

Add a logging tool

Context

Currently, there is no logging = (

Current Behavior/Workaround

Just using console.log for debug purposes.

Ideal behavior

Use something like:

Winston: A versatile logging library that allows for custom log levels, transports (where your logs are sent), and even multiple simultaneous loggers. Transports include console output, file output, and more.

Bunyan: Another versatile logging library. One of Bunyan's notable features is its support for "structured logging", a logging approach where logs are written in a machine-readable format (usually JSON). This can be very useful for searching and analyzing your logs.

Morgan: A HTTP request logger middleware for Node.js. It simplifies the process of logging requests to your application. It's very useful in combination with other loggers like Winston and Bunyan, especially when you're building a web server or application.

Things to consider

Which functions should be logging information? How will we handle different logging levels (INFO, DEBUG, ERROR)

Make thruster flame look cooler

Current Behavior/Workaround

Currently, the flame is a triangle behind the ship.

Ideal behavior

maybe something like this. Whispy flame and smoke would be siiiiick

Things to consider

I think flames look a lot different in the vacuum of space, but I'd rather it look cool than be realistic 🔥😆

lasers are not getting removed because distTraveled is smaller than expected

Steps to Reproduce

1 - Shoot a laser...wait a long time.
Laser is not removed from canvas
2 - Keep firing lasers.
After 10 shots, the lasers stop firing because we have reached LASER_MAX (10)

My observation

Line 78 in lasers.mjs was changed to

ship.lasers[i].distTraveled += .5;//Math.sqrt(Math.pow(ship.lasers[i].xv, 2) + Math.pow(ship.lasers[i].yv, 2));

with the original distTraveled commented out. This is causing disTraveled to be much smaller than expected, so it takes a lot longer for it to be removed from the canvas

Lines 57-62 are the logic for removing lasers from the canvas.

for (var i = ship.lasers.length - 1; i >= 0; i--) {
    // check laser distance
    if (ship.lasers[i].distTraveled > LASER_DIST * canv.width) {
        ship.lasers.splice(i, 1);
        continue;

Path forward

1 - We can increase LASER_MAX to be much larger
AND/OR
2 - We can re-think how laser distance is calculated and what distance a laser should travel before it is removed.

Environment

• Version of API: main 7/14/22

Fix keyboard issue where navigation locks when pressing multiple keys

Context

When you press two keys at the same time, or in quick succession, the second key press can interrupt the first one.

Steps to Reproduce

1 - You press ArrowLeft, so the ship starts turning left
2 - While still holding ArrowLeft, you press ArrowRight, so the ship starts turning right.
3 - You release ArrowRight. The keyUp event handler is triggered and ship.rot is set to 0.
4 - Now, even though ArrowLeft is still being pressed, the ship stops rotating because ship.rot is 0.

Expected Behavior

Ship starts turning left after step (4) of the steps to reproduce.

Ship thruster off-center

Context

This commit changed how the ship is drawn. I believe this caused a side effect where the thruster is no longer centered behind the ship.

Basically, the code went from this

function drawShip(x, y, a, color = "white") {
    let ctx = getCTX();
    ctx.strokeStyle = color;
    ctx.lineWidth = SHIP_SIZE / 20;
    ctx.beginPath();
    ctx.moveTo( // nose of ship
        x + 4 / 3 * ship.r * Math.cos(a),
        y - 4 / 3 * ship.r * Math.sin(a)
    );
    ctx.lineTo( // rear left
        x - ship.r * (2 / 3 * Math.cos(a) + Math.sin(a)),
        y + ship.r * (2 / 3 * Math.sin(a) - Math.cos(a))
    );
    ctx.lineTo( // rear right
        x - ship.r * (2 / 3 * Math.cos(a) - Math.sin(a)),
        y + ship.r * (2 / 3 * Math.sin(a) + Math.cos(a))
    )
    ctx.closePath();
    ctx.stroke();
}

to this

function drawShipRelative(a, color = "white") {
    /*
    An overload of drawShip that doesn't ask for the position of the ship.
    Only the angle(a)
    Inputs:
    a(number) : The angle in radians(?)
    
    Outputs:
    void
    */
    let ctx = getCTX();
    let cvs = getCanv();
    ctx.strokeStyle = color;
    ctx.lineWidth = SHIP_SIZE / 20;
    ctx.beginPath();
    ctx.moveTo( // nose of ship
        cvs.width/2 + 4 / 3 * ship.r * Math.cos(a+1.06),
        cvs.height/2 +4 / 3 * ship.r * Math.sin(a+1.06)
    );
    ctx.lineTo( // rear left
        cvs.width/2 + ship.r * (-1 / 3 * Math.cos(a+1.06) + Math.sin(a+1.06)),
        cvs.height/2 + ship.r * (-1 / 3 * Math.sin(a+1.06) - Math.cos(a+1.06))
    );
    ctx.lineTo( // rear right
        cvs.width/2 + ship.r * (-1 / 3 * Math.cos(a+1.06) - Math.sin(a+1.06)),
        cvs.height/2 + ship.r * (-1 / 3 * Math.sin(a+1.06) + Math.cos(a+1.06))
    )
    ctx.closePath();
    ctx.stroke();
}

I tried mucking around with the numbers, but I couldn't get it quite right.

Expected Behavior

Production

Main

Notice how it is shifted over to the right too much.

Environment

Main Branch

Find a way to make aiming more accurate

Current Behavior/Workaround

When using the arrow keys on a keyboard, it's pretty difficult to aim. The ship rotates too quickly.

Ideal behavior

The arrow key is sensitive enough to allow a user to have more granular changes in ship rotation.

Things to consider

I've tried reducing TURN_SPEED, but this makes turning slower which is annoying. The crux here is that aiming and turning are tied together.

One idea is to have a key that slows the ship's turning speed while you are pressing it. Maybe it could be like a stoptime feature where the asteroids slow down, too. When the key is released, the game goes back to normal speed.

Another option is to disconnect aiming from turning. like maybe you can turn the laser without turning the ship.

Add satellite enemies

Context

Currently, the only things that can kill you are asteroids. It would be awesome if there were satellite that shot at you and moved around the screen.

Things to consider

• Should the satellite be drawn like the shop or should we use an svg or something like that?
• Where should the satellite spawn?

The satellite should have the following properties

• Speed
• Accuracy
• Shooting speed
• movement patterns?
• Explodes when hit by asteroids or lasers
• Ability to avoid Asteroids?
• Explodes ship if it collids with it.
• Multiple on-screen at the same time?
• Removed when player gets significantly far away?

Add Start Screen

Context

Currently, the game just starts at level 1 with no menu.

Ideal behavior

There is a menu that allows you to change different settings and start the game.

Things to consider

The menu should have the following items

• Move toggle sound/music into menu?
• Start game
• Adjust volume?
• Adjust difficulty?
• Choose a ship color?

Fix code scanning alert - Missing rate limiting

Tracking issue for:

• https://github.com/jsolly/GeoAsteroids/security/code-scanning/1

Remove Bootstrap

Context

We are only using Bootstrap to style the game start and game over menu. We can migrate to pure HTML/CSS/JS to optimize bundle size.

Move all config files into config directory

Context

dotfiles like .husky, .eslintrc.cjs should all go in one folder instead of polluting the root directory.

Things to consider

This will break a lot of stuff
Make sure to update the docs/readme

Migrate to logging solution

Context

Right now we are just doing console.logs() for general information about what is going on in the program. This isn't great because it makes it harder to debug issues (especially on production)

Ideal behavior

Replace all console.log() commands with a logging command.

Things to consider

Have different log files for different levels of errors (e.g. INFO, WARNING, ERROR)
How will this work in the Vercel serverless environment?

Allow polygons from geoJSON to be uploaded as asteroids

things to consider

How to convert coordinates

How to cycle through polygons

How to handle multi polygons or ones with holes

How to upscale/downscale polygons if they are too small or large.

Re-think collisions?

Error handling

• size (file size, feature count)
• format (bad data)
• type (explode points and poly lines)

Make app full screen

Things to consider

Will need to make sure collisions and boundaries are updated correctly.

Add 'Stop time' ability

Context

Ideal behavior

Things to consider

Add test coverage and build status to Github project page

Context

It would be cool to have those fancy badges that show things like test coverage and if the build is sucessful/failed. Like I've done on my blog, https://github.com/jsolly/blogthedata