Commit ffd9225c authored by Ota Mikusek's avatar Ota Mikusek
Browse files

Create web

parent 8809bbba

web/index.html

0 → 100644
+25 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pepper Word Craft</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <header>

        <h1>Pepper Word Craft</h1>

    </header>

    <main>

        <section id="elements">

            <h2>Available Words</h2>

            <div id="element_list"></div>

        </section>

        <section id="workspace">

            <h2>Workspace</h2>

            <div id="drop_area">Drop words here to combine</div>

        </section>

    </main>

    <script src="script.js"></script>

</body>

</html>
 
 No newline at end of file

web/script.js

0 → 100644
+62 −0
Original line number Diff line number Diff line 
class MainApp {

    constructor() {

        this.element_element = document.getElementById('element_list');

        this.dropArea = document.getElementById('drop_area');



        this.discoveredElements = new Set();

        this.add_element("water");

        this.add_element("fire");

        this.add_element("earth");

        this.add_element("air");



        this.word_to_combine = null;



        let dragover_function = e => {

            e.preventDefault();

            this.dropArea.classList.add('active');

        }

        this.dropArea.addEventListener('dragover', dragover_function.bind(this));



        let dragleave_function = () => {

            this.dropArea.classList.remove('active');

        }

        this.dropArea.addEventListener('dragleave', dragleave_function.bind(this));



        let drop_function = e => {

            e.preventDefault();

            this.dropArea.classList.remove('active');

            console.log(e)

            this.add_to_combination(e.dataTransfer.getData('text'));

        }

        this.dropArea.addEventListener('drop', drop_function.bind(this));

    }



    add_element(word) {

        this.discoveredElements.add(word);



        const new_element = document.createElement('div');

        new_element.classList.add('element');

        new_element.setAttribute('draggable', true);

        new_element.dataset.name = word;

        new_element.textContent = word;

        new_element.addEventListener('dragstart', e => {

            e.dataTransfer.setData('text', word);

        });

        this.element_element.appendChild(new_element);

    }



    combine_words(word1, word2) {

        return word1 + " " + word2;

    }



    add_to_combination(word) {

        if (this.word_to_combine == null) {

            this.word_to_combine = word;

            return

        }

        this.add_element(this.combine_words(this.word_to_combine, word));

        this.word_to_combine = null;

    }

}



document.mainApp = new MainApp();

web/styles.css

0 → 100644
+73 −0
Original line number Diff line number Diff line 
/* styles.css */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background: #f4f4f4;

}



header {

    background: #1d85da;

    color: white;

    text-align: center;

    padding: 1em 0;

}



main {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-around;

    margin: 20px;

}



section {

    width: 30%;

    background: white;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    padding: 15px;

    margin: 10px;

}



h2 {

    text-align: center;

    color: #333;

}



#element_list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    padding: 10px;

}



.element {

    background: #2196f3;

    color: white;

    padding: 10px;

    border-radius: 5px;

    cursor: grab;

    text-align: center;

    width: 80px;

    text-transform: capitalize;

}



.element:active {

    cursor: grabbing;

}



#workspace #drop_area {

    height: 150px;

    border: 2px dashed #aaa;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #aaa;

    margin: 10px;

    border-radius: 8px;

}



#workspace #drop_area.active {

    border-color: #4caf50;

    color: #4caf50;

}