@lightningrodlabs/we-game

@lightningrodlabs/we-game

This package contains the interfaces and contracts that a UI module needs to implement in order to become a We Game.

You can use @lightningrodlabs/create-we-game to easily scaffold the initial structure for a We Game.

Implementing a We Game

You need to import the SetupRenderers type from @lightningrodlabs/we-game, and have only a default export in your file:

index.ts.

import { AdminWebsocket, AppWebsocket, InstalledCell } from "@holochain/client";
import { SetupRenderers, WeServices } from "@lightningrodlabs/we-game";
import { HolochainClient } from "@holochain-open-dev/cell-client";

const setupRenderers: SetupRenderers = (
  client: HolochainClient,
  adminWebsocket: AdminWebsocket,
  gameCells: InstalledCell[], // This will contain all the cells that your game has installed
  weServices: WeServices
) => {
  // Maybe instantiate a store?

  return {
    full(gameRootElement: HTMLElement, registry: CustomElementRegistry) {
      gameRootElement.innerHTML = "<span>Replace this with the appropriate HTML for your game</span>";

      // You can also do `registry.define('my-element', MyElement);` 
      // to register CustomElements that are going to be available in the scope for the element
    },
    blocks: [],
  };
};

export default setupRenderers;

Building

Use rollup to build a fully bundled javascript file that doesn't have any external imports.

This is an example configuration for it:

rollup.config.js

import nodeResolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import builtins from "rollup-plugin-node-builtins";
import globals from "rollup-plugin-node-globals";

import babel from "@rollup/plugin-babel";
import { importMetaAssets } from "@web/rollup-plugin-import-meta-assets";
import { terser } from "rollup-plugin-terser";

export default {
  input: "out-tsc/index.js", // This needs to be pointing to the file that has the `SetupRenderers` default export
  output: {
    format: "es",
    dir: 'dist',
  },
  watch: {
    clearScreen: false,
  },

  plugins: [
    /** Resolve bare module imports */
    nodeResolve({
      browser: true,
      preferBuiltins: false,
    }),
    replace({
      "process.env.NODE_ENV": '"production"',
    }),
    builtins(),
    commonjs({}),
    globals(),
    /** Minify JS */
    terser(),
    /** Bundle assets references via import.meta.url */
    importMetaAssets(),
    /** Compile JS to a lower language target */
    babel({
      exclude: /node_modules/,

      babelHelpers: "bundled",
      presets: [
        [
          require.resolve("@babel/preset-env"),
          {
            targets: [
              "last 3 Chrome major versions",
              "last 3 Firefox major versions",
              "last 3 Edge major versions",
              "last 3 Safari major versions",
            ],
            modules: false,
            bugfixes: true,
          },
        ],
      ],
      plugins: [
        [
          require.resolve("babel-plugin-template-html-minifier"),
          {
            modules: {
              lit: ["html", { name: "css", encapsulation: "style" }],
            },
            failOnError: false,
            strictCSS: true,
            htmlMinifier: {
              collapseWhitespace: true,
              conservativeCollapse: true,
              removeComments: true,
              caseSensitive: true,
              minifyCSS: true,
            },
          },
        ],
      ],
    }),
  ],
};

Now you have it! You can use the generated .js file as a We Game UI file.