@kokimoki/app 0.0.0

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@kokimoki/app",
+  "version": "0.0.0",
+  "description": "Kokimoki app",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "dev": "tsc -w"
+  },
+  "author": "Loquiz OÜ",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@hocuspocus/provider": "^2.2.3",
+    "@syncedstore/core": "^0.5.2",
+    "events": "^3.3.0",
+    "typed-emitter": "^2.1.0"
+  }
+}

package/src/fields.ts

@@ -0,0 +1,125 @@
+import type { Task } from "./tasks";
+
+export interface FieldOptions {
+  label?: string;
+  optional: boolean;
+}
+
+const defaultFieldOptions: FieldOptions = {
+  optional: false,
+};
+
+export abstract class Field<T> {
+  constructor(public readonly options: FieldOptions) {}
+
+  abstract get value(): T;
+  abstract get schema(): any;
+}
+
+export class ImageField extends Field<string> {
+  constructor(
+    public value: string,
+    options: FieldOptions = defaultFieldOptions
+  ) {
+    super(options);
+  }
+
+  get schema() {
+    return {
+      type: "string",
+      default: this.value,
+    };
+  }
+}
+
+export class TextField extends Field<string> {
+  constructor(
+    public value: string,
+    options: FieldOptions = defaultFieldOptions
+  ) {
+    super(options);
+  }
+
+  get schema() {
+    return {
+      type: "string",
+      default: this.value,
+    };
+  }
+}
+
+export class IntegerField extends Field<number> {
+  constructor(
+    public value: number,
+    options: FieldOptions = defaultFieldOptions
+  ) {
+    super(options);
+  }
+
+  get schema() {
+    return {
+      type: "integer",
+      default: this.value,
+    };
+  }
+}
+
+export class FormGroup<T extends Record<string, any>> extends Field<{
+  [key in keyof T]: Field<T>["value"];
+}> {
+  constructor(public fields: T, options: FieldOptions = defaultFieldOptions) {
+    super(options);
+  }
+
+  get value(): { [key in keyof T]: T[key]["value"] } {
+    return Object.entries(this.fields).reduce((acc, [key, field]) => {
+      acc[key] = field.value;
+      return acc;
+    }, {} as any);
+  }
+
+  get schema() {
+    return {
+      type: "object",
+      properties: Object.entries(this.fields).reduce((acc, [key, field]) => {
+        acc[key] = field.schema;
+        return acc;
+      }, {} as any),
+    };
+  }
+}
+
+export class FormArray<T> extends Field<T[]> {
+  constructor(
+    private factory: () => Field<T>,
+    public value: Field<T>["value"][],
+    options: FieldOptions = defaultFieldOptions
+  ) {
+    super(options);
+  }
+
+  get schema() {
+    const field = this.factory();
+
+    return {
+      type: "array",
+      items: field.schema,
+    };
+  }
+}
+
+export class TaskField extends Field<Task> {
+  constructor(public value: Task, options: FieldOptions = defaultFieldOptions) {
+    super(options);
+  }
+
+  get schema() {
+    // TODO: validate task interface, not important right now
+    return {
+      type: "object",
+      properties: {},
+    };
+  }
+}
+
+export class Form<T extends Record<string, Field<any>>> extends FormGroup<T> {}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./tasks";
+export * from "./fields";
+export * from "./kokimoki-client";
+export * from "./synced-store";
+export * from "@syncedstore/core";

package/src/kokimoki-client.ts

@@ -0,0 +1,134 @@
+import { HocuspocusProvider } from "@hocuspocus/provider";
+import EventEmitter from "events";
+import type TypedEmitter from "typed-emitter";
+import { SyncedStore } from "./synced-store";
+import type { DocTypeDescription } from "@syncedstore/core/types/doc";
+
+type KokimokiClientEvents<T> = {
+  stateless: (room: string, from: string, data: T) => void;
+};
+
+export class KokimokiClient<StatelessDataT = any> extends (EventEmitter as {
+  new <T>(): TypedEmitter<KokimokiClientEvents<T>>;
+})<StatelessDataT> {
+  public serverTimeOffset = 0;
+  public wsUrl: string;
+  public apiUrl: string;
+
+  private _id = "";
+  private _token = "";
+  private _providers = new Map<string, HocuspocusProvider>();
+
+  constructor(host: string, public readonly appId: string) {
+    super();
+    const secure = !host.match(/^localhost/);
+    this.wsUrl = `ws${secure ? "s" : ""}://${host}`;
+    this.apiUrl = `http${secure ? "s" : ""}://${host}`;
+  }
+
+  get id() {
+    if (!this._id) {
+      throw new Error("Client not connected");
+    }
+
+    return this._id;
+  }
+
+  get token() {
+    if (!this._token) {
+      throw new Error("Client not connected");
+    }
+
+    return this._token;
+  }
+
+  async connect() {
+    let clientToken = localStorage.getItem("KM_TOKEN");
+
+    const startTime = Date.now();
+    const res = await fetch(`${this.apiUrl}/auth/token?appId=${this.appId}`, {
+      headers: clientToken
+        ? new Headers({ Authorization: `Bearer ${clientToken}` })
+        : new Headers(),
+    });
+    const body = await res.json();
+    const endTime = Date.now();
+    const ping = Math.round((endTime - startTime) / 2);
+
+    this._id = body.clientId;
+    this._token = body.appToken;
+    this.serverTimeOffset = Date.now() - body.serverTime - ping;
+    localStorage.setItem("KM_TOKEN", body.token);
+  }
+
+  async setProvider<T extends DocTypeDescription>(
+    name: string,
+    store: SyncedStore<T>
+  ) {
+    const provider = new HocuspocusProvider({
+      url: `${this.wsUrl}/connection`,
+      name: `${this.appId}/${name}`,
+      document: store.doc,
+      token: this.token,
+    });
+
+    this._providers.set(name, provider);
+
+    // Handle incoming stateless messages
+    provider.on("stateless", (e: { payload: string }) => {
+      const payload: { from: string; data: StatelessDataT } = JSON.parse(
+        e.payload
+      );
+      this.emit("stateless", name, payload.from, payload.data);
+    });
+
+    // Wait for initial sync
+    await new Promise<void>((resolve) => {
+      const handler = () => {
+        provider.off("synced", handler);
+        resolve();
+      };
+
+      provider.on("synced", handler);
+    });
+  }
+
+  removeProvider(name: string) {
+    const provider = this._providers.get(name);
+
+    if (!provider) {
+      throw new Error(`No provider for room ${name}`);
+    }
+
+    provider.destroy();
+    this._providers.delete(name);
+  }
+
+  getProvider(name: string) {
+    return this._providers.get(name);
+  }
+
+  serverTimestamp() {
+    return Date.now() - this.serverTimeOffset;
+  }
+
+  sendStatelessToClient(room: string, clientId: string, data: StatelessDataT) {
+    const provider = this._providers.get(room);
+
+    if (!provider) {
+      throw new Error(`No provider for room ${room}`);
+    }
+
+    provider.sendStateless(JSON.stringify({ to: clientId, data }));
+  }
+
+  sendStatelessToRoom(room: string, data: StatelessDataT, self = false) {
+    const provider = this._providers.get(room);
+
+    if (!provider) {
+      throw new Error(`No provider for room ${room}`);
+    }
+
+    provider.sendStateless(JSON.stringify({ data, self }));
+  }
+}

package/src/synced-store.ts

@@ -0,0 +1,16 @@
+import * as Y from "yjs";
+import { syncedStore, getYjsDoc } from "@syncedstore/core";
+import type {
+  DocTypeDescription,
+  MappedTypeDescription,
+} from "@syncedstore/core/types/doc";
+
+export class SyncedStore<T extends DocTypeDescription> {
+  public readonly data: MappedTypeDescription<T>;
+  public readonly doc: Y.Doc;
+
+  constructor(initialState: T) {
+    this.data = syncedStore(initialState);
+    this.doc = getYjsDoc(this.data);
+  }
+}

package/src/tasks.ts

@@ -0,0 +1,62 @@
+export interface Answer<T = any> {
+  value?: T;
+  correct: boolean;
+}
+
+export interface TaskBase {
+  id: string;
+  text: string;
+  points: number;
+  metadata?: Record<string, any>;
+}
+
+export interface TaskOption {
+  text: string;
+  correct: boolean;
+}
+
+export interface MultipleChoiceTask extends TaskBase {
+  type: "multiple-choice";
+  answers: TaskOption[];
+}
+
+export interface SingleChoiceTask extends TaskBase {
+  type: "single-choice";
+  answers: TaskOption[];
+}
+
+export interface TextTask extends TaskBase {
+  type: "text";
+  answer: string;
+}
+
+export interface TextSurveyTask extends TaskBase {
+  type: "text-survey";
+}
+
+export interface NumericTask extends TaskBase {
+  type: "numeric";
+  answer: number;
+}
+
+export interface PhotoTask extends TaskBase {
+  type: "photo";
+}
+
+export interface VideoTask extends TaskBase {
+  type: "video";
+}
+
+export interface InfoTask extends TaskBase {
+  type: "info";
+}
+
+export type Task =
+  | MultipleChoiceTask
+  | SingleChoiceTask
+  | TextTask
+  | TextSurveyTask
+  | NumericTask
+  | PhotoTask
+  | VideoTask
+  | InfoTask;

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "declaration": true
+  },
+  "include": ["src/**/*.ts"]
+}