Merge pull request #123 from caleb-mabry/custom-ini

Adding Custom Markdown Support Based on Asset File

3 files changed, 240 insertions, 4 deletions

diff --git a/webAO/client.js b/webAO/client.js
index e9eb13a..dfba169 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -10,7 +10,7 @@ import fileExistsSync from './utils/fileExistsSync';
 import {
   escapeChat, encodeChat, prepChat, safeTags,
 } from './encoding.js';
-
+import mlConfig from './utils/aoml';
 // Load some defaults for the background and evidence dropdowns
 import vanilla_character_arr from './constants/characters.js';
 import vanilla_music_arr from './constants/music.js';
@@ -43,6 +43,8 @@ const DEFAULT_HOST = 'http://attorneyoffline.de/base/';
 let AO_HOST = asset || DEFAULT_HOST;
 const THEME = theme || 'default';
 
+const attorneyMarkdown = mlConfig(AO_HOST)
+
 const UPDATE_INTERVAL = 60;
 
 /**
@@ -1927,6 +1929,7 @@ class Viewport {
 	 * @param {object} chatmsg the new chat message
 	 */
   async say(chatmsg) {
+
     this.chatmsg = chatmsg;
     this.textnow = '';
     this.sfxplayed = 0;
@@ -2078,7 +2081,7 @@ class Viewport {
     if (soundChecks.some((check) => this.chatmsg.sound === check)) {
       this.chatmsg.sound = this.chatmsg.effects[2];
     }
-
+    this.chatmsg.parsed = await attorneyMarkdown.applyMarkdown(chatmsg.content, this.colors[this.chatmsg.color])
     this.tick();
   }
 
@@ -2230,8 +2233,10 @@ class Viewport {
           this.currentBlipChannel %= this.blipChannels.length;
         }
         this.textnow = this.chatmsg.content.substring(0, this.textnow.length + 1);
-
-        chatBoxInner.innerText = this.textnow;
+        const characterElement = this.chatmsg.parsed[this.textnow.length - 1]
+        if (characterElement) {
+          chatBoxInner.appendChild(this.chatmsg.parsed[this.textnow.length - 1]);
+        }
 
         // scroll to bottom
         chatBox.scrollTop = chatBox.scrollHeight;
@@ -2314,6 +2319,7 @@ export function onEnter(event) {
       if (emote_mod === 0) { emote_mod = 1; }
     } else if (emote_mod === 1) { emote_mod = 0; }
 
+
     client.sendIC(
       'chat',
       myemo.preanim,
diff --git a/webAO/utils/__tests__/aoml.test.ts b/webAO/utils/__tests__/aoml.test.ts
new file mode 100644
index 0000000..90967d7
--- /dev/null
+++ b/webAO/utils/__tests__/aoml.test.ts
@@ -0,0 +1,113 @@
+import request from '../../services/request'
+import mlConfig from '../aoml';
+
+jest.mock('../../services/request')
+const networkRequest = `
+c0 = 247, 247, 247
+c0_name = White
+c0_talking = 1
+
+c2 = 247, 0, 57
+c2_name = Red
+c2_start = ~
+c2_end = ~
+c2_remove = 1
+c2_talking = 1
+
+c4 = 107, 198, 247
+c4_name = Blue
+c4_start = (
+c4_end = )
+c4_remove = 0
+c4_talking = 0
+
+c5 = 107, 198, 247
+c5_name = Blue
+c5_start = [
+c5_end = ]
+c5_remove = 1
+c5_talking = 0
+
+c6 = 107, 198, 247
+c6_name = Blue
+c6_start = |
+c6_end = |
+c6_remove = 0
+c6_talking = 0
+`
+
+const mockRequest = request as jest.MockedFunction<typeof request>;
+mockRequest.mockReturnValue(Promise.resolve(networkRequest))
+
+  describe('mlConfig', () => {
+    beforeEach(() => {
+      // Clear all instances and calls to constructor and all methods:
+      mockRequest.mockClear();
+
+    });
+
+    it('Should make a network request', () => {
+        mlConfig('localhost')
+        expect(mockRequest).toHaveBeenCalledTimes(1);
+      });
+  })
+  describe('applyMarkdown', () => {
+    const config = mlConfig('localhost')
+
+    beforeEach(() => {
+      // Clear all instances and calls to constructor and all methods:
+      mockRequest.mockClear();
+
+    });
+    
+    it('Should create an array of spans containing letters', async () => {
+      const word = `hello`
+      const actual = await config.applyMarkdown(`hello`, `blue`)
+      let index = 0
+      for (const element of actual) {
+        expect(element.innerHTML).toBe(word[index])
+        index++
+      }
+    })
+    it('Should add colors based on settings', async () => {
+      const config = mlConfig('localhost')
+      const actual = await config.applyMarkdown(`(heya)`, `blue`)
+      expect(actual[0].getAttribute('style')).toBe('color: rgb(107, 198, 247);')
+    })
+    it('Should keep a letter if remove = 0', async () => {
+      const config = mlConfig('localhost')
+      
+      const actual = await config.applyMarkdown(`(What())Hey!`, `white`)
+      const expected = `(`
+      expect(actual[5].innerHTML).toBe(expected)
+    })
+    it('Should remove a letter if remove = 1', async () => {
+      const config = mlConfig('localhost')
+      
+      const actual = await config.applyMarkdown(`~What~()Hey!`, `white`)
+      const expected = ``
+      expect(actual[0].innerHTML).toBe(expected)
+    })
+    it('Should remove a letter if remove = 1', async () => {
+      const config = mlConfig('localhost')
+      
+      const actual = await config.applyMarkdown(`~What~()Hey!`, `white`)
+      const expected = ``
+      expect(actual[0].innerHTML).toBe(expected)
+    })
+    it('Should keep a closing letter if remove = 0', async () => {
+      const config = mlConfig('localhost')
+      
+      const actual = await config.applyMarkdown(`~NO[]~!`, `white`)
+      const expected = ``
+      expect(actual[4].innerHTML).toBe(expected)
+    })
+    it('Should remove a closing letter if remove = 1', async () => {
+      const config = mlConfig('localhost')
+      const actual = await config.applyMarkdown(`~NO||~!`, `white`)
+      const expected = ``
+      expect(actual[5].innerHTML).toBe(expected)
+    })
+  
+  })
+  
diff --git a/webAO/utils/aoml.ts b/webAO/utils/aoml.ts
new file mode 100644
index 0000000..da66d0c
--- /dev/null
+++ b/webAO/utils/aoml.ts
@@ -0,0 +1,117 @@
+import request from "../services/request"
+
+interface Aoml {
+    name: string;
+    start: string;
+    end: string;
+    remove: number;
+    talking: number;
+    color: string;
+}
+const aomlParser = (text: string) => {
+    let parsed: {[key: string]: Aoml}= {}
+    let currentHeader = ''
+    for (const line of text.split(/\r?\n/)) {
+        if (line === '') {
+            currentHeader = ''
+            continue;
+        }
+        const content = line.split(' = ')
+        const contentName = content[0]
+        const contentValue = content[1]
+        if (currentHeader === '') {
+            currentHeader = contentName
+            parsed[currentHeader] = {
+                color: contentValue
+            } as Aoml
+        } else {
+            const contentKey = contentName.split('_')[1]
+            parsed[currentHeader][contentKey] = contentValue
+        }
+    }
+    return parsed
+}
+
+const mlConfig = (AO_HOST) => {
+    const defaultUrl = `${AO_HOST}themes/default/chat_config.ini`
+    let aomlParsed: Promise<{[key: string]: Aoml}> = request(defaultUrl).then((data) => aomlParser(data));
+
+    
+
+    const createIdentifiers = async () => {
+        const identifiers = new Map<string, Aoml>()
+        for (const [ruleName, value] of Object.entries(await aomlParsed)) {
+            if (value.start && value.end) {
+                identifiers.set(value.start, value)
+                identifiers.set(value.end, value)
+            }   
+        }
+        return identifiers
+    }
+    const createStartIdentifiers = async () => {
+        const startingIdentifiers = new Set<string>()
+        for (const [ruleName, value] of Object.entries(await aomlParsed)) {
+            if (value?.start && value?.end) {
+                startingIdentifiers.add(value.start)
+            }   
+        }
+        return startingIdentifiers
+    }
+    const applyMarkdown = async (text: string, defaultColor: string) => {
+        const identifiers = await createIdentifiers()
+        const startIdentifiers = await createStartIdentifiers()
+        const closingStack = []
+        const colorStack = []
+        // each value in output will be an html element
+        let output: HTMLSpanElement[] = []
+        for (const letter of text) {
+            let currentSelector = document.createElement('span')
+            let currentIdentifier = identifiers.get(letter)
+            const currentClosingLetter = closingStack[closingStack.length-1]
+            const keepChar = Number(currentIdentifier?.remove) === 0
+
+            if (startIdentifiers.has(letter)) {
+                const color = identifiers.get(letter).color.split(',')
+                const r = color[0]
+                const g = color[1]
+                const b = color[2]
+                colorStack.push([r,g,b])
+                closingStack.push(currentIdentifier.end)
+                const currentColor = `color: rgb(${r},${g},${b});`
+                currentSelector.setAttribute('style', currentColor)
+                if (keepChar) {
+                    currentSelector.innerHTML = letter
+                }
+            } else if (currentClosingLetter === letter) {
+                const r = colorStack[colorStack.length-1][0]
+                const g = colorStack[colorStack.length-1][1]
+                const b = colorStack[colorStack.length-1][2]
+                const currentColor = `color: rgb(${r},${g},${b});`
+                currentSelector.setAttribute('style', currentColor)
+                closingStack.pop()
+                colorStack.pop()
+                if (keepChar) {
+                    currentSelector.innerHTML = letter
+                }
+            } else {
+                currentSelector.innerHTML = letter
+                if (colorStack.length === 0) {
+                    currentSelector.className = `text_${defaultColor}`
+                } else {
+                    const r = colorStack[colorStack.length-1][0]
+                    const g = colorStack[colorStack.length-1][1]
+                    const b = colorStack[colorStack.length-1][2]
+                    const currentColor = `color: rgb(${r},${g},${b});`
+                    currentSelector.setAttribute('style', currentColor)
+                }
+            }
+            output.push(currentSelector)
+        }
+        return output
+    }
+    return {
+        applyMarkdown
+    }
+}
+
+export default mlConfig
\ No newline at end of file