Skip to content

Commit

Permalink
Implement importing and exporting of project.
Browse files Browse the repository at this point in the history
This fixes #7.
  • Loading branch information
Haroldo de Oliveira Pinheiro committed Jul 26, 2021
2 parents e61f475 + 832bfcb commit e73412d
Show file tree
Hide file tree
Showing 8 changed files with 148 additions and 8 deletions.
31 changes: 28 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vcs-game-maker",
"version": "0.4.0",
"version": "0.5.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
Expand All @@ -12,12 +12,14 @@
"batari-basic": "^0.0.1",
"blockly": "^6.20210701.0",
"core-js": "^3.6.5",
"file-saver": "^2.0.5",
"handlebars": "^4.7.7",
"lodash": "^4.17.21",
"vue": "^2.6.11",
"vue-code-highlight": "^0.7.8",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0"
"vuetify": "^2.4.0",
"yaml": "^1.10.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
Expand Down
20 changes: 20 additions & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,19 @@
<v-list-item-title>Generated</v-list-item-title>
</v-list-item-content>
</v-list-item>

<v-list-item
to="/project"
link
class="project-item"
>
<v-list-item-icon>
<v-icon>mdi-pencil-ruler</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Project</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>

</v-navigation-drawer>
Expand Down Expand Up @@ -216,4 +229,11 @@ export default {
color: rgb(39, 176, 136) !important;
border-left-color: rgb(39, 176, 136) !important;
}
.project-item,
.project-item > .v-list-item__icon > .theme--light.v-icon,
.project-item > .v-list-item__content {
color: rgb(39, 136, 176) !important;
border-left-color: rgb(39, 136, 176) !important;
}
</style>
4 changes: 2 additions & 2 deletions src/components/ActionEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import '../blocks/input';
import '../blocks/sprites';
import blocklyToolbox from 'raw-loader!./blockly-toolbox.xml';
import BlocklyBB from '../generators/bbasic';
import {useLocalStorage} from '../hooks/storage';
import {useWorkspaceStorage} from '../hooks/project';
import {useGeneratedBasic} from '../hooks/generated';
export default {
Expand All @@ -40,7 +40,7 @@ export default {
},
toolbox: blocklyToolbox,
},
workspaceStorage: useLocalStorage('vcs-game-maker.workspace'),
workspaceStorage: useWorkspaceStorage(),
}),
methods: {
showCode() {
Expand Down
2 changes: 1 addition & 1 deletion src/components/BlocklyComponent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default {
},
handleChange() {
const xml = Blockly.Xml.workspaceToDom(this.workspace);
const text = Blockly.Xml.domToText(xml);
const text = Blockly.Xml.domToPrettyText(xml);
this.lastSavedWorkspace = text;
this.$emit('input', text, {
workspace: this.workspace,
Expand Down
4 changes: 4 additions & 0 deletions src/hooks/project.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import {useLocalStorage} from '../hooks/storage';

export const useProjectStorage = (type) => useLocalStorage(`vcs-game-maker.${type}`);
export const useWorkspaceStorage = () => useProjectStorage('workspace');
5 changes: 5 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ const routes = [
name: 'Generated',
component: () => import('../views/GeneratedCode.vue'),
},
{
path: '/project',
name: 'Project',
component: () => import('../views/Project.vue'),
},
];

const router = new VueRouter({
Expand Down
84 changes: 84 additions & 0 deletions src/views/Project.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<template>
<v-card>
<v-card-title>Project</v-card-title>
<v-card-text>
<v-file-input
accept=".vcsgm"
label="Project to import."
v-model="data.fileToImport"
@change="handleLoadProject"
></v-file-input>
</v-card-text>
<v-card-actions>
<v-btn
color="primary"
@click="handleSaveProject"
>
Save Project
</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
import {defineComponent, reactive} from '@vue/composition-api';
import {saveAs} from 'file-saver';
import YAML from 'yaml';
import {useWorkspaceStorage} from '../hooks/project';
const FORMAT_TYPE = 'VCS Game Maker Project';
const FORMAT_VERSION = 1.0;
export default defineComponent({
setup(props, context) {
const data = reactive({fileToImport: null});
const router = context.root.$router;
const workspaceStorage = useWorkspaceStorage();
return {data, router, workspaceStorage};
},
methods: {
handleSaveProject() {
const projectYaml = YAML.stringify({
'type': FORMAT_TYPE,
'format-version': FORMAT_VERSION,
'generation-time': new Date(),
'blockly-workspace': this.workspaceStorage,
});
const projectBlob = new Blob([projectYaml], {type: 'text/yaml'});
saveAs(projectBlob, 'project.vcsgm');
},
handleLoadProject() {
if (!this.data.fileToImport) {
console.warn('No file to import.');
return;
}
console.info('Importing file', this.data.fileToImport);
const reader = new FileReader();
reader.readAsText(this.data.fileToImport, 'UTF-8');
reader.onload = (evt) => {
const projectYaml = evt.target.result;
console.info('YAML', projectYaml);
const project = YAML.parse(projectYaml);
if (project.type !== FORMAT_TYPE) {
throw new Error('This file does not seem to be a valid project.');
}
if (project['format-version'] > FORMAT_VERSION) {
throw new Error(
`This project's version (${project['format-version']}) is newer than the supported version (${FORMAT_VERSION})`);
}
this.workspaceStorage = project['blockly-workspace'];
this.router.push('/');
};
reader.onerror = (evt) => console.error('Error while loading project', evt);
this.data.fileToImport = null;
},
},
});
</script>

0 comments on commit e73412d

Please sign in to comment.