Merge pull request #1 from tcorzo/develop

Develop

Author: tcorzo

.pre-commit-config.yaml

@@ -0,0 +1,37 @@
+# fail_fast: true
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v3.2.0
+    hooks:
+      - id: mixed-line-ending
+        args: [--fix, lf]
+      - id: no-commit-to-branch
+        args: [--branch, master]
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+      - id: check-yaml
+      - id: check-added-large-files
+
+  - repo: https://github.com/executablebooks/mdformat
+    rev: 0.7.18
+    hooks:
+      - id: mdformat
+        additional_dependencies:
+          - "mdformat-mkdocs[recommended]>=2.1.0"
+          - mdformat-admon
+
+  - repo: https://github.com/igorshubovych/markdownlint-cli
+    rev: v0.42.0
+    hooks:
+      - id: markdownlint
+
+  - repo: https://github.com/crate-ci/typos
+    rev: v1.26.0
+    hooks:
+      - id: typos
+
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v4.0.0-alpha.8
+    hooks:
+      - id: prettier
+        types: [yaml]

README.md

@@ -6,27 +6,30 @@ Deno.
 ## Setup Development Environment
 
 1. Install [Deno](https://deno.land/manual/getting_started/installation)
-2. Clone this repository
-3. Install the dependencies:
-   ```bash
-   deno install
-   ```
-4. Run development server:
-   ```bash
-   deno task dev
-   ```
-
-# Usage
+1. Clone this repository
+1. Install the dependencies:
+
+```bash
+deno install
+```
+
+1. Run development server:
+
+```bash
+deno task dev
+```
+
+## Usage
 
 Checkout the [example_program.csv](test/fixtures/example_program.csv), use it as
 a template for your own programs.
 
-# Roadmap
+## Roadmap
 
 - [x] Implement basic functionality
-- [] Add breakpoints
-- [] Show errors in the UI
-- [] Separate Data registers from Instruction registers
-- [] Export program to CSV
-- [] Indicate current register in the UI
-- [] Flash register when it changes
+- [ ] Add breakpoints
+- [ ] Show errors in the UI
+- [ ] Separate Data registers from Instruction registers
+- [ ] Export program to CSV
+- [ ] Indicate current register in the UI
+- [ ] Flash register when it changes

src/abacus/abacus.ts

@@ -7,6 +7,7 @@ export default class AbacusEmulator {
     private _accumulator: string = '0000'; // 4 bytes
     private _current_address: string = '000'; // 3 bytes for the address
     public registers: Map<string, Register> = new Map(); // 3 bytes for the address
+    public _breakpoints: string[] = [];
 
     constructor() { }
 
@@ -44,6 +45,24 @@ export default class AbacusEmulator {
         this.registers.set(address, register);
     }
 
+    public addBreakpoint(address: string): void {
+        this._breakpoints.push(address);
+    }
+
+    public hasBreakpoint(address: string): boolean {
+        return this._breakpoints.includes(address);
+    }
+
+    /**
+     * removeBreakpoint
+     */
+    public removeBreakpoint(address: string): void {
+        const index = this._breakpoints.indexOf(address);
+        if (index > -1)
+            this._breakpoints.splice(index, 1);
+
+    }
+
     public loadProgram(program: Program): void {
         this.program = program;
         this.accumulator = '0000';
@@ -64,7 +83,19 @@ export default class AbacusEmulator {
             throw new Error('No program loaded');
         }
 
-        while (this.current_address !== '000') {
+        // Continue after current breakpoint
+        if (this.hasBreakpoint(this.current_address))
+            this.step();
+
+        while (true) {
+            // End of program
+            if (this.current_address === '000')
+                break;
+
+            // Breakpoint
+            if (this.hasBreakpoint(this.current_address))
+                break;
+
             this.step();
         }
     }

src/abacus/operation_type.ts

@@ -6,8 +6,8 @@ export interface OperationType {
     execute: (this: AbacusEmulator) => void;
 }
 
-export const INMEDIATE_LOAD: OperationType = {
-    id: 'INMEDIATE_LOAD',
+export const IMMEDIATE_LOAD: OperationType = {
+    id: 'IMMEDIATE_LOAD',
     name: 'Carga Inmediata',
     execute: function (this: AbacusEmulator) {
         this.accumulator = this.current_register.operand;
@@ -88,14 +88,14 @@ export const JUMP_IF_POSITIVE: OperationType = {
 
 const END: OperationType = {
     id: 'END',
-    name: 'Fin de Programa',
+    name: 'Fin de Program',
     execute: function (this: AbacusEmulator) {
         this.current_address = '000';
     }
 };
 
 export const OperationTypes = {
-    INMEDIATE_LOAD,
+    IMMEDIATE_LOAD,
     LOAD,
     STORE,
     ADD,

src/components/Emulator.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject, } from 'vue';
-import { GlobalState, stepProgram } from './../state';
+import { GlobalState } from './../state';
 
 const globalState: GlobalState = inject('globalState') || {} as GlobalState;
 const registers = Array.from(globalState.emulator.registers.values());
@@ -44,7 +44,10 @@ const registers = Array.from(globalState.emulator.registers.values());
       <p>{{ globalState.emulator.current_address }}</p>
     </div>
     <div>
-          <button @click="stepProgram" :disabled="globalState.mode !== 'run'">Step</button>
+      <button @click="globalState.emulator.step" :disabled="globalState.mode !== 'run'">Step</button>
+    </div>
+    <div>
+      <button @click="globalState.emulator.run" :disabled="globalState.mode !== 'run'">Run</button>
     </div>
   </div>
 </template>

src/components/ProgramTable.vue

@@ -4,7 +4,7 @@ import { GlobalState } from '../state';
 import { ref } from 'vue';
 import { Register } from '../abacus/program';
 
-const globalState: GlobalState = inject('globalState')|| {} as GlobalState;
+const globalState: GlobalState = inject('globalState') || {} as GlobalState;
 const newReg = ref({ address: '', value: '', comment: '' });
 
 const addRegister = () => {
@@ -17,17 +17,25 @@ const addRegister = () => {
 
 <template>
   <div>
-    <h3>Programa</h3>
+    <h3>Program</h3>
     <table>
       <thead>
         <tr>
+          <th></th>
           <th>0x</th>
           <th>Valor</th>
           <th>Comentario</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(register, index) in globalState.program.registers" :key="index">
+          <td v-if="globalState.emulator.hasBreakpoint(register.address)">
+            <button @click="globalState.emulator.removeBreakpoint(register.address)">🔴</button>
+          </td>
+          <td v-else>
+            <button @click="globalState.emulator.addBreakpoint(register.address)"></button>
+          </td>
+
           <td>
             <input v-if="globalState.mode === 'edit'" v-model="register.address" />
             <span v-else>{{ register.address }}</span>
@@ -42,6 +50,7 @@ const addRegister = () => {
           </td>
         </tr>
         <tr v-if="globalState.mode === 'edit'">
+          <td></td>
           <td><input v-model="newReg.address" placeholder="Address" /></td>
           <td><input v-model="newReg.value" placeholder="Initial Value" /></td>
           <td><input v-model="newReg.comment" placeholder="Description" /></td>

src/state.ts

@@ -14,7 +14,7 @@ const defaultProgram: Program = {
     name: 'New Program',
     description: 'A new program',
     operations: [
-        { code: '0', operation_type: OperationTypes.INMEDIATE_LOAD },
+        { code: '0', operation_type: OperationTypes.IMMEDIATE_LOAD },
         { code: '1', operation_type: OperationTypes.LOAD },
         { code: '2', operation_type: OperationTypes.STORE },
         { code: '3', operation_type: OperationTypes.ADD },
@@ -25,7 +25,7 @@ const defaultProgram: Program = {
         { code: 'F', operation_type: OperationTypes.END },
     ],
     aux_registers: [
-        new Register({ address: '2F0', value: '0000', comment: 'Auxiliar 1' }),
+        new Register({ address: '2F0', value: '0000', comment: 'Auxiliary 1' }),
     ],
     registers: [
         new Register({ address: '100', value: '0000', comment: 'Registro 100' }),
@@ -75,15 +75,7 @@ export function toggleMode() {
     globalState.emulator.loadProgram(globalState.program);
 }
 
-// Function to reset program to default
 export function resetProgram() {
     globalState.program = defaultProgram;
     localStorage.removeItem('abacusProgram');
 }
-
-// New function to step through the program
-export function stepProgram() {
-    if (globalState.mode === 'run') {
-        globalState.emulator.step();
-    }
-}

test/abacus.test.ts

@@ -63,7 +63,7 @@ Deno.test("AbacusEmulator should load an immediate value into the accumulator",
         operations: [
             {
                 code: 'I',
-                operation_type: OperationTypes.INMEDIATE_LOAD
+                operation_type: OperationTypes.IMMEDIATE_LOAD
             },
             {
                 code: 'F',
@@ -228,7 +228,7 @@ Deno.test("AbacusEmulator should jump to a specific address if the value in the
         operations: [
             {
                 code: 'I',
-                operation_type: OperationTypes.INMEDIATE_LOAD
+                operation_type: OperationTypes.IMMEDIATE_LOAD
             },
             {
                 code: 'J',
@@ -281,7 +281,7 @@ Deno.test("AbacusEmulator should jump to a specific address if the value in the
         operations: [
             {
                 code: 'I',
-                operation_type: OperationTypes.INMEDIATE_LOAD
+                operation_type: OperationTypes.IMMEDIATE_LOAD
             },
             {
                 code: 'L',
@@ -341,7 +341,7 @@ Deno.test("AbacusEmulator should jump to a specific address if the value in the
         operations: [
             {
                 code: 'I',
-                operation_type: OperationTypes.INMEDIATE_LOAD
+                operation_type: OperationTypes.IMMEDIATE_LOAD
             },
             {
                 code: 'L',

test/fixtures/example_program.csv

@@ -1,6 +1,6 @@
 OPERATIONS,,
 OPCODE,OPERATION,
-0,INMEDIATE_LOAD,
+0,IMMEDIATE_LOAD,
 1,LOAD,
 2,STORE,
 3,ADD,
@@ -34,6 +34,6 @@ ADDR,VALUE,COMMENT
 50A,32F1,Suma AUX 1
 50B,32F7,Suma X
 50C,2300,Almacena AC en 300
-50D,FCCC,Fin de Programa
+50D,FCCC,Fin de Program
 150,0005,Valor X
 250,0003,Valor Y

test/importer.test.ts

@@ -13,7 +13,7 @@ Deno.test("ProgramImporter should correctly import a program from CSV", async ()
     expect(program.operations.length).toBe(9);
     expect(program.operations[0]).toEqual({
         code: '0',
-        operation_type: OperationTypes.INMEDIATE_LOAD
+        operation_type: OperationTypes.IMMEDIATE_LOAD
     });
     expect(program.operations[8]).toEqual({
         code: 'F',
@@ -43,6 +43,6 @@ Deno.test("ProgramImporter should correctly import a program from CSV", async ()
     expect(program.registers[13]).toEqual({
         address: '50D',
         value: 'FCCC',
-        comment: 'Fin de Programa'
+        comment: 'Fin de Program'
     });
 });