What files or settings do I need to have the "add" command and surf work properly on a web site.

[apl1974]

I'm trying to build a browser version of TIC-80 on a web site for kids I work with who have been given ipads. I'm new at this, but have this so far:

https://apl-oms.gt.tc

I currently have the following files in the htdocs directory on my server:

404.html
favicon.ico
index.html
tic80.js
tic80.wasm
version.json

"Add" opens up the file dialog but will not actually load a game. Surf is an empty directory. I'm wondering if I'm missing files which would provide paths for these features. Thanks in advance for any help.

[MineRobber9000]

1. You should configure your web host to serve tic80.wasm as application/wasm (this probably isn't the cause of your problems but it will help). A quick Google suggests adding AddType application/wasm .wasm to your .htaccess should work.
2. The reason add isn't working is because your emscripten build is missing the writeArrayToMemory function, which TIC-80 needs in order to give itself access to the contents of the uploaded game.
3. Surf isn't working because you're not properly implementing the TIC-80 website API.

The API is at /json, with arguments passed as query arguments (older versions of TIC-80 used a Lua-based API at /api, but you're running a build from the main branch, so you're definitely using the JSON-based API at /json). The important functions you need are:

• /json?fn=version: This returns the version (your version.json should be served here)
• /json?fn=dir&path=<?>: This is how surf works. When you open the tic80.com folder, TIC-80 sends a request to /json?fn=dir&path=, which returns a list of files and directories like so:

  {
    "folders":
    [
  	  { "name": "Play" },
  	  { "name": "Devs" },
    
    ],
  
    "files":
    [
  	  { "name": "labyrinth.tic", "hash": "f01efee8aa14c8b26be92bc36ba2c615", "id": 2868, "filename": "labyrinth.tic"}, 
  	  { "name": "BlueyVANIA.tic", "hash": "93790cc5685bf3936172488191819b60", "id": 3926, "filename": "blueyvania.tic"}, 
  	  { "name": "Shockingly Negative.tic", "hash": "72cbd396ca21f2e1362bce593784c643", "id": 4610, "filename": "shockingly_negative.tic"}, 
  	  { "name": "RETRO GUNNER (version 1.02).tic", "hash": "91c5b1f7344cbf6465f804eedec9b8dd", "id": 4365, "filename": "retro_gunner_version_1_02.tic"}, 
  	  { "name": "8-bit-shogi.tic", "hash": "2d2acf25587d3ea6709f7ea354f8bcbd", "id": 2999, "filename": "8_bit_shogi.tic"}, 
  	  { "name": "Bicho.tic", "hash": "3543d69d3a26a517d05c58c3c28850af", "id": 4579, "filename": "bicho.tic"}, 
  	  { "name": "Stones Don't Move Themselves.tic", "hash": "fb480a3228de5f2e2607755262999504", "id": 4609, "filename": "stones_don_t_move_themselves.tic"}, 
  	  { "name": "Metal Box.tic", "hash": "2023d43bcb45bb7eae8d79549a9ec7ae", "id": 4664, "filename": "metal_box.tic"}, 
  	  { "name": "Seed TIC.tic", "hash": "40e5f21f6da58a4cff3af5490435c67a", "id": 4552, "filename": "seed_tic.tic"}, 
  	  { "name": "TicMania.tic", "hash": "4de9e300971f07a98855a0b7390043c6", "id": 4574, "filename": "ticmania.tic"}, 
  	  { "name": "Isolation.tic", "hash": "3becb326693738ffe407c7ccd04f7567", "id": 4569, "filename": "isolation.tic"}, 
  	  { "name": "MinTic.tic", "hash": "5acafbb2ae7d80e01c46fd75bb2de6fd", "id": 4568, "filename": "mintic.tic"}, 
  	  { "name": "Critter Crossing.tic", "hash": "b964bf929b80379b12aad5ec22d72759", "id": 4570, "filename": "critter_crossing.tic"}, 
  	  { "name": "cave_explorer.tic", "hash": "d6cf24b8b9a125b59805c7068ad22c2f", "id": 4567, "filename": "cave_explorer.tic"}, 
  	  { "name": "The Bone Altar.tic", "hash": "9f8f5dab1d384ae10e697abfff7b8c5c", "id": 4608, "filename": "the_bone_altar.tic"}, 
  	  { "name": "Ladders & Dragons.tic", "hash": "d716346888203b5e5621bce41fc1d508", "id": 4676, "filename": "ladders_dragons.tic"}, 
  	  { "name": "3D cube.tic", "hash": "75b306db47d4b634d59a47fbdb15ce71", "id": 3037, "filename": "3d_cube.tic"}, 
  	  { "name": "Railway.tic", "hash": "97e2f38f519cfb3b8f70a90fd9885f42", "id": 4512, "filename": "railway.tic"}, 
  	  { "name": "Patrick's Parabox demake.tic", "hash": "2570e369dfdb1055cf32062eb036225a", "id": 4560, "filename": "patrick_s_parabox_demake.tic"}, 
  	  { "name": "Feed the snake.tic", "hash": "e86ebdfa011a59151d78251aaf1413a8", "id": 4572, "filename": "feed_the_snake.tic"}, 
  	  { "name": "Levex.tic", "hash": "4a15938067a5dbbcab2650479b47ef2d", "id": 4642, "filename": "levex.tic"}, 
  	  { "name": "Portal 3D lvl editor.tic", "hash": "2150ebf9924ec3d48b746a6ec702c384", "id": 4564, "filename": "portal_3d_lvl_editor.tic"}, 
  	  { "name": "o moku e mun.tic", "hash": "5286c5c19062644d63eb5de90bea4edc", "id": 4551, "filename": "o_moku_e_mun.tic"}, 
  	  { "name": "Story of the Hero.tic", "hash": "b40da6b17410d550c4b37861d0dfa7b1", "id": 4641, "filename": "story_of_the_hero.tic"}, 
  	  { "name": "square root caltivate gold.tic", "hash": "9c692cfaf8ea68105e41435250332ca0", "id": 4586, "filename": "square_root_caltivate_gold.tic"}, 
  	  { "name": "demoscene report dentro.tic", "hash": "ddb7938b742e2624859244bad54b53b2", "id": 4640, "filename": "demoscene_report_dentro.tic"}, 
  	  { "name": "One of many lives.tic", "hash": "432d7bc8e2121c8795b1d7b80e1590fb", "id": 4638, "filename": "one_of_many_lives.tic"}, 
  	  { "name": "Pong.tic", "hash": "12aa3fa2848f1be2d238bbc5be6e6704", "id": 4672, "filename": "pong.tic"}, 
  	  { "name": "Metaballs.tic", "hash": "c5ba4c0622753baf9efaca9fbc1dc22a", "id": 2784, "filename": "metaballs.tic"}, 
  	  { "name": "Jump Drivin'.tic", "hash": "1aed3fa7d284c720f9b1b541ea80bffe", "id": 4232, "filename": "jump_drivin.tic"}, 
    
    ]
  }
  

  Then, if you navigate into Play, for example, it requests /json?fn=dir&path=Play, etc. When you hover over a cart in Surf, it requests /cart/<hash>/cover.gif for the cover, and if you select the cart it requests /cart/<hash>/<filename>.

I'm not sure how you'd want to implement this in your case; the easiest way I could think of would be to add a rewrite rule to turn /json into /json.php and use a PHP script to either serve version.json or redirect to tic80.com (with a similar rewrite rule to proxy requests to tic80.com for anything under /cart.

[apl1974]

It was incredibly kind of you to share all of this info -- thank you, it definitely gives me some direction.

The questions it raises for me are:

1. Why is my build missing the writeArrayToMemory? I used the build instructions here: https://deepwiki.com/nesbox/TIC-80/3.3-web-builds. I suspected that these instructions might not be current (or that I was doing something wrong) based on the fact that I did not end up with a tic80.data file after building. Am I missing a flag of some sort needed to build with this function included? Or am I possibly cloning an older repository?
2. If I were happy to have surfpoint to a local directory that I could moderate would I need to do any of the PHP scripting you mention or could I just add a/jsondirectory with a file pointing to the local directories where I've uploaded carts and gifs? In a school setting this may actually be preferable. Is the json API documented at all? I don't mind reading and this is a project I'm building for next school year.
3. Maybe most importantly -- is there an easy way for me to buy you a coffee/beer for your help. It takes time to answer a question, and it always surprises me how giving people are. I enjoy figuring things out on my own, the rabbit hole, but sometimes I reach dead ends -- only posted because I had reached one in this case. At least now I have things to search, and can eliminate some possible causes - thanks again.

[MineRobber9000]

Apparently the add command on the web build is just broken, I downloaded from the GitHub Actions workflow and it also is missing writeArrayFromMemory, so I guess I'll need to file an issue about that (#2934). (I'm not sure where the AI got the idea of a tic80.data file; the only necessary files for an all-languages build of TIC-80 (excepting, of course, the API stuff) are index.html, tic80.js, and tic80.wasm.)

As for surf: unfortunately, you'd need rewrite rules of some variety, since TIC-80 makes its requests to /json. Fortunately, the PHP script wouldn't be super complicated (honestly, you'd just need it to figure out what TIC-80 wants and then redirect to static files; it'll follow redirects as long as the initial request can be made to /json?what=ever). There's no real documentation of the API outside of what I've posted here, but I've already covered pretty much everything you'd need. Just some clarification on the files array in the directory listing:

• name: This is the name that appears in the surf menu or the TIC-80 filesystem (the tic80.com directory has a weird relationship with the TIC-80 filesystem which I kind of wish nesbox would replace/fix, but that's not relevant to the issue at hand).
• hash: This doesn't need to be any specific hash, as far as I can tell, as long as it's consistent and unique per-cart (the same cart should always return the same hash, and no two carts should share the same hash unless they're the same cart).
• id: In surf, if you hover over a cart in the tic80.com directory, you can press (I believe it's) Y to open the TIC-80 website on that cart. This probably won't be of any use to you, but you can set it to whatever number you want (it's internally a 32-bit integer).
• filename: This is the filename that TIC-80 will request the cart with (using /cart/<hash>/<filename>).