From 87435b41417c88688a3e5fad9e37abc4054a4d7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Tue, 1 Feb 2022 09:28:52 -0300
Subject: [PATCH] feat (museum): share business

---
 .../public/player/case/index-gallery.html     | 165 ++++++++++++++++
 .../play/gallery/cell/economy-sliders.js      | 177 ++++++++++++++++++
 .../gallery/cell/economy-sliders.js           | 177 ++++++++++++++++++
 3 files changed, 519 insertions(+)
 create mode 100644 src/adonisjs/public/player/case/index-gallery.html
 create mode 100644 src/adonisjs/public/report/category/cases/play/gallery/cell/economy-sliders.js
 create mode 100644 src/adonisjs/public/scripts/playground/gallery/cell/economy-sliders.js
diff --git a/src/adonisjs/public/player/case/index-gallery.html b/src/adonisjs/public/player/case/index-gallery.html
new file mode 100644
index 00000000..c0afbe3b
--- /dev/null
+++ b/src/adonisjs/public/player/case/index-gallery.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="utf-8"/>
+  <title>Player || Harena Environment</title>
+
+  <link rel="stylesheet" href="/player/css/player.css">
+
+  <link rel="stylesheet" href="/author/css/author.css">
+
+  <script src="/lib/axios-0.21.0/axios.min.js"></script>
+
+  <script src="/lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
+  <script src="/lib/popper-1-15-0/popper.min.js"></script>
+  <script src="/lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
+
+  <script src="/config/config.js"></script>
+  <script src="/infra/bus.js"></script>
+  <script src="/infra/basic.js"></script>
+  <script src="/infra/dcc-common-server-proxy.js"></script>
+  <script src="/infra/dcc-common-server-address.js"></script>
+  <script src="/infra/simple-page-tasks.js"></script>
+  <script src="/infra/token-validator.js"></script>
+
+  <script>
+  Basic.service.rootPath = '../../'
+  </script>
+
+  <script src="/dccs/base/primitive-dcc.js"></script>
+  <script src="/dccs/base/scope-dcc.js"></script>
+  <script src="/dccs/base/dcc.js"></script>
+  <script src="/dccs/base/dcc-base.js "></script>
+  <script src="/dccs/base/dcc-visual.js "></script>
+  <script src="/dccs/base/dcc-block.js"></script>
+  <script src="/dccs/base/dcc-light.js "></script>
+
+  <script src="/dccs/components/visual/dcc-button.js"></script>
+  <script src="/dccs/components/visual/dcc-notice-input.js"></script>
+
+  <script src="/dccs/components/web/dcc-rest.js"></script>
+  <script src="/dccs/components/web/dcc-include.js"></script>
+  <script src="/dccs/components/web/dcc-dhtml.js"></script>
+
+  <script src="/dccs/components/data/dcc-submit.js"></script>
+  <script src="/dccs/components/data/dcc-model.js"></script>
+  <script src="/dccs/components/data/dcc-record.js"></script>
+
+  <script src="/dccs/base/subscribe-dcc.js"></script>
+  <script src="/dccs/base/trigger-dcc.js"></script>
+  <script src="/dccs/base/property-dcc.js"></script>
+  <script src="/dccs/base/connect-dcc.js"></script>
+
+
+  <script src="/infra/dcc-rest-proxy.js"></script>
+  <script src="/infra/dcc-basic.js"></script>
+  <script src="/infra/dcc-logger.js"></script>
+  <script src="/infra/dcc-logger-manager.js"></script>
+
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="shortcut icon" href="/icons/favicon.ico">
+  <link rel="manifest" href="/site.webmanifest">
+
+  <link rel="stylesheet" href="/lib/fontawesome-5-10-1/css/all.min.css">
+  <link rel="stylesheet" href="/lib/bootstrap-4.4.1/css/bootstrap.min.css">
+
+  <link rel="stylesheet" href="/dccs/css/dccs.css">
+  <link rel="stylesheet" href="/dccs/css/properties.css">
+  <link rel="stylesheet" href="/infra/css/common-player.css">
+  <link rel="stylesheet" href="/infra/css/common-author.css">
+
+  <script src="/author/js/dcc-author-server-proxy.js"></script>
+
+  <script src="/author/js/create.js"></script>
+  <script src="/author/js/template-case.js"></script>
+  <script src="/author/js/draft.js"></script>
+
+  <script src="/context/context.js"></script>
+
+  <script src="/dccs/components/control/dcc-timer.js"></script>
+  <script src="/dccs/components/control/dcc-compute.js"></script>
+  <script src="/dccs/components/control/dcc-message.js"></script>
+
+  <script src="/dccs/components/visual/dcc-markdown.js"></script>
+  <script src="/dccs/components/visual/dcc-annotation.js"></script>
+  <script src="/dccs/components/visual/dcc-expression.js"></script>
+  <script src="/dccs/components/visual/dcc-character.js"></script>
+  <script src="/dccs/components/visual/dcc-lively-dialog.js"></script>
+  <script src="/dccs/components/visual/dcc-state-select.js"></script>
+  <script src="/dccs/components/visual/dcc-image-marker.js"></script>
+  <script src="/dccs/base/dcc-styler.js"></script>
+  <script src="/dccs/components/visual/dcc-entity.js"></script>
+  <script src="/dccs/components/visual/dcc-input.js"></script>
+  <script src="/dccs/components/visual/dcc-input-typed.js"></script>
+  <script src="/dccs/components/visual/dcc-input-choice.js"></script>
+  <script src="/dccs/components/visual/dcc-input-table.js"></script>
+  <script src="/dccs/components/visual/dcc-input-summary.js"></script>
+  <script src="/dccs/components/visual/dcc-slider.js"></script>
+  <script src="/dccs/components/visual/dcc-report.js"></script>
+
+  <!-- bundle cellular -->
+  <script src="/dccs/components/cell/dcc-space-cellular.js"></script>
+  <script src="/dccs/components/cell/dcc-cell.js"></script>
+  <script src="/dccs/components/cell/dcc-cell-color.js"></script>
+  <script src="/dccs/components/cell/dcc-cell-image.js"></script>
+  <script src="/dccs/components/cell/dcc-cell-ruler.js"></script>
+  <script src="/dccs/components/cell/rule-dcc-cell.js"></script>
+  <script src="/dccs/components/cell/rule-dcc-cell-transition.js"></script>
+  <script src="/dccs/components/cell/rule-dcc-cell-neighbor.js"></script>
+  <script src="/dccs/components/cell/rule-dcc-cell-expression.js"></script>
+
+  <script src="/lib/showdown/showdown.min.js"></script>
+
+  <script src="/translator/translator.js"></script>
+  <script src="/translator/item-templates.js"></script>
+
+  <script src="/player/js/dcc-player-server-proxy.js"></script>
+  <script src="/player/js/htracker.js"></script>
+  <script src="/player/js/state.js"></script>
+  <script src="/player/js/metaplayer.js"></script>
+  <script src="/player/js/player.js"></script>
+  <script src="/player/js/caselist.js"></script>
+
+  <script>
+    async function toGallery () {
+      console.log("para galeria")
+      const space = await MessageBus.i.request('dcc-space-cellular/request/state')
+      console.log('=== space')
+      const caseId = new URL(document.location).searchParams.get('id')
+      console.log(caseId)
+      console.log(space)
+      if (caseId != null)
+        MessageBus.i.publish('case/summary/' + Basic.service.generateUID(),
+          {
+            caseId: caseId,
+            participantName: document.querySelector('#participant-name').value,
+            state: space.message
+          }, true)
+    }
+  </script>
+</head>
+  <body onload="PlayerManager.player.startPlayer()">
+  <!-- <div class="d-flex flex-column vh-100 vw-100 hidden-overflow"> -->
+
+    <dcc-rest id="harena-create-logger" bind="harena-create-logger" subscribe="logger/create/post"></dcc-rest>
+    <main role="main">
+      <div id="main-panel" class="d-flex flex-column vh-100 vw-100 scroll-y index-boot-padding">
+        <dcc-rest id="harena-case" bind="harena-case" subscribe="service/request/get"></dcc-rest>
+        <div class="mr-auto author-breadcrumb" id="preview-panel">
+        <!-- <div class="sty-preview-panel" id="preview-panel"> -->
+          <nav aria-label="breadcrumb">
+            <ol id="breadcrumb-group" class="breadcrumb">
+              Nome: <input id="participant-name" type="text">
+              <li class="breadcrumb-item" onclick="toGallery()" style="cursor:pointer;font-size:16px">Para Galeria</li>
+            </ol>
+          </nav>
+        </div>
+        <div id="player-panel" style="border-color: #004270; border-radius: 9px;	border-style: solid;	border-width: 13px;	border-bottom-width: 30px">
+        </div>
+      </div>
+    </main>
+  <!-- </div> -->
+</body>
+</html>
diff --git a/src/adonisjs/public/report/category/cases/play/gallery/cell/economy-sliders.js b/src/adonisjs/public/report/category/cases/play/gallery/cell/economy-sliders.js
new file mode 100644
index 00000000..5c62c11d
--- /dev/null
+++ b/src/adonisjs/public/report/category/cases/play/gallery/cell/economy-sliders.js
@@ -0,0 +1,177 @@
+(function () {
+  AuthorCellManager.instance.insertSource(
+    'Simulando Vírus',
+    [],
+`<block type="neighbor"></block>
+<block type="action"></block>`,
+`<dcc-space-cellular-editor id="cellular-space" rows="14" cols="20"
+  cell-width="32" cell-height="32" background-color="#ebeba2" grid>
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+</dcc-space-cellular-editor>
+
+
+<dcc-cell-image type="." label="sand" image="https://mc-unicamp.github.io/oficinas/simula/business/image/cell-yellow-green-black.png"></dcc-cell-image>
+
+<dcc-cell-image type="h" label="healthy" image="https://mc-unicamp.github.io/oficinas/simula/business/image/icecream-cart-green.png"></dcc-cell-image>
+<dcc-cell-image type="v" label="vaccinated" image="https://mc-unicamp.github.io/oficinas/simula/business/image/beach-umbrella.png"></dcc-cell-image>
+<dcc-cell-image type="d" label="disease" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk.png"></dcc-cell-image>
+<dcc-cell-image type="r" label="recovered" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk-woman.png"></dcc-cell-image>
+<dcc-cell-image type="n" label="nurse" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk-woman-icecream.png"></dcc-cell-image>
+<dcc-cell-image type="g" label="ghost" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk-men-icecream.png"></dcc-cell-image>
+<dcc-cell-image type="w" label="wall" image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/cell/waves.svg"></dcc-cell-image>
+<dcc-cell-image type="t" label="tombstone" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk.png"></dcc-cell-image>
+
+
+<rule-dcc-cell-pair id="icecream"  label="icecream sold" probability="80" transition="hd>hg"
+                    topic="icecream/sold">
+   _*_
+   *_*
+   _*_
+</rule-dcc-cell-pair>
+
+<rule-dcc-cell-pair id="contagion" label="contagion" probability="40" transition="d.>.d">
+   ***
+   *_*
+   ***
+</rule-dcc-cell-pair>
+<rule-dcc-cell-pair id="recovered" label="recovered" probability="50" transition="g.>.d">
+   ***
+   *_*
+   ***
+</rule-dcc-cell-pair>
+
+
+<dcc-compute expression='sold:=0' active></dcc-compute>
+<dcc-compute expression='sold:=sold+1' subscribe="icecream/sold:update"></dcc-compute>
+<dcc-compute expression='stop:=1' condition="sold>=500" active></dcc-compute>
+
+<dcc-compute expression='price:=8' autorun></dcc-compute>
+<dcc-compute expression='probv:=80-(7*price)'  subscribe="input/changed/price:var/price" active></dcc-compute>
+
+<dcc-compute expression='behaviour:=80' autorun></dcc-compute>
+<dcc-compute expression='probb:=behaviour'  subscribe="input/changed/behaviour:var/behaviour" active></dcc-compute>
+<dcc-compute expression='prob:=0.6*probv+0.4*probb-10'  active></dcc-compute>
+
+
+
+<dcc-compute expression='single_cost:=2' autorun></dcc-compute>
+<dcc-compute expression='income:=0' active></dcc-compute>
+<dcc-compute expression='income:=price*sold' subscribe="icecream/sold:update"></dcc-compute>
+<dcc-compute expression='cost:=0' active></dcc-compute>
+<dcc-compute expression='cost:=single_cost*sold' subscribe="icecream/sold:update"></dcc-compute>
+<dcc-compute expression='profit:=0' active></dcc-compute>
+<dcc-compute expression='profit:=income-cost' subscribe="icecream/sold:update"></dcc-compute>
+<dcc-compute expression='unity:=0' active></dcc-compute>
+<dcc-compute expression='unity:=round(profit/sold)' condition='sold>=1' subscribe="icecream/sold:update"></dcc-compute>
+Quantidade Vendida: <dcc-expression expression='sold' active></dcc-expression>
+<br>
+Lucro por sorvete: <dcc-expression expression='unity' active></dcc-expression>
+
+<dcc-timer cycles="100000" interval="250" topic="state/next" >
+   <subscribe-dcc topic="timer/start" map="start"></subscribe-dcc>
+   <subscribe-dcc topic="timer/stop" map="stop"></subscribe-dcc>
+</dcc-timer>
+<div id="operation-panel" class="d-flex col-3" style="background-color:black">
+  <div id="play-button" class="control-button">
+    <dcc-button label="Play" topic="timer/start"
+                 image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/icon/play.svg"></dcc-button>
+  </div>
+  <div id="stop-button" class="control-button">
+    <dcc-button label="Stop" topic="timer/stop"
+                 image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/icon/stop.svg"></dcc-button>
+  </div>
+  <div id="restart-button" class="control-button">
+    <dcc-button label="Restart" topic="state/reset"
+                 image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/icon/restart.svg"></dcc-button>
+  </div>
+  <div id="next-button" class="control-button">
+    <dcc-button label="Next" topic="state/next"
+                 image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/icon/step.svg"></dcc-button>
+  </div>
+</div>
+
+
+
+<subscribe-dcc target="cellular-space" topic="type/#"></subscribe-dcc>
+<subscribe-dcc target="cellular-space" topic="state/next" map="next"></subscribe-dcc>
+<subscribe-dcc target="cellular-space" topic="state/save" map="save"></subscribe-dcc>
+<subscribe-dcc target="cellular-space" topic="state/reset" map="reset"></subscribe-dcc>
+<subscribe-dcc target="cellular-space" topic="input/changed/space_scale" map="scale"></subscribe-dcc>`,
+`Selecione um dos ícones abaixo para editar o ambiente:
+<div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Carrinho Sorvete" topic="type/healthy"
+                  image="https://mc-unicamp.github.io/oficinas/simula/business/image/icecream-cart-green.png">
+      </dcc-button>
+   </div>
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Guarda Sol" topic="type/vaccinated"
+                   image="https://mc-unicamp.github.io/oficinas/simula/business/image/beach-umbrella.png">
+      </dcc-button>
+   </div>
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Pessoa" topic="type/disease"
+                   image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk.png">
+      </dcc-button>
+   </div>
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Mar" topic="type/wall"
+                   image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/cell/waves.svg">
+      </dcc-button>
+   </div>
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Areia" topic="type/empty"
+                   image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/cell/cell-yellow-green.svg">
+      </dcc-button>
+   </div>
+</div>
+<br>
+<hr>
+<div style="flex:48px; max-height:48px; display:flex; flex-direction:row">
+   Preço de venda:
+       <div style="flex:50%; max-height:48px; margin-right:10px">
+      <dcc-slider variable="price" min="1" max="15" value="8" index></dcc-slider>
+   </div>
+</div>
+<br>
+<hr>
+<br>
+<div style="flex:48px; max-height:48px; display:flex; flex-direction:row">
+    Interesse das pessoas por sorvete:
+       <div style="flex:50%; max-height:48px; margin-right:10px">
+      <dcc-slider variable="behaviour" value="80" index></dcc-slider>
+   </div>
+</div>
+
+
+<subscribe-dcc target="contagion" topic="input/changed/contagion" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="icecream" topic="var/set/prob" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="icecream2" topic="input/changed/icecream2" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="contagion-vaccinated" topic="input/changed/contagion_vaccinated" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="contagion-vaccinated" topic="input/changed/contagion_recovered" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="nurse-vaccinate" topic="input/changed/nurse_vaccinate" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="sick-cured" topic="input/changed/sick_cured" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="sick-dies" topic="input/changed/sick_dies" map="probability">
+</subscribe-dcc>`
+  )
+})()
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/economy-sliders.js b/src/adonisjs/public/scripts/playground/gallery/cell/economy-sliders.js
new file mode 100644
index 00000000..5c62c11d
--- /dev/null
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/economy-sliders.js
@@ -0,0 +1,177 @@
+(function () {
+  AuthorCellManager.instance.insertSource(
+    'Simulando Vírus',
+    [],
+`<block type="neighbor"></block>
+<block type="action"></block>`,
+`<dcc-space-cellular-editor id="cellular-space" rows="14" cols="20"
+  cell-width="32" cell-height="32" background-color="#ebeba2" grid>
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+....................
+</dcc-space-cellular-editor>
+
+
+<dcc-cell-image type="." label="sand" image="https://mc-unicamp.github.io/oficinas/simula/business/image/cell-yellow-green-black.png"></dcc-cell-image>
+
+<dcc-cell-image type="h" label="healthy" image="https://mc-unicamp.github.io/oficinas/simula/business/image/icecream-cart-green.png"></dcc-cell-image>
+<dcc-cell-image type="v" label="vaccinated" image="https://mc-unicamp.github.io/oficinas/simula/business/image/beach-umbrella.png"></dcc-cell-image>
+<dcc-cell-image type="d" label="disease" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk.png"></dcc-cell-image>
+<dcc-cell-image type="r" label="recovered" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk-woman.png"></dcc-cell-image>
+<dcc-cell-image type="n" label="nurse" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk-woman-icecream.png"></dcc-cell-image>
+<dcc-cell-image type="g" label="ghost" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk-men-icecream.png"></dcc-cell-image>
+<dcc-cell-image type="w" label="wall" image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/cell/waves.svg"></dcc-cell-image>
+<dcc-cell-image type="t" label="tombstone" image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk.png"></dcc-cell-image>
+
+
+<rule-dcc-cell-pair id="icecream"  label="icecream sold" probability="80" transition="hd>hg"
+                    topic="icecream/sold">
+   _*_
+   *_*
+   _*_
+</rule-dcc-cell-pair>
+
+<rule-dcc-cell-pair id="contagion" label="contagion" probability="40" transition="d.>.d">
+   ***
+   *_*
+   ***
+</rule-dcc-cell-pair>
+<rule-dcc-cell-pair id="recovered" label="recovered" probability="50" transition="g.>.d">
+   ***
+   *_*
+   ***
+</rule-dcc-cell-pair>
+
+
+<dcc-compute expression='sold:=0' active></dcc-compute>
+<dcc-compute expression='sold:=sold+1' subscribe="icecream/sold:update"></dcc-compute>
+<dcc-compute expression='stop:=1' condition="sold>=500" active></dcc-compute>
+
+<dcc-compute expression='price:=8' autorun></dcc-compute>
+<dcc-compute expression='probv:=80-(7*price)'  subscribe="input/changed/price:var/price" active></dcc-compute>
+
+<dcc-compute expression='behaviour:=80' autorun></dcc-compute>
+<dcc-compute expression='probb:=behaviour'  subscribe="input/changed/behaviour:var/behaviour" active></dcc-compute>
+<dcc-compute expression='prob:=0.6*probv+0.4*probb-10'  active></dcc-compute>
+
+
+
+<dcc-compute expression='single_cost:=2' autorun></dcc-compute>
+<dcc-compute expression='income:=0' active></dcc-compute>
+<dcc-compute expression='income:=price*sold' subscribe="icecream/sold:update"></dcc-compute>
+<dcc-compute expression='cost:=0' active></dcc-compute>
+<dcc-compute expression='cost:=single_cost*sold' subscribe="icecream/sold:update"></dcc-compute>
+<dcc-compute expression='profit:=0' active></dcc-compute>
+<dcc-compute expression='profit:=income-cost' subscribe="icecream/sold:update"></dcc-compute>
+<dcc-compute expression='unity:=0' active></dcc-compute>
+<dcc-compute expression='unity:=round(profit/sold)' condition='sold>=1' subscribe="icecream/sold:update"></dcc-compute>
+Quantidade Vendida: <dcc-expression expression='sold' active></dcc-expression>
+<br>
+Lucro por sorvete: <dcc-expression expression='unity' active></dcc-expression>
+
+<dcc-timer cycles="100000" interval="250" topic="state/next" >
+   <subscribe-dcc topic="timer/start" map="start"></subscribe-dcc>
+   <subscribe-dcc topic="timer/stop" map="stop"></subscribe-dcc>
+</dcc-timer>
+<div id="operation-panel" class="d-flex col-3" style="background-color:black">
+  <div id="play-button" class="control-button">
+    <dcc-button label="Play" topic="timer/start"
+                 image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/icon/play.svg"></dcc-button>
+  </div>
+  <div id="stop-button" class="control-button">
+    <dcc-button label="Stop" topic="timer/stop"
+                 image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/icon/stop.svg"></dcc-button>
+  </div>
+  <div id="restart-button" class="control-button">
+    <dcc-button label="Restart" topic="state/reset"
+                 image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/icon/restart.svg"></dcc-button>
+  </div>
+  <div id="next-button" class="control-button">
+    <dcc-button label="Next" topic="state/next"
+                 image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/icon/step.svg"></dcc-button>
+  </div>
+</div>
+
+
+
+<subscribe-dcc target="cellular-space" topic="type/#"></subscribe-dcc>
+<subscribe-dcc target="cellular-space" topic="state/next" map="next"></subscribe-dcc>
+<subscribe-dcc target="cellular-space" topic="state/save" map="save"></subscribe-dcc>
+<subscribe-dcc target="cellular-space" topic="state/reset" map="reset"></subscribe-dcc>
+<subscribe-dcc target="cellular-space" topic="input/changed/space_scale" map="scale"></subscribe-dcc>`,
+`Selecione um dos ícones abaixo para editar o ambiente:
+<div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Carrinho Sorvete" topic="type/healthy"
+                  image="https://mc-unicamp.github.io/oficinas/simula/business/image/icecream-cart-green.png">
+      </dcc-button>
+   </div>
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Guarda Sol" topic="type/vaccinated"
+                   image="https://mc-unicamp.github.io/oficinas/simula/business/image/beach-umbrella.png">
+      </dcc-button>
+   </div>
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Pessoa" topic="type/disease"
+                   image="https://mc-unicamp.github.io/oficinas/simula/business/image/relaxing-walk.png">
+      </dcc-button>
+   </div>
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Mar" topic="type/wall"
+                   image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/cell/waves.svg">
+      </dcc-button>
+   </div>
+   <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
+      <dcc-button label="Areia" topic="type/empty"
+                   image="https://mc-unicamp.github.io/oficinas/simula/contagion/harena/scripts/playground/images/cell/cell-yellow-green.svg">
+      </dcc-button>
+   </div>
+</div>
+<br>
+<hr>
+<div style="flex:48px; max-height:48px; display:flex; flex-direction:row">
+   Preço de venda:
+       <div style="flex:50%; max-height:48px; margin-right:10px">
+      <dcc-slider variable="price" min="1" max="15" value="8" index></dcc-slider>
+   </div>
+</div>
+<br>
+<hr>
+<br>
+<div style="flex:48px; max-height:48px; display:flex; flex-direction:row">
+    Interesse das pessoas por sorvete:
+       <div style="flex:50%; max-height:48px; margin-right:10px">
+      <dcc-slider variable="behaviour" value="80" index></dcc-slider>
+   </div>
+</div>
+
+
+<subscribe-dcc target="contagion" topic="input/changed/contagion" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="icecream" topic="var/set/prob" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="icecream2" topic="input/changed/icecream2" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="contagion-vaccinated" topic="input/changed/contagion_vaccinated" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="contagion-vaccinated" topic="input/changed/contagion_recovered" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="nurse-vaccinate" topic="input/changed/nurse_vaccinate" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="sick-cured" topic="input/changed/sick_cured" map="probability">
+</subscribe-dcc>
+<subscribe-dcc target="sick-dies" topic="input/changed/sick_dies" map="probability">
+</subscribe-dcc>`
+  )
+})()
