In-browser emulator of Hack CPU from nand2tetris course

Related tags

hack-emulator
Overview

Hack Emulator

This project emulates Hack computer from nand2tetris course. It is still under light development (light means that I might add/fix/polish things from time to time, but not actively).

https://hithroc.github.io/hack-emulator/

Current features

  • Built-in assembler (although it is very crude and doesn't really have error reporting as of yet)

  • ROM view, including binary machine code as well as the coresponding instructions. Current instruction (program counter) is highlighted.

  • RAM view

  • Full ALU implementation, which includes undocumented instructions, unlike the official CPU emulator.

  • Adjustable clock speed (although I would not recommend to go above ~10MHz)

  • Full support for keyboard input and display output.

  • All in your browser on any device! No Java required!

Kinda Maybe Sorta Planned features:

  • Breakpoints

  • Ability to modify values in RAM

  • Running official test files

  • Ahead of time compilation as well as other optimizations

  • Perhaps some extensions to Hack, like

    • Memory banks

    • Colored display

    • Periferals like storage?

    • 6/N-key rollover support

  • Light/dark theme support?

Building

To build the project you need Node 12.x. Then you can just run:

npm install
npm run-stript build

This should create app.js file in ./dist/. You can open ./dist/index.html in your browser.

Contributing

Ha, like anyone ever will!

Some other notes

This project was mostly written in about a week to get some practice with TypeScript and React (given that I've not used either before), so there might be some rough edges or non-idiomatic code/project structure. Reviews are welcome!

Utopia is an integrated design and development environment for React.

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Utopia 3.1k Oct 19, 2021
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices. Read The Docs | Edit the docs Table of Co

Testing Library 15.3k Oct 18, 2021
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Standard JS 26.2k Oct 17, 2021
Testing hooks with Jest

Jooks (Jest ❤ + Hooks ????) If you're going through hell testing React Hooks, keep going. (Churchill) What are Custom React Hooks React Hooks are a ne

Antoine Jaussoin 74 Oct 9, 2021
Chrome extension for improving and optimizing performance in React applications (Gatsby and Next.js compatible).

React Performance Tool Nominated for React Open Source Awards 2020 Reactime is a performance and debugging tool for React developers (Beta version for

OSLabs 1.4k Oct 17, 2021
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.4k Oct 13, 2021
Static AST checker for a11y rules on JSX elements.

Get professional support for eslint-plugin-jsx-a11y on Tidelift eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements. Rea

null 2.5k Oct 12, 2021
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jamie Kyle 16.2k Oct 14, 2021
🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

Storybook 581 Oct 14, 2021
A CLI tool to bootstrap your modern React application.

create-react-saga is a CLI tool for quickly setup your next clutter free webpack backed React application. It provides you the latest hooks based codebase, testing utilities and storybooks.

Sunny Praksah 6 Oct 2, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.1k Oct 16, 2021
🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

Storybook 580 Oct 12, 2021
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react The source code for the v3 of the extension can be found in the v3 branch. To build the v3 brow

Facebook 11k Oct 16, 2021
✍ It has never been so easy to document your things!

Docz makes it easy to write and publish beautiful interactive documentation for your code. Create MDX files showcasing your code and Docz turns them i

Docz 21.8k Oct 15, 2021
Create, isolate and test modular UI components in React.

ui-harness Isolate, test and document modular UI with React using familiar describe/it testing semantics. http://uiharness.com Quick Start (1-minute)

Phil Cockfield 271 Sep 28, 2020
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer

unexpected-react Plugin for unexpected to allow for testing the full virtual DOM, and against the shallow renderer (replaces unexpected-react-shallow)

Dave Brotherstone 184 Aug 4, 2021
React 17's automatic JSX runtime for your entire bundle

vite-react-jsx React 17's automatic JSX runtime for your entire bundle Features Replaces React.createElement calls in your entire bundle (even for pre

all oc 99 Oct 4, 2021
Human resource management system with react javascript

HRMS (Human Resource Management System) UML Component Diagram Getting Started with Create React App This project was bootstrapped with Create React Ap

Barış Tan 5 Jul 23, 2021
Getting Started with Create React App

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Douglas Morais 20 Jul 30, 2021