In this example we will create react component that can start any js-dos bundle.
Let's start with creating TypeScript react app. Execute following command:
Next we need to download Digger jsdos bundle into
To run DOS program we need to install
emulators-ui packages, and copy their
Resulting folder structure should be:
Next we need to modify
public/index.html of react app to add js-dos scripts and styles.
Currently js-dos v7 packages provides only types information, you can't import actual implementation as js module.
You need to set
emulators.pathPrefix to point actual path to emulators, you can do this in
index.html or in
Now we can implement a React component that can play DOS program. Let's edit file
Importing type information and emulators in component module:
Props of the component will have only url to
js-dos bundle. To embed js-dos we need to create root div
When root div will be ready we will create a
DosInstance in it:
Do not forget to free resources by calling instance.stop at the end.
Finally we should run our program when dos is set:
Full component code:
You can use this component as any other React component. Let's replace
src/app.tsx contents with our player:
Now you can run the app and play Digger! Just type