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 ---------------------------------------------------- package-lock.json | 24 +++++++++++++ package.json | 1 + 5 files changed, 33 insertions(+), 108 deletions(-) delete mode 100644 demo/src/led.ts 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'; - } -} diff --git a/package-lock.json b/package-lock.json index 0eef142..0530bd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1476,6 +1476,15 @@ "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==", "dev": true }, + "@wokwi/elements": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@wokwi/elements/-/elements-0.1.0.tgz", + "integrity": "sha512-qXZhbmmzXIN7B4dRbLzNKGWe7qC/bzY6S6PXbUjAeYF/xNXfMBVb4JVYXWO1xkeT/1A1VV03u3ARlHqqYD2XKA==", + "dev": true, + "requires": { + "lit-element": "^2.2.1" + } + }, "abab": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz", @@ -6315,6 +6324,21 @@ } } }, + "lit-element": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.2.1.tgz", + "integrity": "sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==", + "dev": true, + "requires": { + "lit-html": "^1.0.0" + } + }, + "lit-html": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.2.tgz", + "integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA==", + "dev": true + }, "load-json-file": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", diff --git a/package.json b/package.json index 2112003..b1c206a 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@types/jest": "^24.0.23", "@types/node": "^12.12.7", "@types/prettier": "^1.19.0", + "@wokwi/elements": "^0.1.0", "husky": "^3.0.9", "jest": "^24.9.0", "lint-staged": "^9.4.2", -- cgit v1.2.3