add templates

app/src/atividades/programacao/exemplo2/ui/layout.js

@@ -0,0 +1,34 @@
+import { Constantes, Cores, Fontes } from "./constants.js";
+
+/**
+ * Cria o display de texto da cena.
+ * Retorna a referência ao Phaser.Text de saída para ser atualizado pela cena.
+ *
+ * @param {Phaser.Scene} scene
+ * @returns {Phaser.GameObjects.Text}
+ */
+export function montarDisplay(scene) {
+  const { LARGURA, ALTURA } = Constantes;
+  const cx = LARGURA / 2;
+  const cy = ALTURA / 2;
+
+  // Fundo escuro
+  scene.add.rectangle(cx, cy, LARGURA, ALTURA, Cores.FUNDO).setDepth(0);
+
+  // Painel com borda sutil
+  scene.add
+    .rectangle(cx, cy, LARGURA - 40, ALTURA - 70, Cores.PAINEL)
+    .setStrokeStyle(1, Cores.BORDA)
+    .setDepth(1);
+
+  // Label "Saída:"
+  scene.add.text(30, 18, "Saída:", Fontes.LABEL).setDepth(2);
+
+  // Texto de saída — começa vazio, atualizado por imprimir()
+  const textoDisplay = scene.add
+    .text(cx, cy, "", { ...Fontes.SAIDA, align: "center" })
+    .setOrigin(0.5, 0.5)
+    .setDepth(2);
+
+  return textoDisplay;
+}