Activity

Steve

#Things I worked on

  • Added two new tilesets that you can choose from
  • Updated walljump to be better
  • Added camera transition to respawn point on death
  • Worked on a couple levels
  • Added a delta time function
  • Fixed the delta time function
  • Fixed the delta time function
  • Fixed the delta time function again
  • You can rotate bouncepads, leading to some…interesting situations
  • You can now change the zoom level for your level
Attachment
Attachment
Attachment
1

Comments

Steve
Steve about 12 hours ago

you can probably tell which one somebody else designed

Steve

I added a bunch of new mechanics including:
an actual player sprite with a walking, jumping and falling animation, each facing either left or right.
Walljump (will add a menu option to toggle)
More tiles including:

  • Cactus
  • Bounce Pad
  • Crate
  • Coin

Upcoming features:
Keys and Doors
Enemies
Lava/Water
Moving things (saws, platforms)
Editor Minimap
Level Share (eventually I don’t know much backend)

Attachment
0
Steve

I updated the readme and changed the direction of swap cards.

Attachment
0
Steve

Shipped this project!

Frontend Showcase is a portfolio/skill building activity I did. The latest project, Comic menu didn’t get merged into main because I didn’t really like how it looked. My favorite effect is the wipe-blur reveal. I hope you enjoy!

Steve

I added a bunch of new features, including:
making the start, end, and checkpoint flags do things,
making spikes work
adding another layer to the map file on save that saves the rotations of things like spikes
adding a menu with working tabs, styled sliders (which were a pain to get right)
tweaking how the jump and speed values are calculated

Attachment
0
Steve

I added an actual play mode and tweaked it’s movement and stuff. I gave it things like a coyote jump where it gives you grace for not jumping at the precise right moment off an edge.
I also added more tiles, including two spike variants and some flags for level mechanics such as checkpoints.

I adjusted the camera where it only moves if you hit the left/right/top 25% of the screen. I set the bottom one to 50% so you can see more of what’s below you.

Inside the tileset JSON I have a mechanics list where I can put different mechanics such as “killOnTouch” and so on. That’ll make it easy to add features later on. Going on the theme of the tileset, I also changed how that works so I can now have more than just a filename for each tile. I have type, name, id, file, triggerAdjacency (yes that does what it says it does), category, and mechanics right now.

Next up: change the menu to show categories and add some more keyboard shortcuts!

P.S. If anybody’s wondering press P to play the level and then again to go back to editing

Attachment
Attachment
Attachment
1

Comments

RespectableDot
RespectableDot 6 days ago

I like the art, very nice👍

Steve

I fixed the adjacency so that
a: the tiles around it are automatically adjusted
b: you don’t have to click it twice to place two tiles, you can just drag

1

Comments

Steve
Steve 7 days ago

Pay no attention to the audio I didn’t realize it was recording

Steve

Tile adjacency works now! currently it doesn’t update the tiles around it but it does work if you click on those tiles too. Gonna work on calculating it all on file load next along with updating the tiles around it.

Attachment
0
Steve

The editor moves, along with stuff being able to be placed in it. There’s currently no way to change the selected block though. I’ll take some inspiration from other platformer editors for that one.

The main thing I worked on is a function to resize the level. Since the level is stored in an array with no sub-arrays for the row it was quite hard to work out the math to add/remove more rows/columns. lots of tiles.splice.

Attachment
0
Steve

I’m working on a system to automatically switch the tile variant based on adjacency to other tiles of the same type (or any tile other than air idk yet). It works with a 4 bit string with different bits being flipped for different sides. that binary converted to a number is the variant that is used, chosen from a tile strip as seen below. Top is 1, right is 2, bottom is 4, and left is 8.

Attachment
1

Comments

Steve
Steve 8 days ago

oh yeah also placing things in the editor works now

Steve

I had a really cool idea in my head about a fun new effect for the website where it was like a comic book and the comic book frames were a menu they were added one at a time.

Turns out the font I chose is really hard to read and the images don’t like being put in a bunch of different size containers. I need to do some work to make it look better lol. maybe only show the menu item label on hover and have a hover effect or smth. idk.

Attachment
0
Steve

I set up a map reading/writing system using json and also editor movement. nothing else works but I got a lot of base functions in place. The editor is loaded automatically and you can move it around with the wasd. 👍👍

0
Steve

I added a fullscreen control that I think looks pretty darn good if I say so myself. It also works lol. I cleaned up some scrollbars in the projects and added descriptions to the project pages along with links generated from projects.JSON. Basically just adding the polish a portfolio deserves.

Attachment
0
Steve

I added a fun effect where you can drag cards around and put them in any order you want. I had to learn elementsFromPoint and a few other js methods for it but it was fun and rewarding in the end.

Attachment
0
Steve

I spent a while working on the swap cards and am now working on an effect where you can drag and drop a card into and position in the parent element. Currently doesn’t work but I’m working on it.

Attachment
0
Steve

I started working on a custom map maker for it, with importing from JSON. I’m currently stuck on deciding whether I want to make a full server for map saving so users can access their maps and share them or just embedding the JSON in the url. The latter option is easier but I kinda want the experience of setting up a server.

P.S. sorry about the screenshot Win+Shift+S isn’t working on the computer I’m using.

Attachment
0
Steve

I did a bunch of work to scrape newegg with a cors proxy. I’m going to set up my own proxy if I get around to it since the public ones either don’t work and tell me they don’t support ipv6 or are unreliable. I also tried and failed to scrape ebay. They have pretty good bot protection. I would have to make it a node application and run it in a headless browser, and have the user do any bot tests for it. Idk if I want PC deals that badly. The other option is to sign up for ebay’s dev program and I don’t really want to read through their agreement they make you sign to figure out if what I’m doing is frowned upon.

Attachment
0
Steve

I made a working website that fetches from the newegg api and presents that to the user. I’m working on different requests to newegg and other sites.

Attachment
0
Steve

I added a new effect, swap cards, that does just that. It has a very fun animation.

Attachment
1

Comments

Simon
Simon 18 days ago

Cool stuff, but how come clicking on the right arrow moves to the image on the left?

Steve

Added a snow effect and fixed jitteryness in steam hover which took me wayyyy too long

Attachment
0
Steve

I made a fun gallery scroll effect

0
Steve

I majorly updated the site, with a better nav bar, working random function, working filter animation (but not working filters lol). I also added another project, different blur/reveal effects.

Attachment
0
Steve

I created a steam like hover effect that changes the x and y 3d rotation of a card on hover.

1

Comments

Baran N
Baran N 22 days ago

This is so cool, how would you do that?

Steve

I set up a small site to show off different frontend projects. So far there’s a projects page which shows all the projects and a project page which shows an individual project. The projects are loaded from the demos folder and put into an iframe on the project page.

My first project is this awesome hover effect I found on youtube. Next up: the steam trading card hover effect

0
Steve

I added a two custom layers to the map to enable hover effects for countries, which also changes what you’re selecting (states or countries) depending on zoom level and whether you have that layer visible. Also fixed images to switch to a dark image when they’re on a light background in the filter menu.

Attachment
0
Steve

I rewrote my filter logic, then rewrote it again after designing a layout for it. I’m pretty happy with how the filter list turned out.

0
Steve

Working on a dark mode, not completely done but almost. I also added custom map controls because the default maplibre ones don’t have a dark mode.

Attachment
Attachment
0
Steve

I added dark mode functionality, so that it automatically changes with the browser’s mode. To do this I implemented an array of styles for the map, so I can another style pretty easily. I need to work changing the ui to dark mode now.

Attachment
0
Steve

I spent wayyy to much time working with async functions and trying to figure out why deleting markers wasn’t working right. Apparently it was because
const i = data.features.findIndex(f => f.id = featureId)
needed to be
const i = data.features.findIndex(f => f.id == featureId)
welp.

Attachment
0
Steve

I went down a huge rabbit trail of wikidata queries and added some requests to my code. still figuring out async requests and all that tho. too tired to do any more today.

Attachment
0
Steve

I added right click functionality so that a user can add a marker with custom text, and when right clicking a feature it gives you data about the feature. It was super fun to code all this and see it work and come to life.

Attachment
0
Steve

I added media queries and fixed a few bugs on mobile. Media queries were somewhat fun to figure out and somewhat a pain. I wanted to test on an actual phone so I ended up hooking up an old iphone to an old laptop for devtools. Now mobile version works!

Attachment
0
Steve

Added functionality for save as where you can select resolution, filename, and extension. I also fixed a few bugs with the date filtering for the date selection.

Attachment
Attachment
0
Steve

I added globe functionality after a lot of time spent confused about maplibregl versions. You can also now save the current view as an image (todo: add loading symbol while it’s fetching all the layers) I also started adding a filter popup.

Attachment
Attachment
Attachment
0
Steve

I fixed the year display above the slider to position itself above the thumb and also edited the style JSON to fix the bug with country names. I changed the input fields for the year as well to be more sleek (design by my friend). I probably did some other things but I forget what.

Attachment
Attachment
1

Comments

regonold520
regonold520 about 1 month ago

Woah, this project looks sick dude keep up the good work :D

Steve

I added language functionality, which was a pain. The npm module listed on the wiki for OHM under maplibre doesn’t work with maplibre because it’s a mapbox plugin. I pulled out my hair trying to get this to work and then I realized it was because the tag was name_en not name:en. code do be do dat. I also updated the style slightly to make countries stand out and fixed a bug with the eventListener of maxEra. After this you can actually kind of use it!

todo:

  1. fix the display above the slider, currently it’s not positioned right but it’s 10:00 and I’m too tired to fix it
  2. implement saving the current map view as a png or other format
  3. mess with map layers to get what I want perfectly, including fixing the fact that some country names don’t show up at all
  4. add a menu where you can select what features you want to show on the map, beyond the current toggles at the top (need to fix bug that they’re inverted)
  5. once style is locked in generate vector map tiles to use that are less weighty with somthing like tippecanoe
Attachment
0
Steve

I added a top bar and then fixed all the bugs that came with the top bar ugh. Next up: filtering the vector tiles by date, if I don’t get distracted.

Attachment
0
Steve

I worked on making a function to automatically add all the event listeners for the toggles automatically. That was a major pain. also spent a bunch of time figuring out what map layers I actually need. Currently the map tiles show all the data from all of time, and the slider doesn’t work. I’m going to work on that today. I figured out how to customize all the layers on the map too with the style JSON.

Attachment
0
Steve

I added a function to upload the map layers and then used that to create a dropdown with a list that lets you select different features to show/hide. right now “background” and “land” are the only two ids that I know of so I’m going to do some research and find some more, maybe cities and country borders.

I hate javascript. It’s so tedious. One of the problems I ran into was that in order to delete an item from a list, you have to set that list to a filter of itself. I guess I’m so too used to python’s readability. I accidentally typed print instead of console.log lol.

Attachment
0
Steve

I first tried using the leaflet library to display the map, then quickly realized it wasn’t compatible with the vector tiles supplied by OpenHistoricalMap. Then I switched to MapLibre to display the map, used the style found on OpenStreetMap’s wiki and now have a working website that displays OpenHistoricalMap. Yay!

Side note everything is in a different language. To be fixed once I learn why.

Attachment
0