add a new game - hagman - REACT - firt steps b00tc4mp#8

frameloop · Nov 15, 2024 · f7e05af · f7e05af
1 parent 5009aa4
commit f7e05af
Show file tree

Hide file tree

Showing 12 changed files with 378 additions and 0 deletions.
diff --git a/staff/quique-cabrera/playground/hangman.1/index.html b/staff/quique-cabrera/playground/hangman.1/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/staff/quique-cabrera/playground/hangman.1/main.1.js b/staff/quique-cabrera/playground/hangman.1/main.1.js
@@ -0,0 +1,13 @@
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+const title = React.createElement('h1', { children: ['Hangman'] })
+
+const charLabel = React.createElement('label', { children: ['Char'], htmlFor: 'char' })
+const charInput = React.createElement('input', { id: 'char' })
+const CharSubmitButton = React.createElement('button', { children: ['Try'], type: 'submit' })
+const charForm = React.createElement('form', { children: [charLabel, charInput, CharSubmitButton] })
+
+root.render([title, charForm])
+
+
+
diff --git a/staff/quique-cabrera/playground/hangman.1/main.2.js b/staff/quique-cabrera/playground/hangman.1/main.2.js
@@ -0,0 +1,36 @@
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+const jsx = React.createElement
+
+const title = jsx('h1', {
+    children: ['Hangman'],
+    style: {
+        backgroundColor: 'chocolate',
+        color: 'gold'
+    }
+})
+
+const charLabel = jsx('label', { children: ['Char'], htmlFor: 'char' })
+const charInput = jsx('input', { type: 'text', id: 'char' })
+const CharSubmitButton = jsx('button', { children: ['Try'], type: 'submit' })
+
+const charForm = jsx('form', {
+    children: [charLabel, charInput, CharSubmitButton],
+    onSubmit: event => {
+        event.preventDefault()
+
+        const form = event.target
+
+        const input = form.char
+
+        const char = input.value
+
+        // console.log(envet.target.chart.value)
+        console.log(char)
+    }
+})
+
+root.render([title, charForm])
+
+
+
diff --git a/staff/quique-cabrera/playground/hangman.1/main.js b/staff/quique-cabrera/playground/hangman.1/main.js
@@ -0,0 +1,37 @@
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+const jsx = React.createElement
+
+const title = jsx('h1', {
+    children: ['Hangman'],
+    style: {
+        backgroundColor: 'chocolate',
+        color: 'gold'
+    }
+})
+
+const charForm = jsx('form', {
+    children: [
+        jsx('label', { children: 'Char', htmlFor: 'char' }),
+        jsx('input', { type: 'text', id: 'char' }),
+        jsx('button', { children: 'Try', type: 'submit' }),
+    ],
+
+    onSubmit: event => {
+        event.preventDefault()
+
+        const form = event.target
+
+        const input = form.char
+
+        const char = input.value
+
+        // console.log(envet.target.chart.value)
+        console.log(char)
+    }
+})
+
+root.render([title, charForm])
+
+
+
diff --git a/staff/quique-cabrera/playground/hangman.2/index.html b/staff/quique-cabrera/playground/hangman.2/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+
+    <script src="main.jsx" type="text/babel"></script>
+</body>
+
+</html>
diff --git a/staff/quique-cabrera/playground/hangman.2/main.jsx b/staff/quique-cabrera/playground/hangman.2/main.jsx
@@ -0,0 +1,21 @@
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+const title = <h1 style={{ backgroundColor: 'chocolate', color: 'gold' }}>Hangman</h1>
+
+const charForm = <form onSubmit={event => {
+    event.preventDefault()
+
+    const form = event.target
+    const input = form.char
+
+    const char = input.value
+
+    console.log(char)
+}
+}>
+    <label htmlFor="char">Char</label>
+    <input type='text' id="char" />
+    <button type="submit">Try</button>
+</form>
+
+root.render([title, charForm])
diff --git a/staff/quique-cabrera/playground/hangman.3/index.html b/staff/quique-cabrera/playground/hangman.3/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+
+    <script src="main.jsx" type="text/babel"></script>
+</body>
+
+</html>
diff --git a/staff/quique-cabrera/playground/hangman.3/main.jsx b/staff/quique-cabrera/playground/hangman.3/main.jsx
@@ -0,0 +1,45 @@
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+const Component = React.Component
+
+class HelloWorld extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        return <h2>Hello, {this.props.name || 'World!'}</h2>
+    }
+}
+
+class App extends Component {
+    constructor(props) {
+        super(props)
+    }
+    render() {
+        return <main>
+            <h1 style={{ backgroundColor: 'chocolate', color: 'gold' }}>Hangman</h1>
+
+            <form onSubmit={event => {
+                event.preventDefault()
+
+                const form = event.target
+                const input = form.char
+
+                const char = input.value
+
+                console.log(char)
+            }
+            }>
+                <label htmlFor="char">Char</label>
+                <input type='text' id="char" />
+                <button type="submit">Try</button>
+            </form>
+        </main>
+    }
+}
+
+root.render([
+    <HelloWorld name={'Peter'} />,
+    <App />
+])
diff --git a/staff/quique-cabrera/playground/hangman.4/index.html b/staff/quique-cabrera/playground/hangman.4/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+
+    <script src="main.jsx" type="text/babel"></script>
+</body>
+
+</html>
diff --git a/staff/quique-cabrera/playground/hangman.4/main.jsx b/staff/quique-cabrera/playground/hangman.4/main.jsx
@@ -0,0 +1,55 @@
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+const Component = React.Component
+
+class App extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            feedback: null,
+            assertions: []
+        }
+    }
+    render() {
+        return <main>
+            <h1 style={{
+                backgroundColor: 'chocolate',
+                color: 'gold'
+            }}>Hangman</h1>
+
+            <form onSubmit={
+                event => {
+                    event.preventDefault()
+
+                    const form = event.target
+                    const input = form.char
+                    const char = input.value
+                    form.reset()
+
+                    const word = this.props.guess
+                    const index = word.indexOf(char)
+
+                    if (index < 0)
+                        this.setState({ feedback: '👎🏻' })
+                    else {
+                        const assertions = this.state.assertions.concat()
+
+                        assertions[index] = char
+
+                        this.setState({ feedback: '👍🏻', assertions })
+                    }
+                }
+            }>
+                <label htmlFor="char">Char</label>
+                <input type='text' id="char" />
+                <button type="submit">Try</button>
+            </form>
+
+            <p>{this.props.player}: {this.state.feedback}</p>
+            <p>assertions: {this.state.assertions.join(' _ ')}</p>
+        </main>
+    }
+}
+
+root.render(<App player="QuiQue" guess={'murcielago'} />)
diff --git a/staff/quique-cabrera/playground/hangman/index.html b/staff/quique-cabrera/playground/hangman/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+
+    <script src="main.jsx" type="text/babel"></script>
+</body>
+
+</html>
diff --git a/staff/quique-cabrera/playground/hangman/main.jsx b/staff/quique-cabrera/playground/hangman/main.jsx
@@ -0,0 +1,72 @@
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+const Component = React.Component
+
+class App extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            feedback: null,
+            assertions: Array(props.guess.length).fill('_'), // Initialize with dashes based on the length of the word
+            completed: false // New state to track if the word has been completed.
+        }
+    }
+
+    render() {
+        return <main>
+            <h1 style={{
+                backgroundColor: 'chocolate',
+                color: 'gold'
+            }}>Hangman</h1>
+
+            {/* Display the form only if the word has not been completed */}
+            {!this.state.completed && (
+                <form onSubmit={
+                    event => {
+                        event.preventDefault()
+
+                        const form = event.target
+                        const input = form.char
+                        const char = input.value
+                        form.reset()
+
+                        const word = this.props.guess
+                        let assertions = [...this.state.assertions] //... => Create a array copy 
+                        let feedback = '👎🏻'
+
+                        // We loop through the word to update the dashes if the letter is present
+                        word.split('').forEach((letter, index) => {
+                            if (letter === char) {
+                                assertions[index] = char
+                                feedback = '👍🏻'
+                            }
+                        })
+
+                        // Check if the word has been completed
+                        const completed = assertions.join('') === word
+
+                        // update status
+                        this.setState({ feedback, assertions, completed })
+                    }
+                }>
+                    <label htmlFor="char">Char</label>
+                    <input type='text' id="char" maxLength="1" required />
+                    <button type="submit">Try</button>
+                </form>
+            )}
+
+            <p>{this.props.player}: {this.state.feedback}</p>
+            <p>assertions: {this.state.assertions.join(' ')}</p>
+
+            {/* Display a congratulatory message if the word has been completed */}
+            {this.state.completed && (
+                <p style={{ color: 'green', fontWeight: 'bold' }}>
+                    Congratulations! You've guessed the word! {this.props.guess}
+                </p>
+            )}
+        </main>
+    }
+}
+
+root.render(<App player="QuiQue" guess={'murcielago'} />)