From 39e31bfa10dd97151f6b4017abcf40eef32106d9 Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Tue, 24 Jan 2023 20:30:26 -0300 Subject: [PATCH 01/13] Implement button to add a new background. Starting to implement #16 --- src/views/BackgroundEditor.vue | 101 ++++++++++++++++++++++++--------- 1 file changed, 74 insertions(+), 27 deletions(-) diff --git a/src/views/BackgroundEditor.vue b/src/views/BackgroundEditor.vue index 707339b..3d9e1f5 100644 --- a/src/views/BackgroundEditor.vue +++ b/src/views/BackgroundEditor.vue @@ -1,32 +1,48 @@ @@ -92,4 +135,8 @@ export default defineComponent({ bottom: 0; width: 100%; } + +.add-frame-buttom { + bottom: 8px; +} From cba82c7ec298b6e8c79f3b001783e6957904b490 Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Wed, 25 Jan 2023 20:32:54 -0300 Subject: [PATCH 02/13] Generate code for changing background by number. --- src/generators/bbasic.bb.hbs | 21 +++++++++++++++------ src/generators/bbasic.js | 32 +++++++++++++------------------- 2 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/generators/bbasic.bb.hbs b/src/generators/bbasic.bb.hbs index ab979ca..8b97ad7 100644 --- a/src/generators/bbasic.bb.hbs +++ b/src/generators/bbasic.bb.hbs @@ -4,9 +4,6 @@ rem Playfield and players setup: rem - shape of the playfield and player sprites rem ************************************************************************** - playfield: -{{ playField }} -end player0: %00100010 @@ -39,6 +36,12 @@ end NUSIZ0 = $30 score = 00000 : scorecolor = $08 + dim player0frame = x + dim player1frame = z + dim newbackground = y + + newbackground = 1 + player0x = 75 : player0y = 75 player1x = 75 : player1y = 25 ballx = 0 : bally = 0 @@ -65,11 +68,17 @@ draw drawscreen rem ************************************************************************** - rem Code generated by vcs-game-maker. + rem Backgrounds generated by vcs-game-maker. rem ************************************************************************** - dim player0frame = x - dim player1frame = z + if newbackground = 0 then goto backgroundchangeend +{{{ generatedBackgrounds }}} +backgroundchangeend + newbackground = 0 + + rem ************************************************************************** + rem Code generated by vcs-game-maker. + rem ************************************************************************** {{{ generatedBody }}} diff --git a/src/generators/bbasic.js b/src/generators/bbasic.js index 0a40510..c4c8397 100644 --- a/src/generators/bbasic.js +++ b/src/generators/bbasic.js @@ -176,14 +176,14 @@ Blockly.BBasic.finish = function(code) { code = Object.getPrototypeOf(this).finish.call(this, code); code = code.replace(/^[\t ]*/gm, Blockly.BBasic.INDENT); - const playField = Blockly.BBasic.generateBackgrounds(); + const generatedBackgrounds = Blockly.BBasic.generateBackgrounds(); const animation = Blockly.BBasic.generateAnimations(); this.isInitialized = false; this.nameDB_.reset(); const generatedBody = definitions.join('\n\n') + '\n\n\n' + animation + '\n\n\n' + code; - return handlebarsTemplate({generatedBody, playField}); + return handlebarsTemplate({generatedBody, generatedBackgrounds}); }; /** @@ -340,24 +340,18 @@ Blockly.BBasic.generateBackgrounds = function() { } const backgrounds = backgroundData && backgroundData.backgrounds; - let playField = - 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n' + - 'X....X...................X....X\n' + - 'X.............................X\n' + - 'X.............................X\n' + - 'X.............................X\n' + - 'X.............................X\n' + - 'X.............................X\n' + - 'X.............................X\n' + - 'X.............................X\n' + - 'X....X...................X....X\n' + - 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; - - if (backgrounds && backgrounds[0] && backgrounds[0].pixels) { - playField = matrixToPlayfield(backgrounds[0].pixels); - } - return playField.split('\n').map((line) => ' ' + line).join('\n'); + const convertPlayfield = (playField) => + playField.split('\n').map((line) => ' ' + line).join('\n'); + + return backgrounds.map(({id, pixels}) => { + const endLabel = `background${id}end`; + return ` if newbackground <> ${id} then goto ${endLabel}` + '\n' + + ' playfield:\n' + + convertPlayfield(matrixToPlayfield(pixels)) + '\n' + + 'end\n' + + endLabel; + }).join('\n\n'); }; Blockly.BBasic.generateAnimations = function() { From d17715883a5097466f9ff9da2f78504f7458e671 Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Tue, 31 Jan 2023 21:01:18 -0300 Subject: [PATCH 03/13] Add background components. --- src/blocks/background.js | 49 ++++++++++++++++++++++++++++++ src/components/ActionEditor.vue | 1 + src/components/blockly-toolbox.xml | 17 +++++++++++ 3 files changed, 67 insertions(+) create mode 100644 src/blocks/background.js diff --git a/src/blocks/background.js b/src/blocks/background.js new file mode 100644 index 0000000..a739342 --- /dev/null +++ b/src/blocks/background.js @@ -0,0 +1,49 @@ +'use strict'; + +import * as Blockly from 'blockly/core'; + +import {SCORE_ICON} from './icon'; + +const SCORE_COLOR = '#f2691e'; + +Blockly.defineBlocksWithJsonArray([ + // Block for selecting a background. + { + 'type': `background_select`, + 'message0': `${SCORE_ICON} Background`, + 'output': 'Number', + 'colour': SCORE_COLOR, + 'tooltip': `Selects a background`, + }, + // Block for the setter. + { + 'type': `background_set`, + 'message0': `${SCORE_ICON} Background: set to: %1`, + 'args0': [ + { + 'type': 'input_value', + 'name': 'VALUE', + }, + ], + 'previousStatement': null, + 'nextStatement': null, + 'colour': SCORE_COLOR, + 'tooltip': `Updates the score`, + }, + // Block for adding to a variable in place. + { + 'type': `background_change`, + 'message0': `${SCORE_ICON} Background: change by: %1`, + 'args0': [ + { + 'type': 'input_value', + 'name': 'DELTA', + 'check': 'Number', + }, + ], + 'previousStatement': null, + 'nextStatement': null, + 'colour': SCORE_COLOR, + 'extensions': ['math_change_tooltip'], + }, +]); diff --git a/src/components/ActionEditor.vue b/src/components/ActionEditor.vue index 044358c..54e81dc 100644 --- a/src/components/ActionEditor.vue +++ b/src/components/ActionEditor.vue @@ -16,6 +16,7 @@ import bBasic from 'batari-basic'; import BlocklyComponent from './BlocklyComponent.vue'; +import '../blocks/background'; import '../blocks/collision'; import '../blocks/input'; import '../blocks/sprites'; diff --git a/src/components/blockly-toolbox.xml b/src/components/blockly-toolbox.xml index cfcc052..a714693 100644 --- a/src/components/blockly-toolbox.xml +++ b/src/components/blockly-toolbox.xml @@ -114,6 +114,23 @@ + + + + + + 1 + + + + + + + 1 + + + + From c517414fae445fb5818f4371cf79912df6f4cada Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Tue, 31 Jan 2023 21:11:54 -0300 Subject: [PATCH 04/13] Improve look of the background blocks. --- src/blocks/background.js | 16 ++++++++-------- src/blocks/icon.js | 1 + 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/blocks/background.js b/src/blocks/background.js index a739342..522f6ec 100644 --- a/src/blocks/background.js +++ b/src/blocks/background.js @@ -2,23 +2,23 @@ import * as Blockly from 'blockly/core'; -import {SCORE_ICON} from './icon'; +import {BACKGROUND_ICON} from './icon'; -const SCORE_COLOR = '#f2691e'; +const BACKGROUND_COLOR = '#ffa500'; Blockly.defineBlocksWithJsonArray([ // Block for selecting a background. { 'type': `background_select`, - 'message0': `${SCORE_ICON} Background`, + 'message0': `${BACKGROUND_ICON} Background`, 'output': 'Number', - 'colour': SCORE_COLOR, + 'colour': BACKGROUND_COLOR, 'tooltip': `Selects a background`, }, // Block for the setter. { 'type': `background_set`, - 'message0': `${SCORE_ICON} Background: set to: %1`, + 'message0': `${BACKGROUND_ICON} Background: set to: %1`, 'args0': [ { 'type': 'input_value', @@ -27,13 +27,13 @@ Blockly.defineBlocksWithJsonArray([ ], 'previousStatement': null, 'nextStatement': null, - 'colour': SCORE_COLOR, + 'colour': BACKGROUND_COLOR, 'tooltip': `Updates the score`, }, // Block for adding to a variable in place. { 'type': `background_change`, - 'message0': `${SCORE_ICON} Background: change by: %1`, + 'message0': `${BACKGROUND_ICON} Background: change by: %1`, 'args0': [ { 'type': 'input_value', @@ -43,7 +43,7 @@ Blockly.defineBlocksWithJsonArray([ ], 'previousStatement': null, 'nextStatement': null, - 'colour': SCORE_COLOR, + 'colour': BACKGROUND_COLOR, 'extensions': ['math_change_tooltip'], }, ]); diff --git a/src/blocks/icon.js b/src/blocks/icon.js index e83e258..310d81b 100644 --- a/src/blocks/icon.js +++ b/src/blocks/icon.js @@ -7,3 +7,4 @@ export const JOYSTICK_ICON = String.fromCodePoint(0x1F579); export const FIRE_ICON = String.fromCodePoint(0x1F518); export const PLAYFIELD_ICON = String.fromCodePoint(0x1F5FA); export const SCORE_ICON = String.fromCodePoint(0x1F4AF); +export const BACKGROUND_ICON = String.fromCodePoint(0x1F304); From 2876a9f7459ef365d387c0652d6dadb4659f2f70 Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Tue, 31 Jan 2023 21:21:03 -0300 Subject: [PATCH 05/13] Start implementing the background selection. --- src/blocks/background.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/blocks/background.js b/src/blocks/background.js index 522f6ec..7314b67 100644 --- a/src/blocks/background.js +++ b/src/blocks/background.js @@ -6,11 +6,24 @@ import {BACKGROUND_ICON} from './icon'; const BACKGROUND_COLOR = '#ffa500'; +const buildPlayerOptions = (name) => [ + ['\u2195 X', `${name}x`], + ['\u2195 Y', `${name}y`], + [1111 + ' Color', `${name}color`], +]; + Blockly.defineBlocksWithJsonArray([ // Block for selecting a background. { 'type': `background_select`, - 'message0': `${BACKGROUND_ICON} Background`, + 'message0': `${BACKGROUND_ICON} Background: %1`, + 'args0': [ + { + 'type': 'field_dropdown', + 'name': 'VAR', + 'options': buildPlayerOptions('bob'), + }, + ], 'output': 'Number', 'colour': BACKGROUND_COLOR, 'tooltip': `Selects a background`, From 509eff5762b02a66194df4c26edd3f88fd84c73e Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Sun, 5 Feb 2023 13:26:52 -0300 Subject: [PATCH 06/13] Implement building the background options. --- src/blocks/background.js | 43 ++++++++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/src/blocks/background.js b/src/blocks/background.js index 7314b67..33bfeb6 100644 --- a/src/blocks/background.js +++ b/src/blocks/background.js @@ -2,15 +2,46 @@ import * as Blockly from 'blockly/core'; +import {useBackgroundsStorage} from '../hooks/project'; +import {playfieldToMatrix} from '../utils/pixels'; import {BACKGROUND_ICON} from './icon'; const BACKGROUND_COLOR = '#ffa500'; -const buildPlayerOptions = (name) => [ - ['\u2195 X', `${name}x`], - ['\u2195 Y', `${name}y`], - [1111 + ' Color', `${name}color`], -]; +const backgroundsStorage = useBackgroundsStorage(); + +const buildBackgroundOptions = () => { + try { + // TODO: Share this constant with BackgroundEditor.vue + const defaultBackgrounds = { + backgrounds: [ + { + id: 1, + name: 'Test 1', + pixels: playfieldToMatrix( + 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n' + + 'X....X...................X....X\n' + + 'X.............................X\n' + + 'X.............................X\n' + + 'X.............................X\n' + + 'X.............................X\n' + + 'X.............................X\n' + + 'X.............................X\n' + + 'X.............................X\n' + + 'X....X...................X....X\n' + + 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'), + }, + ], + }; + + const background = backgroundsStorage.value || defaultBackgrounds; + + return background.backgrounds.map(({id, name}) => [name || `Unnamed ${id}`, `${id}`]); + } catch (e) { + console.error('Failed to list background options', e); + return [[1, 'Error']]; + } +}; Blockly.defineBlocksWithJsonArray([ // Block for selecting a background. @@ -21,7 +52,7 @@ Blockly.defineBlocksWithJsonArray([ { 'type': 'field_dropdown', 'name': 'VAR', - 'options': buildPlayerOptions('bob'), + 'options': buildBackgroundOptions(), }, ], 'output': 'Number', From 8d9036ad5efefdb87dea003be246011d40548c22 Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Sun, 5 Feb 2023 13:51:36 -0300 Subject: [PATCH 07/13] Implement code generator for the background blocks --- src/blocks/background.js | 16 ---------------- src/components/blockly-toolbox.xml | 9 +-------- src/generators/bbasic.js | 4 ++-- src/generators/bbasic/background.js | 16 ++++++++++++++++ 4 files changed, 19 insertions(+), 26 deletions(-) create mode 100644 src/generators/bbasic/background.js diff --git a/src/blocks/background.js b/src/blocks/background.js index 33bfeb6..99e3e9d 100644 --- a/src/blocks/background.js +++ b/src/blocks/background.js @@ -74,20 +74,4 @@ Blockly.defineBlocksWithJsonArray([ 'colour': BACKGROUND_COLOR, 'tooltip': `Updates the score`, }, - // Block for adding to a variable in place. - { - 'type': `background_change`, - 'message0': `${BACKGROUND_ICON} Background: change by: %1`, - 'args0': [ - { - 'type': 'input_value', - 'name': 'DELTA', - 'check': 'Number', - }, - ], - 'previousStatement': null, - 'nextStatement': null, - 'colour': BACKGROUND_COLOR, - 'extensions': ['math_change_tooltip'], - }, ]); diff --git a/src/components/blockly-toolbox.xml b/src/components/blockly-toolbox.xml index a714693..d204bab 100644 --- a/src/components/blockly-toolbox.xml +++ b/src/components/blockly-toolbox.xml @@ -118,14 +118,7 @@ - - 1 - - - - - - + 1 diff --git a/src/generators/bbasic.js b/src/generators/bbasic.js index c4c8397..ab3be81 100644 --- a/src/generators/bbasic.js +++ b/src/generators/bbasic.js @@ -400,7 +400,7 @@ Blockly.BBasic.generateAnimations = function() { const player1Code = processAnimation('player1', usePlayer1Storage()); return player0Code + '\n\n\n' + player1Code; }; - +import background from './bbasic/background'; import collision from './bbasic/collision'; import colour from './bbasic/colour'; import input from './bbasic/input'; @@ -413,7 +413,7 @@ import sprites from './bbasic/sprites'; import text from './bbasic/text'; import variables from './bbasic/variables'; -[collision, colour, input, logic, loops, math, procedures, sprites, score, text, variables] +[background, collision, colour, input, logic, loops, math, procedures, sprites, score, text, variables] .forEach((init) => init(Blockly)); export default Blockly.BBasic; diff --git a/src/generators/bbasic/background.js b/src/generators/bbasic/background.js new file mode 100644 index 0000000..706dd9b --- /dev/null +++ b/src/generators/bbasic/background.js @@ -0,0 +1,16 @@ +'use strict'; + +export default (Blockly) => { + Blockly.BBasic[`background_select`] = function(block) { + const code = block.getFieldValue('VAR'); + return [code, Blockly.BBasic.ORDER_ATOMIC]; + }; + + Blockly.BBasic[`background_set`] = function(block) { + // Score setter. + const argument0 = Blockly.BBasic.valueToCode(block, 'VALUE', + Blockly.BBasic.ORDER_ASSIGNMENT) || '0'; + return 'newbackground = ' + argument0 + '\n'; + }; +}; + From f08b926b08ba84428cf49102cf357f6524aa5897 Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Sun, 5 Feb 2023 14:02:10 -0300 Subject: [PATCH 08/13] Implement simplified block for choosing background --- src/blocks/background.js | 18 +++++++++++++++++- src/components/blockly-toolbox.xml | 1 + src/generators/bbasic/background.js | 7 ++++++- 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/blocks/background.js b/src/blocks/background.js index 99e3e9d..ac8f7bb 100644 --- a/src/blocks/background.js +++ b/src/blocks/background.js @@ -72,6 +72,22 @@ Blockly.defineBlocksWithJsonArray([ 'previousStatement': null, 'nextStatement': null, 'colour': BACKGROUND_COLOR, - 'tooltip': `Updates the score`, + 'tooltip': `Updates the background`, + }, + // Block for the setter with an internal select + { + 'type': `background_set_select`, + 'message0': `${BACKGROUND_ICON} Background: %1`, + 'args0': [ + { + 'type': 'field_dropdown', + 'name': 'VAR', + 'options': buildBackgroundOptions(), + }, + ], + 'previousStatement': null, + 'nextStatement': null, + 'colour': BACKGROUND_COLOR, + 'tooltip': `Updates the background`, }, ]); diff --git a/src/components/blockly-toolbox.xml b/src/components/blockly-toolbox.xml index d204bab..d330377 100644 --- a/src/components/blockly-toolbox.xml +++ b/src/components/blockly-toolbox.xml @@ -123,6 +123,7 @@ + diff --git a/src/generators/bbasic/background.js b/src/generators/bbasic/background.js index 706dd9b..54d100e 100644 --- a/src/generators/bbasic/background.js +++ b/src/generators/bbasic/background.js @@ -2,7 +2,7 @@ export default (Blockly) => { Blockly.BBasic[`background_select`] = function(block) { - const code = block.getFieldValue('VAR'); + const code = block.getFieldValue('VAR') || 0; return [code, Blockly.BBasic.ORDER_ATOMIC]; }; @@ -12,5 +12,10 @@ export default (Blockly) => { Blockly.BBasic.ORDER_ASSIGNMENT) || '0'; return 'newbackground = ' + argument0 + '\n'; }; + Blockly.BBasic[`background_set_select`] = function(block) { + // Score setter. + const argument0 = block.getFieldValue('VAR') || 0; + return 'newbackground = ' + argument0 + '\n'; + }; }; From 85e369c6f699929eb957ff0bf37be62b5fb73d8c Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Sun, 5 Feb 2023 14:12:36 -0300 Subject: [PATCH 09/13] Fix bug where background name wasn't being updated --- src/views/BackgroundEditor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/BackgroundEditor.vue b/src/views/BackgroundEditor.vue index 3d9e1f5..5ee3f9e 100644 --- a/src/views/BackgroundEditor.vue +++ b/src/views/BackgroundEditor.vue @@ -7,7 +7,7 @@ - +
From 5140f390b7026c0b5b22786cc990342d1a3eee21 Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Sun, 5 Feb 2023 14:23:14 -0300 Subject: [PATCH 10/13] Implement button for deleting a background. --- src/views/BackgroundEditor.vue | 46 +++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/src/views/BackgroundEditor.vue b/src/views/BackgroundEditor.vue index 5ee3f9e..37c3025 100644 --- a/src/views/BackgroundEditor.vue +++ b/src/views/BackgroundEditor.vue @@ -11,6 +11,43 @@
+ + + + + Delete this background? + + + + mdi-check + + Yes, delete + + + + mdi-cancel + + No, don't delete + + + + { + state.value.backgrounds = state.value.backgrounds.filter(({id}) => id != background.id); + console.info('Deleted ', background); + handleChildChange(); + instance.proxy.$forceUpdate(); + }; + + return {state, handleChildChange, handleAddBackground, handleDeleteBackground}; }, }); From dbdf611a0744e7278a60b382d50fb5006e5c0bb8 Mon Sep 17 00:00:00 2001 From: Haroldo de Oliveira Pinheiro Date: Sun, 5 Feb 2023 15:00:01 -0300 Subject: [PATCH 11/13] Don't show delete if there's only one background. --- src/views/BackgroundEditor.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/BackgroundEditor.vue b/src/views/BackgroundEditor.vue index 37c3025..45f010b 100644 --- a/src/views/BackgroundEditor.vue +++ b/src/views/BackgroundEditor.vue @@ -12,6 +12,7 @@