diff --git a/gulpfile.js b/gulpfile.js
index f92ab2e..2af7614 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -7,6 +7,7 @@ function replaceTemplate() {
return src(['./public/js/**/*.js'])
.pipe(replace(/TEASENSE_URI/g, process.env.TEASENSE_URI))
.pipe(replace(/RAINFALL_URI/g, process.env.RAINFALL_URI))
+ .pipe(replace(/SPLORK_URI/g, process.env.SPLORK_URI))
.pipe(dest('./public/js'));
};
diff --git a/public/splork.html b/public/splork.html
new file mode 100644
index 0000000..f3c3d0b
--- /dev/null
+++ b/public/splork.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/src/Splork.ts b/src/Splork.ts
new file mode 100644
index 0000000..cb7ed95
--- /dev/null
+++ b/src/Splork.ts
@@ -0,0 +1,55 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('lavender-splork')
+export class Splork extends LitElement {
+ value = 0.0;
+
+ constructor() {
+ super();
+ this.pullValueFromBackend();
+ }
+
+ async pullValueFromBackend() {
+ const response = await fetch('SPLORK_URI');
+ const data = await response.json();
+ const result = data.message;
+
+ this.setValue(result);
+ }
+
+ setValue(newValue: number) {
+ this.value = newValue;
+ this.requestUpdate();
+ }
+
+ static override styles = [
+ css`
+ .gauge-body {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-content: space-between;
+ text-align: center;
+ }
+
+ .gauge-label {
+ font-weight: bold;
+ }
+ `
+ ]
+ override render() {
+ return html`
+
+
Splork MOTD
+
${this.value}
+