add hangman to shapes b00tc4mp#200

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
+}

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')
+
+}

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
+}

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()
+}

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)
+}
+

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)
+}
+

staff/joseramon-rodriguez/shapes/hangman/Index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hangman</title>
+</head>
+
+<body>
+    <!--atomic-->
+    <script src="Component.js"></script>
+    <script src="Shape2D.js"></script>
+    <script src="Label.js"></script>
+    <script src="Input.js"></script>
+    <script src="Button.js"></script>
+    <script src="Form.js"></script>
+    <script src="Hangman.js"></script>
+    <script src="GuessForm.js"></script>
+
+    <!--molecular-->
+    <script src="StartForm.js"></script>
+    <script src="CharBoxes.js"></script>
+
+    <script src="Index.js"></script>
+</body>
+
+</html>

staff/joseramon-rodriguez/shapes/hangman/Input.js

@@ -0,0 +1,11 @@
+function Input() {
+    Component.call(this, 'input')
+}
+
+Input.prototype = Object.create(Component.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+    return this.container.value
+}
+

staff/joseramon-rodriguez/shapes/hangman/Label.js

@@ -0,0 +1,10 @@
+function Label() {
+    Component.call(this, 'label')
+}
+
+Label.prototype = Object.create(Component.prototype)
+Label.prototype.constructor = Label
+
+Label.prototype.setFor = function (htmlfor) {
+    this.container.htmlFor = htmlfor
+}

staff/joseramon-rodriguez/shapes/hangman/Shape2D.js

@@ -0,0 +1,74 @@
+function Shape2D(width, height, color) {
+    Component.call(this, 'div')
+
+    this.width = width
+    this.height = height
+    this.color = color
+
+    this.x = 0
+    this.y = 0
+
+    this.container.style.position = 'absolute'
+    this.container.style.left = this.x + 'px'
+    this.container.style.top = this.y + 'px'
+    this.container.style.width = this.width + 'px'
+    this.container.style.height = this.height + 'px'
+    this.container.style.backgroundColor = this.color
+}
+
+Shape2D.prototype = Object.create(Component.prototype)
+Shape2D.prototype.constructor = Shape2D
+
+// location
+
+Shape2D.prototype.setX = function (x) {
+    this.x = x
+
+    this.container.style.left = this.x + 'px'
+}
+
+Shape2D.prototype.getX = function () {
+    return this.x
+}
+
+Shape2D.prototype.setY = function (y) {
+    this.y = y
+
+    this.container.style.top = this.y + 'px'
+}
+
+Shape2D.prototype.getY = function () {
+    return this.y
+}
+
+Shape2D.prototype.setLocation = function (x, y) {
+    this.setX(x)
+    this.setY(y)
+}
+
+// dimensions
+
+Shape2D.prototype.setWidth = function (width) {
+    this.width = width
+
+    this.container.style.width = this.width + 'px'
+}
+
+Shape2D.prototype.getWidth = function () {
+    return this.width
+}
+
+Shape2D.prototype.setHeight = function (height) {
+    this.height = height
+
+    this.container.style.height = this.height + 'px'
+}
+
+Shape2D.prototype.getHeight = function () {
+    return this.height
+}
+
+Shape2D.prototype.setDimensions = function (width, height) {
+    this.setWidth(width)
+    this.setHeight(height)
+}

staff/joseramon-rodriguez/shapes/hangman/StartForm.js

@@ -0,0 +1,35 @@
+function StartForm() {
+    Form.call(this)
+
+    this.setStyle('display', 'flex')
+    this.setStyle('gap', '10px')
+
+    var wordsLabel = new Label
+    wordsLabel.setFor('words')
+    wordsLabel.setText('Words')
+    this.add(wordsLabel)
+
+    var wordsInput = new Input
+    wordsInput.setId('words')
+    this.add(wordsInput)
+
+    this.wordsInput = wordsInput
+
+    var startButton = new Button
+    startButton.setType('submit')
+    startButton.setText('Start')
+    this.add(startButton)
+}
+
+StartForm.prototype = Object.create(Form.prototype)
+StartForm.prototype.constructor = StartForm
+
+StartForm.prototype.onSubmit = function (callback) {
+    this.container.onsubmit = function (event) {
+        event.preventDefault()
+
+        const value = this.wordsInput.getValue()
+
+        callback(value)
+    }.bind(this)
+}