blocks/playground.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ascended Cat blocks playground</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../utils/common.css">
    <link rel="stylesheet" href="./blocks.css">

    <style>
      html, body {
        height: 100%;
      }
      body {
        margin: 0;
        font-size: 0;
        overflow: hidden;
        display: flex;
        background-color: black;
        color: white;
        font-family: 'Lato', sans-serif;
      }

      #controls button {
        font-size: 14px;
        border: 1px solid rgba(255, 255, 255, 0.3);
      }
      #controls button:disabled {
        border-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.5);
      }
      .palette-wrapper {
        display: flex;
        flex-direction: column;
        width: 200px;
        flex: none;
        background-color: #282828;
      }
      #categories {
        flex: none;
        background-color: #333;
        max-height: 300px;
        overflow: auto;
      }
      #palette {
        flex: auto;
      }
      #scripts {
        flex: auto;
        background-color: #222;
      }

      .context-menu {
        position: fixed;
        padding: 5px 0;
        background-color: rgba(30, 30, 30, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.2);
        white-space: pre;
      }
      .context-menu-option {
        display: block;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        padding: 0 15px;
      }
      [dir=rtl] .context-menu-option {
        text-align: right;
      }
      .context-menu-option:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }
      .context-menu-separator {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin: 5px 0;
      }

      .block-back {
        stroke: rgba(0, 0, 0, 0.2);
      }
      [data-category="nonexistent"] {
        --colour: red;
      }
      [data-category="test"] {
        --colour: #6AB6BC;
      }
      [data-category="motion"] {
        --colour: #6A92BC;
      }
      [data-category="control"] {
        --colour: #bdb16a;
      }
      [data-category="operators"] {
        --colour: #6ABC88;
      }

      .block-block {
        cursor: grab;
      }
      .block-block > .block-text-component {
        text-shadow: 0 0 2px black;
        font-size: 12px;
        fill: white;
      }
      .block-string-input:not(.block-input-has-block),
      .block-number-input:not(.block-input-has-block) {
        cursor: text;
      }
      .block-string-input > .block-input-back,
      .block-number-input > .block-input-back {
        stroke: rgba(0, 0, 0, 0.2);
        fill: white;
      }
      .block-input-value,
      .block-input {
        font-size: 10px;
        fill: #222;
        color: #222;
        text-align: center;
      }
      .block-boolean-input > .block-input-back {
        fill: rgba(0, 0, 0, 0.1);
        stroke: rgba(0, 0, 0, 0.2);
      }
      .block-boolean-input > .block-input-value {
        visibility: hidden;
      }
      .block-only-menu {
        cursor: pointer;
      }
      .block-only-menu > .block-text-component {
        text-shadow: 0 0 2px black;
        fill: white;
      }
      .block-only-menu > .block-input-back {
        fill: rgba(0, 0, 0, 0.1);
        stroke: rgba(0, 0, 0, 0.2);
      }
      .block-input:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
      }
      .block-string-input {
        padding: 2px 0;
      }
      .block-number-input {
        padding: 2px 0;
        border-radius: 20px;
      }
      .block-menu-arrow {
        cursor: pointer;
        pointer-events: visible;
      }
      .block-menu-arrow-path {
        fill: rgba(0, 0, 0, 0.7);
      }
      .block-menu {
        padding-right: 12px;
      }
      /* Or :dir(rtl)? */
      [dir=rtl] .block-menu {
        padding-right: 0;
        padding-left: 12px;
      }

      .block-category {
        border-left: 2px solid var(--colour);
        font-size: 14px;
        cursor: pointer;
        user-select: none;
        color: white;
        padding: 1px 10px;
      }
      .block-selected-category {
        cursor: default;
        background-color: rgba(255, 255, 255, 0.2);
        padding-left: 5px;
        border-left-width: 7px;
      }

      .fat-blocks .block-input-value,
      .fat-blocks .block-input {
        font-size: 12px;
        fill: #575E75;
        color: #575E75;
      }

      .block-category-header .block-text-component {
        fill: var(--colour);
        font-size: 14px;
      }
      .block-category-header-line {
        stroke: rgba(255, 255, 255, 0.3);
        stroke-width: 1.5;
      }
    </style>
  </head>
  <body>
    <div id="controls">
      <button id="toggle-lang">Toggle language</button>
      <br><button id="toggle-dir">Toggle dir</button>
      <br><button id="toggle-fat">Toggle fatness</button>
      <br><button id="sprinkles">Sprinkles!</button>
      <br><button id="spaghetti">Spaghetti!</button>
      <br><button id="undo" disabled>Undo</button><button id="redo" disabled>Redo</button>
      <br><button id="out">Zoom out</button><button id="in">Zoom in</button>
    </div>
    <div class="palette-wrapper">
      <div id="categories"></div>
      <div id="palette"></div>
    </div>
    <div id="scripts"></div>
    <script type="module">
import { Blocks } from './blocks.js'
import { PaletteCategories } from './palette-categories.js'

const specA = {
  id: 'test',
  name: 'Test',
  blocks: [
    {
      opcode: 'test',
      blockType: Blocks.BlockType.COMMAND,
      text: 'when the hat does [ESTOS][ESOS][AQUELLOS]',
      hat: true,
      arguments: {
        ESTOS: {
          type: Blocks.ArgumentType.STRING,
          menu: ['apples', 'bananas', 'chocolates']
        },
        ESOS: {
          type: Blocks.ArgumentType.NUMBER,
          menu: '#numbers'
        },
        AQUELLOS: {
          menu: 'test'
        }
      }
    },
    {
      opcode: 'branch',
      blockType: Blocks.BlockType.COMMAND,
      text: 'branchu [WOW]: [B1] or [B2]',
      terminal: true,
      arguments: {
        WOW: {
          type: Blocks.ArgumentType.STRING,
          default: 'Hmm!'
        },
        B1: {
          type: Blocks.ArgumentType.BRANCH
        },
        B2: {
          type: Blocks.ArgumentType.BRANCH
        }
      }
    },
    {
      opcode: 'join',
      blockType: Blocks.BlockType.REPORTER,
      text: 'join [A] [B]',
      arguments: {
        A: {
          type: Blocks.ArgumentType.STRING,
          default: 'Hello '
        },
        B: {
          type: Blocks.ArgumentType.STRING,
          default: 'world!'
        }
      }
    },
    {
      opcode: 'not',
      blockType: Blocks.BlockType.BOOLEAN,
      text: 'not [TEST]',
      arguments: {
        TEST: {
          type: Blocks.ArgumentType.BOOLEAN
        }
      }
    },
    {
      opcode: 'repeatUntil',
      blockType: Blocks.BlockType.COMMAND,
      text: 'repeat until [CONDITION][LOOP]',
      arguments: {
        CONDITION: {
          type: Blocks.ArgumentType.BOOLEAN
        },
        LOOP: {
          type: Blocks.ArgumentType.BRANCH
        }
      }
    },
    '---',
    {
      opcode: 'test01',
      blockType: Blocks.BlockType.BOOLEAN,
      text: '[A][B]',
      arguments: {
        A: { type: Blocks.ArgumentType.STRING },
        B: { type: Blocks.ArgumentType.NUMBER }
      }
    },
    {
      opcode: 'test02',
      blockType: Blocks.BlockType.BOOLEAN,
      text: 'tada[B]',
      arguments: {
        B: { type: Blocks.ArgumentType.BOOLEAN }
      }
    },
    {
      opcode: 'test03',
      blockType: Blocks.BlockType.REPORTER,
      text: '[A][B]',
      arguments: {
        A: { type: Blocks.ArgumentType.STRING },
        B: { type: Blocks.ArgumentType.NUMBER }
      }
    },
    {
      opcode: 'test04',
      blockType: Blocks.BlockType.REPORTER,
      text: 'tada[B]',
      arguments: {
        B: { type: Blocks.ArgumentType.BOOLEAN }
      }
    },
    {
      opcode: 'test05',
      blockType: Blocks.BlockType.COMMAND,
      text: '[A][B]',
      arguments: {
        A: { type: Blocks.ArgumentType.STRING },
        B: { type: Blocks.ArgumentType.NUMBER }
      }
    },
    {
      opcode: 'test06',
      blockType: Blocks.BlockType.COMMAND,
      text: 'tada[B]',
      arguments: {
        B: { type: Blocks.ArgumentType.BOOLEAN }
      }
    },
    {
      opcode: 'test08',
      blockType: Blocks.BlockType.COMMAND,
      text: '[B]',
      arguments: {
        B: { type: Blocks.ArgumentType.BRANCH }
      }
    },
    {
      opcode: 'test09',
      blockType: Blocks.BlockType.REPORTER,
      text: ''
    },
    {
      opcode: 'test10',
      blockType: Blocks.BlockType.BOOLEAN,
      text: ''
    },
    {
      opcode: 'test11',
      blockType: Blocks.BlockType.COMMAND,
      text: ''
    }
  ],
  menus: {
    numbers: () => {
      const arr = []
      for (let i = 0; i < 10; i++) {
        arr.push(Math.random() * 100 | 0)
      }
      return arr
    }
  },
  translationMap: {
    ar: {
      '__name__': '!sgo8iu Ñsdf e è dsfg u ondu   .',
      'repeatUntil': 'hato [LOOP] et [CONDITION]',
      'not': '[TEST]n\'t',
      'add': '+ [A] [B]',
      'join': '+ [B] [A]',
      'join.A_default': 'Ooogoo',
      'join.B_default': '\\',
      'branch': 'dsfug idsfg [B2] [WOW] [B1]',
      'test': '.'
    }
  }
}
const specB = {
  id: 'motion',
  name: 'Motion',
  blocks: [
    {
      opcode: 'moveSteps',
      blockType: Blocks.BlockType.COMMAND,
      // branchCount, terminal, (hat?)
      text: 'move [STEPS] steps',
      arguments: {
        STEPS: {
          type: Blocks.ArgumentType.NUMBER,
          default: 10
        }
      }
      // func, filter
    },
    {
      opcode: 'goTo',
      blockType: Blocks.BlockType.COMMAND,
      text: 'go to x: [X] y: [Y] z: [Z]',
      arguments: {
        X: {
          type: Blocks.ArgumentType.NUMBER,
          default: 0 // TODO: Set from current position somehow
        },
        Y: {
          type: Blocks.ArgumentType.NUMBER,
          default: 0
        },
        Z: {
          type: Blocks.ArgumentType.NUMBER,
          default: 0
        }
      }
    },
    {
      opcode: 'glideTo',
      blockType: Blocks.BlockType.COMMAND,
      text: 'glide [TIME] secs to x: [X] y: [Y] z: [Z]',
      arguments: {
        TIME: {
          type: Blocks.ArgumentType.NUMBER,
          default: 1
        },
        X: {
          type: Blocks.ArgumentType.NUMBER,
          default: 0
        },
        Y: {
          type: Blocks.ArgumentType.NUMBER,
          default: 0
        },
        Z: {
          type: Blocks.ArgumentType.NUMBER,
          default: 0
        }
      }
    },
    '---', // Separator
    {
      opcode: 'pointInDirection',
      blockType: Blocks.BlockType.COMMAND,
      text: 'point in direction [ROT_Y] [ROT_X] [ROT_Z]',
      arguments: {
        ROT_X: {
          type: Blocks.ArgumentType.ANGLE,
          default: 0
        },
        ROT_Y: {
          type: Blocks.ArgumentType.ANGLE,
          default: 0
        },
        ROT_Z: {
          type: Blocks.ArgumentType.ANGLE,
          default: 0
        }
      }
    }
  ],
  translationMap: {
    // https://github.com/LLK/scratch-l10n/blob/master/editor/blocks/ar.json
    ar: {
      '__name__': 'الحركة',
      'moveSteps': 'تحرك [STEPS] خطوة',
      'goTo': 'اذهب إلى الموضع س: [X] ص: [Y][Z]',
      'glideTo': 'انزلق خلال [TIME] ثانية إلى الموضع س: [X] ص: [Y][Z]',
      'pointInDirection': 'اتجه نحو الاتجاه [ROT_Y] [ROT_X] [ROT_Z]'
    }
  }
}
const specC = {
  id: 'control',
  name: 'Control',
  blocks: [
    {
      opcode: 'if',
      blockType: Blocks.BlockType.COMMAND,
      text: 'if [CONDITION] then[CHOICE_A]',
      arguments: {
        CONDITION: {
          type: Blocks.ArgumentType.BOOLEAN
        },
        CHOICE_A: {
          type: Blocks.ArgumentType.BRANCH
        }
      },
      alternatives: ['#ifElse']
    },
    {
      opcode: 'ifElse',
      blockType: Blocks.BlockType.COMMAND,
      text: 'if [CONDITION] then[CHOICE_A]else[CHOICE_B]',
      arguments: {
        CONDITION: {
          type: Blocks.ArgumentType.BOOLEAN
        },
        CHOICE_A: {
          type: Blocks.ArgumentType.BRANCH
        },
        CHOICE_B: {
          type: Blocks.ArgumentType.BRANCH
        }
      }
    }
  ],
  translationMap: {
    ar: {
      '__name__': 'الأحداث',
      'if': 'إذا [CONDITION][CHOICE_A]',
      'ifElse': 'إذا [CONDITION][CHOICE_A]وإلا[CHOICE_B]'
    }
  }
}
const specD = {
  id: 'operators',
  name: 'Operators',
  blocks: [
    {
      opcode: 'add',
      blockType: Blocks.BlockType.REPORTER,
      text: '[A] + [B]',
      arguments: {
        A: {
          type: Blocks.ArgumentType.NUMBER
        },
        B: {
          type: Blocks.ArgumentType.NUMBER
        }
      },
      alternatives: ['#subtract', '#multiply', '#divide']
    },
    {
      opcode: 'subtract',
      blockType: Blocks.BlockType.REPORTER,
      text: '[A] - [B]',
      arguments: {
        A: {
          type: Blocks.ArgumentType.NUMBER
        },
        B: {
          type: Blocks.ArgumentType.NUMBER
        }
      },
      alternatives: ['#add', '#multiply', '#divide']
    },
    {
      opcode: 'multiply',
      blockType: Blocks.BlockType.REPORTER,
      text: '[A] * [B]',
      arguments: {
        A: {
          type: Blocks.ArgumentType.NUMBER
        },
        B: {
          type: Blocks.ArgumentType.NUMBER
        }
      },
      alternatives: ['#add', '#subtract', '#divide']
    },
    {
      opcode: 'divide',
      blockType: Blocks.BlockType.REPORTER,
      text: '[A] / [B]',
      arguments: {
        A: {
          type: Blocks.ArgumentType.NUMBER
        },
        B: {
          type: Blocks.ArgumentType.NUMBER
        }
      },
      alternatives: ['#add', '#subtract', '#multiply']
    },
    {
      opcode: 'equals',
      blockType: Blocks.BlockType.BOOLEAN,
      text: '[A] = [B]',
      arguments: {
        A: {
          type: Blocks.ArgumentType.STRING,
          default: ''
        },
        B: {
          type: Blocks.ArgumentType.STRING,
          default: '50'
        }
      },
      alternatives: ['#strictlyEquals']
    },
    {
      opcode: 'strictlyEquals',
      blockType: Blocks.BlockType.BOOLEAN,
      text: 'is [A] exactly [B]?',
      arguments: {
        A: {
          type: Blocks.ArgumentType.STRING,
          default: 'apple'
        },
        B: {
          type: Blocks.ArgumentType.STRING,
          default: 'APPLE'
        }
      },
      alternatives: ['#equals']
    }
  ],
  translationMap: {
    ar: {
      '__name__': 'العمليات',
      'equals': '[A] = [B]'
    }
  }
}

const blocks = new Blocks([specA])
// Add categories
blocks.addCategory(specB)
blocks.addCategory(specC)
blocks.addCategory(specD)
blocks.menus.test = ['happy', 'wow', 'clunk']
blocks.addTranslations('ar', [
  ['_.undefinedBlock', '؟؟؟'],
  ['_.duplicate', 'مضاعفة'],
  ['_.delete', 'حذف اللبنة'],
  ['_.addComment', 'إضافة تعليق']
])

blocks.on('script-click', console.log)

const palette = blocks.createPaletteWorkspace(document.getElementById('palette'), [specB])
const paletteCategories = new PaletteCategories(palette, document.getElementById('categories'))
palette.blockOrder.push(specC, specD, specA)
palette.updateBlockOrder().filter()

const scripts = blocks.createScriptsWorkspace(document.getElementById('scripts'))

const stack = blocks.createScript([
  blocks.createBlock('test.test'),
  blocks.createBlock('test.branch', {
    WOW: blocks.createBlock('test.join', {
      A: blocks.createBlock('operators.add'),
      B: blocks.createBlock('test.join')
    }),
    B1: [
      blocks.createBlock('motion.moveSteps', {
        STEPS: blocks.createBlock('test.not')
      }),
      blocks.createBlock('motion.moveSteps')
    ]
  })
])
stack.setPosition(10, 30)
scripts.add(stack)
// Doing these calculations will likely require a repaint, so instead of
// synchronously causing one, we should just asynchronously wait until the
// browser does it automatically (the next frame).
window.requestAnimationFrame(() => {
  blocks.updateRects()
  stack.resize()
})
window.addEventListener('resize', e => {
  blocks.updateRects()
})

document.getElementById('toggle-lang').addEventListener('click', e => {
  if (blocks.language === 'ar') {
    blocks.setLanguage()
  } else {
    blocks.setLanguage('ar')
  }
  palette.updateBlockOrder().filter()
  blocks.resizeAll()
})
document.getElementById('toggle-dir').addEventListener('click', e => {
  if (document.documentElement.dir === 'rtl') {
    document.documentElement.dir = 'ltr'
    blocks.dir = 'ltr'
  } else {
    document.documentElement.dir = 'rtl'
    blocks.dir = 'rtl'
  }
  blocks.updateRects()
  blocks.resizeAll()
})

const defaultBlockRenderOptions = Object.entries(Blocks.blockRenderOptions)
const defaultInputRenderOptions = Object.entries(Blocks.inputRenderOptions)
const defaultPaletteRenderOptions = Object.entries(Blocks.paletteRenderOptions)
let fat = false
document.getElementById('toggle-fat').addEventListener('click', e => {
  document.body.classList.toggle('fat-blocks')
  fat = !fat
  if (fat) {
    const block = Blocks.blockRenderOptions
    block.stackMinWidth = 34
    block.stackMinHeight = 22
    block.stackHorizPadding = 6
    block.stackVertPadding = 5
    block.notchLeft = 10
    block.notchWallWidth = 6
    block.notchWidth = 11
    block.notchHeight = 5
    const input = Blocks.inputRenderOptions
    input.stringHeight = 22
    input.stringMinWidth = 26
    input.numberHeight = 22
    input.numberMinWidth = 26
    input.booleanHeight = 22
    input.booleanWidth = 30
    input.booleanSide = 10
    input.reporterConnectionLeft = 18
    const palette = Blocks.paletteRenderOptions
    palette.blockSpace = 12
  } else {
    for (const [prop, value] of defaultBlockRenderOptions) {
      if (!Object.getOwnPropertyDescriptor(Blocks.blockRenderOptions, prop).get) {
        Blocks.blockRenderOptions[prop] = value
      }
    }
    for (const [prop, value] of defaultInputRenderOptions) {
      if (!Object.getOwnPropertyDescriptor(Blocks.inputRenderOptions, prop).get) {
        Blocks.inputRenderOptions[prop] = value
      }
    }
    for (const [prop, value] of defaultPaletteRenderOptions) {
      if (!Object.getOwnPropertyDescriptor(Blocks.paletteRenderOptions, prop).get) {
        Blocks.paletteRenderOptions[prop] = value
      }
    }
  }
  blocks.resizeAll()
})

const undoBtn = document.getElementById('undo')
const redoBtn = document.getElementById('redo')
undoBtn.addEventListener('click', e => {
  blocks.undo()
})
redoBtn.addEventListener('click', e => {
  blocks.redo()
})
blocks.on('undo-redo-available', (undo, redo) => {
  undoBtn.disabled = !undo
  redoBtn.disabled = !redo
})

document.getElementById('out').addEventListener('click', e => {
  let { scale } = scripts.transform
  scale /= 1.25
  scripts.zoomTo(scale)
  blocks.setDragZoom(scale)
})
document.getElementById('in').addEventListener('click', e => {
  let { scale } = scripts.transform
  scale *= 1.25
  scripts.zoomTo(scale)
  blocks.setDragZoom(scale)
})

// Based on scratch-blocks:
// https://sheeptester.github.io/scratch-blocks/playgrounds/tests/vertical_playground.html
document.getElementById('sprinkles').addEventListener('click', e => {
  const count = 100
  const allOpcodes = Object.entries(blocks.categories)
    .map(([id, blocks]) => Object.keys(blocks).map(opcode => `${id}.${opcode}`))
    .flat()
  console.time('Sprinkles: Adding to DOM (no resizing)')
  for (let i = 0; i < count; i++) {
    const script = blocks.createScript([
      blocks.createBlock(allOpcodes[Math.random() * allOpcodes.length | 0])
    ])
    script.setPosition(
      Math.round(Math.random() * 450 + 40),
      Math.round(Math.random() * 600 + 40)
    )
    scripts.add(script)
    script.resize()
  }
  console.timeEnd('Sprinkles: Adding to DOM (no resizing)')
})
document.getElementById('spaghetti').addEventListener('click', e => {
  const depth = 3
  const equalsJSON = JSON.stringify({
    opcode: 'operators.equals',
    params: { A: 'foo', B: 'REPLACE_EQ' }
  })
  const ifElseJSON = JSON.stringify({
    opcode: 'control.ifElse',
    params: { CONDITION: 'REPLACE_COND', CHOICE_A: 'REPLACE_!', CHOICE_B: 'REPLACE_!' }
  })
  let json = `[${ifElseJSON},"NEXT"]`
  // Nest if-elses
  for (let i = 0; i < depth * 2; i++) {
    json = json.replace(/"REPLACE_!"/g, `[${ifElseJSON},"NEXT"]`)
  }
  // Add more blocks to the end of each
  for (let i = 0; i < depth; i++) {
    json = json.replace(/"NEXT"/g, `${ifElseJSON},"NEXT"`)
  }
  // Nest equals
  let equals = equalsJSON
  for (let i = 0; i < depth; i++) {
    equals = equals.replace(/"REPLACE_EQ"/g, equalsJSON)
  }
  // Insert equals
  json = json.replace(/"REPLACE_COND"/g, equals)
    // Remove leftover placeholders
    .replace(/"REPLACE_!"/g, '[]')
    .replace(/,?"NEXT"/g, '')
    .replace(/"REPLACE_EQ"/g, '""')
  console.time('Spaghetti: Adding to DOM (no resizing)')
  const script = blocks.scriptFromJSON({
    x: 0,
    y: 0,
    blocks: JSON.parse(json)
  })
  scripts.add(script)
  console.timeEnd('Spaghetti: Adding to DOM (no resizing)')
  console.time('Spaghetti: Resizing')
  script.resize()
    .then(() => {
      console.timeEnd('Spaghetti: Resizing')
    })
})

window.scripts = scripts
    </script>
  </body>
</html>