@fortawesome/free-solid-svg-icons#faForward JavaScript Examples

export default function ButtonsContainer() {
    const classes = useStyles();

    const dispatch = useDispatch();

    const code = useSelector(selectCode);
    const emulatorState = useSelector(selectState);

    const loadCode = () => {
        emulator.loadCode(code);
    };

    const stepForwardClick = () => {
        const len = emulatorState.registers.future.length;
        if (len === 0) return;

        dispatch(stepForward());
    };

    const stepBackClick = () => {
        const len = emulatorState.registers.past.length;
        if (len === 0) return;

        dispatch(stepBack());
    };

    const runFromPointClick = () => {
        Object.entries(emulatorState.registers.present)
            .map((o) => {
                const [k, v] = o;
                if (
                    ['H', 'L'].includes(k[1])
                    && ['A', 'B', 'C', 'D'].includes(k[0])
                ) {
                    emulator.cpu.registers.regs[`${k[0]}X`].set(v, k[1]);
                } else {
                    emulator.cpu.registers.regs[k].set(v);
                }
                return o;
            });

        Object.values(emulatorState.memory.present)
            .map((v, i) => {
                emulator.cpu.memory.set(i, v);
                return v;
            });

        try {
            loadCode();
            emulator.cpu.step();
            dispatch(executeStep({
                registers: emulator.getRegisters(),
                memory: emulator.getSerialisableMemory(),
            }));
        } catch (err) {
            dispatch(raiseError({
                name: err.name,
                token: err.token,
                message: err.message,
                position: err.position,
                lineNumber: err.lineNumber,
            }));
        }
    };

    const runAllClick = () => {
        emulator.resetState();
        dispatch(resetRegMemState());

        // eslint-disable-next-line no-constant-condition
        while (true) {
            try {
                loadCode();
                emulator.cpu.step();
                dispatch(executeStep({
                    registers: emulator.getRegisters(),
                    memory: emulator.getSerialisableMemory(),
                }));
            } catch (err) {
                break;
            }
        }
    };

    const pastLength = emulatorState.registers.past.length;
    const backClass = pastLength > 0 ? '' : classes.disabledIcon;

    const futureLength = emulatorState.registers.future.length;
    const forwardClass = futureLength > 0 ? '' : classes.disabledIcon;

    return (
        <div className={classes.buttonsContainer}>
            <div className={classes.buttonWrapper}>
                <button type="button" className={classes.button} onClick={stepBackClick}>
                    <sup className={classes.count}>{pastLength}</sup>
                    <FontAwesomeIcon icon={faArrowLeft} className={backClass} />
                </button>
                <button type="button" className={classes.button} onClick={runFromPointClick}>
                    <FontAwesomeIcon icon={faPlay} className={classes.playIcon} />
                </button>
                <button type="button" className={classes.button} onClick={stepForwardClick}>
                    <FontAwesomeIcon icon={faArrowRight} className={forwardClass} />
                    <sup className={classes.count}>{futureLength}</sup>
                </button>
                <button type="button" className={classes.button} onClick={runAllClick}>
                    <FontAwesomeIcon icon={faForward} />
                </button>
            </div>

        </div>
    );
}