\r\n ${InventoryMenu(state, emit)}\r\n ${InventoryItems(state, emit)}\r\n
\r\n `\r\n}\r\n","const DEFAULT_STEP = 0.1\r\nconst CHARACTER_LENGTH = 11\r\nconst html = require('choo/html')\r\n// const Component = require('choo/component')\r\n\r\nfunction map (n, start1, stop1, start2, stop2) {\r\n return ((n - start1) * (stop2 - start2) / (stop1 - start1)) + start2\r\n}\r\n\r\nmodule.exports = function InputSlider (args) {\r\n const {\r\n label,\r\n value = 0,\r\n min = 0,\r\n max = 100,\r\n step = DEFAULT_STEP,\r\n disabled = false,\r\n selected = false,\r\n onInput = () => false,\r\n onChange = () => false\r\n } = args\r\n\r\n this.disabled = disabled\r\n const disabledClass = disabled ? 'disabled' : ''\r\n const selectedClass = selected ? 'selected' : ''\r\n const w = map(value, min, max, 0, 100)\r\n const roundedValue = Math.round(value * 100) / 100\r\n const textFieldWidth = (roundedValue.toString().length) * CHARACTER_LENGTH\r\n return html`\r\n \r\n ${resetButton}\r\n ${volumeSlider}\r\n ${closeButton}\r\n
\r\n ${projectInfo}\r\n
\r\n
\r\n ${backToBrowswerButton}\r\n ${resetButton}\r\n ${volumeSlider}\r\n ${closeButton}\r\n ${shareButton}\r\n ${importButton}\r\n ${exportButton}\r\n
\r\n `\r\n }\r\n return GameScreenElement(\r\n {children: menu}\r\n )\r\n}\r\n","const GameScreen = require('./gamescreen.js')\r\nconst Inventory = require('./inventory.js')\r\nconst MainMenu = require('./mainmenu.js')\r\nmodule.exports = function Screen (state, emit) {\r\n if (state.isMenuOpen) {\r\n return MainMenu(state, emit)\r\n }\r\n\r\n if (state.isInventoryOpen) {\r\n return Inventory(state, emit)\r\n }\r\n\r\n return GameScreen(state, emit)\r\n}\r\n","/**\r\n * Panel\r\n * @module elements/panel\r\n */\r\nconst html = require('choo/html')\r\n\r\nmodule.exports = function Panel (args) {\r\n const {\r\n color = 'purple',\r\n noPadding = false,\r\n children,\r\n size = 'large'\r\n } = args\r\n let paddingClass = ''\r\n if (noPadding) {\r\n paddingClass = 'no-padding'\r\n }\r\n return html`\r\n onChange(i)}\r\n >\r\n `\r\n }\r\n\r\n return html`\r\n \r\n ${items.slice(selectedItem, selectedItem + 1)}\r\n
\r\n ${items.map((item, i) => NavItem(item, i, selectedItem))}\r\n
\r\n
emit('show-glitch-editor')} />\r\n `\r\n })\r\n}\r\n","const html = require('choo/html')\r\nconst PanelElement = require('../elements/panel.js')\r\nconst CarouselElement = require('../elements/carousel.js')\r\nconst CodePanel = require('../components/codepanel.js')\r\nmodule.exports = function GlitchContext (state, emit) {\r\n const glitch = state.availableGlitches.find(\r\n g => g.id === state.selectedGlitchId\r\n )\r\n return [\r\n PanelElement(\r\n {\r\n color: glitch.color,\r\n children: CarouselElement({\r\n selectedItem: state.selectedInfoPage,\r\n items: glitch.info.map(info => html`\r\n \r\n
\r\n
${info.text}
\r\n
\r\n
\r\n
${info.text}
\r\n
\r\n \r\n {\r\n timeInput(0, e)\r\n }}\r\n onclick=${onClick}\r\n />\r\n {\r\n timeInput(1, e)\r\n }}\r\n onclick=${onClick}\r\n />\r\n {\r\n timeInput(2, e)\r\n }}\r\n onclick=${onClick}\r\n />\r\n
\r\n `\r\n}\r\n","const html = require('choo/html')\r\nconst PanelElement = require('../elements/panel.js')\r\nconst CarouselElement = require('../elements/carousel.js')\r\nconst InputOption = require('../elements/inputoption.js')\r\nconst InputText = require('../elements/inputtext.js')\r\nconst InputSlider = require('../elements/inputslider.js')\r\nconst InputSprite = require('../elements/inputsprite.js')\r\nconst InputTime = require('../elements/inputtime.js')\r\nconst Button = require('../elements/button.js')\r\nconst BOOL_OPTIONS = [\r\n { value: 'true', label: 'true' },\r\n { value: 'false', label: 'false' }\r\n]\r\n\r\nconst KEY_OPTIONS = [\r\n {\r\n label: 'left arrow',\r\n value: 'left arrow'\r\n },\r\n {\r\n label: 'right arrow',\r\n value: 'right arrow'\r\n },\r\n {\r\n label: 'up arrow',\r\n value: 'up arrow'\r\n },\r\n {\r\n label: 'down arrow',\r\n value: 'down arrow'\r\n },\r\n {\r\n label: 'space',\r\n value: 'space'\r\n },\r\n {\r\n label: 'w',\r\n value: 'w'\r\n },\r\n {\r\n label: 'a',\r\n value: 'a'\r\n },\r\n {\r\n label: 's',\r\n value: 's'\r\n },\r\n {\r\n label: 'd',\r\n value: 'd'\r\n },\r\n {\r\n label: 'f',\r\n value: 'f'\r\n },\r\n {\r\n label: 'g',\r\n value: 'g'\r\n },\r\n {\r\n label: 'CLICK',\r\n value: 'CLICK'\r\n },\r\n {\r\n label: 'none',\r\n value: 'none'\r\n }\r\n]\r\n\r\nfunction generateListInput (variable, gameVariable, target, state, emit) {\r\n const { input } = gameVariable\r\n const inputs = []\r\n variable.value.forEach((value, index) => {\r\n let label = variable.name\r\n if (index > 0) {\r\n label = null\r\n }\r\n const commonProps = {\r\n ...input,\r\n label,\r\n value,\r\n onChange: () => emit('stop-changing-variable', target, variable),\r\n onInput: e => emit(\r\n 'set-list-value',\r\n target,\r\n variable,\r\n index,\r\n e.target.value\r\n )\r\n }\r\n inputs.push(InputText({\r\n ...commonProps,\r\n disabled: state.selectedVariableId !== null\r\n || state.isMenuOpen,\r\n onKeyDown: e => e.stopPropagation(),\r\n onKeyUp: e => e.stopPropagation()\r\n }))\r\n })\r\n inputs.push(new Button({\r\n text: 'add value',\r\n onClick: () => emit('add-item-to-list', target, variable)\r\n }))\r\n return inputs\r\n}\r\n\r\nfunction generateInputElement (gameVariable, target, state, emit) {\r\n const { input, id } = gameVariable\r\n\r\n const variable = target.variables[id]\r\n if (variable.type === 'list') {\r\n return generateListInput(variable, gameVariable, target, state, emit)\r\n }\r\n function setVariable (value) {\r\n emit('set-variable', target, variable, value)\r\n }\r\n const commonProps = {\r\n ...input,\r\n label: variable.name,\r\n value: variable.value,\r\n disabled: state.selectedVariableId !== null\r\n || state.isMenuOpen,\r\n onChange: () => emit('stop-changing-variable', target, variable),\r\n onInput: e => setVariable(e.target.value)\r\n }\r\n if (input.type === 'slider') {\r\n return InputSlider({ ...commonProps })\r\n }\r\n if (input.type === 'option'\r\n || input.type === 'key'\r\n || input.type === 'boolean') {\r\n let { options } = input\r\n if (input.type === 'key') {\r\n options = KEY_OPTIONS\r\n } else if (input.type === 'boolean') {\r\n options = BOOL_OPTIONS\r\n }\r\n\r\n let selectedItem = options.findIndex(\r\n o => o.value === variable.value\r\n )\r\n if (!selectedItem) {\r\n selectedItem = 0\r\n }\r\n if (options.length === 0) {\r\n return null\r\n }\r\n return InputOption({\r\n ...commonProps,\r\n options,\r\n selectedItem,\r\n onChange: index => {\r\n setVariable(options[index].value)\r\n emit('stop-changing-variable', target, variable)\r\n }\r\n })\r\n }\r\n if (input.type === 'text') {\r\n return InputText({\r\n ...commonProps,\r\n onKeyDown: e => e.stopPropagation(),\r\n onKeyUp: e => e.stopPropagation()\r\n })\r\n }\r\n if (input.type === 'sprite') {\r\n if (state.selectedVariableId === id) {\r\n commonProps.value = 'CLICK ON A SPRITE'\r\n commonProps.disabled = false\r\n }\r\n return InputSprite({\r\n ...commonProps,\r\n onSelect: () => emit('start-setting-sprite-variable', variable.id)\r\n })\r\n }\r\n if (input.type === 'time') {\r\n return InputTime({\r\n ...commonProps,\r\n onInput: e => setVariable(e.target.value),\r\n onKeyDown: e => e.stopPropagation(),\r\n onKeyUp: e => e.stopPropagation()\r\n })\r\n }\r\n return null\r\n}\r\n\r\nfunction paginateInputs (inputs, itemsPerPage) {\r\n const pages = []\r\n let pageIndex = 0\r\n pages[0] = []\r\n for (let i = 0; i < inputs.length; i++) {\r\n if (pages[pageIndex].length === itemsPerPage) {\r\n pageIndex += 1\r\n pages[pageIndex] = []\r\n }\r\n pages[pageIndex].push(inputs[i])\r\n }\r\n\r\n const items = pages.map(p => html`${p}
`)\r\n return items\r\n}\r\n\r\nfunction getExposedVariableWithIds (gameVariables, target) {\r\n return gameVariables.reduce(\r\n (acc, exposedVariable) => {\r\n // Find variable in scratch sprite\r\n const gameVariable = Object.values(target.variables).find(\r\n v => v.name === exposedVariable.variableName\r\n )\r\n // Include the scratch variable id on exposed variable info\r\n if (gameVariable) {\r\n exposedVariable.id = gameVariable.id\r\n acc.push(exposedVariable)\r\n }\r\n return acc\r\n },\r\n []\r\n )\r\n}\r\n\r\nfunction getGlitchVariables (target, glitchApplication, availableGlitches) {\r\n const glitch = availableGlitches.find(\r\n g => g.id === glitchApplication.glitchId\r\n )\r\n const exposedVariables = glitch.exposedVariables.filter(\r\n v => v.spriteName === '$glitch_target'\r\n ).map(\r\n v => ({\r\n ...v,\r\n spriteName: target.sprite.name\r\n })\r\n )\r\n return getExposedVariableWithIds(exposedVariables, target)\r\n}\r\n\r\nfunction getGameVariables (target, projectMetadata, addedParts) {\r\n const exposedVariablesUnfiltered = projectMetadata.exposedVariables\r\n const conditionsNotMet = []\r\n exposedVariablesUnfiltered.forEach(exposedVariable => {\r\n if (exposedVariable.spriteName === target.sprite.name\r\n && exposedVariable.condition) {\r\n const tVar = Object.values(target.variables).find(\r\n v => v.name === exposedVariable.condition.varName\r\n )\r\n if (tVar.value !== exposedVariable.condition.value) {\r\n conditionsNotMet.push(exposedVariable)\r\n }\r\n }\r\n })\r\n\r\n let exposedVariables = exposedVariablesUnfiltered.filter(\r\n v => !conditionsNotMet.includes(v)\r\n )\r\n const selectedPart = addedParts.find(\r\n p => p.spriteName === target.sprite.name\r\n )\r\n if (selectedPart) {\r\n ({ exposedVariables } = selectedPart)\r\n }\r\n if (exposedVariables) {\r\n exposedVariables = exposedVariables.filter(\r\n v => v.spriteName === target.sprite.name\r\n )\r\n } else {\r\n exposedVariables = []\r\n }\r\n return getExposedVariableWithIds(exposedVariables, target)\r\n}\r\n\r\nfunction getAltVariables (target, glitchApplications, availableGlitches) {\r\n if (target.isStage) {\r\n return []\r\n }\r\n const altVars = []\r\n glitchApplications.forEach(glitchApplication => {\r\n const glitch = availableGlitches.find(\r\n g => g.id === glitchApplication.glitchId\r\n )\r\n const exposedVariables = glitch.exposedVariables.filter(\r\n v => v.spriteName === '$other_sprites'\r\n ).map(\r\n v => ({\r\n ...v,\r\n spriteName: target.sprite.name\r\n })\r\n )\r\n exposedVariables.forEach(v => {\r\n if (!altVars.find(altVar => altVar.variableName === v.variableName)) {\r\n altVars.push(v)\r\n }\r\n })\r\n })\r\n\r\n return getExposedVariableWithIds(altVars, target)\r\n}\r\nmodule.exports = function VariablesPanel (state, emit) {\r\n const itemsPerPage = 5\r\n\r\n let target = state.vm.runtime.targets.find(\r\n t => t.id === state.selectedTargetId\r\n )\r\n if (!target) {\r\n target = state.vm.runtime.getTargetForStage()\r\n if (!target) {\r\n return ''\r\n }\r\n }\r\n let color = 'purple'\r\n let variablesToDisplay = []\r\n if (state.selectedGlitchApplicationId) {\r\n const glitchApplication = state.glitchApplications.find(\r\n g => g.id === state.selectedGlitchApplicationId\r\n )\r\n const glitch = state.availableGlitches.find(\r\n g => g.id === glitchApplication.glitchId\r\n );\r\n\r\n ({ color } = glitch)\r\n variablesToDisplay = getGlitchVariables(\r\n target,\r\n glitchApplication,\r\n state.availableGlitches\r\n )\r\n } else {\r\n const spriteVariables = getGameVariables(\r\n target,\r\n state.sceneMetadata,\r\n state.addedParts\r\n )\r\n const altVariables = getAltVariables(\r\n target,\r\n state.glitchApplications,\r\n state.availableGlitches\r\n )\r\n\r\n variablesToDisplay = spriteVariables.concat(altVariables)\r\n }\r\n\r\n const inputs = variablesToDisplay.map(\r\n gameVariable => generateInputElement(gameVariable, target, state, emit)\r\n )\r\n\r\n return PanelElement({\r\n color,\r\n size: state.isFullscreen ? 'fullscreen-large' : 'large',\r\n children: CarouselElement({\r\n selectedItem: state.currentVariablePage,\r\n items: paginateInputs(inputs, itemsPerPage),\r\n disabled: state.selectedVariableId !== null\r\n || state.isMenuOpen,\r\n onChange: state.selectedVariableId ? (\r\n () => false) : index => emit('select-variable-page', index)\r\n })\r\n })\r\n}\r\n","const ButtonIcon = require('../elements/buttonicon.js')\r\nconst PanelElement = require('../elements/panel.js')\r\nconst html = require('choo/html')\r\nmodule.exports = function GlitchDropAreas (state, emit) {\r\n const trash = ButtonIcon({\r\n icon: 'trash',\r\n type: 'tight',\r\n size: 'large',\r\n noIconBackground: true,\r\n onMouseUp: () => emit('drop-to-trash')\r\n })\r\n const dropToAll = ButtonIcon({\r\n icon: 'expand',\r\n type: 'tight',\r\n size: 'large',\r\n noIconBackground: true,\r\n onMouseUp: () => emit('drop-to-all')\r\n })\r\n\r\n const dropZone = html`\r\n \r\n ${trash}\r\n ${dropToAll}\r\n
`\r\n return PanelElement({\r\n color: 'purple',\r\n size: 'small',\r\n noPadding: false,\r\n children: dropZone\r\n })\r\n}\r\n","const ButtonIcon = require('../elements/buttonicon.js')\r\nconst PanelElement = require('../elements/panel.js')\r\nconst html = require('choo/html')\r\nmodule.exports = function SpriteDropAreas (state, emit) {\r\n const trash = ButtonIcon({\r\n icon: 'trash',\r\n type: 'tight',\r\n size: 'large',\r\n noIconBackground: true,\r\n onMouseUp: () => emit('delete-selected-sprite')\r\n })\r\n\r\n const duplicate = ButtonIcon({\r\n icon: 'duplicate',\r\n type: 'tight',\r\n size: 'large',\r\n noIconBackground: true,\r\n onMouseUp: () => emit('duplicate-selected-sprite')\r\n })\r\n const dropZone = html`\r\n \r\n ${duplicate}\r\n ${trash}\r\n
`\r\n return PanelElement({\r\n color: 'purple',\r\n size: 'small',\r\n noPadding: false,\r\n children: dropZone\r\n })\r\n}\r\n","const VariablesPanel = require('../components/variablespanel.js')\r\nconst CodePanel = require('../components/codepanel.js')\r\nconst GlitchDropAreas = require('../components/glitchdropareas.js')\r\nconst SpriteDropAreas = require('./spritedropareas.js')\r\nconst html = require('choo/html')\r\nmodule.exports = function GameContext (state, emit) {\r\n let secondaryPanel\r\n if (state.isFullscreen) {\r\n secondaryPanel = null\r\n } else {\r\n if (state.draggingGlitchApplication) {\r\n secondaryPanel = GlitchDropAreas(state, emit)\r\n } else if (state.movingSelectedTarget) {\r\n secondaryPanel = SpriteDropAreas(state, emit)\r\n } else {\r\n secondaryPanel = CodePanel(state, emit)\r\n }\r\n }\r\n return [\r\n VariablesPanel(state, emit),\r\n secondaryPanel\r\n ]\r\n}\r\n","const html = require('choo/html')\r\nconst PanelElement = require('../elements/panel.js')\r\nconst CarouselElement = require('../elements/carousel.js')\r\nconst InputOption = require('../elements/inputoption.js')\r\nconst InputText = require('../elements/inputtext.js')\r\nconst Button = require('../elements/button.js')\r\nconst SPRITE_NAMES = [\r\n {\r\n label: '$glitch_target',\r\n value: '$glitch_target'\r\n }, {\r\n label: '$other_sprites',\r\n value: '$other_sprites'\r\n },\r\n {\r\n label: 'Stage',\r\n value: 'Stage'\r\n }\r\n]\r\nconst INPUT_TYPES = [\r\n {\r\n label: 'text',\r\n value: 'text'\r\n }, {\r\n label: 'slider',\r\n value: 'slider'\r\n },\r\n {\r\n label: 'option',\r\n value: 'option'\r\n },\r\n {\r\n label: 'sprite',\r\n value: 'sprite'\r\n },\r\n {\r\n label: 'key',\r\n value: 'key'\r\n },\r\n {\r\n label: 'boolean',\r\n value: 'boolean'\r\n }\r\n\r\n]\r\nconst itemsPerPage = 1\r\nfunction paginateInputs (inputs) {\r\n const pages = []\r\n let pageIndex = 0\r\n pages[0] = []\r\n for (let i = 0; i < inputs.length; i++) {\r\n if (pages[pageIndex].length === itemsPerPage) {\r\n pageIndex += 1\r\n pages[pageIndex] = []\r\n }\r\n pages[pageIndex].push(inputs[i])\r\n }\r\n\r\n const items = pages.map(p => html`${p}
`)\r\n return items\r\n}\r\nfunction VariableNameInput (variable, variableOptions, emit) {\r\n const selectedVariable = variableOptions.findIndex(\r\n o => o.value === variable.variableName\r\n )\r\n const options = [...variableOptions]\r\n return InputOption({\r\n label: 'Variable to Expose',\r\n options,\r\n selectedItem: selectedVariable,\r\n onChange: index => {\r\n emit(\r\n 'glitch-editor-pick-variable',\r\n variable,\r\n options[index].value\r\n )\r\n }\r\n })\r\n}\r\nfunction VariableTypeInput (variable, emit) {\r\n const selectedType = INPUT_TYPES.findIndex(\r\n i => i.value === variable.input.type\r\n )\r\n return InputOption({\r\n options: INPUT_TYPES,\r\n label: 'Input Type',\r\n selectedItem: selectedType,\r\n onChange: index => {\r\n emit(\r\n 'glitch-editor-pick-type',\r\n variable,\r\n INPUT_TYPES[index].value\r\n )\r\n }\r\n })\r\n}\r\n\r\nfunction VariableValueInput (variable, emit) {\r\n return InputText({\r\n label: 'Starting Value',\r\n value: variable.value,\r\n onInput: e => {\r\n emit(\r\n 'glitch-editor-set-variable-value',\r\n variable,\r\n e.target.value\r\n )\r\n }\r\n })\r\n}\r\n\r\nfunction SpriteNameInput (variable, emit) {\r\n let selectedSpriteName = SPRITE_NAMES.findIndex(\r\n i => i.value === variable.spriteName\r\n )\r\n if (selectedSpriteName === -1) {\r\n selectedSpriteName = 0\r\n }\r\n return InputOption({\r\n options: SPRITE_NAMES,\r\n label: 'SpriteName',\r\n selectedItem: selectedSpriteName,\r\n onChange: index => {\r\n emit(\r\n 'glitch-editor-pick-sprite',\r\n variable,\r\n SPRITE_NAMES[index].value\r\n )\r\n }\r\n })\r\n}\r\n\r\n\r\nfunction SliderParamsInput (param, variable, emit) {\r\n return InputText({\r\n value: variable.input[param],\r\n label: param,\r\n onInput: e => {\r\n emit(\r\n 'glitch-editor-set-slider-param',\r\n variable,\r\n e.target.value,\r\n param\r\n )\r\n }\r\n })\r\n}\r\n\r\nfunction OptionChoiceInput (variable, optionChoice, emit, index) {\r\n let label = ''\r\n if (index === 0) {\r\n label = 'options'\r\n }\r\n return InputText({\r\n value: optionChoice.value,\r\n label,\r\n onChange: e => {\r\n emit(\r\n 'glitch-editor-set-option-choice',\r\n variable,\r\n optionChoice,\r\n e.target.value\r\n )\r\n }\r\n })\r\n}\r\n\r\nmodule.exports = function CodeEditorVariablesPanel (state, emit) {\r\n let children = []\r\n let inputs = []\r\n let color = 'purple'\r\n let {selectedGlitchId} = state\r\n if (state.selectedGlitchApplicationId) {\r\n const glitchApplication = state.glitchApplications.find(\r\n g => g.id === state.selectedGlitchApplicationId\r\n )\r\n selectedGlitchId = glitchApplication.glitchId\r\n }\r\n if (selectedGlitchId) {\r\n const glitch = state.availableGlitches.find(\r\n g => g.id === selectedGlitchId\r\n );\r\n ({color} = glitch)\r\n }\r\n if (state.glitchEditorContentLoaded) {\r\n let variablesToDisplay = []\r\n let targetVariables = []\r\n\r\n if (state.glitchEditorVariables) {\r\n variablesToDisplay = [...state.glitchEditorVariables]\r\n // alt variables? what if it's not a glitch?\r\n\r\n state.glitchEditor.vm.runtime.targets.forEach(t => {\r\n targetVariables = targetVariables.concat(Object.values(t.variables))\r\n })\r\n }\r\n\r\n // Generate input elements\r\n inputs = variablesToDisplay.map(variable => {\r\n const variableOptions = targetVariables.map(\r\n v => ({label: v.name, value: v.name})\r\n )\r\n\r\n const nameInput = VariableNameInput(variable, variableOptions, emit)\r\n const typeInput = VariableTypeInput(variable, emit)\r\n let spriteNameInput = null\r\n if (state.selectedGlitchApplicationId) {\r\n spriteNameInput = SpriteNameInput(variable, emit)\r\n }\r\n const valueInput = VariableValueInput(variable, emit)\r\n const variableParams = [\r\n nameInput,\r\n spriteNameInput,\r\n valueInput,\r\n typeInput\r\n ]\r\n let inputParams = []\r\n if (variable.input.type === 'slider') {\r\n const sliderMinInput = SliderParamsInput('min', variable, emit)\r\n const sliderMaxInput = SliderParamsInput('max', variable, emit)\r\n const sliderStepInput = SliderParamsInput('step', variable, emit)\r\n inputParams = [ sliderMinInput, sliderMaxInput, sliderStepInput ]\r\n }\r\n if (variable.input.type === 'option') {\r\n inputParams = variable.input.options.map(\r\n (i, index) => OptionChoiceInput(variable, i, emit, index)\r\n )\r\n inputParams.push(\r\n InputText({\r\n value: 'new',\r\n greyedOut: true,\r\n onClick: () => emit('glitch-editor-add-new-option', variable)\r\n })\r\n )\r\n }\r\n inputParams.push(new Button({\r\n text: 'hide this variable',\r\n onClick: () => emit('glitch-editor-hide-variable', variable)\r\n }))\r\n return variableParams.concat(inputParams)\r\n })\r\n inputs.push(new Button({\r\n text: 'expose new variable',\r\n onClick: () => emit('glitch-editor-expose-variable')\r\n }))\r\n children = CarouselElement({\r\n selectedItem: state.currentVariablePage,\r\n items: paginateInputs(inputs),\r\n disabled: state.selectedVariableId !== null\r\n || state.isMenuOpen,\r\n onChange: state.selectedVariableId ? (\r\n () => false) : index => emit('select-variable-page', index)\r\n })\r\n }\r\n const panel = PanelElement({\r\n color,\r\n children\r\n })\r\n\r\n panel.classList.add('code-editor-panel')\r\n return panel\r\n}\r\n","const PanelElement = require('../elements/panel.js')\r\nconst Button = require('../elements/button.js')\r\nconst html = require('choo/html')\r\nmodule.exports = function CodeEditorPanel (state, emit) {\r\n let color = 'purple'\r\n let children = []\r\n let {selectedGlitchId} = state\r\n if (state.selectedGlitchApplicationId) {\r\n const glitchApplication = state.glitchApplications.find(\r\n g => g.id === state.selectedGlitchApplicationId\r\n )\r\n selectedGlitchId = glitchApplication.glitchId\r\n }\r\n if (selectedGlitchId) {\r\n const glitch = state.availableGlitches.find(\r\n g => g.id === selectedGlitchId\r\n );\r\n ({color} = glitch)\r\n }\r\n if (state.glitchEditorContentLoaded) {\r\n const closeEditor = Button({\r\n text: 'close editor',\r\n noIconBackground: true,\r\n onMouseDown: () => emit('close-glitch-editor')\r\n })\r\n const saveAndApply = Button({\r\n text: 'save changes',\r\n noIconBackground: true,\r\n onMouseDown: () => {\r\n emit('save-and-apply-changes')\r\n emit('close-glitch-editor')\r\n }\r\n })\r\n let remixGlitch = ''\r\n if (state.selectedGlitchApplicationId || state.selectedGlitchId) {\r\n remixGlitch = Button({\r\n text: 'new remix',\r\n noIconBackground: true,\r\n onMouseDown: () => emit('remix-glitch')\r\n })\r\n }\r\n const exportGlitch = Button({\r\n text: 'export',\r\n noIconBackground: true,\r\n onMouseDown: () => emit('glitch-editor-export')\r\n })\r\n\r\n children = html`\r\n \r\n ${closeEditor}\r\n ${saveAndApply}\r\n ${remixGlitch}\r\n ${exportGlitch}\r\n
`\r\n }\r\n return PanelElement({\r\n color,\r\n size: 'small',\r\n noPadding: false,\r\n children\r\n })\r\n}\r\n","const CodeEditorVariablesPanel = require('./code-editor-variables-panel.js')\r\nconst CodeEditorPanel = require('./code-editor-panel.js')\r\nmodule.exports = function CodeEditorContext (state, emit) {\r\n return [\r\n CodeEditorVariablesPanel(state, emit),\r\n CodeEditorPanel(state, emit)\r\n ]\r\n}\r\n","const GlitchContext = require('./glitchcontext.js')\r\nconst PartContext = require('./partcontext.js')\r\nconst GameContext = require('./gamecontext.js')\r\nconst CodeEditorContext = require('./code-editor-context.js')\r\nmodule.exports = function ContextMenu (state, emit) {\r\n if (state.isInventoryOpen) {\r\n return null\r\n }\r\n if (state.glitchEditorOpen) {\r\n return CodeEditorContext(state, emit)\r\n }\r\n if (state.selectedGlitchId) {\r\n return GlitchContext(state, emit)\r\n }\r\n if (state.selectedPartId) {\r\n return PartContext(state, emit)\r\n }\r\n return GameContext(state, emit)\r\n}\r\n","const html = require('choo/html')\r\n\r\nconst DraggingElement = require('./components/draggingelement.js')\r\nconst Menu = require('./components/menu.js')\r\nconst GameControls = require('./components/gamecontrols.js')\r\nconst ScreenTitle = require('./components/screentitle.js')\r\nconst Toolbar = require('./components/toolbar.js')\r\nconst Screen = require('./components/screen.js')\r\nconst ContextMenu = require('./components/contextmenu.js')\r\n\r\nfunction LoadingMessage (text) {\r\n return html`\r\n \r\n
\r\n
\r\n ${text}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n ${Menu(state, emit)}\r\n
\r\n
\r\n ${GameControls(state, emit)}\r\n
\r\n
\r\n ${ScreenTitle(state, emit)}\r\n
\r\n
\r\n
\r\n
\r\n ${Toolbar(state, emit)}\r\n
\r\n
\r\n ${ContextMenu(state, emit)}\r\n
\r\n
\r\n ${Screen(state, emit)}\r\n
\r\n\r\n
\r\n ${DraggingElement(state, emit)}\r\n
\r\n
\r\n ${projectDisplays}\r\n
\r\n
![](\"${pack.image}\")
\r\n