sync: wip terminal cell system

src/shell/Wush.ts

@@ -22,9 +22,6 @@ export class Wush extends Shell {
     }
 
     HandleKeyInput(key: string, isCharacter: boolean) {
-        console.log(key)
-        console.log(isCharacter)
-
         if (!isCharacter)
             switch (key) {
                 case 'Backspace':

src/terminal/Terminal.ts

@@ -36,8 +36,10 @@ export class Terminal {
         this.SetCursorPosition(0, 0)
     }
 
-    AppendLine(content: string) {
+    AppendLine(content: string, moveCursor: boolean = true) {
+        if (moveCursor) {
             this.AdjustCursorPosition(0, 1)
+        }
 
         const paragraph = document.createElement('p')
         paragraph.style.height = `${this.cellHeight}px`
@@ -49,12 +51,14 @@ export class Terminal {
         this.AppendCells(content)
     }
 
+    GetLastLineIndex(): number {
+        return Math.max(this.terminal.children.length - 1, 0)
+    }
+
     Write(text: string) {
         let adjustment = 0
 
         text.split('').forEach(char => {
-            console.log(this.cursorPosition)
-
             this.AdjustCursorPosition(adjustment, 0)
             adjustment = 1
 
@@ -63,28 +67,32 @@ export class Terminal {
     }
 
     SetCell(char: string) {
-        const id = `#cell-${this.cursorPosition.row}_${this.cursorPosition.col}`
+        const selector = `#line-${this.cursorPosition.row} .cell-${this.cursorPosition.col}`
 
-        try {
+        console.log(`going from ${this.terminal.children.length - 1} to ${this.cursorPosition.row}`)
-            sqs(id)
+
-        } catch (_) {
+        if (!document.querySelector(`#line-${this.cursorPosition.row}`)) {
+            for (let i = this.terminal.children.length - 1; i < this.cursorPosition.row; i++) {
+                console.log(i)
+                this.AppendLine('', false)
+            }
+        }
+
+        if (!document.querySelector(selector)) {
+            const line = sqs(`#line-${this.cursorPosition.row}`)
+
+            for (let i = line.children.length; i < this.cursorPosition.col + 1; i++) {
                 const cell = document.createElement('span')
-            cell.id = id
+                cell.className = `cell-${i}`
                 cell.style.width = `${this.cellWidth}px`
                 cell.style.height = `${this.cellHeight}px`
                 cell.style.lineHeight = `${this.cellHeight}px`
 
-            const lineId = `#line-${this.cursorPosition.row}`
+                line.appendChild(cell)
+            }
+        }
 
-            try {
+        sqs(selector).innerText = char[0]
-                sqs(lineId)
-            } catch (_) {
-                // todo: create as many lines as we need
-                for (let i = sqs('#terminal'); ;) {}
-            }
-        } finally {
-            sqs(id).innerText = char[0]
-        }
     }
 
     AppendCells(content: string) {
@@ -97,14 +105,14 @@ export class Terminal {
     }
 
     RemoveCells(amount: number) {
-        const paragraph = sqs(`#line-${this.cursorPosition.row}`)
+        const line = sqs(`#line-${this.cursorPosition.row}`)
-        paragraph.innerText = paragraph.innerText.slice(
+        const originalAmount = this.cursorPosition.row
-            0,
-            Math.max(paragraph.innerText.length - amount, 0),
-        )
 
+        for (let i = originalAmount; i < originalAmount - amount; i--) {
+            line.querySelector(`.cell-${i}`)?.remove()
             this.AdjustCursorPosition(-amount, 0)
         }
+    }
 
     ResetCellSize() {
         // dynamically determine cell size using dom
@@ -137,15 +145,8 @@ export class Terminal {
     }
 
     SetCursorPosition(col: number, row: number) {
-        this.cursorPosition.col = Math.min(
+        this.cursorPosition.col = Math.max(col, 0)
-            this.GetWidthCells(),
+        this.cursorPosition.row = Math.max(row, 0)
-            Math.max(col, 0),
-        )
-
-        this.cursorPosition.row = Math.min(
-            this.GetHeightCells(),
-            Math.max(row, 0),
-        )
 
         this.UpdateCursor()
     }