Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve converter tool #231

Merged
merged 6 commits into from
Feb 26, 2024
Merged

Improve converter tool #231

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ce0f52a
Make converter tool interface more intuitive
netalondon Feb 15, 2024
b4f0dc9
Don't treat strings containing a valid asm instruction as valid asm
netalondon Feb 15, 2024
e9558a7
Display value 0 correctly
netalondon Feb 15, 2024
ca5f2c8
Fix hex value editing
netalondon Feb 15, 2024
97aaf84
Make requested changes
netalondon Feb 18, 2024
d91e05b
Change name uns to unsigned
netalondon Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion simulator/src/util/asm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,15 @@ function cop(asm: string): number {
const { assignExists, jumpExists } = firstPass?.groups ?? {};

const parts = asm.match(
/(?:(?<assign>[AMD]{1,3})=)?(?<operation>[-+!01ADM&|]{1,3})(?:;(?<jump>JGT|JLT|JGE|JLE|JEQ|JMP))?/
/((?:(?<assign>[AMD]{1,3})=)?(?<operation>[-+!01ADM&|]{1,3})(?:;(?<jump>JGT|JLT|JGE|JLE|JEQ|JMP))?)/
netalondon marked this conversation as resolved.
Show resolved Hide resolved
);
let { assign, jump } = parts?.groups ?? {};
const { operation } = parts?.groups ?? {};

assign = assign ?? (assignExists ? undefined : "");
jump = jump ?? (jumpExists ? undefined : "");
if (
parts?.[1] != asm || // match is not exhaustive
!isAssignAsm(assign) ||
!isJumpAsm(jump) ||
(!isCommandAsm(operation) && !isCommandAsm(operation.replace("M", "A")))
netalondon marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
150 changes: 111 additions & 39 deletions web/src/pages/util.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ChangeEvent, useState } from "react";
import { asm, op } from "@nand2tetris/simulator/util/asm.js";
import {
bin,
Expand All @@ -9,32 +8,89 @@ import {
int2,
uns,
} from "@nand2tetris/simulator/util/twos.js";
import { ChangeEvent, Dispatch, SetStateAction, useState } from "react";

import "./util.scss";

export const Util = () => {
const [value, setValue] = useState(0);
const [asmValue, setAsmValue] = useState("@0");
function validBin(value: string) {
return /^[01]+$/.test(value) && value.length <= 16;
}

function validDec(value: string) {
return (
/^-?\d+$/.test(value) && Number(value) <= 32767 && Number(value) >= -32768
);
}

function validUns(value: string) {
return /^\d+$/.test(value) && Number(value) <= 65535;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

uns was a bad name for this in retrospect. Oh well.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should I change this to unsigned?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Up to you, I trust your choices

}

function validHex(value: string) {
return /^0x[0-9a-fA-F]+$/.test(value) && value.length <= 6;
}

const doSetValue =
(conv: (arg: string) => number) =>
({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
value = value === "-" ? "-1" : value;
const iValue = conv(value);
setValue(iValue);
setAsmValue(asm(iValue));
};
function validAsm(value: string) {
try {
op(value);
return true;
} catch {
return false;
}
}

const setBin = doSetValue(int2);
const setInt = doSetValue(int10);
const setUns = doSetValue(int10);
const setHex = doSetValue(int16);
export const FormattedInput = (props: {
id: string;
value?: number;
setValue: Dispatch<SetStateAction<number | undefined>>;
setError: Dispatch<SetStateAction<string | undefined>>;
isValid: (value: string) => boolean;
parse: (value: string) => number;
format: (value: number) => string;
}) => {
const [selected, setSelected] = useState(false);
const [rawValue, setRawValue] = useState("");

const setAsm = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
setAsmValue(value);
setValue(op(value));
const onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
if (!selected) {
return;
}
setRawValue(value);
if (!props.isValid(value)) {
props.setError("Invalid value");
props.setValue(undefined);
} else {
props.setError(undefined);
const parsed = props.parse(value);
props.setValue(parsed);
}
};

return (
<input
id="util_setBin"
type="text"
value={
selected
? rawValue
: props.value !== undefined
? props.format(props.value)
: ""
}
onChange={onChange}
onFocus={() => {
setSelected(true);
setRawValue(props.value !== undefined ? props.format(props.value) : "");
}}
onBlur={() => setSelected(false)}
/>
);
};

export const Util = () => {
const [value, setValue] = useState<number | undefined>();
const [error, setError] = useState<string | undefined>();

return (
<article>
<header>
Expand All @@ -46,58 +102,74 @@ export const Util = () => {
<label htmlFor="util_setBin">Binary</label>
</dt>
<dd>
<input
<FormattedInput
id="util_setBin"
type="text"
value={bin(value)}
onChange={setBin}
value={value}
setValue={setValue}
setError={setError}
parse={int2}
format={bin}
isValid={validBin}
/>
</dd>
<dt>
<label htmlFor="util_setInt">Decimal</label>
</dt>
<dd>
<input
<FormattedInput
id="util_setInt"
type="text"
value={dec(value)}
onChange={setInt}
value={value}
setValue={setValue}
setError={setError}
parse={int10}
format={dec}
isValid={validDec}
/>
</dd>
<dt>
<label htmlFor="util_setUns">Unsigned</label>
</dt>
<dd>
<input
<FormattedInput
id="util_setUns"
type="text"
value={uns(value)}
onChange={setUns}
value={value}
setValue={setValue}
setError={setError}
parse={int10}
format={uns}
isValid={validUns}
/>
</dd>
<dt>
<label htmlFor="util_setHex">Hex</label>
</dt>
<dd>
<input
<FormattedInput
id="util_setHex"
type="text"
value={hex(value)}
onChange={setHex}
value={value}
setValue={setValue}
setError={setError}
parse={int16}
format={hex}
isValid={validHex}
/>
</dd>
<dt>
<label htmlFor="util_setAsm">HACK ASM</label>
</dt>
<dd>
<input
<FormattedInput
id="util_setAsm"
type="text"
value={asmValue}
onChange={setAsm}
value={value}
setValue={setValue}
setError={setError}
parse={op}
format={asm}
isValid={validAsm}
/>
</dd>
</dl>
{error && <p>{error}</p>}
</main>
</article>
);
Expand Down
Loading