Averaging Dice Rolls

In this demo, we use a Metrics object to keep a count (and a rolling average) of the values in each Cell in a Store. We roll a dice 48 times and keep track of the average.

First, we pull in React, ReactDOM, and TinyBase:

<script src="/umd/react.production.min.js"></script>
<script src="/umd/react-dom.production.min.js"></script>
<script src="/umd/tinybase.js"></script>
<script src="/umd/ui-react.js"></script>

We import the functions and components we need, and create the Store object:

const {MetricView, Provider, TableView, useCell} = TinyBaseUiReact;
const {createMetrics, createStore} = TinyBase;
const store = createStore();

To create the Metrics object, we use the createMetrics function, and configure two definitions for it:

const metrics = createMetrics(store)
  .setMetricDefinition('average', 'rolls', 'avg', 'result')
  .setMetricDefinition('count', 'rolls', 'sum');

Each roll is going to be rendered as a dice Unicode character:

const Roll = ({tableId, rowId}) => (
  <span className="roll">
    {String.fromCharCode(9855 + useCell(tableId, rowId, 'result'))}
  </span>
);

The dice require a little styling:

.roll {
  display: inline-block;
  font-size: 3rem;
  padding: 0 1rem;
  line-height: 3rem;
}

We then create a React app comprising two MetricView components and a TableView component which will render the Roll components:

ReactDOM.createRoot(document.body).render(
  <Provider store={store} metrics={metrics}>
    <p>
      Count: <MetricView metricId="count" />
      <br />
      Average: <MetricView metricId="average" />
    </p>
    <TableView tableId="rolls" rowComponent={Roll} />
  </Provider>,
);

To roll the dice, we add a new Row every half second with the result, until the count of rolls reaches 48:

let rolls = 0;
const interval = setInterval(() => {
  if (rolls++ == 48) {
    clearInterval(interval);
  } else {
    store.addRow('rolls', {
      result: Math.ceil(Math.random() * 6),
    });
  }
}, 500);

Add a little styling, and we're done!

@font-face {
  font-family: Inter;
  src: url(https://tinybase.org/fonts/inter.woff2) format('woff2');
}

body {
  font-family: Inter, sans-serif;
  letter-spacing: -0.04rem;
  margin: 0;
}
p {
  margin: 1rem;
}

Next, we will use an IndexView component to group each Row of the Store object based on the value in a Cell within it. Please continue to the Grouping Dice Rolls demo.