Skip to content

Commit

Permalink
Merge pull request #268 from gobstones/solutions
Browse files Browse the repository at this point in the history 
Solutions
  • Loading branch information
@afska
afska authored May 15, 2018
2 parents 7315c51 + 4b78092 commit be45780
Show file tree
Hide file tree
Showing 9 changed files with 216 additions and 33 deletions.
6 changes: 5 additions & 1 deletion app/elements/boards-panel/boards-panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@
<template is="dom-if" if="{{finalState}}">
<gs-board id="finalStateEditor" attire="{{attire}}"></gs-board>

<template is="dom-if" if="{{returnValue}}">
<template is="dom-if" if="{{_hasReturnValue(returnValue)}}">
<paper-button id="inspect-results-button" class="inspect-results-button" style="z-index: 99" on-click="showReturnValue"><iron-icon class="black-button" icon="icons:search"></iron-icon></paper-button>
<paper-tooltip for="inspect-results-button" position="left" animation-config="{{tooltipAnimation}}">
<div class="button-tooltip">
Expand Down Expand Up @@ -781,6 +781,10 @@ <h2>[[localize("boom")]]</h2>
return value ? 'left' : 'right';
},

_hasReturnValue: function(returnValue) {
return returnValue && returnValue.value;
},

_computeSize: function(sizeX, sizeY) {
const x = sizeX === "" ? this.size.x : this._limitSize(sizeX);
const y = sizeY === "" ? this.size.y : this._limitSize(sizeY);
Expand Down
9 changes: 7 additions & 2 deletions app/elements/gobstones-blockly/gobstones-blockly.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,9 @@
this.workspace[mode] = code;
this.code[mode] = mode === "teacher" ? code : this._xmlToCode(code);
if (this.mode === mode) {
this.workspaceXml = code;
if (code !== "") this.workspaceXml = code;
else this.$.blockly.resetWorkspace();

setTimeout(() => {
this.$.blockly.workspace.undoStack_ = [];
}, 0)
Expand Down Expand Up @@ -237,7 +239,10 @@
this._getWorkspace()[this.mode] = this.workspaceXml;

const newCode = this.generateCode();
if (this.code[this.mode] === newCode) return;
if (this.code[this.mode] === newCode) {
this.fire("content-change");
return;
}

if (this.runner) this.runner.stop()
this.code[this.mode] = newCode;
Expand Down
187 changes: 165 additions & 22 deletions app/elements/gobstones-teacher/gobstones-teacher.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,16 @@
.button-tooltip {
font-size: 15px;
}

.solution-selector {
position: absolute;
right: 15px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
}
</style>

<div>
Expand All @@ -64,6 +74,32 @@
<paper-tab>[[localize("settings")]]</paper-tab>
</paper-tabs>

<template is="dom-if" if="{{isBlocksOrCodeTabSelected(selectedTab)}}">
<div class="solution-selector">
<paper-dropdown-menu no-animations no-label-float vertical-align="bottom" horizontal-align="right">
<paper-listbox class="dropdown-content" selected="{{selectedSolution}}">
<template is="dom-repeat" items="{{ availableSolutions }}" rendered-item-count="{{solutionsCount}}">
<paper-item>{{getSolutionName(index)}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>

<paper-button id="add-solution-button" style="z-index: 99" on-click="addSolution"><iron-icon class="black-button" icon="icons:add"></iron-icon></paper-button>
<paper-tooltip for="add-solution-button" position="bottom" animation-config="{{tooltipAnimation}}">
<div class="button-tooltip">
[[localize("tooltip-add-solution")]]
</div>
</paper-tooltip>

<paper-button id="remove-solution-button" style="z-index: 99" on-click="removeCurrentSolution"><iron-icon class="black-button" icon="icons:remove"></iron-icon></paper-button>
<paper-tooltip for="remove-solution-button" position="bottom" animation-config="{{tooltipAnimation}}">
<div class="button-tooltip">
[[localize("tooltip-remove-solution")]]
</div>
</paper-tooltip>
</div>
</template>

<div style="position: relative">
<gobstones-blockly id="blocks-editor" class$="editor {{_blocksClass(selectedTab)}}"></gobstones-blockly>

Expand Down Expand Up @@ -102,8 +138,29 @@
value: 0,
observer: "_onTabChange"
},
code: Object,
workspace: Object,
solution: {
type: Object,
computed: "_computeSolution(selectedSolution, availableSolutions)",
observer: "_onSolutionSelected"
},
selectedSolution: {
type: Number,
value: 0,
},
availableSolutions: {
type: Array,
value: [{
code: {
main: "",
library: "",
teacher: ""
},
workspace: {
main: "",
library: ""
}
}]
},

tooltipAnimation: Object
},
Expand All @@ -123,16 +180,17 @@
this.BLOCKS_SYNC_OFF_COLOR = "#666666";
this._setBlocksSyncOff();

this.code = {
main: "",
library: "",
teacher: ""
};
Object.defineProperty(this, "code", {
get: function() {
return this.getCode();
}
});

this.workspace = {
main: "",
library: ""
};
Object.defineProperty(this, "workspace", {
get: function() {
return this.solution.workspace;
}
});

const boardsPanel = document.getElementById("boards");
if (boardsPanel) {
Expand All @@ -143,7 +201,7 @@
this._editors()[ID_LIBRARY].runner = this.runner;

this.runner.addEventListener("run", ({ detail }) => {
if (this.selectedTab > ID_CODE) {
if (!this.isBlocksOrCodeTabSelected(this.selectedTab)) {
this.runner.showToast(this.localize("go-to-first-tabs"));
this.runner.stop();
return;
Expand Down Expand Up @@ -176,12 +234,25 @@
}

this.subscribeTo("initial-state", (event) => {
this._currentEditor()._runCode(event, this.code, true);
this._currentEditor()._runCode(event, this.getCode(), true);
});
},

setCode: function(code, mode) {
const isBlocklyCode = code.startsWith("<");
preSave: function() {
this.selectedSolution = 0;
},

getCode: function() {
return _.merge({}, this.solution.code, {
library: this._getSolutionLibrary(),
teacher: this._getSolutionTeacher()
});
},

setCode: function(code, mode, isBlocklyCode) {
const shouldUseBlocks = isBlocklyCode !== undefined
? isBlocklyCode
: code.startsWith("<");

const editors = this._editors();

Expand All @@ -194,7 +265,7 @@
editors[ID_BLOCKS].setCode(code, mode);
editors[ID_CODE].setCode(code, mode);
} else {
editors[isBlocklyCode ? ID_BLOCKS : ID_CODE].setCode(code);
editors[shouldUseBlocks ? ID_BLOCKS : ID_CODE].setCode(code);
}
},

Expand Down Expand Up @@ -223,31 +294,102 @@
},

reset: function() {
const solutionsCount = this.availableSolutions.length;
for (let i = 0; i < solutionsCount - 1; i++) this.removeCurrentSolution();

return this._editors().forEach((editor) => editor.reset && editor.reset());
},

getSolutionName: function(index) {
return index === 0
? this.localize("solutions-student")
: `${this.localize("solutions-solution")} ${index}`;
},

addSolution: function() {
this.push("availableSolutions", {
code: { main: "", library: "", teacher: "" },
workspace: { main: "", library: "" }
});
this.selectedSolution = this.availableSolutions.length - 1;
},

removeCurrentSolution: function() {
this._removeSolution(index => {
this.splice("availableSolutions", index, 1);
});
},

isBlocksOrCodeTabSelected: function(selectedTab) {
return selectedTab === ID_BLOCKS || selectedTab === ID_CODE;
},

_setSolutionCode: function(code) {
this.availableSolutions[this.selectedSolution].code.main = code;
},

_setSolutionWorkspace: function(workspace) {
this.availableSolutions[this.selectedSolution].workspace.main = workspace;
},

_getSolutionLibrary: function() {
return this.availableSolutions[0].code.library;
},

_setSolutionLibrary: function(library) {
this.availableSolutions[0].code.library = library;
},

_getSolutionTeacher: function() {
return this.availableSolutions[0].code.teacher;
},

_setSolutionTeacher: function(teacher) {
this.availableSolutions[0].code.teacher = teacher;
},

_removeSolution: function(action) {
if (this.availableSolutions.length < 2) return;

let index = this.selectedSolution;
if (index === 0) index++;
action(index);

this.selectedSolution = Math.max(0, this.availableSolutions.length - 1);
},

_computeSolution: function(selectedSolution, availableSolutions) {
return availableSolutions[selectedSolution];
},

_onSolutionSelected: function() {
setTimeout(() => {
this.setCode(this.solution.code.main, "main", false);
this.setCode(this.solution.workspace.main, "main", true);
});
},

_onContentChange: function(event) {
const editors = this._editors();

const editor = event.target;
if (editor.id === "code-editor") {
this.code.main = editor.code.main;
this._setSolutionCode(editor.code.main);
if (!this.isSyncingBlocks) this._setBlocksSyncOff();
}
if (editor.id === "blocks-editor") {
this.workspace.main = editor.workspace.main;

this._setSolutionWorkspace(editor.workspace.main);
if (this.blocksSyncEnabled) this._copyBlocksToCode();
}
if (editor.id === "library-editor") {
const code = editor.code.main;
this.code.library = code;
this._setSolutionLibrary(code);
editors[ID_BLOCKS].setCode(code, "library");
editors[ID_CODE].setCode(code, "library");
}
if (editor.id === "teacher-library-editor") {
const code = editor.code.main;
this.code.teacher = code;
this._setSolutionTeacher(code);
editors[ID_BLOCKS].setCode(code, "teacher", false);
editors[ID_CODE].setCode(code, "teacher", false);
}
Expand All @@ -265,7 +407,7 @@

_setBlocksSyncOn: function() {
const generatedCode = this.generateCode(false);
const currentCode = this._editors()[ID_CODE].code.main;
const currentCode = this.solution.code.main;

if (currentCode !== "" && currentCode !== generatedCode) {
const userAccepts = confirm(this.localize("blocks-sync-confirm-overwrite"));
Expand All @@ -282,6 +424,7 @@
_copyBlocksToCode() {
const generatedCode = this.generateCode(false);
this.isSyncingBlocks = true;
this._setSolutionCode(generatedCode);
this.setCode(generatedCode);
},

Expand Down
9 changes: 3 additions & 6 deletions app/elements/results-inspector/results-inspector.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,12 @@ <h1 class="title">[[localize("results")]]</h1>
},

adaptType(result) {
if (!result) return "";
const { value: { type } } = result;

return type;
return result && result.value && result.value.type || "";
},

adaptValue(result) {
if (!result) return "";
const { value: { value }, actualReturnValue } = result;
const actualReturnValue = result && result.actualReturnValue;
if (!actualReturnValue) return "";

const format = (node, indentLevel = 0) => {
const type = node.type().toString();
Expand Down
8 changes: 8 additions & 0 deletions app/locales.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@
"shortcut-set-header-description": "Posicionar cabezal",
"show-tutorial": "Mostrar tutorial",
"size": "Tamaño",
"solutions-student": "Alumno",
"solutions-solution": "Solución",
"speed-1": "Velocidad: lenta",
"speed-2": "Velocidad: media",
"speed-3": "Velocidad: rápida",
Expand All @@ -89,13 +91,15 @@
"the-library-has-errors": "Cuidado: La biblioteca tiene errores",
"the-program-has-errors": "El programa tiene errores",
"tooltip-add-board": "Agregar tablero",
"tooltip-add-solution": "Agregar solución",
"tooltip-blocks-sync": "Sincronización Bloques -> Código",
"tooltip-change-board": "Cambiar de tablero",
"tooltip-clean-board": "Limpiar tablero",
"tooltip-hide-attire": "Ocultar vestimenta",
"tooltip-hide-toolbox": "Ocultar herramientas",
"tooltip-inspect-results": "Inspeccionar resultados",
"tooltip-remove-board": "Quitar tablero",
"tooltip-remove-solution": "Quitar solución",
"tooltip-show-attire": "Mostrar vestimenta",
"tooltip-show-toolbox": "Mostrar herramientas",
"tutorial-0": "(Pulsa ESC para cancelar el tutorial)",
Expand Down Expand Up @@ -199,6 +203,8 @@
"shortcut-set-header-description": "Set header",
"show-tutorial": "Show tutorial",
"size": "Size",
"solutions-student": "Student",
"solutions-solution": "Solution",
"speed-1": "Speed: slow",
"speed-2": "Speed: medium",
"speed-3": "Speed: fast",
Expand All @@ -210,13 +216,15 @@
"the-library-has-errors": "Warning: The library has errors",
"the-program-has-errors": "The program has errors",
"tooltip-add-board": "Add board",
"tooltip-add-solution": "Add solution",
"tooltip-blocks-sync": "Blocks -> Code synchronization",
"tooltip-change-board": "Change board",
"tooltip-clean-board": "Clean board",
"tooltip-hide-attire": "Hide attire",
"tooltip-hide-toolbox": "Hide toolbox",
"tooltip-inspect-results": "Inspect results",
"tooltip-remove-board": "Remove board",
"tooltip-remove-solution": "Remove solution",
"tooltip-show-attire": "Show attire",
"tooltip-show-toolbox": "Show toolbox",
"tutorial-0": "(Press ESC to cancel the tutorial)",
Expand Down
Loading

0 comments on commit be45780

Please sign in to comment.