I am so excited to share this with you!
From the README:
JS-Space a tool/game that will generate a mostly-realistic galaxy from a seed, then let you navigate around it to view the various stars within the galaxy. It’s designed to work well on computers and mobile devices.
How to Use:
- Use the arrow keys on screen, or on your keyboard to navigate about the galaxy.
- Click/tap on a star to view it’s details.
Some Neato Features
- It’s Open Source!
- Only vanilla JS was used, no jQuery or anything else.
- Alter the config.json to change the number of sectors that are generated, min distance between generated stars, etc.
- The Sector View window is calibrated on page load, so on your phone try loading it in portrait vs landscape mode to see different layouts.
- All the star details are mostly realistic main sequence type stars, with appropriate percent chance of existing. (Class M are much more common than class A, for example.)
- You can pass in a seed via the URI. For example: https://js-space.graviton.systems/?seed=reverse_the_polarity . Otherwise it uses the default seed.
- No images are used, it’s all done via CSS and/or HTML Canvas elements
- The entire payload of this is less than 25kb! (when accounting for gzip)
Here is how it looks on a mobile device:
Why Did you build this?!
A great question. 🙂 Initially I wanted to make a MMO 2D Space game. I still want to do that, but after working on this early prototype, I am convinced I don’t want to do it in JS. Still, I learned a lot from this and definitely upgraded my JS skills.
Do you plan on developing it any farther?
I am thinking about adding the System View, so after you click on a star, you can also view the system of planets surrounding the star, click to get their info, etc.
There are many front end JS frameworks out there, but like always I tend towards lean and extendable. I’ve started playing with mithriljs. I fully admit it was the name that attracted me to it. I am still taking baby steps, but so far I’m liking it.
Anyway, I am going to try to journal my progress and share neat things I’ve learned. Stay tuned!
Just a quick post. I needed to be able to display a multi-select box showing all the options available to a user, and allow the user to select one or several, and ‘move’ them to their list of chosen options. Then, when the form is submitted, make sure only the items in the chosen list of options is submitted.
Fairly easy right? It was, but took long enough that I wanted to share and tag appropriately, in case people come looking for it. 🙂
Image of what I wanted:
Link to my working JSFiddle.
<select multiple="multiple" name="all_options" class="all_options">
<select multiple="multiple" name="chosen_options" class="chosen_options">
<br/><input type="submit" value="submit">
return !$('.all_options option:selected').remove().appendTo('.chosen_options');
return !$('.chosen_options option:selected').remove().appendTo('.all_options');
Links to the code first!
What is JPEF Magic, you ask?
- Consolidation; instead of validation and post-processing on each form page, handled with one file
- Email generated has full text from questions on form
- Settings for email processing (Email Subject, From, etc) are handled in hidden inputs on form
- After success, passes all the email body to the ‘on success’ page you’ve set up
- Allows you to have one “Form submitted successfully” page, with the users info displayed.
Why did I make it?
I come across this need all the time. I always think, “Oh I’ll just throw a form together.” but after you take care of the php to mail it, error checking, it does take time. Couple that with the fact I hate using the name value in emails as the question. I wanted a way to just have the exact language of the question on the form be what was included in the email, with minimal duplication by me. Hence, JPEF Magic was born.
Check out the demo at: http://lab.citracode.com/jpef_magic/