diff --git a/forum-network/notes/client-or-ui.md b/forum-network/notes/client-or-ui.md deleted file mode 100644 index ad24afd..0000000 --- a/forum-network/notes/client-or-ui.md +++ /dev/null @@ -1,9 +0,0 @@ -## Client/UI - -Voting consists of staking operations performed by software operated by owners of EOA. - -This software may be referred to as "The UI". It may also be considered "a client". - -It will need to be a network-connected application. It will need a certain minimum of RAM, -and for some features disk storage, -and for some features uptime . diff --git a/forum-network/notes/client.md b/forum-network/notes/client.md index 55df288..ee6db86 100644 --- a/forum-network/notes/client.md +++ b/forum-network/notes/client.md @@ -1,5 +1,18 @@ -# Client Operations +## Client -Client must communicate with one or more servers. +Clients play a key role in an MVPR DAO. -Client must build a local view +Clients must be operated by reputation holders. + +Clients are the agents that submit posts to the forum, initiate validation pools, and vote in validation pools. + +We sometimes refer to the client as "the UI". + +It will need to be a network-connected application. It will need a certain minimum of RAM, +and for some features disk storage, +and for some features uptime . + +The behavior of the client constitutes what we refer to as the DAO's "soft protocols". + +Malicious actors may freely modify their own client's behavior. +Therefore honest clients must engage in policing to preserve the integrity of the network. diff --git a/forum-network/src/classes/dao/client.js b/forum-network/src/classes/dao/client.js new file mode 100644 index 0000000..366fa7f --- /dev/null +++ b/forum-network/src/classes/dao/client.js @@ -0,0 +1,6 @@ +export class Client { + constructor(dao, expert) { + this.dao = dao; + this.expert = expert; + } +} diff --git a/forum-network/src/classes/display/box.js b/forum-network/src/classes/display/box.js index bee1f88..1ed666a 100644 --- a/forum-network/src/classes/display/box.js +++ b/forum-network/src/classes/display/box.js @@ -5,7 +5,9 @@ export class Box { constructor(name, parentEl, options = {}) { this.name = name; this.el = document.createElement('div'); - this.el.id = `box_${randomID()}`; + this.el.box = this; + const id = options.id ?? randomID(); + this.el.id = `${parentEl.id}_box_${id}`; this.el.classList.add('box'); if (name) { this.el.setAttribute('box-name', name); diff --git a/forum-network/src/classes/display/document.js b/forum-network/src/classes/display/document.js new file mode 100644 index 0000000..87c6bbf --- /dev/null +++ b/forum-network/src/classes/display/document.js @@ -0,0 +1,30 @@ +import { Box } from './box.js'; +import { Form } from './form.js'; + +/** + * @example + * ```typescript + * const doc = new Document(); + * const form1 = doc.form(); + * ``` + */ +export class Document extends Box { + form() { + return this.addElement(new Form(this)); + } + + remarks(text, opts) { + return this.addElement(new Box('Remark', this.el, opts).setInnerHTML(text)); + } + + addElement(element) { + this.elements = this.elements ?? []; + this.elements.push(element); + return this; + } + + get lastElement() { + if (!this.elements?.length) return null; + return this.elements[this.elements.length - 1]; + } +} diff --git a/forum-network/src/classes/display/form.js b/forum-network/src/classes/display/form.js new file mode 100644 index 0000000..80b6cb2 --- /dev/null +++ b/forum-network/src/classes/display/form.js @@ -0,0 +1,57 @@ +import { randomID } from '../../util/helpers.js'; +import { Box } from './box.js'; + +const updateValuesOnEventTypes = ['keyup', 'mouseup']; + +export class FormElement extends Box { + constructor(name, parentEl, opts) { + super(name, parentEl, opts); + this.id = opts.id ?? name; + const { cb } = opts; + if (cb) { + updateValuesOnEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => { + cb(this); + })); + cb(this); + } + } +} + +export class Button extends FormElement { } + +export class TextField extends FormElement { + constructor(name, parentEl, opts) { + super(name, parentEl, opts); + this.input = document.createElement('input'); + this.el.appendChild(this.input); + } + + get value() { + return this.input?.value; + } +} + +export class TextArea extends FormElement { } + +export class Form { + constructor(document, opts = {}) { + this.document = document; + this.items = []; + this.id = opts.id ?? `form_${randomID()}`; + } + + button(opts) { + this.items.push(new Button(opts.name, this.document.el, opts)); + return this; + } + + textField(opts) { + this.items.push(new TextField(opts.name, this.document.el, opts)); + return this; + } + + textArea(opts) { + this.items.push(new TextArea(opts.name, this.document.el, opts)); + return this; + } +} diff --git a/forum-network/src/classes/display/scene.js b/forum-network/src/classes/display/scene.js index 8f62ad1..3b14ec6 100644 --- a/forum-network/src/classes/display/scene.js +++ b/forum-network/src/classes/display/scene.js @@ -6,6 +6,7 @@ import { Table } from './table.js'; import { Flowchart } from './flowchart.js'; import { Controls } from './controls.js'; import { Box } from './box.js'; +import { Document } from './document.js'; export class Scene { constructor(name, rootBox) { @@ -86,6 +87,24 @@ export class Scene { return this; } + /** + * + * @param {string} name + * @param {(Document): Document} cb + * @returns {Scene} + */ + withDocument(name, cb) { + this.documents = this.documents ?? []; + const doc = new Document(name, this.middleSection.el); + this.documents.push(cb ? cb(doc) : doc); + return this; + } + + get lastDocument() { + if (!this.documents?.length) return null; + return this.documents[this.documents.length - 1]; + } + registerActor(actor) { this.actors.add(actor); if (actor.options.announce) { diff --git a/forum-network/src/index.html b/forum-network/src/index.html index 86d1514..3c3e1fe 100644 --- a/forum-network/src/index.html +++ b/forum-network/src/index.html @@ -28,6 +28,12 @@
  • Multiple posts with overlapping authors
    • + @@ -38,6 +44,7 @@
  • Debounce
  • Flowchart
  • Mocha
    • +
  • Input