# HG changeset patch
# User cin
# Date 2022-09-01 19:39:16
# Node ID ff52224a63f0060a043a9df704760eaf4127d6a7
# Parent  908c1ce6ce6ddfc719d4f5382e3e2606259e3a76

Added test widgets to the playground

diff --git a/playground/src/main/resources/css/ProgressBar.css b/playground/src/main/resources/css/ProgressBar.css
new file mode 100644
--- /dev/null
+++ b/playground/src/main/resources/css/ProgressBar.css
@@ -0,0 +1,39 @@
+.progress-bar * {
+    transition: all 0.5s;
+}
+
+.progress-bar {
+    
+    transition: all 0.5s;
+    height: 1em;
+    line-height: 0;
+    font-size: 10px;
+    white-space: nowrap;
+}
+
+.progress-track {
+    background-color: #888;
+    height: 0.2em;
+    box-shadow: 0 0 0.5em 0  #0004;
+    width: 70%;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.progress-indicator {
+    width: 30%;
+    background-color: #0ae;
+    height: 100%;
+    display: inline-block;
+    vertical-align: middle;
+    box-shadow: 0 0.6em 1em -0.4em  #000;
+}
+
+.progress-bar:hover .progress-indicator {
+    box-shadow: 0 1em 2em -0.4em  #000;
+}
+
+.progress-bar:hover .progress-track {
+    background-color: #0ae;
+    box-shadow: 0 0 0.5em 0  #0ae;
+}
\ No newline at end of file
diff --git a/playground/src/main/ts/MainWidget.tsx b/playground/src/main/ts/MainWidget.tsx
--- a/playground/src/main/ts/MainWidget.tsx
+++ b/playground/src/main/ts/MainWidget.tsx
@@ -1,12 +1,21 @@
 import { djbase, djclass } from "@implab/djx/declare";
 import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
 import { createElement } from "@implab/djx/tsx";
+import ProgressBar from "./ProgressBar";
+
+const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
 
 @djclass
 export default class MainWidget extends djbase(DjxWidgetBase) {
+
+    titleNode?: HTMLHeadingElement;
+
+    progressBar?: ProgressBar;
+
     render() {
         return <div>
-            <h2>Hi!</h2>
+            <h2 ref={ref(this, "titleNode")}>Hi!</h2>
+            <ProgressBar ref={ref(this, "progressBar")}/>
         </div>;
     }
 }
diff --git a/playground/src/main/ts/ProgressBar.tsx b/playground/src/main/ts/ProgressBar.tsx
new file mode 100644
--- /dev/null
+++ b/playground/src/main/ts/ProgressBar.tsx
@@ -0,0 +1,19 @@
+import { djbase, djclass } from "@implab/djx/declare";
+import { createElement } from "@implab/djx/tsx";
+import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
+import "@implab/djx/css!./css/ProgressBar.css";
+
+@djclass
+export default class ProgressBar extends djbase(DjxWidgetBase) {
+
+    constructor(opts?: Partial<ProgressBar> & ThisType<ProgressBar>, refNode?: Node | string) {
+        super(opts, refNode);
+    }
+    render() {
+        return <div class="progress-bar">
+            <div class="progress-indicator"/>
+            <div class="progress-track"/>
+        </div>;
+    }
+    
+}
\ No newline at end of file