Playground

Elements

Errors

<main *set="{ coins: 0, income: 5, built: ['🏛️ Town hall'], build: { selected: 0, progress: 0, time: 0 } }" *mustache>
  <div class="flash accent">
    You have {{ coins }} 🪙<br />
    Last refresh: <time class="muted" *refresh="1" *text="new Date().toISOString().slice(11, 19)" *eval="$refresh && (coins += income)"></time>
  </div>
  <form *set="{ buildings: ['Choose a building', '🏪 Store', '🏬 Mall', '🏟️ Stadium', '🏯 Castle'] }">
    <label>
      ⛏️ Mine
      <small>Click on the button to get coins.</small>
      <button @click.prevent="coins++">Become rich!</button>
    </label>
    <label>
      🛠️ Build
      <small>Create buildings to generate passive income.</small>
      <select ::.number="build.selected" :disabled="build.progress" @::="build.time = 1 + (build.selected ** 2)">
        <option *for="buildings" :value="$i">{{ $value }}</option>
      </select>
    </label>
    <section *if="build.selected">
      <table class="width">
        <tr>
          <th>🪙/s</th>
          <td>+{{ build.selected }}</td>
        </tr>
        <tr>
          <th>🕐</th>
          <td>{{ build.time }}s</td>
        </tr>
      </table>
      <button *if="!build.progress" @click.prevent="build.progress = 1">Build it!</button>
      <progress *else *refresh="1" :value="build.progress" :max="build.time" *eval="$refresh && (build.progress++ >= build.time && (income += build.selected, built.push(buildings[build.selected]), build.selected = build.progress = 0))"></progress>
    </section>
  </form>
  <div class="flash success">
    <b>You have {{ built.length }} building(s) in your city!</b>
    <br>
    <sub>+ {{ income }} 🪙/s</sub>
    <br>
    {{ built.map(building => [...building][0]).join(' ') }}
  </div>
  <hr>
  <div class="flash muted">
    <b>🧑‍🔬 DEBUG</b>
    <br>
    <small>The table below let you know about the current values used in this example.</small>
    <table *mustache>
      <tr>
        <td><code>coins</code></td>
        <td>{{ coins }}</td>
      </tr>
      <tr>
        <td><code>income</code></td>
        <td>{{ income }}</td>
      </tr>
      <tr>
        <td><code>built</code></td>
        <td>{{ built }}</td>
      </tr>
      <tr>
        <td><code>build.selected</code></td>
        <td>{{ build.selected }}</td>
      </tr>
      <tr>
        <td><code>build.progress</code></td>
        <td>{{ build.progress }}</td>
      </tr>
      <tr>
        <td><code>build.time</code></td>
        <td>{{ build.time }}</td>
      </tr>
    </table>
  </div>
</main>

Rendering errors originating from mizu.js will be displayed here.
HTML parsing errors or runtime exceptions are not captured.

Instructions

Elements editor

Edit the content and experiment with mizu.js!

Your content is automatically embedded in a <body *mizu> tag, and mizu.js is loaded for you.

Reload the view

Click this button to manually reset and reload the view.

A refresh is automatically triggered after a short delay when you stop typing in the editor.

Rendering errors

Any rendering errors from mizu.js will be displayed here.

HTML parsing errors or runtime exceptions are not captured.