block-code-clone/main.js at main · Fa3ris/block-code-clone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { attachListeners, nodeToBlock } from "./block.js";
import { addEl } from "./dom-utils.js";
import { run } from "./eval.js";

const program = {
  action: "program",
  statements: [
    {
      action: "defVar",
      value: 1,
      name: "x",
    },
    {
      action: "repeat",
      value: 10,
      statements: [
        {
          action: "forward",
          value: 12,
          type: "steps",
        },
        {
          action: "left",
          value: 33,
          type: "degrees",
        },

        {
          action: "op2",
          op1: "x",
          operator: "+",
          op2: 1,
        },
        {
          action: "if",
          condition: {
            action: "comparison",
            op1: "x",
            operator: ">",
            op2: 10,
          },
          thenStatements: [
            {
              action: "op2",
              op1: "x",
              operator: "+",
              op2: 1,
            },
          ],
          elseStatements: [
            {
              action: "if",
              condition: {
                action: "comparison",
                op1: "x",
                operator: "<",
                op2: 7,
              },
              thenStatements: [
                {
                  action: "op2",
                  op1: "x",
                  operator: "+",
                  op2: 4,
                },
              ],
              elseStatements: [],
            },
          ],
        },
      ],
    },
  ],
};

const programBlock = nodeToBlock(program);

const pgContainer = document.body.querySelector(".program-container");
const menuContainer = document.body.querySelector(".menu-items");

attachListeners(programBlock, menuContainer, (block) =>
  requestAnimationFrame(() => run(block))
);
addEl(programBlock, pgContainer);

["repeat", "left", "forward", "defVar", "op2", "if"].forEach((b) => {
  addEl(nodeToBlock(b), menuContainer);
});

requestAnimationFrame(() => run(programBlock));