I added 3 new color schemes, along with an update to two others!

• Blue is now updated and looks great if I do say so myselft
• Black and white
• Updated Cream
• Mahogany
• Midnight

Added a new Tileset!

The idea for this tileset was to have as much contrast as possible, and a lot of interesting shapes. I think it accomplishes that goal quite nicely.

I’m also continually working on changing over images that use the <img> tag to use a mask-image instead so there are still some throughout the site that are off.

Things I worked on

• Spent ~45 minutes refactoring ui.js to be more readable and well organized plus a bunch of comments that look like ai (trust they’re not)
• Working on loading images from a tileset
  • made a function to create a spritesheet from the current tileset
  • made a function to load that tileset
  • need to update the ui to load the correct spritesheet
• added a control to switch which page of levels you’re on (before you couldn’t view more than 50 levels)

Color Scheme Stuf

• I added a coffee color scheme that looks lokey kinda good

• Updated the server to automatically serve the files with data-theme already set for no glitchyness on load

• Updated a lot of svgs around the site to use mask-image so I can update their color

• Now it’s super easy to add another theme!

• Also added pages in the level share in case there are more than 50 levels

I did a lot of rewriting of css colors to use css variables, and now you’re able to choose your color scheme! Also It looks a lot better than that disgusting tan I was using. I now have some functions that will automatically rewrite the :root variables into a specific color scheme. I also did some annoying work using svgs as mask images instead of <img> tags so I can change their color. Lots of tedious work, but worth it!

Things I worked on

• I now use the slack API to fetch the username for hack club sign in
• Fixed some trigger bugs causing different triggers not to function correctly
• Updated the top bar with undo, redo, and help icons
• Updated the markdown file explaining trigger script

Trigger script now fully works!
Hack club Auth also works!
I worked on a new level called boxes and tidied some stuff up for the ship!

Things I worked on

• Finished (for the most part) Trigger Script
  • Function to compile a trigger json into triggerscript so you can continue to edit it after you apply it
  • If/Else now works
  • Added fill command so you can fill from (x1, y1) to (x2, y2)
• Added Hack Club Auth for sign in
• Better menu open/close logic so two menus don’t accidentally open at once

CREATING TRIGGER SCRIPT

Trigger script is a minimal coding language that can be used to code what a trigger should do when the player touches it. It can be used instead of the ui to create triggers and includes more features such as if/else statements. I’ll work on documenting it soon, I promise.

Other features

• Added an item to the menu that lets you copy the link to your level
• Refactored a bit of editor.js to be less sloppy
• General polish work
• fix(ing) menu open/close to work better and less janky

Things I worked on

• Added an option for instant teleport in the teleport trigger
• Fixed some issues with filling the selection
• QOL features (mainly fixing bugs)

Tidying some stuff up for the ship!

I mainly fixed a bunch of little things here.

This update mainly focused on polish.

Things I worked on:

• Rewrote a bunch of movement code
• Fixed up some input bugs
• You can now move around with a trackpad
• There’s an option to toggle highlighting of where a trigger will teleport you
• Added a win screen
• Added usernames to the level share

P.S. check out my commits if you want to see the nitty gritty details.

Things I worked on:

• selection box that you can use to:
  • fill the selection
  • move the selection
  • erase the selection
  • rotate the selection
  • You can also move the camera around by touching the edge of the screen while dragging a selection
• Gamepad support + fix analog stick not working on mobile
• Better zooming capabilities and ctrl+zoom

Very fun update, lots of features

• added ctrl+z and ctrl+shift+z undo/redo functionality (currently only works with placing tiles)
• added functionality to sort the levels by their rating, date created, plays, and finished with a dropdown menu
• added a loading screen to the level page
• added a small time where control is limited when you hit a wall in the air to make walljumping easier
• added a half spike block that takes up 1/4 of a tile
• added a trigger function that you can use to change a block at x/y to a different block (which is very fun to mess with)
• Created a level to show off the trigger’s capabilities Trigger Happy
• added working mobile controls
• added sign tiles to help direct the player

Things I worked on

• Functioning minimap that you can click on to move the camera
• use the middle mouse button in the editor to move the view
• rotate block with a trigger
• added mobile controls (not done yet but the main functionality works)
• added a Fullscreen button to the level page

Things I worked on

• I added a better better interface for making triggers
• You can now teleport with a trigger
• There’s now a bottom bar that displays useful information such as selected tile name and id, and the x and y position of the cursor
• The triggers execute the list of functions from top to bottom, making a bunch of possibilities

Major feature update!!!

I added triggers! currently the only thing you can trigger is toggling red and blue tiles which alone gives mountains of possibilities. I’m working currently on adding more things you can trigger. I have the functionality already not for just multiple things you can do with a trigger but steps for a trigger to execute when it is triggered consisting of multiple different mechanics.

Upcoming Mechanics:

• Delay
• Teleport
• Rotate block
• Spawn enemies
• Play a sound
• …And more

another big thing:

I added level previews to the browse page so you can see the spawn of all the levels!

Things I worked on

• You can now rate levels
• Fixed an XSS vulnerability that my friend found
• Edit/Remix level on level page
• Level settings link on level page
• updated the tile placement to fix some bugs with the onePerLevel functionality
• Working search functionality
• R to respawn in editor
• probably some other stuff I forgot about

wheeeee 100 hours

Here are the things I worked on:

• I added a level meta page where you can edit the name, visibility, and description of the level
• Updated the authenticate function in auth.ts (backend) to get the cookies automatically so I don’t have to do it every single time
• I added more options to the my levels page; edit, view, delete, and settings
• I fixed the sounds being requested from the server every single time they play
• The editor will now ask you if you really want to leave if you have unsaved changes
• Level Names will now get cut off with a nice ::after background linear gradient

I should really create a favicon so I don’t get an error everytime any page tries to fetch it

I did a bunch of things this time.

I updated the my levels page so you can delete levels, view levels and edit levels.

I updated the editor page so you can now open any level out there and either remix it if it’s not yours, upload it if you haven’t yet, or update the uploaded level.

I thought I’d devlog again to give you an actual feel for what the site looks like. I did do some work though, I updated the level page (again) to load the level correctly and fixed level loading in the editor that I broke.

Here’s some photos of the site so far:

I added a level page that fetches the level data from the API and then (should) load that into the page. Currently the fetch works and the level works, but I’m having trouble with loading the level data. I’ll fix it when I get home from school.

I also added a level browse page that fetches from /API/browse and puts the levels on the page (max 50). Each project links to it’s corresponding page, e.g. platformed.com/level/123.

Right now my database isn’t hooked up to my codespace so I can’t really show the functioning browse or level page sorry. Search bar doesn’t work either..

I worked a lot on the api this time around and got it somewhat working. I’m serving both the pages and api with bun, on my friends server. Right now I’m having some trouble getting the set cookie headers to work in bun. I also added a register page that does about the same thing as the login but with a different api request.
Backend is fun. (at points)

I did a bunch of painful work refactoring code (5 hours worth of it). Now my code does the exact thing it has done. The only thing it did was change 1500 lines of code to several different files. Never again.

After that I did some work and added a login page. I’m also working on serving the actual files with bun instead of github pages. I just got static file serving working.

Here’s the login screen so it looks like I’ve been doing things

I added a way to upload a level, along with delete a level. These levels were all made through a post request.

I did a lot of research into bun and postgresql and made a working REST api with login and register endpoints, as well as level browse fetching a specific level. There’s currently no way to upload a level, though I do have the level table set up.

Highly recommend backend dev this is too fun.

Features Added:

• Better tile swapping functionality (space actually kinda works now)
• Added a barebones enemy
  • enemy can kill the player by touching it on the side
  • player can kill the enemy by bouncing on it
  • enemy switches directions when it hits a wall
  • enemy has full physics
  • enemy doesn’t yet have a

I’m working with a friend on the backend for the level share with bun js.

#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

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)

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

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

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

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

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.

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.

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.

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.

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. 👍👍

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.

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.

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.

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.

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.

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.

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

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

I made a fun gallery scroll effect

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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

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.

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.

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.

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.