Git Product home page Git Product logo

sheeptester / htmlifier Goto Github PK

View Code? Open in Web Editor NEW
166.0 10.0 78.0 15.01 MB

The HTMLifier "converts" Scratch 3.0 projects to an HTML file by putting all the project data and the entire Scratch engine into one enormous file

Home Page: https://sheeptester.github.io/htmlifier/

License: MIT License

JavaScript 21.08% HTML 15.82% CSS 8.21% TypeScript 54.89%
scratch scratch3 html html5 scratch-to-html htmlifier

htmlifier's Introduction

htmlifier

The HTMLifier "converts" Scratch 3.0 projects to an HTML file by putting all the project data and the entire Scratch engine into one enormous file.

It does this by making Scratch VM fetch a project, and in doing so, it tracks the assets it fetches from the project.json. It converts the fetched assets and project.json into a base64 data URI. It also fetches the code for the Scratch VM. It inserts all this in a template HTML file, which has been set up to load the project from the base64 data URIs and do other things that the Scratch VM doesn't take of, which is normally handled by scratch-gui, such as variable/list monitors and ask and wait prompts.

The HTMLifier is also available as an npm package.

Credits

CSS by Mr. Cringe Kid.

The Scratch engine is from scratch-vm.

JSZip for downloading as a zip.

See also

The Scratch mod used by the HTMLifier: E羊icques (Github).

Depending on your use case, the HTMLifier may not be the best option for you. The HTMLifier prioritizes accuracy by using almost the same engine that vanilla Scratch uses, sacrificing speed and editability.

Scratch to JavaScript compilers (best for speed): Phosphorus (Scratch 2.0), Forkphorus (3.0), and TurboWarp (3.0).

Scratch to JavaScript converter (best for learning JavaScript): Leopard

Development

If modifying the files in src/, you'll have to re-bundle everything.

# Build once
deno run --allow-run --allow-read=src --allow-write=index.bundle.min.js \
  --allow-net=sheeptester.github.io bin/build.ts

# Automatically build when the files change (for development)
nodemon --exec "deno run --allow-all" --watch src --watch client \
  --ext ts,css,html,js bin/build.ts -- dev

# Build for Node
deno run --allow-run --allow-read=src --allow-write=node/index.min.js \
  --allow-net=sheeptester.github.io bin/build.ts node

htmlifier's People

Contributors

gulnaz-tabassum avatar sheeptester avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

htmlifier's Issues

Preview not working :(

Hello There
Continuing the convo from Scratch with @SheepTester
It just shows a boring blank screen
It works when I open the file using Safari v13
But it is just blank
I will use your Properly splitting characters on scratch (414895738)
Here it is after a minute
Screen Shot 2020-10-19 at 12 00 50 PM

And here it is using safari's html compiler
Screen Shot 2020-10-19 at 12 02 54 PM

Well, that's all 🔢

option for larger fullscreen button

for touch friendliness

also investigate weird sizing issue in portrait mode?

and the game only works when ur screen is sideways and not when its upright

from ben on discord

Bookmarklet for HTMLifying

See Scratch comment

I don't know if this is possible: Maybe you could make a "bookmarklet creator" in which you choose the options you want from the HTMLifier and then when you click it it automatically downloads the project from the current project on the scratch page.

Yes, but I mean a personalized bookmarklet that already has your preferences (example: server link) and then you don't even have to open the HTMLifier, you just click and download the file.

Probably could instead just open a link to the HTMLifier or something, or add an iframe

Add CSS update

Aquí de aquí

Having a separate HTML file isn't ideal for offlineification, but I like the concept. It is also kind of redundant to have "Project HTMLifier / Convert a Scratch project to HTML" twice. In addition, the button in the top bar, although convenient, isn't really very useful if people have to scroll down first.

My proposed changes:

  • Recreate the project in HTML/CSS. JS can load an animated SVG as the tiling background from the HTML (ie get outerHTML of <svg> in document, then CSS background image)

  • Add a copy of the project ID input in the top bar instead of the app title? The input values should sync as well, ie both show the same value

Import/export to a list

Maybe the list watcher can have an up and down arrow button, and dragging files onto the list watcher will automatically import it into the list.

De Discord (discrim 4800)

The progress thing in log does not reset

If you HTMLify something multiple times, the loaded/total counter continues counting up from when it last left off

Also, another thing to note is that it won't refetch assets, so if someone updates their project on the website, they have to reload

Option to use mod

There should be documentation about making one's own vm.min.js for a mod so it works in the HTMLifier

[Question] Extensions

How does this behave with Extensions like translator, Text to voice, webcam, etc... ?

Cant get this to work

Hello! I tried multiple times to convert the project 236029109. I tried multiple times but still cant make it work. Basically, a white screen appears, the loading says 1/1 but still nothing happens, even if I reload. Any advice?

load project file from link in htmlified project

is it possible to make htmlifer use a project file from a link, so I can upload the scratch project file somewhere, get the direct download link, then I put it in htmlifer, then when it runs, it gets the file from the link, so I can make the file way smaller by having htmlifer get the project file from the web instead of in the file.

From here

Related to #21

Can't click back on project to select after using var with slider

If you have an event that takes keyboard input, the project needs to be selected to receive the input. However, if you change the slider on a variable, you can't click back on the rest of the project to go back to select it.

I probably did a terrible job explaining that so here's an example. HTMLify the project 467212485. Try holding space. Then try changing the value of the variable and holding space again.

Scratch annoyingly acts similar (as you can see with the same project here). It would be nice if there was an option to not have the game deselected when you use a slider.

loading screen from url

add warning that it will not work offline

PLEASE make a person able to insert a link for a loading screen instead of give a file

then games that are 30 megabytes will become 8 megabytes

from discord

Pointer lock option

From here:

Hey man, I have a request for htmlifier. It would be great if you could have checkbox settings to enable mouse lock (allowing mouse x and y values to go infinitely above their limits while keeping the actual mouse position in the center of the screen). Thanks and keep up the good work

I think this'll be a very simple option that locks the pointer on click; there'll be no way to control when to lock or unlock the pointer (they can always implement their own cursor, I guess)

Option to show green flag/stop sign buttons

Maybe to hide the fact that it's Scratch, it should be the triangle play icon. Should it be alongside the fullscreen button? It also must be large enough for touch

De Discord (discrim 4800)

Add option to fetch from the Scratch website directly

From here

Hi your html website is good and all good job but one suggestion u should try make it so when we make an update to the project on scratch it will hop over on the html project thanks

This option should be disabled if the source is an .sb3 file, and there should be a note that the project won't work offline

Mouse pointer feedback

De aquí:

I was expecting the lock mouse pointer feature to work as if it were an analog stick of sorts, if you were to do that, it would also be beneficial to be able to limit the sensitivity.

I think that means that it should track the accumulative mouse X/Y? What about the max X/Y for mouse position? I guess I can just mod it away

[htmlifier] Fit option

From here:

Hi, I’m planning on making a game that would ideally have different exe files for different screen resolutions using your HTMLifier. I will be using nwjs to package the HTML file and I’m wondering if it’s possible to stretch the output resolution from 4:3 to 16:9. I know of your mod E羊icques, but I want to know if stretching is possible, that way I can pre-distort graphics for stretching, rather than recode my game for different resolutions. Thanks!

There could be an option for stretch, contain, or cover

[Scratch HTMLifier] Please add restart options

My project needs a restart button to change into multiplayer mode, but it seems unable to restart. I can't enjoy the multiplayer mode with my friends and I request a way to do it please.

Auto Updating Link

I'm a bit new to GitHub, but correct me if I'm mistaken, I'm pretty sure this is where the suggestions go. I would like to see a live link that automatically updates when there is an update to the scratch project itself. This would be useful if I wished for part of a program I am making to include such a project, given its capability to connect to web servers. Whether this link is customizable by the website itself, (such as on a website like beepbox.co or made randomly, (like on an automatically made TinyURL) is completely up to you, so do as you see fit. Thank you for your time.

Save options in URL; abstract inputs

Code is repetitive; I would like to make it cleaner and also support getting values from the URL parameters. This should reflect E羊icques's options

[htmlifier] Double click flag option

From here:

Hey, I'm using your HTMLifer and it's perfect! I was just wondering if it's possible to add a function like pressing the flag twice to stop lag with animations, I've tried using the wait 0 seconds fix but that doesn't work too, the costume changes don't lag in the editor just when it becomes a HTML file

Could just call greenFlag twice in immediate succession?

Custom cursor

Like #13, people can upload an image file to use as a cursor. I'm assuming CSS can set cursors from data URLs?

De Discord (discrim 4800)

Intelligently await promises when using eval cloud

For async stuff, it might be helpful to check if the return value from the evaled JS is a Promise. Doing something like

(async () => {
  const result = await eval(code)
  // ...
})()

could work

Maybe there could be a global function for conveniently setting a cloud variable/the eval result variable

HTML not working

Starting on November 8th, when I when I converted the scratch projects into HTML it showed a blank screen when I opened it up. The days before I was able to do it no problem. What is happening? My old HTML files that I downloaded before the eighth of november still work, but if I download any now they show a blank screen when I open them.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.