create new files en hangman b00tc4mp#264

staff/tarek-blkraiet/shapes/hangman/GuessForm.js

@@ -0,0 +1,37 @@
+class GuessForm extends Form {
+    constructor() {
+        super()
+
+        this.setStyle('display', 'flex')
+        this.setStyle('gap', '10px')
+
+        const charLabel = new Label
+        charLabel.setFor('char')
+        charLabel.setText('character')
+        this.add(charLabel)
+
+        const charInput = new Input
+        charInput.setId('char')
+        charInput.setMaxLength(1)
+        charInput.setStyle('width', '20px')
+        this.add(charInput)
+
+        this.charInput = charInput
+
+        const guessButton = new Button
+        guessButton.setType('submit')
+        guessButton.setText('Guess')
+        this.add(guessButton)
+
+    }
+    onSubmit(callback) {
+        super.onSubmit(event => {
+            event.preventDefaulft()
+
+            const char = this.charInput.getValue()
+
+            this.reset()
+            callback(char)
+        })
+    }
+}

staff/tarek-blkraiet/shapes/hangman/Shape2D.js

@@ -0,0 +1,74 @@
+class Shape2D extends Component {
+    constructor(width, height, color) {
+        super('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
+
+    }
+
+    //location
+
+    setX(X) {
+        this.x = X
+        this.container.style.left = this.x + 'px'
+    }
+
+    getX() {
+        return this.x
+    }
+
+    setY(y) {
+        this.y = y
+
+        this.container.style.top = this.y + 'px'
+    }
+
+    getY() {
+        return this.y
+    }
+
+    setLocation(x, y) {
+        this.setX(x)
+        this.setY(y)
+    }
+
+    // dimensions
+
+    setWidth(width) {
+        this.width = width
+
+        this.container.style.width = this.width + 'px'
+
+    }
+
+    getWidth() {
+        return this.width
+    }
+
+    setHeight(height) {
+        this.height = height
+
+        this.container.style.height = this.height + 'px'
+    }
+
+    getHeight() {
+        return this.height
+    }
+
+    setDimensions(width, height) {
+        this.setWidth(width)
+        this.setHeight(height)
+    }
+}

staff/tarek-blkraiet/shapes/hangman/component.js

@@ -0,0 +1,26 @@
+class Component {
+    constructor(tagName) {
+        this.container = document.createElement(tagName)
+    }
+
+    setId(id) {
+        this.container.id = id
+    }
+    setText(text) {
+        this.container.innerText = text
+    }
+
+    add(Component) {
+        if (!(Component instanceof Component)) throw new TypeError('component is nit a component')
+
+        this.container.appendChild(Component.container)
+    }
+    remove(component) {
+        if (!(component instanceof Component)) throw new TypeError('component is not a component')
+
+        this.container.removeChild(component.container)
+    }
+    setStyle(property, value) {
+        this.container.style[property] = value
+    }
+}

staff/tarek-blkraiet/shapes/hangman/form.js

@@ -0,0 +1,12 @@
+class form extends Component {
+    constructor() {
+        super('form')
+    }
+    onSubmit(callback) {
+        this.container.onsubmit = callback
+    }
+    reset() {
+        this.container.reset()
+    }
+
+}

staff/tarek-blkraiet/shapes/hangman/hangman.js

@@ -0,0 +1,64 @@
+class Hangman extends Shape2D {
+    constructor(width, height) {
+        super(width, height, 'transparent')
+
+        const gallowBase = new Shape2D(100, 0)
+        gallowBase.setStyle('border', '1px solid blue')
+        gallowBase.setLocation(this.width - gallowBase.width - 5, this.height)
+        this.add(gallowBase)
+
+        const 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)
+
+        const gallowBar2 = new Shape2D(50, 0)
+        gallowBar2.setStyle('border', '1px solid green')
+        gallowBar2.setLocation(this.width - 5 - (gallowBase / 2) - gallowBar2.width, 0)
+        this.add(gallowBar2)
+
+        const gallowBar3 = new Shape2D(0, 50)
+        gallowBar3.setStyle('border', '1px solid orange') - ga
+        gallowBar3.setLocation(this.width - 5 - (gallowbase.width / 2) - gallowBar2.width, 0)
+        this.add(gallowBar3)
+
+        const 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)
+
+        const body = new Shape2D(0, 50)
+        body.setStyle('border', '1px solid gray')
+        body.setLocation(this.width - 5 - (gallow.width / 2) - gallowBar2.width, gallowBar3.height + head.height)
+
+        const 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)
+
+
+        const 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)
+
+
+        const 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)
+
+        const 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.parts = [head, body, rightArm, leftArm, rightLeg, leftLeg]
+
+    }
+    setFails(count) {
+        const part = this.parts[count - 1]
+
+        this.add(part)
+    }
+}

staff/tarek-blkraiet/shapes/hangman/index.html

@@ -0,0 +1,27 @@
+<!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="label.js"></script>
+     <Script src="input.js"></Script>
+     <Script src="button.js"></Script>
+     <Script src="form.js"></Script>
+     <script src="Shape2D.js"></script>
+
+     <!-- molecular-->
+      <script src="StartForm.js"></script>
+      <script src="CharBoxes.js"></script>
+      <script src="GuessForm.js"></script>
+      <script src="hangman.js"></script>
+
+      <script src="index.js"></script>
+
+</body>
+</html>

staff/tarek-blkraiet/shapes/hangman/input.js

@@ -0,0 +1,17 @@
+class input extends Component {
+    constructor(){
+        super('input')
+    }
+
+    getValue(){
+        return this.container.value
+    }
+
+    setMaxLength(maxLength){
+        this.container.maxLength = maxLength
+    }
+
+    setType(type){
+        this.container.type = type
+    }
+}

staff/tarek-blkraiet/shapes/hangman/label.js

@@ -0,0 +1,11 @@
+class Label extends Component {
+
+    constructor(){
+        super('label')
+    }
+
+    setFor(htmlFor){
+        this.container.htmlFor = htmlFor
+    }
+
+}