Skip to content

Commit

Permalink
finish hangman pay b00tc4mp#204
Browse files Browse the repository at this point in the history
  • Loading branch information
alalluna committed Mar 27, 2024
1 parent 0414c68 commit 7721311
Show file tree
Hide file tree
Showing 8 changed files with 145 additions and 80 deletions.
8 changes: 4 additions & 4 deletions staff/tere-albenca/shapes/hangman/Button.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
function Button(){
Component.call(this,'button')
function Button() {
Component.call(this, 'button')
}

Button.prototype = Object.create(Component.prototype)
Button.prototype.contructor = Button
Button.prototype.constructor = Button

Button.prototype.setType = function(type) {
Button.prototype.setType = function (type) {
this.container.type = type
}
11 changes: 6 additions & 5 deletions staff/tere-albenca/shapes/hangman/CharBoxes.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
function CharBoxes(words){
Component.call(this,'div')
function CharBoxes(words) {
Component.call(this, 'div')

this.setId('characters')
this.setStyle('display','flex')
this.setStyle('gap','5px')
this.setStyle('margin','5px')
this.setStyle('display', 'flex')
this.setStyle('gap', '5px')
this.setStyle('margin', '5px')

this.boxes = []

Expand All @@ -25,6 +25,7 @@ function CharBoxes(words){
this.boxes.push(charBox)
}
}

CharBoxes.prototype = Object.create(Component.prototype)
CharBoxes.prototype.contructor = CharBoxes

Expand Down
12 changes: 6 additions & 6 deletions staff/tere-albenca/shapes/hangman/Component.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
function Component (tagName){
function Component(tagName) {
this.container = document.createElement(tagName)
}

Component.prototype.setId = function (id){
Component.prototype.setId = function (id) {
this.container.id = id
}

Component.prototype.setText = function(text){
Component.prototype.setText = function (text) {
this.container.innerText = text
}

Component.prototype.add = function (component){
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){
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){
Component.prototype.setStyle = function (property, value) {
this.container.style[property] = value
}
63 changes: 59 additions & 4 deletions staff/tere-albenca/shapes/hangman/Hangman.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
function Hangman(width, height){
Shape2D.call(this, width, height,'transparent')

this.setLocation(50,500)
this.setLocation(50, 500)

var gallowBase = new Shape2D(100, 0)
gallowBase.setStyle('border', '1px solid blue')
Expand All @@ -10,14 +10,69 @@ function Hangman(width, height){

var gallowBar1 = new Shape2D(0, 200)
gallowBar1.setStyle('border', '1px solid red')
gallowBar1.setLocation(this.width - 5 - ( gallowBase.width/2), this.height - gallowBar1.height)
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)
gallowBar2.setLocation(this.width - 5 - (gallowBase.width/2) - gallowBar2.width, 0)
this.add(gallowBar2)

var gallowBar3 = new Shape2D(0, 50)
gallowBar3.set
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) - gallowBar3.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(rigthArm)

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)
}
2 changes: 1 addition & 1 deletion staff/tere-albenca/shapes/hangman/Input.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
function Input(){
CompositionEvent.call(this, 'input')
Component.call(this, 'input')
}

Input.prototype = Object.create(Component.prototype)
Expand Down
12 changes: 6 additions & 6 deletions staff/tere-albenca/shapes/hangman/StartForm.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
function StartForm(){
function StartForm() {
Form.call(this)

this.setStyle('display','flex')
this.setStyle('display', 'flex')
this.setStyle('gap', '10px')

var wordsLabel = new wordsLabel
var wordsLabel = new Label
wordsLabel.setFor('words')
wordsLabel.setText('Words')
this.add(wordsLabel)
Expand All @@ -24,12 +24,12 @@ function StartForm(){
StartForm.prototype = Object.create(Form.prototype)
StartForm.prototype.constructor = StartForm

StartForm.prototype.onSubmit = function (callback){
this.container.onSubmit = function(event){
StartForm.prototype.onSubmit = function (callback) {
this.container.onsubmit = function (event) {
event.preventDefault()

const value = this.wordsInput.getValue()

callback(value)
}.blind(this)
}.bind(this)
}
2 changes: 2 additions & 0 deletions staff/tere-albenca/shapes/hangman/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
<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>
Expand Down
115 changes: 61 additions & 54 deletions staff/tere-albenca/shapes/hangman/index.js
Original file line number Diff line number Diff line change
@@ -1,74 +1,81 @@
function Shape2D(width, height, color) {
Component.call(this, 'div')
var body = new Component
body.container = document.body

this.width = width
this.height = height
this.color = color
var title = new Component('h1')
title.setText('Hangman')
body.add(title)

this.x = 0
this.y = 0
var startForm = new StartForm
var charBoxes
var hangman

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
}
startForm.onSubmit(function (words) {
sessionStorage.secret = words

Shape2D.prototype = Object.create(Component.prototype)
Shape2D.prototype.constructor = Shape2D
body.remove(startForm)

// location
charBoxes = new CharBoxes(words)

Shape2D.prototype.setX = function (x) {
this.x = x
hangman = new Hangman(150, 200)
body.add(hangman)

this.container.style.left = this.x + 'px'
}
body.add(charBoxes)

Shape2D.prototype.getX = function () {
return this.x
}
body.add(guessForm)

Shape2D.prototype.setY = function (y) {
this.y = y
startForm.reset()
})

this.container.style.top = this.y + 'px'
}
body.add(startForm)

Shape2D.prototype.getY = function () {
return this.y
}
var guessForm = new GuessForm

Shape2D.prototype.setLocation = function (x, y) {
this.setX(x)
this.setY(y)
}
var failsCount = 0

// dimensions
var assertionsCount = 0

Shape2D.prototype.setWidth = function (width) {
this.width = width
var charsUsed = []

this.container.style.width = this.width + 'px'
}
guessForm.onSubmit(function (char) {
if (!charsUsed.includes(char)) {
charsUsed.push(char)

Shape2D.prototype.getWidth = function () {
return this.width
}
var secret = sessionStorage.secret

Shape2D.prototype.setHeight = function (height) {
this.height = height
for (var i = 0; i < secret.length; i++) {
var charToCompare = secret[i]
if (char === charToCompare) {
charBoxes.showChar(i)
assertionsCount++
}
}

this.container.style.height = this.height + 'px'
}
if (assertionsCount === secret.length) {
setTimeout(function () {
alert('You win!')

Shape2D.prototype.getHeight = function () {
return this.height
}
body.remove(guessForm)
body.remove(hangman)
body.remove(charBoxes)
body.add(startForm)
}, 1000)
}

Shape2D.prototype.setDimensions = function (width, height) {
this.setWidth(width)
this.setHeight(height)
}
if (!secret.includes(char)) {
failsCount++

if (failsCount > 6) {
alert('game over. The solution was ' + sessionStorage.secret)
body.remove(guessForm)
body.remove(hangman)
body.remove(charBoxes)
body.add(startForm)
} else {
hangman.setFails(failsCount)
console.log('fallo')
}
}
guessForm.reset()
} else alert('char was already used')

})

0 comments on commit 7721311

Please sign in to comment.