From bf0dc3c9835eaec056f3f309728818429dede004 Mon Sep 17 00:00:00 2001 From: Uri Shaked Date: Sat, 7 Dec 2019 13:13:16 +0200 Subject: refactor(demo): use LED from @wokwi/elements --- demo/src/index.html | 5 ++- demo/src/index.ts | 10 +++--- demo/src/led.ts | 101 ---------------------------------------------------- 3 files changed, 8 insertions(+), 108 deletions(-) delete mode 100644 demo/src/led.ts (limited to 'demo') diff --git a/demo/src/index.html b/demo/src/index.html index 2a8e924..99b1c84 100644 --- a/demo/src/index.html +++ b/demo/src/index.html @@ -10,7 +10,10 @@

AVR8js LED Demo

-
+
+ + +
diff --git a/demo/src/index.ts b/demo/src/index.ts index a173f04..4b25626 100644 --- a/demo/src/index.ts +++ b/demo/src/index.ts @@ -1,9 +1,10 @@ +import '@wokwi/elements'; import { buildHex } from './compile'; import { AVRRunner } from './execute'; import { formatTime } from './format-time'; import './index.css'; -import { LED } from './led'; import { CPUPerformance } from './cpu-performance'; +import { LEDElement } from '@wokwi/elements'; let editor: any; const BLINK_CODE = ` @@ -38,11 +39,8 @@ window.require(['vs/editor/editor.main'], () => { }); // Set up LEDs -const leds = document.querySelector('.leds'); -const led13 = new LED({ color: 'green', lightColor: '#80ff80' }); -const led12 = new LED({ color: 'red', lightColor: '#ff8080' }); -leds.appendChild(led13.el); -leds.appendChild(led12.el); +const led13 = document.querySelector('wokwi-led[color=green]'); +const led12 = document.querySelector('wokwi-led[color=red]'); // Set up toolbar let runner: AVRRunner; diff --git a/demo/src/led.ts b/demo/src/led.ts deleted file mode 100644 index 8b44f16..0000000 --- a/demo/src/led.ts +++ /dev/null @@ -1,101 +0,0 @@ -const led = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -export interface ILEDOptions { - color: string; - lightColor?: string; -} - -export class LED { - readonly el = document.createElement('span'); - private readonly lightEl: SVGElement; - constructor({ color, lightColor }: ILEDOptions) { - this.el.innerHTML = led - .replace('{{color}}', color) - .replace('{{lightColor}}', lightColor || color); - this.lightEl = this.el.querySelector('.light'); - this.lightEl.style.display = 'none'; - } - - get value() { - return this.lightEl.style.display !== 'none'; - } - - set value(value: boolean) { - this.lightEl.style.display = value ? '' : 'none'; - } -} -- cgit v1.2.3