#Railbound Solver [Python Script] COMPLETE! Working on Interface...

1 messages ยท Page 6 of 1

fervent tusk
#

another few thousand iterations have been removed from levels using semaphores

#

i also noticed a small flaw i made for checking when a semaphore gets triggered (i did calculations for a variable multiple times that only needed to be done once) so its slightly faster there too

#

very nice, very nice

#

5000 messages in this thread btw ๐ŸŽ‰

#

i need to save this entire thread somehow some day

fervent tusk
#

the semaphore optimization was actually quite helpful

#

the 3 longest levels of world 9 (9-11, 9-11A, 9-11B) all got shortened by over 13M iterations and 100 seconds

#

good stuff

fervent tusk
#

5-5B has been running for somewhere around 36 hours now and it still hasnt even found a solution

#

im not sure why it only took a few hours before? my computer could also be just not running the program correctly

#

the 2-track solution (and other solutions for that matter) uses a bunch of left turns which the program always generates last, and it is running DFS so if it does find the solution its likely to be one of the very last ones

#

i checked back to when i ran it originally and it seems like i didnt change the generation or track count so im a bit dumbfounded

#

i can think of a few solutions (switch to BFS, change left tracks to be generated first, reduce track count by 2 since theres a known 2-track solution) and i think the best route would be to change generation for this one level, so i may just do that

#

actually, im going to take my own advice and reduce the track count on all of the long levels to the best known solution so that generation time is shortened

#

ah. my computer went into sleep mode, so cmd stopped

fervent tusk
#

i just realized while making this that a decoy being able to crash with a turn does matter due to this edge case.

#

i think it's so unlikely that it doesnt matter though. i have yet to see a level where it actually matters (besides this one but its bugged and cant be solved anyways) so i think i can just leave the optimization in

fervent tusk
#

@delicate nymph could you leave some comments in your code for the next commit you make? give me a goal or idea of what you want, i really want to help out on the ui if youre only available on weekends.

#

thank you so much for the work so far as well pc_happy

delicate nymph
#

sure

#

nice optimization

delicate nymph
#

I'm implement the basic GUI for now. The pixijs is too complex for the project so I'm migrate to react.js with typescript.

#

There is some missing tile image and the svg may broken since I tried to convert it to tsx, the benefit of svg in the tsx format is we can visual a track with different state with shorter and cleaner code.

#

With the solver, I'm thinking you can make the solve function accept a callback props something like this:

function callback(current_state){
console.log(current_state)
// or do anything we like to visual
}

solve_level(`other props...`,callback)
// => in the solve function we call callback({data we want to visual}) everytime we want to update or visual something

#

I make a todo in the PR too:

  • [ ] Implement game grid
  • [ ] Implement level editor
  • [ ] Implement all tools
  • [ ] Implement simulate function
  • [ ] Implement solver
fervent tusk
#

i will work on that, tysm pc_yipee

#

i believe i can do the callback by putting it in the TCO which makes things easier

fervent tusk
#

im starting to figure out how to use vite and see the website preview etc., the website looks amazing so far!

#

i can see the vision...

fervent tusk
#

front-end development is insane i have no idea how to read any of this actually

fervent tusk
#

@delicate nymph why is the data for all of the svgs raw? i dont see why you cant just use <img src="..."/>

#

it seems to just overcomplicate things and it makes some of the icons look weird

#

you can still rotate them with transform and overlay mods by just using another img. the hue-shifting is also possible by doing hue-rotate- with tailwindcss

fervent tusk
#

im also wondering if the sprite folder should be removed. i dont really want to use stuff like rotate or isSwitch since it would cause a discrepancy between the track shown on the website and the track in the code. for example, if you rotate track 5 (a bottom-right turn) to make a top-right turn, that top-right turn needs to be converted into track 7 (top-right turn) at some point before getting sent to solve_level

#

so all of the .tsx sprites would just become really simple files that could instead be written inside icon for BottomSelectionPanel.tsx and RightToolPanel.tsx

#

to further elaborate on rotate and isSwitch: i feel like the svgs could be reduced so that only one turn is needed, and one straight track is needed, since the others are just rotated copies. the icon that gets placed on the board would be this version, but in the code it would save the track at that position as the actual track (so the rotated track 5 would become track 7 as soon as it gets placed in the code, but be displayed as a rotated track 5 on the grid)

fervent tusk
#

ive finished up adding the rest of the panel tools, im trying to make it so you can press 1234 to pick one of the tracks like you can in the game

#

i googled how to make an input listener quickly and added that, but i dont think i can actually select the GamePieceIcons on the RightToolPanel in the code with the listener because it's hardcoded in

#

throwing myself into this whole thing is certainly one way to learn front-end...

fervent tusk
#

finally figured out how to make the buttons press when you press 1234 ๐Ÿฅฒ

#

this is so hard to work on but i wont stop trying pc_think

#

i think im going to commit after every coding session i do since @delicate nymph might also need to work on it

delicate nymph
fervent tusk
#

its way too lengthy for what it accomplishes though, its way easier to just overlay another svg on top of it or do a hue-rotate is it not

delicate nymph
#

you right, we have many options

#

Maybe we don't need other props

#

I'll try to make it more compatible with what we currently have

fervent tusk
#

before you do anything ill commit first

delicate nymph
#

sure, I really need help at the simulation function

#

let me make a placeholder function first then you can work on it

fervent tusk
#

ive removed the sprites folder, added the missing tools on the bottom, and made it so you can do 1234 for the right tracks, im working on placing the tracks in a grid pattern right now

#

wdym placeholder function? placeholder for what?

delicate nymph
#

the play button

#

we need to simulate the train running on the track and visual it

fervent tusk
#

wouldnt that be later in development when were able to visualize the grid and place tracks

#

ehhh it doesnt matter actually ill make sure to have the function you want in the algo with the commit

delicate nymph
#

sure ๐Ÿ˜„

fervent tusk
#

ok i believe i made a callback that works

#

i put another parameter in algo/main.ts that calls the function every (parameter) iterations. right now it calls it every 1000 iterations, and it returns the board, mods, and cars of the current generated state

#

i committed the changes, go crazy. i am going to sleep nowib_sleep

#

view algo/debug_level.ts for an example of how to use the callback

delicate nymph
#

see ya later

fervent tusk
#

i made it so the selected track follows your cursor and you can rotate it, but im going to have to redo the grid since i want it to be contained and not take up the entire screen

#

i like this display still so im going to see if i can change it to look more like this

#

the json view can go, but i like how you can change the grid stuff at the top, and theres room for text on the left.

#

i dont really want the display to be full-screen like it is right now since theres not really any point. there has to be room for information, and there's no reason the editor should take up the entire screen when it doesn't need the entire screen and it takes away other space that could be used for text

fervent tusk
#

slow progress is progress nonetheless

delicate nymph
#

wow nice

fervent tusk
#

gonna try to make it so you can modify the grid and render it tomorrow. i also want the grid to resize based on the dimensions, you shouldnt have to move the grid at all it should just be fixed and sized correctly. i think i will change the layout eventually since the top feels a little cluttered to me but its fine to leave for now.

#

i did not see thinhs commit

#

oh boy

delicate nymph
#

You can force push

#

Ignore my commit xD

fervent tusk
#

i dont wanna overwrite tho

delicate nymph
#

I was try to do the same thing to you

#

But look like you done it

fervent tusk
#

sorry ps_sweat

delicate nymph
#

It okay, I should create pr

fervent tusk
#

dont make the grid view pannable or resizable with the mouse btw. i want it to be fixed based on the grid dimensinos

#

making the view movable is unnecessary

#

i feel bad for getting rid of the code you made ..

#

ill make sure to check next time

delicate nymph
#

It okay

fervent tusk
#

tysm for cleaning the code and updating it

#

its very nice

#

im still trying to get used to how much different the web stuff is and how its organized from the algo and code i normally write

#

also thinh the reason for having all of the tracks in the Icons map in GridTile.tsx is because selectedtool wont be used for placing the icons. i think it would be better if everything that gets rendered is based on the actual levelData.grid, since the track/mod values underneath specify the actual track that needs to be rendered

#
  • that way levels can be loaded and rendered with no hassle
#

selectedTool will be used to determine the value of the track/mod that gets placed on levelData.grid, and then the data from levelData.grid gets rendered to show the track

fervent tusk
#

you can place and delete (with right click) some tracks and mods now. i want to make it more user-friendly though, so im going to work on making the selected tool transfer between pieces depending on the piece you select, limit the selected tool based on the piece, make a mod get deleted before a track, automatically place tracks under mods and any other stuff that makes it easier to use

#

i also have to make cars placeable

#

...and do mod_nums

fervent tusk
#

im debating whether to make the solver true to the game in terms of legal placing or let the user try wacky stuff thats otherwise impossible

#

hmmm

#

if i do legal placing then i need to do a lot more checks and stuff to make sure the system works (i would have to experience what i do to the devs every time i post in #rb-editor ) and bugs would be weird and id have to fix them

#

but if i dont then i have to put less effort in and the solver is more customizable, but that leads to potentially a lot more setups that confuse the algo and therefore i may have to do even more bugfixing

tranquil sinew
#

this is cool ๐Ÿ™‚

fervent tusk
#

thanks pc_wave

#

something about seeing a 3-way with a gate on it makes me lean towards giving it more customizability

#

the silliness of usually-illegal setups and giving the user more freedom feels more right to me

#

i think ill do that

#

i just realized ill have to add a fourth level layer for mod rotation with how i have the solver set up actually

#

im allowing the user to place gates and switches with no track underneath, but when it tries to render the mod with an EMPTY track underneath it the rotation is always the same since there isn't a "rotation layer" so it doesnt know what to rotate to

#

the case is different for tracks since it goes "oh this track 6 (bottom-left turn) could just be a rotated track 5 (another turn)" but it cant do that for track-less mods since it has nothing to reference

#

stations will also be a problem since normally they're attached to a straight track, but frankly i dont want to do that and id rather just have the player place the station to indicate what track (could be a 3-way for all i care) the actual station mod should be on

#

i think ill make it so whichever track the station directly faces gets the actual mod placed on it

#

i need to figure out how the user understands that though... i feel like i cant put it on the left where all the other controls will be since then its kinda disconnected from the actual station part, its not really obvious

#

oh, i could just make the station span 2 tiles and have a little icon on the second tile where the mod gets placed

fervent tusk
#

i decided that mods can no longer be placed on empty tiles, but you can still select a mod like a switch/gate and place it on available tracks

#

i believe im done with mods and tracks for now, i need to make cars placeable next and then the placing system should be good enough

#

after that ill add informational text on the left side of the screen

#

i think im going to treat cars as mods during rendering to simplify the whole process

#

i think i want to add an ETA for completion at some point. it would be a VERY rough calculation, but it would give an idea of how long a level would take so the user doesnt get impatient

#

in trying to implement cars i realized that LevelData.grid doesn't technically match the style algo uses so itd have to be converted before solving, but changing it to use the same style as algo would make rendering more difficult

#

thus i wonder if i should implement a car property onto each GridCell or create a list of cars similar to what the algo does

#

i think ill put a property on each gridcell and make it undefined if theres no car

fervent tusk
#

i believe ive finished doing the car logic. i had to make an entire registry system so that the next placed one is the lowest number like how railbound's editor does it, but it worked out nice imo. i also had to import the guiStore into the levelStore to properly disable placing any more tracks with the car piece once all cars were placed

#

other than that, most of the placing logic is done now i think. i still have to make it so you can set mod nums and place the numeral versions of ending tracks, cars, and stations

fervent tusk
#

i was going to send a video showing everything working perfectly but then i found a bug and then another one and then another one so this is what you get for now ib_grumpy

#

i found a couple new ones while making that one in fact. did not know you could place stations and fences on cars

#

sometimes the icons also dont render immediately when i place them. curious what thats all about

fervent tusk
#

fixed car logic i believe. i was overcomplicating things when it can just be part of a case that i already made that considers whether a mod can be placed

#

basically mods or cars cant be placed on any tile that isnt normal (one of the tool tracks) UNLESS its a station since stations dont care about that logic

#

and stations can only be placed on empty tiles

fervent tusk
#

it took me 2. hours. to get the left display to align with everything else on the right

#

wish it hadnt taken me so long but im very happy with myself and how it is so far

#

oh yeah, i also added small hotkey buttons to the righttoolpanel and also a control display beneath it

#

i also deleted the track piece from the bottomselectionpanel because its kinda pointless, you just place normal tracks if no pieces are selected

#

im wondering what i should display on the collapsible left display and what i should display permanently inside the gamecanvas on the left side, if anything

#

i still need to display:

  • level hyperparameters (i was thinking these would go on the collapsible display)
  • credits, read more? (bottom of collapsible display)
  • controls (beneath railboundsolver on the collapsible display. just something simple like, "place tracks and then set hyperparameters and solve yada yada yada eta whatever")
  • the actual level solving/simulation button (i feel like this should go on the left of the gamecanvas permanently)
  • the eta (not sure where this should go. it could have good reason for being in either the left display or gamecanvas)
  • save/load? (probably left display, could go on gamecanvas too)
fervent tusk
fervent tusk
#

concerning how making level ETA is going to work... i can probably write a machine-learning model to try and guess how long a level takes to solve based on some parameters like empty tiles, tracks, cars, etc. . i have a little bit of experience doing it luckily

fervent tusk
#

actually a "how to use" popup could be used instead of having it on the collapsible display since its so simple

fervent tusk
#

check out the hyperparameters gp_cool

#

i think having the visualize_rate (how often a generation frame gets sent back to the editor) being on the level simulation/solve thingy inside the grid canvas makes more sense, + it doesnt "affect the solving algorithm"

#

i tried making the hyperparameter descriptions simpler so its easier for the user to understand without putting a ton of text. i think i did a pretty decent job! DFS is really difficult to explain since the main thing the user needs to understand is why its better than BFS (since BFS probably looks a lot better to someone who doesnt know how the solver works...), due to DFS searching less of the tree compared to BFS

#

i think the DFS explanation is pretty good for how concise it is though. I can't really make it longer and i cant think of a better way to explain it well with that few words.

delicate nymph
fervent tusk
#

?

#

transition-all seems to work fine for animation

#

im asking whether you think the sidebar should be animated or not

delicate nymph
#

just add it

fervent tusk
#

wdym

delicate nymph
fervent tusk
#

it looks choppy

#

i take it you think the animated version would be better

#

why dont you think the instant version is good?

delicate nymph
#

I like it animated

fervent tusk
#

we can do animated then, i noticed that when you changed the leftdisplay you made it disappear instantly instead of sliding nicely

#

im gonna make it slide so its less choppy, i assume you just didnt add that and its not intentional

fervent tusk
#

im not sure if i like the motion divs that much

#

i feel like its less customizable and transition-all already does what im looking for

#

id rather use transition-all than motion divs

fervent tusk
#

going to use this as reference for the solve level display

fervent tusk
#

so far i have the display on the left where you can select a world and then a level and itll load the level into the editor

#

since mods and stuff are rotated based on mod_rot which is assigned when you place the tile, the mods are all kinda wonky when you load the level because they dont know what direction to face so sometimes youll get gates or switch rails on the track part of a track

#

im going to get rid of mod_rot for all of the mods and make it so they face a direction depending on what track theyre on. for stations, they will basically place both a station mod and a roadblock (since thats effectively what a station is) and then i can make the station face one of the closest station mods adjacent to it

#

ill have to figure out how exactly station rotation will work if there are multiple station mods adjacent to a station roadblock

#

...fences are also loaded in instead of stations on levels that use stations since they both share the ROADBLOCK id, and that corresponds to a fence. i think ill just pick one of the roadblocks around a station mod to become a station.

#

i also need to make a station icon appear outside of the grid if there is no adjacent roadblock to a station mod

#

ughhhhhjjjj

fervent tusk
#

ive also come to realize that hue-rotate can only do 15, 30, 60, 90, and 180 so im actually not sure how im going to do mod nums any more

#

i want to be able to have at least 6 unique mod num colors before they cycle sooo...

#

i cant do hue-rotate-[264deg] or something since the browser doesnt support it sometimes i think

#

mine doesnt at least

fervent tusk
#

for mod nums i feel like instead of cycling between the colors (nums) like how the game does, itd be cool for it to have its own tool like what thinh did

#

and then it would bring up its own menu where you could select from 8 or so colors to assign mods to

#

i feel like 8 colors is a good limit

#

im not going to make the color customizable since... its an editor. color design doesnt matter, its just for solving a configuration

#

i can add a popup explaining how to change the color of a mod so its easy for the user to understand

fervent tusk
#

@delicate nymph can you check the code i commited, none of the variables from useState seem to be working and i cant figure it out. i cant rotate tracks on my end. (ignore the 3 merge mains i was struggling to commit my code over your changes)

delicate nymph
#

Sure

fervent tusk
#

i tried to build the website using serve build, npm serve build, npx serve build cause none of them were working and now its broken when i try to rotate and stuff

#

much obliged

delicate nymph
#

The problem is Tailwind CSS cant scan the rotate class since it's dynamic

#

I'm fix it and have a PR

delicate nymph
fervent tusk
#

thank youpc_yipee

#

seeing as im not sure how we're going to be able to change the mod colors easily i think inlining the svgs could be better

#

we can just save all of them in one file as inline svgs

fervent tusk
delicate nymph
#

Use svg as tsx is simplest way I can think

fervent tusk
#

using the .svg file and doing <img src={svg} /> is definitely the most convenient but if we want to have color control we have to inline the svgs

delicate nymph
#

Yeah, maybe last time I use a tool to convert it, so that may cause it look buggy and weird

#

Oh wait, we can use fill="currentcolor" in the svg

#

And can apply the color to it

fervent tusk
#

only works with inline though

delicate nymph
#

We can import direct svg

fervent tusk
#

importing directly only allows for <img src={svg} /> im pretty sure

#

if you mean something like import MySvg as "../assets/MySvg.svg;

delicate nymph
#

Yes

#

It should be capitalize

fervent tusk
#

className doesn't allow for enough color control so we can't just use <img>, the only way that would seem to work is doing raw <svg>.

delicate nymph
#

Use style, the classname is for a framework name tailwindcss that have predefine style

fervent tusk
#

we can only predefine so many styles though

delicate nymph
#

We can use color picker

fervent tusk
#

color picker would have to use <svg> then

#

if we want variable color selection we have to use <svg>, style will only let us use however many we define

delicate nymph
#

Hmm

fervent tusk
#

from what i understand you can just get the raw svg data by opening the svg in a text editor so it could just be the tool you were using is wrong, im not sure though

delicate nymph
#

If you use fill="currentcolor" in the svg, the svg will use the color you define in the style of the parent

delicate nymph
fervent tusk
#

also, what explicitly did you put in the program to fix the rotation? im still so baffled at what even caused it

#

i have no clue how building the website made it stop working

fervent tusk
#

im going to remove option sorting for the level selection, i dont like how 1-10 appears right after 1-1 instead of 1-2. the levels are already sorted in levels.json and there's not much of a point

fervent tusk
#

@delicate nymph you should make the connected fences still have the circle on top of each fencepost, i feel like having it as a straight line like this looks weird (you could probably just put the connection underneath the fence svgs)

#

it also seems to be a tad bit off

delicate nymph
fervent tusk
#

eventually im going to move the parameters on the toppanel inside of the gamecanvas and make them look nicer

#

tracks and semaphores could be on the bottom-left like how the actual game does it, and the grid dimension inputs could be removed entirely and i could just put arrows at the edge of the grid, again like how the game does it.

#

not sure where to put the clear grid and undo/redo buttons though

fervent tusk
#

im not sure how to do the update rate/visualize rate for an input

#

the best way to do it imo is to have it scale logarithmically instead of linearly so im not sure what the best way to do that is

#

i want something like 1ms > 10ms > 100ms > 1s > 10s but i feel like a slider doesnt do that well enough. you usually expect a slider to be linearly scaled so i feel like thats weird

#

i could do buttons but any more than 3 is too many

#

asked chatgpt. i could do:

  • a slider with defined tick values so theres clarity and the slider doesnt feel weird
  • dropdown menu
  • toggle between slow/medium/fast etc.
#

dropdown menu feels wrong, i like the slider with defined ticks more but i feel like that would look strange compared to everything else

#

i like the idea of toggling/switching between options though. it would only require one button and theres not too many options so its not ridiculous to toggle between, and the user can expect what will happen when they toggle it (the speed increases tenfold) so it wouldnt seem weird

fervent tusk
#

@delicate nymph see if you can make the display any nicer, this is what i have so far. i think its nice but i feel like its missing something, and it could be a little bit better. im not sure what exactly to do though.
also, tell me which button design you like more, and what extra stats i could add at the bottom. it has to be something for all of generation, so we cant do something like "finished cars" since that would change every step.

#

i feel like the update rate could also be changed or moved, and maybe the time elapsed could look nicer. im not sure where the update rate would move to though.

#

im planning to make it a little nicer by animating the status so the ellpises on "Simulation Running..." go . -> .. -> ... -> . and im gonna make the icon pulse

#

im also thinking of adding a "step" button so the user can choose to watch the level solving by each frame. im not sure how i would redesign the whole button section with the "solve level", "pause", "reset" buttons to fit the fourth one in though.

#

im also gonna make room at the top of the gamecanvas for an ETA bar, i feel like thats the best spot to have it.

fervent tusk
#

i also moved the bottom panel inside the game canvas. im gonna keep it for now and see if i like it, its more consistent with the rest of the ui

#

i think i want the top panel to be inside the game canvas as well eventually. the dims will instead be set by arrows at the edge of the board, and tracks and semaphores can be in the bottom left. not sure where the "Clear Grid" button would go, but the undo and redo buttons can stay in the top-right

fervent tusk
fervent tusk
#

other than a ui update, i have a level status update

#

ive been running the really long levels on my pc that i mentioned before and theres an issue with my cmd where it will just halt once it reaches a print statement like "found a new minimum solution". ive tried to fix it but i cant seem to get rid of it so im not sure. i changed my pc to stay active even after being inactive for long periods, and the program running on my pc uses process.stdout.write instead of console.log since that supposedly helps with output buffering or something

#

anyways it still pauses fsr sooo

#

doing ctrl+C (which normally kills the program) seems to make it resume though

#

i ran 8-6A for a week and i decided to try and ctrl+C it, and apparently it found a solution 2 days in

#

so its continuing now

#

all the levels will be solved eventually...

#

the only level which could possibly take longer than 8-6A is 12-8B

fervent tusk
#

gonna leave myself a roadmap for the next potential stuff for the website:

  • add a step button, reconfigure the solve button/pause/reset layout to fit all 4 buttons
  • convert all svgs to inline svgs so they can be colored easily
  • make a mod_nums tool where you can select from 8 colors to assign them to mods
  • make the station tool place 2 icons, one showing the roadblock station's location and the station mod's location
  • add numeral car functionality (placing post offices, ncar ending tracks, ncars)
  • make stations display properly (rotate to face closest mod & appear outside of grid if necessary)gp_dead
  • move toppanel inside of gamecanvas? (move track and semaphore inputs to bottom-left, grid dims are accomplished by stretching the edges of the grid)
  • add an ETA bar display (no functionality yet)
  • add actual level solving and make the app properly display results
  • make undo/redo buttons actually work
  • make the gamecanvas feel nicer to use
    • make a selection icon appear around the tile being hovered on
    • make deleting/replacing a tile appear similar to the actual game (replace tile with an opaque red square and overlay new track on top if necessary)
  • save whatever configuration the user has when the website is closed, and load it again when they reopen the website
  • have a "solve history" section somewhere that shows each level the user solved (up to ~5 at a time)
  • add a "credits" section to the leftdisplay and figure out what to put on it
  • add a "report faulty results" section where the user can fill out a google form or something so we can debug any potential issues with the solving algo
    • make a popup appear if a level fails to solve prompting the user to fill out the form if they think the level should've been solved
  • make a machine-learning model to display ETA for the level
  • deploy app on github with no issues hopefully
  • celebrate pc_happy
fervent tusk
#

heres what i have for mod nums (mod coloring) so far. im not sure if i want to move the icon somewhere else yet since the layout is getting really tight. if you pull up the sidebar on the left, there's only enough room for 1 slot on the bottom-right for the mod coloring icon to take. i could move it next to the righttoolpanel but then it feels too far from the rest of the bottomselectionmenu to make it easily clickable...

#

im also not sure if i should go with a vertical layout or a 4x2 layout. the 4x2 layout would be harder to fit but look more appealing, and the vertical layout is easier to fit but less appealing

fervent tusk
#

i think im going to go with the 4x2 layout and make the 2nd row a little to the right, that way it looks like how the keybinds are on your keyboard so its more appealing, and the buttons are close to each other so its more accessible for the mouse

#

the more stuff i add to the ui the more respect i have for websites that manage to resize themself to work at any size.... i think thatll be one of the thoughest things ill have to do before finishing the website

fervent tusk
#

actually, another thing i could do is make it so the palette appears as 8 squares in a circle around the mouse

#

the only issue with that is the button for making the palette appear cant be near any edges of the grid, since then the palette will always be cut off by whatever edge the button is next to

#

in which case i cant really put the button anywhere since there is no good place to put it away from the edge...

#

having the palette appear as a circle without a button would actually be the best way to display it though, since it doesn't add anything to the gamecanvas and i wouldn't have to fit it in with all the other panels

#

the only issue is i need some method other than pressing a keybind like R to make the palette show up...
i could make it always show up when the user selects a mod, but the mod buttons are close to the edge and thus the palette gets cut off. it activating every time would also get annoying after the user understands how to use it.
i could make it always show up when the user places a mod, but that also gets annoying after the user understands how to use it.

#

a popup might be the best idea. that way, the first time a user selects the mod, they're told to press R to change the palette. that would work.

#

the next issue with having a circular palette as well as keybinds is that, without a display like a button explicitly showing the current mod color, the ui might feel less responsive

#

sure, the mods would have the current color shown, but i dunno if thats enough

#

im just gonna implement it and see if it needs to be more responsive

fervent tusk
#

it took me a very long time to get the darn thing to appear where the user's mouse is when they press the keybind for it

#

i feel like i should remove the keybinds on the individual palette colors as well with this design, the purpose of the keybinds is so that you dont have to pull up the palette to pick the color because you've memorized what color each key is. theres no good way to really order the keys since the palette is a circle though, so i feel like putting keybinds doesnt work since its not easy to memorize them that way, and the user doesn't feel like they have to memorize it. forgoing the keybinds is also not that detrimental since the palette makes it very easy to select the color you want.

#

other than that, the only issue i have with it is that when you pull up the leftdisplay the palette moves aligned with the rest of the panels, so it looks kinda off-putting since you'd expect it to move with the grid, not the panels. i am NOT going to deal with that though, so im happy with it just looking a little off-putting if anyone even notices it

fervent tusk
#

i need to find a new place for the controls in the bottom-right, any more than 4 is too many to fit in the corner

#

im not going to move the righttoolpanel up to accommodate it since it should be nearly centered, and the control panel would shift it up too much. i cant really shrink it either since it'd still be too large, and shrinking it any further makes it unreadable

#

also cant make it horizontal since it conflicts with the bottomselectionpanel when the leftdisplay is being shown

#

i think i might just move the controls to the leftdisplay for now. i dont want to pack it with too many things either though...

fervent tusk
#

(i need to make it so the switch rail is a solid color and not based on the mod num, woops)

delicate nymph
#

Wow

fervent tusk
#

thanks pc_happy

delicate nymph
#

I will enhance the ui tonight or your afternoon xD

fervent tusk
#

@delicate nymph can you see if you can make the leftsolvedisplay or whatever look nicer at all when you have a chance? i feel like it could be improved but im not sure how, like stuff being rearranged or something

delicate nymph
#

Sure

fervent tusk
#

deleting the bottom borders for the control panel was smart

#

it gives just enough room for the tools to be close enough to the center that it looks nice and is still convenient

#

the only issue i have now is that the tools have a LOT of padding to the left and right... im not sure how to make it skinnier while still making it look good though since the control panel is there

#

i feel like making it skinnier will make it look out-of-place

delicate nymph
#

Maybe place it in a 2x2 grid

fervent tusk
#

smart pc_think

fervent tusk
#

i still have to make a cat for the station icons... ive tried in the past to make simple ones with circles and lines but i just dont like how they've been turning out so im going to try and put more effort into it to make it more stylized kinda like how the game is

#

i also need to figure out what icon to make to show where the actual station mod adjacent to the station roadblock is

#

i wonder if i could just put a small rectangle underneath the track with the mod on it as a sort of platform

#

nope cant make a platform look good

fervent tusk
#

actually... i dont really need an icon, do i? the point of the station rotating towards the track where the actual station mod is is to show where the mod is

#

i think im going to just do that and then make it so the station cant be placed on empty tracks, it needs to be adjacent to a track

#

then the track it faces will have the mod on it

#

the biggest issue with that is i cant rely on the level data to reverse-engineer where the station should be since stations are identical to roadblocks, meaning if 2 roadblocks are next to a station mod its impossible to tell which should be the station roadblock

#

and since the editor relies on the level data to display the grid, if a user places 2 roadblocks next to a station, it may not appear where they are placing which is not what should happen

#

i could:

  • make a rotation layer solely for stations in the editor. likely not happening since it doesn't exist for the preset levels i made and i dont want to make a new layer just for that.
  • make 4 new tracktypes, "STATION_LEFT", "STATION_RIGHT" etc. similar to how i did the ending tracks. i would have to reformat the preset levels i made but this is less annoying than making an entire other layer, and the rotations are explicitly given by the tracktype.
  • make 1 new tracktype, "STATION", and use an algorithm to figure out which station should point to which station mod such that all of them are being shown (2 stations wont point to 1 station while another has none pointing towards it). i would still have to reformat the preset levels i made, but this way it's the easiest to reformat them. the only issue is i'd have to make an algorithm to calculate station rotations when the level is changed.
#

actually i cant use 1 tracktype and an algorithm because then something like this could happen and cause a discrepancy between what the user places and the rotation of the station (rotating the stations either way is completely valid causing 2 possible configurations, but only one can be chosen to be displayed when reverse-engineering their rotation)

#

so ill do the 4 new tracktypes option. unfortunately it creates 4 new tracktypes but... its necessary to display the grid properly (even if its useless to the solving algo)

#

the last discrepancy remaining is that if a station is placed in one of the 4 corners of the grid, the station has to pick which border to display itself outside of

#

at that point im forced to add a mod_rotation thing to the grid for the display or just let the discrepancy exist

#

i want levels to be saved/loaded as jsons so mod_rotation would mean another level layer which i am not doing

#

which means i will allow a discrepancy for that edge case

fervent tusk
#

37 tracktypes... jeez

#

i could make a rotation layer since that could also be used for tunnels, car/ncar ending tracks, and the stations, and that would make 25 tracktypes instead at the cost of another level layer. not gonna make another layer though so 37 it is

delicate nymph
#

I'm made the UI to next level, wait for it xD

delicate nymph
#

Done, now im gonna try to make the simulate function and solve work

fervent tusk
#

@delicate nymph i cant run your pr because @/lib/utils doesn't exist

#

also why are there so many new files??

#

and why are all the divs custom components...

#

i dont really want to use any of the custom animation libraries, i feel like it adds more unnecessary files and libraries when transition-all works fine. it seems like the rest of the code is for using the website on mobile?

#

im not going to merge your pr yet since i cant run it and i dont really understand what all the new files are for

delicate nymph
#

run npm install again

fervent tusk
#

i did

delicate nymph
#

oh i see the bug, let me fix it

#

it missing the file because some mistake in gitignore

#

i push it now

fervent tusk
#

jesus you changed a lot

#

hmm

#

i dont really like the new ui changes, sorry

#

something about it definitely feels slightly more sleek and modern similar to other websites, i like that touch

#

but its not as polished as it was before

#

i'd also like to keep the descriptions for the hyperparameters, i like how the sliders have more information on them though

#

oh i see you hover over the question mark to show the description

delicate nymph
#

yeah it your decide, keep it or use the old design. I made this only 15 minute so it okay to delete

fervent tusk
#

15 minutes is crazy

delicate nymph
#

it just copy and paste because all the ui code is just a library

fervent tusk
#

i like some of the changes, ill try to incorporate some of it into the old design but im gonna keep the old design

delicate nymph
#

Some component very useful

fervent tusk
#

i've gotten stations to display properly when the level is loaded, but im really struggling to make them place correctly and look correct when you hover with it selected

#

i think im going to put it off for now

#

im gonna work on making numeral car stuff work and move the toppanel stuff inside the gamecanvas and then come back to that

fervent tusk
#

at some point i might center the bottomselectionpanel and grid based off of the left and right displays, and then make the grid centered based on the bottom panel and (eventually) top eta bar

fervent tusk
#

it barely fits in the corner so that the bottomselectionpanel has a reasonable gap from it

#

which is why i want to center the bottom panel and grid based on the displays

#

i also kinda feel like the values should be able to be typed in since the max for tracks is technically 144 (or whatever the board dims are)

#

im going to make the counter display a warning if the max track count goes above like 20 though since levels with 20+ tracks take a very long time to solve

fervent tusk
#

found someone who knows how to do web design really well (@civic shale), im going to use their advice to try and make the website look a lot nicer

#

im going to try to sketch out what the website should look like with all the elements in the checklist i made before i continue since they suggested picturing out what to do before doing the code

#

im struggling to implement the new stuff we need anyways and it keeps getting more cluttered so starting fresh could be a good idea

#

oh yeah, @civic shale would you suggest building off of a library like shadcn or should i try to make the website with just react and tailwind once i know what i want to design? (10 minute timer before you can talk oops)

civic shale
#

come on, design first lol

fervent tusk
#

planning is always nice

#

i will do that though

civic shale
#

for me i will try to keep things minimal

#

unless there is a time constraints i would prefer to go for ui component

#

but what to use is up to what would i aim for such as
if i want out of the box -> mui/chakra
if i want something generated with control -> shadcn
if i want something more like a building block (still needing to be style and hand create components)-> kuma ui
if i have ton of time -> tailwind or css/scss (up to standard but if none i will go for tailwind for faster product iteration since i'm more proficient with tailwind)

#

this is not what you need to follow. it's just my thought process

fervent tusk
#

since im sketching out the whole website with each concept, i need to think about how all of them are going to work now

#

for the progress bar, i think ill make it display above the grid, and then have an "estimated time remaining" to the left above it, have a 2-digit progress percentage to the right above it, and then display "Solving Level" on top of it.

#

im not sure how to make it so that the user can place numeral cars and all 8 stations (including post offices), but i feel l ike it would work well if it was implemented into the palette

#

the only issue is the user then needs to understand that the palette can be used to not only color mods (mod_nums), but also select which kind of car and station they want to place (but the palette would make it very easy to select which one they want)

#

im not sure how else to do it though, i dont want to do it how the game does it where theres a small icon above the tools to toggle which car/station you use

#

and creating an individual icon for each of them would take up too much space

#

i suppose in the popup i could explain that the palette can be used to modify what kind of mod/car gets placed and show a preview

fervent tusk
#

im going to keep the website restricted to computer/keyboard interfaces, and since the palette can only be used by pressing W, i think im going to remove the undo and redo buttons since it should be expected that can you can do ctrl+z and ctrl+y/ctrl+shift+z and itll undo/redo

delicate nymph
#

nice to have more friend ๐Ÿ˜„

fervent tusk
#

im going to opt for a darker gray palette, since the canvas being a light blue makes that somewhat difficult to do i think im just going to make the canvas dark gray as well

#

im not sure how to really handle the palette given that the board can be so colorful though]

fervent tusk
#

i could change the palette to have more effective colors... i could probably remove purple and gray

#

just need lighter colors

#

progress so far. going to try and figure out the palette better tomorrow and add the rest of the components. im not sure if the tracks and semaphores thing should still be in the bottom corners since the leftdisplay needs enough margin to be able to show both itself and the gamecanvas

civic shale
#

That's really quick ngl.

fervent tusk
#

added the left display

#

i decided on an accordion style so that way i can fit a good amount of things into that display (the title, hyperparameters, solve history? credits, report faulty results), and i also shortened the hyperparameters so you view the descriptions through the (?) buttons instead, and designed the sliders better.

#

the only thing im undecisive about is the GEN_TYPE buttons, i wasn't sure how to do the DFS and BFS buttons well since it creates a lot of space to the right of the buttons. i also made the explanations for each of them appear beside the buttons (not sure if the (?) shouldve been inside of the buttons but i liked them outside more) instead of putting everything into one (?) button

#

im also not sure if the sidebar for the leftdisplay is good? i think the vertical lines usually mean that you can scale whatever div the sidebar is attached to, but in this case it's a toggle, not a scale

#

going to make the accordion titles left-justified as well since that matches the descriptions

fervent tusk
#

i still like the idea of using the palette more since its so much easier to use, and the arrow above the car would be small. the big issue is that it's not intuitive that the palette can modify both mod color and which car you select though, so i just need to make sure the user understands that with a pop-up (hopefully)

fervent tusk
#

im also going to make the title card for the website (the railboundsolver card) a popup when the website starts instead, and replace that with the controls panel.

delicate nymph
#

Nice

#

While you design the site, I think I will help seperate the logic out of it and make the code more cleaner

fervent tusk
#

wdym separate the logic

delicate nymph
#

Oh i mean refactor

fervent tusk
#

ah

#

yeah, im going to finish designing the site and then im going to code the new website from scratch (using the old one as reference though)

#

your refactoring and code cleanup has been extremely helpful though, so i thank you for being able to do that when i start coding it again

fervent tusk
#

finished leftdisplay

#

@delicate nymph @jovial heath @civic shale @tranquil sinew are you guys okay with these credits? let me know if you want anything changed, your name removed, removed links, etc.

civic shale
#

you have my github right?

#

k

delicate nymph
#

Look good to me

jovial heath
#

Eh, I'm fine with it but I don't think I've really contributed that much (especially recently when I've had a lot of life stuff going on). If you want to credit me then that's fine but I certainly don't want you to feel like you have to

fervent tusk
#

almost done with the ui, but im not sure where to go from here.

#

i added icons to the leftdisplay and i created an area for the level selection and timer inputs, and the track/semaphore stuff, but i dont know how to improve them

#

i tried adding buttons to the track/semaphore inputs in the bottom-left (not the leftdisplay) but it made it feel too crowded. the design also just doesnt look that good imo, and i feel like the timer up top could be displayed better

#

i also need room for another toggle option "update rate" that displays something like "Update Rate: 1/10/100/1/10 msec/sec" and then a toggle button. before i put it on the timer block, but it doesnt feel like it fits there any more, and im not sure where else to put it because it feels like a one-off otherwise.

#

@civic shale thoughts?

civic shale
#

put credit and contact into another icon -> using i

#

you can also add additional info like about data or something

#

i feel like it's a bit too much tab?

fervent tusk
#

can you please elaborate on all of that

civic shale
#

i mean putting everything on side bar is not a good idea though

#

and control you shouldn't use the gear icon

fervent tusk
#

should i use a gamepad

civic shale
#

may be

fervent tusk
#

where am i supposed to put the stuff on the sidebar if i cant put it there? i feel like having just those 5 items works well

civic shale
#

if you say so i just give my opinion

#

because i think that putting infomation data that isn't relate to configuration might make user a bit confusing

fervent tusk
#

ah, you mean the credit/contact doesnt feel like it fits with the other 3

civic shale
#

even control too

#

since as i said if we expected it to be config

#

then it should be config

#

rule of thumb is to be user and think like user

#

but if you think it's suit yours then i won't complain

#

i just givin an idea

fervent tusk
#

im going to keep the sidebar as the 5 items, since the website is only one page i feel like creating too many divs will make it more confusing and chaotic. plus, i think that its reasonable to assume the sidebar would have anything extra that the player cant find on the rest of the page, and they can see all 5 items easily when it's collapsed (or they'll see the scrollbar)

#

good advice though

civic shale
#

well as i said

#

don't think about code

#

think about design first

#

it's more about techique on that point

#

but just do thing as you said i guess

fervent tusk
#

moving on, how do you think i could fix these 2 divs?

#

the bottom one feels too bland, it's meant to be 2 inputs that the user will likely use often, so i dont want to put it into the side panel, but it feels bland and empty on its own

#

for the top one, im curious what you think about the design. im thinking that it just shows the icons normally, but when you hover over a button, it displays the name for it.

#

im also not sure where to position them, since i feel like putting them on the left will make it crowded when the sidebar is open, but putting them on the right makes the left too empty when the sidebar is closed

fervent tusk
#

was trying to figure out how to better do the parameters since i found that giving them titles made it feel nicer, and i also found that making them vertical feels nicer to me as well

#

the only issue is that the max semaphores is too wide if it's displayed as one line, and it's too tall if it's displayed as two lines, and i dont think i should change the font size since its already the smallest used throughout the website (16pt)

#

i need me some nakuya design tips, i feel like alignment is the big issue here but im not sure how to align it

delicate nymph
#

Is there save and load level?

fervent tusk
#

no, i forgot about that. one thing i was thinking about for the solving display was to make the dropdown menus a "select level" button which would pull up a large popup where you can select the level and preview it before loading it. i didnt want to do it before since i didnt think there'd be enough content to make it worthwhile but adding level loading could make it a reasonable idea

#

additionally, i have a "solve history" card on the left display that could possibly be moved in there

delicate nymph
#

Nice

#

with the solution I was thinking about something like this, a state-tree browser. But if there too many states it may broke the browser

fervent tusk
#

not possible

#

the tree is too massive for any given level

#

even if you wanted to highlight the single branch where the algorithm started to the solution youd likely have to render 50+ frames. i like the idea though, so ill keep it in mind to see if i can make it more reasonable

fervent tusk
#

not sure where to put the delete level icon, putting it to the right of the button feels weird since then theres a really big gap only on the right side (and it may not even be shown if a button is not being hovered over, resizing the div would also be strange)

#

putting it inside of the button's space like i did in the image is a somewhat ok solution but the button has to be resized when its hovered to show the delete button, which could make someone accidentally pull up the delete level menu

#

i think i could just make the padding on both sides of the div large enough to fit the delete icon inside the padding

#

and then display it to the right of the icon, without an unequal gap on the right side like there was before

#

sigh

#

so much designing and so little coding yet...

#

but i should design before coding since it could cause problems otherwise

fervent tusk
#

not sure what to do with the "view solution" button

#

i want to display something that shows the stats on the level like in solve history (iterations, time elapsed, solution, tracks saved, etc.) but i dont think i can accomplish that by doing fancy shenanigans with the level settings, i think itd be better to show another popup instead

fervent tusk
#

im not sure how to make this look better

#

i feel like i could use some fancy styling for the statistics but i don't know what to use

#

feel free to give suggestions to make it look nicer

#

im almost done designing... i just need to figure out what to do with the remaining 4 timer buttons, and figure out where to put a refresh rate toggle

#

im also going to try removing borders from everything on the ui to make it feel less busy, as well as some other button changes

fervent tusk
#

i believe im done... @civic shale thoughts?

#

borders are now on the bottom for the divs that used it, and i made the level settings/extra stuff display as buttons to the left of the board that expand to show the name/contents when hovered.

civic shale
#

Make a menu button a bit bigger i think

#

Otherwise, this looks way cleaner. Am I right?

fervent tusk
#

thank you very much

#

im glad it looks good

#

i should be good to code then im assuming

civic shale
#

But I hate to say it with my perspective since it's what I saw

#

But I think your opinion on this compared to the old one is better

#

So what do you think compare to the old one?

fervent tusk
#

are you asking me why i think the new one is better than the old one?

civic shale
#

Nope

#

I asked you how you really feel comparing

#

If you think better then say so if you think it's worse then say so

#

That's my point brother

fervent tusk
#

ah

#

just trying to get through some of the language barrier, sorry (your english is a little bit difficult to read at times)

civic shale
#

Sorry i like to shorten the sentence lol

fervent tusk
#

i think the new design is better. having less borders makes it feel cleaner and less busy, and the base color for the divs isn't too dark, but it could be lighter. it's still good enough to distinguish between divs imo though, and the icon design for most of the clickable text makes it feel nice to look at.

#

the screen also isnt as cluttered any more, it feels more organized with buttons and pop-ups as well

#

putting the buttons that are related to the grid next to the grid also feels perfect. since they're next to it, the user doesn't have to move their mouse far, and it isn't tucked away in some corner. i also like that the text only appears when hovered, because it can simply be shown as the icon (which also represents what the button does well)

#

is that similar to what you're thinking? is there anything that could be improved?

civic shale
#

Well, that's the answer. I want to see

#

This way of reflection will make you better at designning!

#

Go ahead and build that thing. I cant wait to see it!!!

fervent tusk
#

thank you, that means a lot to me pc_yipee

#

your advice has been good for me

tranquil sinew
#

the new UI looks really good, congrats ๐Ÿ™‚

delicate nymph
fervent tusk
#

for the both the "faulty results" and "website issue" buttons im going to see if i can make it so the results get sent to a github bot or something that can then put them as issues on the repo

#

for faulty results, im going to make it so that the user can submit a board configuration, and then also submit their own solution for that board configuration and a description which would get sent to the repo

#

for website issues, im tempted to just make it link to a google form that they can fill out with submitted screenshots and a description that would get sent to the repo (it might be weird that one issue is handled within the website but another is handled in a google form)

#

@delicate nymph do you know if its possible to set up a github bot that could send data from the website/google forms to the repo as issues

fervent tusk
#

some minor issues:

  • the separators disappear when the leftdisplay's content overflows for some reason
  • the text seems to display at a sharp resolution when the content isn't zoomed in which looks kinda weird. if you compare it to figma, figma's isn't as sharp and looks better. i tried adding the antialiased tag to some of the divs but it didnt seem to work?
  • the website seems to have a different resolution compared to the figma design since most of the content on the website seems to be slightly bigger. i can hopefully just resize everything in the end to fit.
#

i'm super happy with the custom sliders also, they took me a bit to implement but they came out nice

#

i also used palette variables for the divs so that they can be changed on a dime, i wanna change how its implemented so its cleaner and more accessible across all styles instead of being limited to bg/border/text per-variable though

fervent tusk
#

oh, also ive still been running the really long levels, and all of them are complete except for 8-6A

#

12-8B is the longest one so far i believe at 1.2 days of processing and over 4 BILLION iterations. it gave a reward of 7 tracks saved though

#

8-6A is the last man standing before every single level is solved

fervent tusk
#

apparently the website is 1.25x the size of the design i made in figma since the leftdisplay is 400px in the code and in figma but its displayed as 500px

#

oh wait i wonder if thats from ui settings for the entire pc

#

yeah its that nevermind

#

accounting for scaling is going to be the death of me

fervent tusk
#

added grid and progress bar and bottomselectionpanel to a mildly usable degree. the most notable thing is the stuff to the right of the leftdisplay expands when its collapsed or shown which took me waaaayyy too long to get to work

fervent tusk
delicate nymph
#

Nice

#

It look better pc_thumbs_up

fervent tusk
fervent tusk
#

wanted to take a break since i felt burned out from working on the website, and my dad also wanted me to help him with some stuff for a few days. im going to continue working tomorrow pc_wave

fervent tusk
#

i want to add functionality for creating new levels and duplicating levels, but im struggling to find how to fit them into the ui and make it look nice

#

ive settled on the design above for creating a new level (having a button at the bottom stylized with a white background and see-through text)

#

ive also thought of a design that could be something like this but im not sure how to make the buttons look good..

#

(level options are moved from being shown inside the level to the bottom-right)

fervent tusk
#

messed around and ended up with something like this, i actually like it a bit. ill try to polish it up more tomorrow

#

i also made the inputs work perfectly now

fervent tusk
#

i think im going to scrap the "view solution popup" and see if i can move it to its own section in the bottom right like it is above. the solution would then be shown when the grid is hovered over

fervent tusk
#

finally got something that i like!

#

ill make the stats in the bottom-right get grayed out or something when the level has no solution, and the buttons will display their names when hovered

#

im wondering if the stat bars could be improved at all. i thought about adding ticks/making each unit a segment, but it doesn't feel as good as a flat bar. i feel like there could be something better than just the flat bar though.

#

man... designing is so difficult and time-consuming but its definitely rewarding once it looks good

fervent tusk
#

finished designing some other minor stuff and started designing on the website... the sliders are hard to do, as well as making the lists the right length

fervent tusk
#

ive been running 8-6A for 2 weeks and it still hasnt finished running

#

and i had to unplug my pc right now

#

so unfortunately i don't think 8-6A will ever get solved

#

oh well.

fervent tusk
#

added a savedLevels list to frontend for custom levels and finished interface design. gotta finish up dashboard buttons and make the inputs work perfectly still, and also add the thing where it shows solution on hover (that'd be later in development though)

#

currently levels that aren't custom don't get their changes saved, i plan to make it so a popup gets shown asking the user if they want to duplicate the level with the changes if they try to do that

fervent tusk
#

added action functionality (seems like it needs to be debugged though because im not sure how the empty Unnamed Level overwrote the other level at 1:02), working on grid resizing next

#

some stuff is also noticably laggy, like the entries (max tracks, max semaphores, name) being loaded barely after the level is selected, its not instantaneous like everything else

#

i wonder if thats why the level got overwrote

fervent tusk
#

i fixed the overwriting issue, the data entries in level settings get updated using 2 hooks so i guess if you do it fast enough you can skip the second hook and break it. i just changed it to use one hook instead now so it should be fine

#

im trying to figure out how to handle resizing though, since i need to make a 12x12 grid look as good as a 1x3 one

#

i think i want to make the grid take up a fixed size as if it were a 12x12 by default, since the ui looks good that way, but then i need to figure out how to make the 1x3 grid (and all other sizes) look good inside that space

#

ive thought about implementing it like how the actual game does where you select a portion of the 12x12 grid to use (it appears as 1x3 when not resizing) and then the camera fixes it to be nice. the only issue with that is that id have to do a lot more stuff to simulate the effect of camera panning like that, as well as change a bit of the grid functionality to make it look as though it takes a portion of 12x12 instead of just being 1x3

#

i like the idea of situating the actual grid inside a bigger grid though, which i could still do without having to implement any kind of 12x12-portion stuff

delicate nymph
#

I'm joining GMTK game jam 2025, the theme is LOOP

#

I think I'm gonna make a game about train and tracks xD

fervent tusk
#

that sounds super awesome

delicate nymph
#

My idea so far:
It's like railbound but instead of going to the final, it goes back to the station where it began. Each time the player successfully run the loop, there will be more checkpoints spawned in the map and player must change the track to match it

fervent tusk
#

added a grid overlay in the background to fill up the empty space, grid resizing, and undo/redo functionality (it almost works...? not sure why the level didn't save at 1:00)

#

im very happy with how resizing turned out, i thought it would be a lot more challenging but it wasnt too bad to implement

fervent tusk
#

im trying to design a cat for the station/post office icons but i dont think i make one that looks decent due to how small the icons have to appear, and how thick the lines have to be

#

this is my best attempt so far (the icon will have to be this small)

#

im going to see if there's any other icon i can use to convey the idea better and if it looks better than the cat

fervent tusk
#

this is planning far ahead, but i wanted to think about how i was going to make a machine-learning model to estimate how long levels would take to solve

#

i already know how to make models using tensorflow, but i need to think about how im going to train the model to make it work for time estimation

#

there are only 233 levels in the game (not including sandbox levels) which is a small sample size for a machine-learning model, so i was thinking about how to generate levels (which would also be good for the website) and i thought that using evolution would be really smart

fervent tusk
#

for example, at the start, a board would be generated with only cars and the ending track, and then the algorithm would solve the level (have to figure out how to make it still not take that long on minimalistic levels though). the board would then place certain tiles along the solved path in, say, 10 different ways, and then solve all of those levels and use some metric to gauge how good each of the 10 methods are, and pick one to move on and repeat that cycle

#

and over time the level would place objects to create a "complicated" solution and level that can be used for solving

#

the only issue is that whole process would take a very long time and id have to make sure its good enough for puzzle generation

#

on the upside, i could use it on the website for a level generator which would be awesome regardless

#

it would be smart to talk to the dev team to figure out their level making process and then design the evolution around that actually

#

also, for the station icons and post office icons im going to use tickets & mail as replacements for the cats, and then possibly show like a checkmark when theyre collected

fervent tusk
#

going to use these as replacements for the cats

#

just have to finish making stations place/appear properly and make it so numeral cars/stations can be placed, and then i can start working on level solving i believe

fervent tusk
#

thought of this design for differentiating between number/numeral trains

#

i thought of making the numeral train look different, but i finally realized that that wouldn't be a good idea, because how is the user supposed to remember which train is for the normal car and which one is for the numeral car unless they know what both trains look like in the game?

#

i thought about lightly overlaying the type of car the train belongs to on top of the train tile so the user would know then, but i felt like it took away from the purpose of the train tile itself, and it would be visually distracting when trying to figure out which cars are actually cars and which one is the train tile

#

ive been thinking about just putting numbers/numerals on the trains for a while now, but i didn't know where to fit it into the sprite since i wanted them to be the same size as on the cars so it's easy to see. i just thought of removing the window and putting the numbers in their place to make it fit, and it feels perfect!

#

i also made the borders match the color of the car they belong to since otherwise the numeral car's numerals look like theyre part of the train sprite with black outlines which isnt the case

#

...i now realize that i need to make the numbers display better though, since the thin outlines and white fill make the numbers hard to see at a small scale

#

hm

#

i like the colored outlines and white fill a lot more than this design, but i cant find something better than it, and it displays well at a small scale, so i think i'll keep it

#

works well enough

fervent tusk
#

made bottompanel icons and palette icons reflect choosing to place numeral items, added numeral versions of each sprite, and also there is now a cursor around the tile you hover around (forgot to show it in the video but you can see it a little bit i think)

delicate nymph
#

My game is on, only 4 days but I managed to make it work pc_yipee

fervent tusk
#

pretty cool gp_smile

#

making an entire game in 4 days seems kinda crazy

#

added tooltips to parameters and fixed problems with the old numeral svgs, ill probably try to tackle stations tomorrow as it is going to be very challenging

#

also, i used transition-all and a constantly changing flag to animate the cursor going in and out, so it's a bit laggy when you hover over tiles since the animation doesn't trigger immediately due to the cursor just being loaded in at that tile, it has to wait until the flag changes

#

just realized that i could have one cursor and make it move to the currently hovered tile as well, but i think that'd be a bit difficult to implement. might try it though

fervent tusk
#

changed the background grid to use linear gradients instead of cells to reduce lag, made the grid only resize if the mouse is moved a sufficient amount (before it would always do it when the mouse was moving which was probably laggy), made the cursor a single div that focuses on the hovered tile so the animations work, made numeral cars/ending tracks placeable, and started working on making stations placeable

fervent tusk
#

i think im going to try and redo almost all of how GridTile is handled since it feels very messy right now

#

it will also make the stations easier to implement

fervent tusk
#

commented and partially cleaned up GridTile so its cleaner now, still working on implementing stations, managing 2 tiles for every action is pretty annoying

fervent tusk
#

i made stations placeable, but the user can't place them outside of the grid

#

right now stations are placed by placing a normal tile and then placing a station around it, so stations can never be placed outside the grid

#

i could make it so the user places both tiles at once but then that limits the track + station possibilties since the track and station wouldnt be able to be rotated independently (4 combos vs 16)

#

i could make it so if the station piece is selected more grid cells appear around the edge of the grid so the user can place them at the edge, and then just place a station mod depending on where they place it at the edge

fervent tusk
#

making edge tiles is a lot more difficult than i thought

#

the cursor needs to be able to go to those edge tiles, but since they technically aren't part of the grid (unless i extend the grid) the cursor can't go to them, and i would also have to put custom implementation on them since they wouldnt even be the same as normal grid tiles

#

i could make them normal grid tiles and add a parameter that disables a lot of the normal grid tile functions, effectively making it only useful for OOB placing, but that breaks a bit of the styling i have on the grid since i don't want to have corner tiles in OOB mode, but i would have to because of how the grid is styled

#

so the only other option i can think of right now is making the station and track place together, but then that limits the combos i can place as i mentioned yesterday. almost every usable (station isn't blocking a path on the track) station placement would be possible except for turn tracks since they have 2 usable spots to place the station, but then i would only be able to use one of those spots which would be annoying

#

the only other way i can think of doing it right now is making it so you first select the tile you want to place a station on, and then you pick one of the four adjacent tiles (including an OOB tile) to place the station

#

i feel that would be a bit less intuitive though

#

i suppose i could also combine the 2 methods of placing a station and a track, or just placing a station beside a track, as that would cover every scenario besides placing an OOB station on a turn track in the one spot it cant, but thats so specific that id be able to ignore it

#

i think i might do that... im going to do level solving first though

fervent tusk
#

have to work out a few quirks (like the infinite rendering error that im getting), and a lot of other rendering errors, but you can kinda watch it do its thing now which is cool

#

100Hz and 10Hz are kinda laggy but im just gonna leave them

fervent tusk
#

one of the big problems with rendering is that there's only one variable holding level data, and its used for managing the level, rendering the level, and rendering it in level settings, when in reality i really need 3 variables for all of that so ill probably change that

#

another issue is that there are 3 different versions of level representation and they need to be converted sometimes, so i might try to simplify some of the underlying code to make it less confusing

fervent tusk
#

i might try changing the entire solving algorithm as well so that only two kinds of level data are needed

#

actually i can just make the solving algorithm take in the rendering kind of level data and convert it to generation data, and the generation data would only be used for generation so there'd effectively be two kinds of level data (json and rendering)

fervent tusk
#

finished changing it to be 3 different variables, have to still change a lot of stuff and make rendering work properly

#

im going to make it so you can hover over levels in the settings to view them before selecting, fix rendering (have to make the ticket/mail overlays on stations appear/disappear properly), add the semaphore icons and make those work, add the normal track icons and display those when solving, and disable more editing features while the grid is solving, plus make the timer buttons work

#

then im going to store the solution and make it display stats in the settings for the level, and i also have to make a popup that shows when the level solves, make generation look much cleaner eventually, have some cleanup stuff like resetting the board when the level solves

#

and then after that i have to add all the popup explanations, solve history for the leftdisplay, functionality for issue reporting, github bot for repo if needed, and deploy the website, and also add a time estimation machine learning model

#

but i will take things one step at a time... ive gotten so much done with the website and i cant believe im this close to being done after more than a year, even if progress is slow

fervent tusk
#

im kinda stuck trying to figure out how to implement timer control for level generation

#

the only way i can figure out how to do it so far is to check every-so-many frames for if the level should be paused to pause generation

#

the big problem is that when generation is started, its running synchronously and pausing cant be performed while its running due to that unless i explicitly check every some frames

#

but checking every some frames makes it take soooo much longer...

fervent tusk
#

i implemented timer control

#

basically, i just made the program yield the thread every so often based on the update rate, and then it pauses/steps/updates the rate every time it does that

#

so if the hz is 0.1 (10 seconds) you have to wait until that 10 seconds is up before the settings update

#

which is good because it reflects the name "update rate" and it also makes the program faster

hybrid comet
#

@fervent tusk Hello !
I was in vacation recently and spent a lot of time without internet. I was having fun by optimizing all levels to come up with the best solutions which spares the most rail tiles.

I saw your screenshots and your solver found many amazing solutions. I was curious to know if your solver found actually ALL solutions I've found.
Do you have a complete list of spare tiles by levels ? Or I can give you mine

#

"#" levels included

hybrid comet
#

This is a combined list of your solutions + mine + those I found on internet recently.
The number after a "+" is the spare semaphores.

1-4 : 1
3-10C : 1
4-3B : 1
4-6B : 1
4-9B : 1
5-3A : 1
5-4C : 3
5-5A : 1
5-5B : 2
5-6B : 1
6-4C : 1
6-8 : 2
6-8B : 1
6-9B : 1
6-9C : 2
6-9D : 2
6-10A : 1
7-4B : 1
7-6 : 2
7-7A : 3
7-7C : 3
8-3 : 1
8-3A : 2
8-5 : 4
8-5B : 7
8-6 : 1
8-8A : 6
9-10B : 2
9-11 : 1
10-2A : 2 + 2
10-2B : 4
10-3 : 1
10-5 : 2
10-5A : 6 + 2
11-2B : 5
11-9A : 3
11-9B : 2
12-1B : 1
12-8A : 7
12-10 : 3
#-1 : 65
#-2 : 55
#-3 : 51
#-4 : 39
#-5 : 37
#-6 : 37
#-7 : 40
#-8 : 42
#-9 : 49 + 2
#-10 : 59 + 3
#-11 : 22
#-12 : 23 + 1

fervent tusk
#

there might be a very select few outdated levels because afterburn likes to decrease track count or change the level when i break it

#

im curious, where did you see my screenshots and first learn about the solver?

#

i dont think ive published stuff about it anywhere other than in this thread really

fervent tusk
#

i mean, where did you find the screenshots and stuff about it

hybrid comet
#

you shared a lot of screenshots when your solver found new solutions

fervent tusk
#

ah. i assume you used the search bar across the server and they popped up then

#

well, im glad you found it

#

im currently working on a website where you can use the solver on any level, it should hopefully be publicly available soon

hybrid comet
#

I just came on the server today. When I saw the forum I looked and saw your thread. On forum, discord puts you at the very top

#

I didnt read all messages at all

fervent tusk
#

got it. cool pc_thumbs_up

hybrid comet
#

It cant be 0%

#

same here

fervent tusk
#

i was re-running the solver on a bunch of world 8 and 11 levels a while back, they all take a very long time so i didnt want to put in an incorrect percent and then forget to update it or update it incorrectly so i left them blank for now

#

ill fix the sheet before i deploy the website

hybrid comet
#

Do you want me to point out the mistakes I find on your doc ?

fervent tusk
#

sure, thatd be a massive help

#

especially for some of the updated levels

#

that way i can rerun them

hybrid comet
#

its 2, your solutions gives 2

fervent tusk
#

if you give me your email i can make you a commentator

#

on the document

hybrid comet
#

Oh crap, I didnt find the 6-4B solutions at all ๐Ÿ˜ฉ

fervent tusk
#

would be much simpler than posting every issue in discord

hybrid comet
hybrid comet
#

indeed, I can write comments directly

fervent tusk
#

you should have access now

hybrid comet
#

does your solver take account of the time to finish the levels too ?

#

Like if you have the same amount of spare rail, but there is a solution where trains take 5sec and the other 6sec you save the 5sec solution ?

fervent tusk
#

nope

#

thatd slow the program down

#

it uses the first solution it finds with that amount of spare rails

#

and then it keeps searching for one with more spares

#

the image should load but im not sure because ive had difficulty with it before

hybrid comet
#

OMG

#

THE 7-5A SOLUTIOS

#

I spent like an hour to find a better solutions than the based one

#

but everytime I couldnt because of the yellow train to hit me

#

but you can use the bottom one to crash into the follower one

#

ahhhhh, I'm so mad

hybrid comet
#

@fervent tusk Ok, your solver found all the levels I had gotten, with even more better solutions on some. Its insane. I'm happy and mad at the same time because I spent so much to optimize everything.

You now need to optimize on # levels. When will you do it ?

fervent tusk
#

doing all # levels might be impossible but i will probably try to do them before i deploy the website

hybrid comet
#

because of the amount of possibilities ?

fervent tusk
#

yes

#

that is why 8-6A isnt solved

#

its the only level in the game that hasnt been (besides #)

hybrid comet
#

Have you tried making constraints to the bruteforce to reduce the amount of solutions ? I dont know how your code work

#

Like, when it takes too much time, you can hard put some rails because, as a human, you know you'll have a rail there for sure

fervent tusk
#

you can see how the program works in the flowchart in the github link i sent

fervent tusk
#

there are far too many solutions that would utilize different tracks for each tile, and figuring out if a tile can only use one track at all would take too long to calculate for what its worth

hybrid comet
fervent tusk
#

nope

hybrid comet
#

You know trains must go on all stations, so here there is already 14 rails that will be obvious (without counting if the rails are straights or curved)

hybrid comet
hybrid comet
fervent tusk
#

ah

#

probably shouldve just forwarded it

fervent tusk
#

for the tiles on the switch-rail next to the train, they are required, but it would be very cumbersome for the program to figure that out since its just a one-off scenario

#

however, for the stations... i did not think about that.

#

you can definitely force the program to always have enough tracks to place next to stations, since it will always be required

#

i did a similar thing when optimizing semaphore placement

#

that would definitely be an improvement to the program, but i still dont think its enough to make 8-6A solveable

hybrid comet
#

glad If I helped a bit

fervent tusk
#

thank you though. i love finding little remaining optimizations like that

#

for sure

hybrid comet
#

when I was coding back then it was the kind of things I enjoyed doing

#

I FOUND A BETTER SOLUTION !!

#

It's all thanks to you @fervent tusk

#

you can reduce the ending loop length

#

but if you make it too small the first and last train collide

#

so you need to send the trains go back all the way

fervent tusk
#

if i had to wager id say thats probably the best 8-6A solution but i dont know if the program would find something wacky to break it

#

bravo pc_sip

hybrid comet
#

I did better than the solver

#

yay SilvervaleAyaya

fervent tusk
#

lol

#

i made the solver initially with the intention of beating a steam guide that was basically the community's collection of best solutions. i wanted it to be better than what any human has done

#

it seems that i still have a roadblock in my way now though

hybrid comet
#

btw, if I may give you a little advice for your doc : put things in pageless mod. This way you wont have big blank spaces in the middle of your big solutions table. The option is in "format"

#

Then you can put headers to create a page table on the left as you did

#

so you can click to access directly "world X"

fervent tusk
#

im aware of pageless, i just liked how the paged format had numbers

hybrid comet
#

ok !

fervent tusk
#

i still have to put headers though yeah

hybrid comet
#

In any case you would like to try your solver on # levels you would need to beat those amount of tracks used. I also indicate the probability of a better solution given the complexity of the level :
1 : 12 (65 left), 0%
2 : 20 (55 left), 10%
3 : 20 (51 left), 10%
4 : 26 (39 left), 50%
5 : 32 (38 left), 75%
6 : 29 (37 left), 50%
7 : 24 (40 left), 75%
8 : 17 (42 left), 5%
9 : 27 + 1 (49 left + 2), 90%
10 : 17 + 0 (59 left + 3), 5%
11 : 34 (22 left), 90%
12 : 21* + 1 (24 left + 1), 50%

*There is actually a clever idea I used for my solution on the #-12 that you might not manage well in your program because it is something you dont come over in all the previous level. I'll explain below

#

The idea behind my solutions use quite the same logic as switching gates when a train is on the same tile. You faced this mecanic here in your code : #1142318326136180796 message

For my #-12 its not about gates but with 3 ways road :

#

As you can see there is a gate + a 3way next to each other, when you switch, it switchs both at the same time making it impossible to end. So you need to stuck a train in front of the gate over the 3way and wait for another train to hit the switch. Thus it will open the gate but wont change the 3way until the train go out the tile

#

Now that I think about it its the only way to finish this level

#

but at least I wanted to point that out because your program might not handle such mecanic

fervent tusk
#

just checked the solution in railbound, im pretty sure my program can handle situations like that fine

#

the car moves based on its saved direction when stalled, not the tile underneath it, so even if it gets changed itll still move in the same direction like how the game does it

#

since the editor is finished i can actually test it quickly without having to put it into the code which is convenient

fervent tusk
#

oh well

#

im going to implement something that shows the most recent solution during generation i think

#

i still have to design popups and results and that though

#

i think i also accidentally messed with the generation at some point since its a little broken

hybrid comet
delicate nymph
#

How the project going? ๐Ÿ˜„

hybrid comet
fervent tusk
fervent tusk
#

some of the website still feels a bit clunky to me so i might try to fix some of that too

fervent tusk
#

depth-first search

hybrid comet
#

Ok i see

#

with recursive loops

fervent tusk
#

yes it recursively searches until it finds a solution, and when it finds one that lowers the rail count by whatever solution it found, making it faster to go through the rest

#

it usually finds solutions faster + restricts the rest of the generation

#

bfs (breadth-first search) has to run every 7-track configuration it found, then every 8-track, and so on until it finds the solution

#

dfs doesnt have to search every low-track config

fervent tusk
#

i think im going to change how cars get placed

#

the purpose of afterburn making the cars place one after the other was probably because it was more convenient to do so with their system, but my palette makes it really easy to pick which car you want to place, and it feels kind of unintuitive otherwise imo

#

so im probably going to make it such that you need to switch to each car you want to place

#

i have the basics of the solved popup implemented, i just need to make the statistics save for each level now and then show it in the solve history card on the left

fervent tusk
#

implementing saved best tracks/semaphores/iterations etc. is harder than i thought solely because of the normal levels

#

because i have the custom levels all saved in one variable, and then the rest are handled completely differently with no attachment to a variable...

#

i think ill end up having to save the normal levels to a variable as well just so they can have that extra stuff added to them but it makes things more complicated than they should be

delicate nymph
#

Look awesome, from a simple code to a beautiful UI pc_yipee

fervent tusk
#

made a new variable that holds normal levels and all levels can hold their solved statistics now, so id say that saving level statistics should be completely done

#

the only thing to wrap it up is i need to make certain actions locked depending on if the level is custom or normal

#

so normal levels need to have stuff like tracks/semaphores/name locked, it needs to be visibly clear that its locked, and i need to have a notification that tells the user that normal levels cant be edited and should instead be duplicated first

#

i also need to make the solution blurred if the level hasnt been solved yet, including the dashboard, and a bunch of other qol stuff

#

i think ill do the qol stuff last

fervent tusk
#

have to make the solution tiles appear as normal tracks in the settings but the blur is almost done

fervent tusk
#

added blurring if no solution is found and made the solution clear if anything in the level is changed (piece placed/removed, tracks/semaphores changed

#

next up is making normal levels completely uneditable but show a notif when an attempt is made to do so, and visibly lock all inputs accordingly (including locking parameters during generation)

fervent tusk
#

struggling to figure out how to put a lock icon on the parameters so theyre visibly uneditable but i made the settings uneditable

hybrid comet
fervent tusk
#

i think instead of a repo bot ill probably set up a trello for the website instead

#

i finally figured out a good way to put the locks on the parameters i think

#

hopefully i can get the solve history card done tonight

#

its pretty much a copy-paste of the level solved popup

fervent tusk
#

ill probably polish up the solve history card some time

#

make it look nicer

#

for now it just has a max length of 8 levels

#

all thats left before i can deploy the website is fixing the actual solver and setting up google forms / trello for the contact card

#

also a few display issues, maybe changing how cars get displayed, and making fences look cool like how thinh did it (?)

#

i want to have the website a tiny bit polished (like how it is now) before i deploy it and then add some extra qol stuff after its deployed probably

#

stuff like making the grid glow slightly green while the level is solving, making the tool panels opaque while the level is running so its clear you cant edit it while it is, make solve history look nicer, animate the solving buttons appearing/disappearing

#

actually i also have to add popups and format the progress bar before i deploy it too

#

so maybe i do have a bit of a ways to go... website could be deployed in about a week?

#

anyways for the progress bar i figured that there should be a much easier way to gauge progress completion without the use of a model: stack size

#

the solver completes when the stack of configurations it has to search reaches 0 in tail-call optimization, so i can probably just look at the stack size and use some other parameters to more easily predict completion

#

ill graph the stack size as each level solves to get a better understanding of it and see if my theory is viable

#

ugh i also have to change how stations are placed

#

thats a headache

#

i actually dont want to learn how to use trello so im just going to have google forms and monitor them myself for now and then add them to the repo as issues myself if making a bot is too hard

fervent tusk
#

i fixed display issues, made google forms, and some other minor things

#

designing popups is going to be interesting

delicate nymph
#

I was learning about constraint programming and was thinking about solving Railbound with it. I wonder if it's possible.

fervent tusk
#

the program is essentially a constraint solver im pretty sure

#

if you look at the flowchart on the github i think its pretty evident

delicate nymph
#

Yes, it's possible. I will try some experiments and tell you the results later.

delicate nymph
jovial heath
#

Huh there's a new kid on the block, I've not seen MiniZinc before, looks nicer than Prolog

#

It would be interesting to compare results and runtimes to some of the stuff with the imperative solver

delicate nymph
delicate nymph
fervent tusk
#

working on the website again, hopefully i finish it in this last working period

#

ive gotten some of my friends to do testing to improve some stuff and add features on the website as well

fervent tusk
#

im currently trying to figure out a method to predict how long a level takes based on stack size, theres definitely a trend though which is good.
couldnt figure out a decent way to display the data, but basically the points are for different levels, the thin lines are moving averages that should be close to the trend line, and the trend line is the thick line

#

the r^2 value for the lime trend line (the trend line at the top with the most points) is only about 0.4 which is quite bad