Programming @programming.dev dragontamer @lemmy.world 1y ago

Brainstorm: How to implement Fumen for Lemmy (for a Hypothetical Tetris community)?

I'm a programmer, but mostly C in my job. I've played with PHP5 (yeah, a long time ago), dabbled in HTML5 when it was new, touched upon some ancient version of Javascript, etc. etc. I have done bare-bone system administrator work but only enough for test instances.

My web-knowledge is therefore lacking. So I'm seeking the discussion with more experienced peers (especially in web and/or administrator sides) to brainstorm this idea. I'm probably not going to ever implement this idea, but... I feel like discussion may help me solidify the work needed to build future communities.

Lets say I want to make a Competitive Tetris community akin to HardDrop.com. Among the most important features of Tetris is the Web-Application "Fumen" Javascript application, created by Japanese programmers.

The web-gui isn't the most intuitive, but you all can demo it here: https://harddrop.com/fumen/ . The code has all sorts of Japanese comments that I can't read, but presumably with enough copy/paste and effort, I could get it off of Github (or whever it originated from) and copy/paste it into my own server somehow.

When the HardDrop forums were open, people would discuss Tetris Strategies by crafting them on a Fumen, and then discussing them. I made such a post long ago here, on the TKI3 strategy if you want to see it: https://harddrop.com/forums/index.php?showtopic=7889

Now lets say I want to import my old Fumen for my own discussion purposes, somewhere in Lemmy. What's the best way to present it?

I'm assuming I'll need:

Copying the Fumen renderer into my own Javascript/HTML
A friendly administrator who is willing to give me Javascript-import (or hosting the Javascript locally on the server). This presumably would be myself making my own server, but alternatively another admin who is aligned with me could do this too.
Ideally a local copy of Fumen running. (I wouldn't want to hammer HardDrop's webGUI too hard)
Some kind of Lemmy plugin that allows people to post text of the form: (v115@BhilFeAtglR4Beg0RpBtR4Ceg0RpAtzhAeh0JeAgWW?AURVSASYNuEw488AQr78AwKY5DkoBAAvhBtsuAAlsBzgQ4I?eR4CeRpwhBeglQ4CeRpwhAeAtglFewhBthlEewhAtKeAAPX?AS1STAS4kcDnoo2AMoo2AQieeEFcxCA), which coincides with the Fumen I wrote. Upon recognizing a string of this form (or maybe of form: [[fumen@v115...]]), render such a Fumen inline with the post.
Obviously, it would only render correctly on my "local instance" with my "local users". Assume this is sufficient for my personal community. But if anyone can think of how this can be solved "Cross-Lemmy", I'd also be interested in that. Are there ways to maybe... make a "Trusted Bot" running on someone else's instance that has permissions from the administrator to publish an iframe? Is there a way to do this without pissing off all the security-minded webfolks?
Is a <video> renderer an option? Can I publish a mp4 file that has frame-by-frame rendering of a Fumen to other instances that don't have a Javascript-fumen of their own. I know other groups publish .gif files but <video> has more standard options to different users (play, rewind, etc. etc.). I don't know how widespread a frame-by-frame video render is across frontends (Android, iPhone, Firefox, Chrome, Edge) is however.

I'm not sure if the Tetris community is in a state where this is worthwhile pushing. But I can see "future video games", especially competitive ones, needing other online GUIs, calculators, and other such web-application support to help discussion.

Any web-experts out there wanna muse on this subject with me?

You're viewing a single thread.

6 comments

Just spitballing, but you might not even need to inject much JS on the lemmy side. This sounds like something that could load in an iframe, pointed to a server that can render the Fumen sequence. The injected Lemmy JS could then identify the Fumen sequence, and inject the iframe. Main issue I see with this is mobile users, where you can't really inject code at runtime.

EDIT: Saw that you mentioned using iframes already, I'm seconding that option. I also think it could be neat to use something like code blocks with tags, say !#fumen [insert fumen string here]
- Ah yes, I was editing #5 and #6 in as you posted this.
  
  IIRC, remote iframe renderings is a big security no-no. Or at least... it was in the PHP5 days like 10+ years ago. Is that still a security problem today?
  
  Nominally, "information" is what needs to be published, and in a form that has maximum compatibility with as many browsers as possible. A crazy Fumen->.mp4 -> <video>x264-encoded thingy</video> could be the answer, assuming that there's a cross-platform way to provide frame-by-frame click GUIs.
  
  The <video> thing is a bit of a longshot. But that could in practice be solved with a bot that listens for particular strings in a !tetris_community.
  
  I think the iframe thing makes sense technically to my brain, but I foresee security concerns... concerns that I honestly don't fully understand due my lack of web-experience.
  
  Also worth mentioning, iframes have a sandbox attribute which can be used to lock down which browser APIs it has access to (they can't access much out of the box anyway, but this allows further locking down).
  
  Say you have a webserver rendering the Fumen sequence, you could have the step buttons just be links to the next/previous steps. This would require no JS to run within the iframe, which is a great step to harden security even further.
  
  I can't swear on it, but afaik iframes are fully sanboxed.
  
  I just saw the updates regarding encoding it as a video, there isn't a good way to provide a slideshow without at least some JS, which kind of defeats the purpose of compatibility/universality. My take is that the iframe + light JS to mount it is the least headache and the most compatible.
- The injected Lemmy JS could then identify the Fumen sequence, and inject the iframe. Main issue I see with this is mobile users, where you can’t really inject code at runtime.
  
  https://github.com/LemmyNet/lemmy-ui
  
  Looks like lemmy-ui includes a "LEMMY_UI_CUSTOM_HTML_HEADER" variable to add some Javascript (???) to the header. I guess I'll just have to play around with that with a private instance to see what's possible.

6 comments