diff --git a/staff/joseramon-rodriguez/shapes/hangman/Button.js b/staff/joseramon-rodriguez/shapes/hangman/Button.js new file mode 100644 index 000000000..d5132a757 --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/hangman/Button.js @@ -0,0 +1,10 @@ +function Button() { + Component.call(this, 'button') +} + +Button.prototype = Object.create(Component.prototype) +Button.prototype.constructor = Button + +Button.prototype.setType = function (type) { + this.container.type = type +} \ No newline at end of file diff --git a/staff/joseramon-rodriguez/shapes/hangman/CharBoxes.js b/staff/joseramon-rodriguez/shapes/hangman/CharBoxes.js new file mode 100644 index 000000000..18de24476 --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/hangman/CharBoxes.js @@ -0,0 +1,37 @@ +function CharBoxes(words) { + Component.call(this, 'div') + + this.setId('characters') + this.setStyle('display', 'flex') + this.setStyle('gap', '5px') + this.setStyle('margin', '5px') + + this.boxes = [] + + for (var i = 0; i < words.length; i++) { + var char = words[i] + + var charBox = new Component('div') + charBox.setStyle('border', '1px solid black') + charBox.setStyle('font-family', 'courier') + charBox.setStyle('font-size', '36px') + charBox.setStyle('padding', '5px') + charBox.setStyle('background-color', 'black') + charBox.setStyle('min-width', '20px') + charBox.setStyle('user-select', 'none') + charBox.setText(char) + + this.add(charBox) + this.boxes.push(charBox) + } +} + +CharBoxes.prototype = Object.create(Component.prototype) +CharBoxes.prototype.constructor = CharBoxes + +CharBoxes.prototype.showChar = function (index) { + var charBox = this.boxes[index] + + charBox.setStyle('background-color', 'transparent') + +} \ No newline at end of file diff --git a/staff/joseramon-rodriguez/shapes/hangman/Component.js b/staff/joseramon-rodriguez/shapes/hangman/Component.js new file mode 100644 index 000000000..635684228 --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/hangman/Component.js @@ -0,0 +1,27 @@ +function Component(tagName) { + this.container = document.createElement(tagName) +} + +Component.prototype.setId = function (id) { + this.container.id = id +} + +Component.prototype.setText = function (text) { + this.container.innerText = text +} + +Component.prototype.add = function (component) { + if (!(component instanceof Component)) throw new TypeError('component is not a Component') + + this.container.appendChild(component.container) +} + +Component.prototype.remove = function (component) { + if (!(component instanceof Component)) throw new TypeError('component is not a Component') + + this.container.removeChild(component.container) +} + +Component.prototype.setStyle = function (property, value) { + this.container.style[property] = value +} \ No newline at end of file diff --git a/staff/joseramon-rodriguez/shapes/hangman/Form.js b/staff/joseramon-rodriguez/shapes/hangman/Form.js new file mode 100644 index 000000000..cb8de9a66 --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/hangman/Form.js @@ -0,0 +1,14 @@ +function Form() { + Component.call(this, 'form') +} + +Form.prototype = Object.create(Component.prototype) +Form.prototype.constructor = Form + +Form.prototype.onSubmit = function (callback) { + this.container.onSubmit = callback +} + +Form.prototype.reset = function () { + this.container.reset() +} \ No newline at end of file diff --git a/staff/joseramon-rodriguez/shapes/hangman/GuessForm.js b/staff/joseramon-rodriguez/shapes/hangman/GuessForm.js new file mode 100644 index 000000000..dcb4ec5cc --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/hangman/GuessForm.js @@ -0,0 +1,38 @@ +function GuessForm() { + Form.call(this) + + this.setStyle('display', 'flex') + this.setStyle('gap', '10px') + + var label = new Label + label.setFor('guessInput') + label.setText('Type a letter') + this.add(label) + + var charInput = new Input + charInput.setId('guessInput') + charInput.setStyle('maxWidth', '20px') + charInput.container.maxLength = '1' + this.add(charInput) + + this.charInput = charInput + + var button = new Button + button.setType('submit') + button.setText('Send') + this.add(button) +} + +GuessForm.prototype = Object.create(Form.prototype) +GuessForm.prototype.constructor = GuessForm + +GuessForm.prototype.onSubmit = function (callback) { + this.container.onsubmit = function (event) { + event.preventDefault() + + var char = this.charInput.getValue() + + callback(char) + }.bind(this) +} + diff --git a/staff/joseramon-rodriguez/shapes/hangman/Hangman.js b/staff/joseramon-rodriguez/shapes/hangman/Hangman.js new file mode 100644 index 000000000..79ece5240 --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/hangman/Hangman.js @@ -0,0 +1,81 @@ +function Hangman(width, height) { + Shape2D.call(this, width, height, 'transparent') + + this.setLocation(50, 500) + + + var gallowBase = new Shape2D(100, 0) + gallowBase.setStyle('border', '1px solid blue') + gallowBase.setLocation(this.width - gallowBase.width - 5, this.height) + this.add(gallowBase) + + var gallowBar1 = new Shape2D(0, 200) + gallowBar1.setStyle('border', '1px solid red') + gallowBar1.setLocation(this.width - 5 - (gallowBase.width / 2), this.height - gallowBar1.height) + this.add(gallowBar1) + + var gallowBar2 = new Shape2D(50, 0) + gallowBar2.setStyle('border', '1px solid green') + gallowBar2.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, 0) + this.add(gallowBar2) + + var gallowBar3 = new Shape2D(0, 50) + gallowBar3.setStyle('border', '1px solid orange') + gallowBar3.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, 0) + this.add(gallowBar3) + + var head = new Shape2D(20, 20) + head.setStyle('border', '1px solid brown') + head.setStyle('borderRadius', '50%') + head.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width - head.width / 2, gallowBar3.height) + //this.add(head) + + var body = new Shape2D(0, 50) + body.setStyle('border', '1px solid gray') + //this.add(body) + body.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height) + + var rightArm = new Shape2D(25, 0) + rightArm.setStyle('border', '1px solid pink') + rightArm.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height * 0.25) + //this.add(rightArm) + + var leftArm = new Shape2D(25, 0) + leftArm.setStyle('border', '1px solid purple') + leftArm.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width - leftArm.width, gallowBar3.height + head.height + body.height * 0.25) + //this.add(leftArm) + + var rightLeg = new Shape2D(0, 25) + rightLeg.setStyle('border', '1px solid yellowgreen') + rightLeg.setStyle('transform-origin', 'top left') + rightLeg.setStyle('transform', 'rotate(45deg)') + rightLeg.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height) + //this.add(rightLeg) + + var leftLeg = new Shape2D(0, 25) + leftLeg.setStyle('border', '1px solid magenta') + leftLeg.setStyle('transform-origin', 'top left') + leftLeg.setStyle('transform', 'rotate(-45deg)') + leftLeg.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height) + //this.add(leftLeg) + + // this.head = head + // this.body = body + // this.rightArm = rightArm + // this.leftArm = leftArm + // this.rightLeg = rightLeg + // this.leftLeg = leftLeg + + this.parts = [head, body, rightArm, leftArm, rightLeg, leftLeg] + +} + +Hangman.prototype = Object.create(Shape2D.prototype) +Hangman.prototype.constructor = Hangman + +Hangman.prototype.setFails = function (count) { + var part = this.parts[count - 1] + + this.add(part) +} + diff --git a/staff/joseramon-rodriguez/shapes/hangman/Index.html b/staff/joseramon-rodriguez/shapes/hangman/Index.html new file mode 100644 index 000000000..035ec3716 --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/hangman/Index.html @@ -0,0 +1,28 @@ + + + +
+ + +