looking great! next thing is <Focus.Add/>, etc.

martypdx · Mar 30, 2024 · dca580b · dca580b
1 parent 8cec379
commit dca580b
Show file tree

Hide file tree

Showing 19 changed files with 708 additions and 1,448 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
 <body>
     <main>
         <ol id="sessions">
-            <li>
+            <li class="session-circle">
                 <time id="timer" datetime="25:00">25:00</time>
             </li>
         </ol>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
         "vitest": "^1.3.0"
     },
     "dependencies": {
-        "azoth": "^1.3.9",
+        "azoth": "file:../../azothjs/azoth/packages/azoth",
         "vite-plugin-inspect": "^0.8.3"
     }
 }
diff --git a/src/FocusPlay.jsx b/src/FocusPlay.jsx
diff --git a/src/Header.jsx b/src/Header.jsx
@@ -1,4 +1,4 @@
-import FocusPlay from './FocusPlay.jsx';
+import FocusPlay from './focus/FocusPlay.jsx';
 import Theme from './Theme.jsx';
 
 export default function Header() {

diff --git a/src/StackBlock.jsx b/src/StackBlock.jsx
@@ -0,0 +1,34 @@
+
+export class StackBlock {
+    #anchor = document.createComment(0);
+
+    constructor({ source, loader }) {
+        this.source = source;
+        this.updates = loader(this);
+    }
+
+    async #start() {
+        const { updates } = this;
+        for await(const message of this.source) {
+            const [key, value] = Object.entries(message)[0];
+            updates[key](value);
+        }
+    }
+
+    replace(input) {
+        compose(this.#anchor, input);
+    }
+
+    append(input) {
+        compose(this.#anchor, input, true);
+    }
+
+    remove() {
+        compose(this.#anchor, null);
+    }
+
+    render() {
+        this.#start();
+        return this.#anchor;
+    }
+}
diff --git a/src/Theme.jsx b/src/Theme.jsx
@@ -1,5 +1,6 @@
-import { consume, unicast } from 'azoth/channels';
-import { useLocalStorage } from './services/local-storage.js';
+import { unicast } from 'azoth/chronos/generators';
+import { consume } from 'azoth/chronos/channels';
+import { useLocalStorage } from './local-storage.js';
 
 const html = document.querySelector('html');
 

diff --git a/src/focus/CurrentFocus.jsx b/src/focus/CurrentFocus.jsx
@@ -0,0 +1,36 @@
+import { consume } from 'azoth/chronos/channels';
+import { Updater } from 'azoth/maya';
+
+export function CurrentFocus({ current, update }) {
+    const Focus = updatableFocus(update);
+    consume(current, current => Focus.update(current));
+    return Focus;
+}
+
+function updatableFocus(update) {
+    const handleEnter = ({ key, target }) => {
+        if(key === 'Enter' && document.hasFocus(target)) {
+            target.blur();
+        }
+    };
+
+    const handleInput = ({ target: { innerHTML, ariaLabel } }) => {
+        update({ [ariaLabel]: innerHTML === '<br>' ? '' : innerHTML });
+    };
+
+    return Updater.for(({ priority, exit }) => <div class="current-focus">
+        <h2 contenteditable
+            aria-label="priority"
+            aria-placeholder="Declared Priority"
+            oninput={handleInput}
+            onkeydown={handleEnter}
+            innerHTML={priority || ''} />
+
+        <p contenteditable
+            aria-label="exit"
+            aria-placeholder="Clear exit seen and understood"
+            oninput={handleInput}
+            onkeydown={handleEnter}
+            innerHTML={exit || ''} />
+    </div >);
+}
diff --git a/src/focus/FocusPath.jsx b/src/focus/FocusPath.jsx
@@ -0,0 +1,30 @@
+import { branch } from 'azoth/chronos/channels';
+
+function Toggle({ on: predicate }, slottable) {
+    return payload => predicate(payload) ? slottable : null;
+}
+
+export function FocusPath({ stack, add, remove }) {
+    const Add = <ChangeButton onclick={add} text="add" />;
+
+    const [Remove, Path] = branch(stack,
+        <Toggle on={s => s.length}>
+            <ChangeButton onclick={remove} text="remove" />
+        </Toggle>,
+        s => s.map(focus => <Focus {...focus} />),
+        // [Focus, { map: true }],
+    );
+
+    return { Path, Add, Remove };
+}
+
+function Focus({ priority, exit }) {
+    return <li>
+        <span class="priority">{priority}</span>
+        {exit}
+    </li>;
+}
+
+function ChangeButton({ onclick, text }) {
+    return <button onclick={onclick}>{text}</button>;
+}
diff --git a/src/focus/FocusPlay.jsx b/src/focus/FocusPlay.jsx
@@ -0,0 +1,27 @@
+import { FocusPath } from './FocusPath.jsx';
+import { CurrentFocus } from './CurrentFocus.jsx';
+import { useFocus } from './useFocus.jsx';
+import './focus.css';
+
+function FocusPlayButton() {
+    return <button class="ico-button">
+        <label>
+            <input name="check-working" type="checkbox" checked />
+        </label>
+    </button>;
+}
+
+export default function FocusPlay() {
+    const [current, stack, { update, ...changeFocus }] = useFocus();
+    const { Add, Remove, Path } = <FocusPath stack={stack} {...changeFocus} />;
+
+    return <section class="focus-play">
+        <FocusPlayButton />
+        <ul><Path /></ul>
+        <section class="focus-section">
+            <Remove className="remove-button" />
+            <CurrentFocus current={current} update={update} />
+        </section>
+        <Add className="add-button" />
+    </section>;
+}
diff --git a/src/focus/focus.css b/src/focus/focus.css
@@ -0,0 +1,80 @@
+section.focus-play {
+
+    .ico-button {
+        outline: 0;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        appearance: none;
+        background: transparent;
+
+        &:has(input:checked)+.focus {
+            display: block;
+        }
+    }
+
+    label {
+        opacity: .9;
+        font-size: 3em;
+        cursor: pointer;
+
+        &::before {
+            position: relative;
+            content: '🛝';
+            top: -0.25em;
+        }
+
+        &:has(input:checked)::before {
+            position: relative;
+            content: '🎯';
+            top: -.28em;
+        }
+
+        input {
+            display: none;
+        }
+    }
+
+
+}
+
+.focus-section {}
+
+.current-focus {
+
+    p {
+        font-size: 1.2em;
+    }
+
+    [contenteditable] {
+        font-size: 26px;
+        padding: .25em 0em;
+        margin: 1em 0;
+        transition: padding .3s ease-in-out;
+    }
+
+    [contenteditable]:hover,
+    [contenteditable]:focus {
+        padding: .25em;
+    }
+
+    [contenteditable]:hover {
+        background: #fafafa;
+        outline: 2px solid #eee;
+    }
+
+    [contenteditable]:focus {
+        background: #efefef;
+        outline: 2px solid blue;
+    }
+
+    [contenteditable]:empty:not(:focus):before {
+        content: attr(aria-placeholder);
+        opacity: .8
+    }
+
+    [contenteditable]:empty:focus:before {
+        content: ' ';
+        opacity: .8
+    }
+}
diff --git a/src/focus/stack.css b/src/focus/stack.css
@@ -0,0 +1,3 @@
+.focus-stack {
+    background: lime;
+}
diff --git a/src/focus/useFocus.jsx b/src/focus/useFocus.jsx
@@ -0,0 +1,37 @@
+import { unicast } from 'azoth/chronos/generators';
+import { branch } from 'azoth/chronos/channels';
+import { useLocalStorageJSON } from '../local-storage.js';
+import './focus.css';
+
+const newFocus = () => ({ priority: '', exit: '' });
+
+export function useFocus() {
+    const [foci, setLocal] = useLocalStorageJSON('FOP.FOCI', [newFocus()]);
+    const save = () => setLocal(foci);
+    const [asyncFoci, changeFocus] = unicast(() => foci, null);
+
+    const [current, stack] = branch(asyncFoci,
+        foci => foci.at(-1),
+        foci => foci.slice(0, -1),
+    );
+
+    const update = updates => {
+        Object.assign(foci.at(-1), updates);
+        save();
+    };
+
+    const add = () => {
+        foci.push(newFocus());
+        save();
+        changeFocus();
+    };
+
+    const remove = () => {
+        if(foci.length === 1) return;
+        foci.pop();
+        save();
+        changeFocus();
+    };
+
+    return [current, stack, { add, remove, update }];
+}
diff --git a/src/services/local-storage.js → src/local-storage.js b/src/services/local-storage.js → src/local-storage.js
diff --git a/src/main.jsx b/src/main.jsx
@@ -60,7 +60,9 @@ function startSession() {
 
         if(time - start > session) {
             clearInterval(interval);
-            ul.prepend(document.createElement('li'));
+            const li = document.createElement('li');
+            li.classList.add('session-circle')
+            ul.prepend(li);
             queueMicrotask(sessionComplete);
         }
     }, 1000);