zefix

2023-02-26 12:03:19 +01:00
commit adca1a14a5
28 changed files with 2477 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FW Bot Interface</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "fw-bot-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "v6": "0.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
+    "bootstrap": "^5.2.3",
+    "react-bootstrap": "^2.7.0",
+    "react-html-parser": "^2.0.2",
+    "react-router-dom": "^6.7.0",
+    "sass": "^1.57.1",
+    "vite": "^4.0.0"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,31 @@
+import {useState} from 'react'
+import React from 'react'
+import axios from 'axios';
+//import './App.css'
+import './style.scss';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import {Container} from "react-bootstrap";
+import {Route, Routes, BrowserRouter} from "react-router-dom";
+
+
+import Navigation from "./components/navigation/navigation.jsx";
+import Zoom from "./components/zoom/zoom.jsx";
+import Home from "./routes/Home.jsx";
+import Settings from "./routes/Settings";
+import Botlite from "./routes/Botlite.jsx";
+
+
+const App = () => {
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="botlite" element={<Botlite />} />
+                <Route path="/zoom" element={<Zoom />} />
+                <Route path="/settings" element={<Settings />} />
+            </Routes>
+        </BrowserRouter>
+    )
+}
+
+export default App;
--- a/src/components/account/account.jsx
+++ b/src/components/account/account.jsx
@@ -0,0 +1,45 @@
+import {Button, Card, Col} from 'react-bootstrap';
+import './account.scss';
+
+const Account = ({account, sendForm}) => {
+    return (
+        <Col xs="12" md="6" xl="4">
+            <Card className="cmp-account">
+                <Card.Header>
+                    {account.user}@{account.welt}
+                </Card.Header>
+                <Card.Body>
+                    <ul className="cmp-account__list">
+                        <li className="cmp-account__list-item">
+                            <span className="cmp-account__list-item-label">Gold:</span>
+                            {account.gm}
+                        </li>
+                        <li className="cmp-account__list-item">
+                            <span className="cmp-account__list-item-label">LPs:</span>
+                            {account.lp} / {account.full}
+                        </li>
+                        <li className="cmp-account__list-item">
+                            <span className="cmp-account__list-item-label">
+                                XP:</span> {account.XP}
+                        </li>
+                        <li className="cmp-account__list-item">
+                            <span className="cmp-account__list-item-label">Speed:</span>
+                            {account.speed}
+                        </li>
+                    </ul>
+                    <div className="cmp-account__button-list">
+                        {account.status.includes('PAUSIERT') ? <Button className="cmp-account__button" variant="success" onClick={sendForm} data-action="resume">Bot fortsetzen</Button> : ''}
+                        {!account.status.includes('PAUSIERT') && !account.status.includes('Route beendet') ? <Button className="cmp-account__button" variant="warning" onClick={sendForm} data-action="pause">Bot pausieren</Button> : ''}
+                        {!account.status.includes('beendet') ? <Button className="cmp-account__button" variant="danger" onClick={sendForm} data-action="stop">Bot stoppen</Button> : ''}
+                    </div>
+                </Card.Body>
+                <Card.Footer>
+                    Aktueller Status: <span className="cmp-account__route-status">{account.status}</span>
+                </Card.Footer>
+
+            </Card>
+        </Col>
+    )
+}
+
+export default Account;
--- a/src/components/account/account.scss
+++ b/src/components/account/account.scss
@@ -0,0 +1,29 @@
+.cmp-account {
+  &__list {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  &__list-item-label {
+    font-weight: bold;
+    min-width: 4.5rem;
+    display: inline-block;
+  }
+
+  &__button-list {
+    text-align: center;
+  }
+
+  &__button {
+    margin-right: 0.25rem;
+    min-width: 5.5rem;
+  }
+
+  &__list-item {
+    padding-bottom: 0.25rem;
+  }
+
+  &__route-status {
+    font-weight: bold;
+  }
+}
--- a/src/components/accounts/accounts.jsx
+++ b/src/components/accounts/accounts.jsx
@@ -0,0 +1,12 @@
+import Account from "../account/account.jsx";
+
+
+const Accounts = ({accounts, sendForm}) => {
+    return (
+        <div className="row flex-row">
+            {accounts && accounts.map((account, index) => <Account account={account} sendForm={sendForm} key={index}/>)}
+        </div>
+    )
+}
+
+export default Accounts;
--- a/src/components/buddeln/buddel.scss
+++ b/src/components/buddeln/buddel.scss
@@ -0,0 +1,9 @@
+.cmp-buddeln {
+  display: flex;
+  margin-bottom: 3rem;
+
+  &__switch {
+    display: inline-block;
+    margin-right: 1.5rem;
+  }
+}
--- a/src/components/buddeln/buddeln.jsx
+++ b/src/components/buddeln/buddeln.jsx
@@ -0,0 +1,20 @@
+import {Button, Form} from "react-bootstrap";
+import './buddel.scss';
+
+const Buddeln = ({sendForm, buddelnInput, handleSwitch}) => {
+    return (
+        <div className="cmp-buddeln">
+            <div className="col-12 col-md-6 mb-3">
+                <Form.Check type="switch" id="custom-switch" label="Buddeln" className="cmp-buddeln__switch"
+                            onChange={handleSwitch}  data-target="buddelnInput" checked={buddelnInput}/>
+                <Button onClick={sendForm} data-action="" className="cmp-modeselector__button" variant="secondary">Reload
+                    Props</Button>
+            </div>
+            <div className="col-12 col-md-6 shopPriceImg">
+                <img src="https://freewar.zocker.eu/grafik.php"/>
+            </div>
+        </div>
+    )
+}
+
+export default Buddeln;
--- a/src/components/modeSelector/data.json
+++ b/src/components/modeSelector/data.json
@@ -0,0 +1,38 @@
+[
+  {
+    "label": "Blutwurm",
+    "action": "quest_blutwurm"
+  },
+  {
+    "label": "Onlo-Knochen",
+    "action": "quest_onloknochen"
+  },
+  {
+    "label": "Seelenkugeln",
+    "action": "quest_kugeln"
+  },
+  {
+    "label": "Gasthaus Scan",
+    "action": "quest_gasthaus_scan"
+  },
+  {
+    "label": "Koch",
+    "action": "quest_koch"
+  },
+  {
+    "label": "Permafeld",
+    "action": "perma_feld"
+  },
+  {
+    "label": "Runenpuzzel",
+    "action": "quest_runenpuzzel"
+  },
+  {
+    "label": "Aufträge",
+    "action": "quest_auftraege"
+  },
+  {
+    "label": "Verbuddeln",
+    "action": "quest_verbuddeln"
+  }
+]
--- a/src/components/modeSelector/modeSelector.jsx
+++ b/src/components/modeSelector/modeSelector.jsx
@@ -0,0 +1,16 @@
+import {Button, Row, Col} from "react-bootstrap";
+import './modeSelector.scss';
+import data from './data.json';
+
+const ModeSelector = ({sendForm}) => {
+    return (
+        <div className="cmp-modeselector">
+                <h2>Modus 1: Quests</h2>
+            <div>
+                {data.map((quest, index) => <Button key={index} data-target="buddelnInput" onClick={sendForm} data-action={quest.action} className="cmp-modeselector__button" variant="secondary">{quest.label}</Button>)}
+            </div>
+        </div>
+    )
+}
+
+export default ModeSelector;
--- a/src/components/modeSelector/modeSelector.scss
+++ b/src/components/modeSelector/modeSelector.scss
@@ -0,0 +1,8 @@
+.cmp-modeselector {
+  margin-bottom: 3rem;
+
+  &__button {
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+}
--- a/src/components/navigation/navigation.jsx
+++ b/src/components/navigation/navigation.jsx
@@ -0,0 +1,18 @@
+import {Button, Nav, Navbar} from 'react-bootstrap';
+import './navigation.scss'
+import {Link} from "react-router-dom";
+
+const Navigation = () => {
+
+    return (
+        <Navbar className="cmp-navigation" bg="dark" expand="lg">
+            <Button className="cmp-navigation__button" variant="secondary">Zoom +</Button>
+            <Button className="cmp-navigation__button" variant="secondary">Zoom -</Button>
+            <Button className="cmp-navigation__button" variant="secondary" disabled>100%</Button>
+            <Link to="/">Home</Link>
+            <Link to="/settings">Settings</Link>
+        </Navbar>
+    )
+}
+
+export default Navigation;
--- a/src/components/navigation/navigation.scss
+++ b/src/components/navigation/navigation.scss
@@ -0,0 +1,8 @@
+.cmp-navigation {
+  padding-right: 1rem;
+  padding-left: 1rem;
+
+  &__button {
+    margin-right: 0.5rem;
+  }
+}
--- a/src/components/navigator/data.json
+++ b/src/components/navigator/data.json
@@ -0,0 +1,57 @@
+[
+  {
+    "name": "Baw",
+    "xCoordinate": 92,
+    "yCoordinate": 105
+  },
+  {
+    "name": "Baw Mento",
+    "xCoordinate": 98,
+    "yCoordinate": 120
+  },
+  {
+    "name": "Maha",
+    "xCoordinate": 96,
+    "yCoordinate": 101
+  },
+  {
+    "name": "Natla Shop",
+    "xCoordinate": 507,
+    "yCoordinate": 57
+  },
+  {
+    "name": "ZL",
+    "xCoordinate": 88,
+    "yCoordinate": 89
+  },
+  {
+    "name": "Zauberlabor",
+    "xCoordinate": 49,
+    "yCoordinate": 83
+  },
+  {
+    "name": "Chaoslabor",
+    "xCoordinate": 44,
+    "yCoordinate": 76
+  },
+  {
+    "name": "Unterkunft-Eingang",
+    "xCoordinate": 52,
+    "yCoordinate": 75
+  },
+  {
+    "name": "Gewebe",
+    "xCoordinate": 80,
+    "yCoordinate": 99
+  },
+  {
+    "name": "Blutforschung",
+    "xCoordinate": 78,
+    "yCoordinate": 93
+  },
+  {
+    "name": "Stiftung",
+    "xCoordinate": 87,
+    "yCoordinate": 112
+  }
+]
--- a/src/components/navigator/navigator.jsx
+++ b/src/components/navigator/navigator.jsx
@@ -0,0 +1,63 @@
+import {Button, Form, InputGroup, Col, Row} from "react-bootstrap";
+import './navigator.scss';
+import data from './data.json';
+
+const Navigator = ({accounts, handleInputs, xCoordinate, yCoordinate, fillCoordinateInputs, sendForm}) => {
+
+    return (
+        <div className="cmp-navigator">
+            <div className="cmp-navigator__buttonlist">
+                {data.map((destination, index) => {
+                        return (
+                            <Button className="cmp-navigator__button"
+                                    data-xcoordinate={destination.xCoordinate}
+                                    data-ycoordinate={destination.yCoordinate}
+                                    key={index}
+                                    onClick={fillCoordinateInputs}
+                                    variant="secondary">
+                                {destination.name}
+                            </Button>
+                        )
+                    }
+                )}
+            </div>
+
+            <Row fluid>
+                <Col xs="12" lg="4">
+                    <Form.Select aria-label="Default select example" className="cmp-navigator__account-select">
+                        {accounts.map((account, index) => <option key={index} value={account.id}>{account.user}@{account.welt}</option>)}
+                    </Form.Select>
+                </Col>
+                <Col xs="6" lg="2">
+                    <InputGroup className="cmp-navigator__coordiate-input">
+                        <InputGroup.Text id="basic-addon1">X:</InputGroup.Text>
+                        <Form.Control
+                            value={xCoordinate}
+                            onChange={handleInputs}
+                            data-target="xCoordinateInput"
+                            type="number"
+                        />
+                    </InputGroup>
+                </Col>
+                <Col xs="6" lg="2">
+                    <InputGroup className="">
+                        <InputGroup.Text id="basic-addon2">Y:</InputGroup.Text>
+                        <Form.Control
+                            value={yCoordinate}
+                            onChange={handleInputs}
+                            data-target="yCoordinateInput"
+                            type="number"
+                        />
+                    </InputGroup>
+                </Col>
+                <Col xs="12" lg="4">
+                    <Button className="cmp-navigator__button" variant="secondary" onClick={sendForm} data-action="goto">goto</Button>
+                    <Button className="cmp-navigator__button" variant="secondary">field</Button>
+                    <Button className="cmp-navigator__button" variant="secondary">entdecker</Button>
+                </Col>
+            </Row>
+        </div>
+    )
+}
+
+export default Navigator;
--- a/src/components/navigator/navigator.scss
+++ b/src/components/navigator/navigator.scss
@@ -0,0 +1,16 @@
+.cmp-navigator {
+  margin-bottom: 3rem;
+
+  &__button {
+    margin-right: 0.25rem;
+    margin-bottom: 0.5rem;
+  }
+
+  &__account-select {
+    margin-bottom: 0.5rem;
+  }
+
+  &__coordiate-input {
+    margin-bottom: 0.5rem;
+  }
+}
--- a/src/components/routeSelector/routeSelector.jsx
+++ b/src/components/routeSelector/routeSelector.jsx
@@ -0,0 +1,35 @@
+import {Button, Col, Form, InputGroup, Row} from "react-bootstrap";
+import './routeSelector.scss';
+
+const RouteSelector = ({handleInputs, routeStartInput, sendForm, prefillRouteStartInput}) => {
+    return (
+        <div className="cmp-routeSelector">
+            <h2>Modus 2: Feste Route ablaufen</h2>
+            <Row>
+                <Col xs="12" md="6">
+                    <InputGroup className="cmp-routeSelector__route-select-wrapper">
+                        <InputGroup.Text id="basic-addon1">Route:</InputGroup.Text>
+                        <Form.Select onChange={handleInputs} data-target="routeSelect" aria-label="Default select example" className="cmp-routeSelector__route-select">
+                            <option value="67">Chaosroute</option>
+                        </Form.Select>
+                    </InputGroup>
+                </Col>
+                <Col xs="12" md="6" className="cmp-routeSelector__start-input">
+                    <InputGroup className="">
+                        <InputGroup.Text id="basic-addon2">Start</InputGroup.Text>
+                        <Form.Control
+                            type="text"
+                            value={routeStartInput}
+                            onChange={handleInputs}
+                            data-target="routeStartInput"
+                        />
+                    </InputGroup>
+                    <Button onClick={prefillRouteStartInput} className="cmp-routeSelector__start-button" variant="success" >+1</Button>
+                    <Button onClick={sendForm} className="cmp-routeSelector__start-button" variant="success" data-action="route">Start</Button>
+                </Col>
+            </Row>
+        </div>
+    )
+}
+
+export default RouteSelector;
--- a/src/components/routeSelector/routeSelector.scss
+++ b/src/components/routeSelector/routeSelector.scss
@@ -0,0 +1,23 @@
+.cmp-routeSelector {
+  margin-bottom: 3rem;
+
+  &__route-select-wrapper {
+    margin-bottom: 0.5rem;
+
+    @media(min-width: 768px) {
+      margin-bottom: 0;
+    }
+  }
+
+  &__route-select {
+    margin-bottom: 0;
+  }
+
+  &__start-button {
+    margin-left: 0.25rem;
+  }
+
+  &__start-input {
+    display: flex;
+  }
+}
--- a/src/components/zoom/zoom.jsx
+++ b/src/components/zoom/zoom.jsx
@@ -0,0 +1,7 @@
+const Zoom = () => {
+    return (
+        <div>zoom</div>
+    )
+}
+
+export default Zoom;
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/src/routes/Botlite.jsx
+++ b/src/routes/Botlite.jsx
@@ -0,0 +1,217 @@
+import React from 'react'
+import axios from "axios";
+import {Container, Row, Col, Form, InputGroup, Button} from "react-bootstrap";
+import Navigator from "../components/navigator/navigator.jsx";
+import ModeSelector from "../components/modeSelector/modeSelector.jsx";
+import RouteSelector from "../components/routeSelector/routeSelector.jsx";
+import Accounts from "../components/accounts/accounts.jsx";
+import Buddeln from "../components/buddeln/buddeln.jsx";
+
+import data from '../components/navigator/data.json'
+import quests from '../components/modeSelector/data.json';
+
+
+class Botlite extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            zoomInPercent: undefined,
+            accounts: [],
+            accountSelect: undefined,
+            routeSelect: 67,
+            routeStartInput: 0,
+            xCoordinateInput: '',
+            yCoordinateInput: '',
+            buddelnInput: false,
+        }
+    }
+
+    componentDidMount() {
+        console.log('componentDidMount');
+
+        this.getAccountData();
+        setInterval(() => this.getAccountData(), 1000);
+    }
+
+    sendForm = async (e) => {
+        //
+        // http://localhost:8080/freewar/?w=0&x=&y=&routeID=67&rstart=222&action=route
+        const url = 'http://localhost:8080/freewar/';
+        const payload = {
+            w: 0,
+            x: this.state.xCoordinateInput,
+            y: this.state.yCoordinateInput,
+            routeID: this.state.routeSelect,
+            rstart: this.state.routeStartInput,
+            action: e.target.dataset.action
+        };
+
+        axios.get('http://localhost:8080/freewar/', {params: payload})
+            .then(function (response) {
+                //handle success
+                console.log(response.data);
+                this.setState({
+                    routeStartInput: 0,
+                })
+            })
+            .catch(function (error) {
+                console.log(error);
+            });
+    }
+
+    getAccountData = async () => {
+        try {
+            const response = await axios.get("http://localhost:8080/freewar/table_json.jsp", {mode: 'cors'});
+            const accounts = response.data;
+            console.log({accounts});
+
+            this.setState({
+                accounts: accounts,
+                accountSelect: accounts[0].id
+            })
+
+        } catch (err) {
+            this.setState({
+                accounts: []
+            })
+        }
+    }
+
+    handleInputs = (e) => {
+        const value = e.target.value;
+        const target = e.target.dataset.target;
+        this.setState({
+            [target]: value,
+        })
+
+        console.log(this.state.buddelnInput);
+    }
+
+    handleSwitch = (e) => {
+        const value = e.target.checked;
+        const target = e.target.dataset.target;
+        this.setState({
+            [target]: value,
+        })
+
+    }
+
+    fillCoordinateInputs = (e) => {
+        this.setState({
+            xCoordinateInput: e.target.dataset.xcoordinate,
+            yCoordinateInput: e.target.dataset.ycoordinate,
+        })
+    }
+
+    prefillRouteStartInput = () => {
+        const account = this.state.accounts.find(account => account.id === this.state.accountSelect);
+        if (account && account.status.includes('Route:')) {
+            const currentPosition = account.status.split(' ')[1];
+            const newPosition = parseInt(currentPosition) + 1;
+            this.setState({
+                routeStartInput: newPosition
+            })
+        }
+    }
+
+
+    render() {
+        return (
+            <div>
+                <Container fluid className="py-2" style={{backgroundColor: '#eee'}}>
+                    <Row>
+                        <Col xs="2">
+                            <Form.Select aria-label="Default select example" className="cmp-navigator__account-select">
+                                {this.state.accounts.map((account, index) => <option key={index}
+                                                                                     value={account.id}>{account.user}@{account.welt}</option>)}
+                            </Form.Select>
+                        </Col>
+                        <Col xs="2">
+                            <Form.Select aria-label="Default select example" className="cmp-navigator__account-select">
+                                {data.map((destination, index) => <option key={index} value={destination.name}>{destination.name}</option>)}
+                            </Form.Select>
+                        </Col>
+                        <Col xs="1">
+                            <InputGroup className="cmp-navigator__coordiate-input">
+                                <InputGroup.Text id="basic-addon1">X:</InputGroup.Text>
+                                <Form.Control
+                                    value={this.state.xCoordinate}
+                                    onChange={this.handleInputs}
+                                    data-target="xCoordinateInput"
+                                    type="number"
+                                />
+                            </InputGroup>
+                        </Col>
+                        <Col xs="1">
+                            <InputGroup className="">
+                                <InputGroup.Text id="basic-addon2">Y:</InputGroup.Text>
+                                <Form.Control
+                                    value={this.state.yCoordinate}
+                                    onChange={this.handleInputs}
+                                    data-target="yCoordinateInput"
+                                    type="number"
+                                />
+                            </InputGroup>
+                        </Col>
+                        <Col xs="3" style={{display: "flex"}}>
+                            <Button style={{flexGrow: 2}} className="cmp-navigator__button" variant="secondary" onClick={this.sendForm} data-action="goto">goto</Button>
+                            <Button style={{flexGrow: 2}} className="cmp-navigator__button" variant="secondary">field</Button>
+                            <Button style={{flexGrow: 2}} className="cmp-navigator__button" variant="secondary">entdecker</Button>
+                        </Col>
+                        <Col xs="3">
+                            <Form.Select aria-label="Default select example" className="cmp-navigator__account-select" style={{display: "inline-block", width: "auto", marginRight: "0.25rem"}}>
+                                {quests.map((quest, index) => <option key={index} value={quest.label}>{quest.label}</option>)}
+                            </Form.Select>
+                            <Button variant="success" data-action="route">Starte Quest</Button>
+                        </Col>
+                    </Row>
+                    <hr style={{marginRight: "auto", marginLeft: "auto", width: "90%"}}/>
+                    <Row>
+                        <Col xs="4">
+                            <ul style={{listStyle: "none", display: "flex", paddingLeft: 0}}>
+                                <li style={{marginRight: "0.5rem"}}>
+                                    <span>Gold:</span>
+                                    12345
+                                </li>
+                                <li style={{marginRight: "0.5rem"}}>
+                                    <span>LPs:</span>
+                                    6499 / 6500
+                                </li>
+                                <li style={{marginRight: "0.5rem"}}>
+                            <span>
+                                XP:</span> 1234567
+                                </li>
+                                <li style={{marginRight: "0.5rem"}}>
+                                    <span>Speed:</span>
+                                    1234
+                                </li>
+                            </ul>
+                        </Col>
+                        <Col xs="3">
+                            <InputGroup className="cmp-routeSelector__route-select-wrapper">
+                                <InputGroup.Text id="basic-addon1">Route:</InputGroup.Text>
+                                <Form.Select onChange={this.handleInputs} data-target="routeSelect" aria-label="Default select example" className="cmp-routeSelector__route-select">
+                                    <option value="67">Chaosroute</option>
+                                </Form.Select>
+                            </InputGroup>
+                        </Col>
+                        <Col xs="5" className="cmp-routeSelector__start-input">
+                            <InputGroup className="">
+                                <InputGroup.Text id="basic-addon2">Start</InputGroup.Text>
+                                <Form.Control
+                                    type="text"
+                                    value={this.routeStartInput}
+                                    onChange={this.handleInputs}
+                                    data-target="routeStartInput"
+                                />
+                            </InputGroup>
+                            <Button onClick={this.sendForm} className="cmp-routeSelector__start-button" variant="success" data-action="route">Start</Button>
+                        </Col>
+                    </Row>
+                </Container>
+            </div>
+        )
+    }
+}
+
+export default Botlite;
--- a/src/routes/Home.jsx
+++ b/src/routes/Home.jsx
@@ -0,0 +1,150 @@
+import React from 'react'
+import axios from "axios";
+import {Container} from "react-bootstrap";
+import Navigator from "../components/navigator/navigator.jsx";
+import ModeSelector from "../components/modeSelector/modeSelector.jsx";
+import RouteSelector from "../components/routeSelector/routeSelector.jsx";
+import Accounts from "../components/accounts/accounts.jsx";
+import Buddeln from "../components/buddeln/buddeln.jsx";
+
+
+class Home extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            zoomInPercent: undefined,
+            accounts: [],
+            accountSelect: undefined,
+            routeSelect: 67,
+            routeStartInput: 0,
+            xCoordinateInput: '',
+            yCoordinateInput: '',
+            buddelnInput: false,
+        }
+    }
+
+    componentDidMount() {
+        console.log('componentDidMount');
+
+        this.getAccountData();
+        setInterval(() => this.getAccountData() , 1000);
+    }
+
+    sendForm = async (e) => {
+        //
+        // http://localhost:8080/freewar/?w=0&x=&y=&routeID=67&rstart=222&action=route
+        const url = 'http://localhost:8080/freewar/';
+        const payload = {
+            w: 0,
+            x: this.state.xCoordinateInput,
+            y: this.state.yCoordinateInput,
+            routeID: this.state.routeSelect,
+            rstart: this.state.routeStartInput,
+            action: e.target.dataset.action
+        };
+
+        axios.get('http://localhost:8080/freewar/', {params: payload})
+            .then(function (response) {
+                //handle success
+                console.log(response.data);
+                this.setState({
+                    routeStartInput: 0,
+                })
+            })
+            .catch(function (error) {
+                console.log(error);
+            });
+    }
+
+    getAccountData = async () => {
+        try {
+            const response = await axios.get("http://localhost:8080/freewar/table_json.jsp", {mode: 'cors'});
+            const accounts = response.data;
+            console.log({accounts});
+
+            this.setState({
+                accounts: accounts,
+                accountSelect: accounts[0].id
+            })
+
+        } catch (err) {
+            this.setState({
+                accounts: []
+            })
+        }
+    }
+
+    handleInputs = (e) => {
+        const value = e.target.value;
+        const target = e.target.dataset.target;
+        this.setState({
+            [target]: value,
+        })
+
+        console.log(this.state.buddelnInput);
+    }
+
+    handleSwitch = (e) => {
+        const value = e.target.checked;
+        const target = e.target.dataset.target;
+        this.setState({
+            [target]: value,
+        })
+
+    }
+
+    fillCoordinateInputs = (e) => {
+        this.setState({
+            xCoordinateInput: e.target.dataset.xcoordinate,
+            yCoordinateInput: e.target.dataset.ycoordinate,
+        })
+    }
+
+    prefillRouteStartInput = () => {
+        const account = this.state.accounts.find(account => account.id === this.state.accountSelect);
+        if (account && account.status.includes('Route:')) {
+            const currentPosition = account.status.split(' ')[1];
+            const newPosition = parseInt(currentPosition) + 1;
+            this.setState({
+                routeStartInput: newPosition
+            })
+        }
+    }
+
+
+    render() {
+        return (
+            <Container className="pt-3 pt-md-5">
+                <Navigator
+                    accounts={this.state.accounts}
+                    xCoordinate={this.state.xCoordinateInput}
+                    yCoordinate={this.state.yCoordinateInput}
+                    handleInputs={this.handleInputs}
+                    fillCoordinateInputs={this.fillCoordinateInputs}
+                    sendForm={this.sendForm}
+                />
+                <Buddeln
+                    buddelnInput={this.state.buddelnInput}
+                    sendForm={this.sendForm}
+                    handleInputs={this.handleInputs}
+                    handleSwitch={this.handleSwitch}
+                />
+                <ModeSelector
+                    sendForm={this.sendForm}
+                />
+                <RouteSelector
+                    routeStartInput={this.state.routeStartInput}
+                    handleInputs={this.handleInputs}
+                    sendForm={this.sendForm}
+                    prefillRouteStartInput={this.prefillRouteStartInput}
+                />
+                <Accounts
+                    accounts={this.state.accounts}
+                    sendForm={this.sendForm}
+                />
+            </Container>
+        )
+    }
+}
+
+export default Home;
--- a/src/routes/Settings.jsx
+++ b/src/routes/Settings.jsx
@@ -0,0 +1,156 @@
+import axios from "axios";
+import ReactHtmlParser from 'react-html-parser';
+import Navigator from "../components/navigator/navigator.jsx";
+import Buddeln from "../components/buddeln/buddeln.jsx";
+import ModeSelector from "../components/modeSelector/modeSelector.jsx";
+import RouteSelector from "../components/routeSelector/routeSelector.jsx";
+import Accounts from "../components/accounts/accounts.jsx";
+import {Container} from "react-bootstrap";
+import React from "react";
+
+
+class Settings extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            zoomInPercent: undefined,
+            accounts: [],
+            accountSelect: undefined,
+            routeSelect: 67,
+            routeStartInput: 0,
+            xCoordinateInput: '',
+            yCoordinateInput: '',
+            buddelnInput: false,
+        }
+    }
+
+    componentDidMount() {
+        console.log('componentDidMount');
+
+        this.getAccountData();
+        setInterval(() => this.getAccountData() , 1000);
+    }
+
+    adjustZoomLevel = () => {
+
+    }
+
+    sendForm = async (e) => {
+        //
+        // http://localhost:8080/freewar/?w=0&x=&y=&routeID=67&rstart=222&action=route
+        const url = 'http://localhost:8080/freewar/';
+        const payload = {
+            w: 0,
+            x: this.state.xCoordinateInput,
+            y: this.state.yCoordinateInput,
+            routeID: this.state.routeSelect,
+            rstart: this.state.routeStartInput,
+            action: e.target.dataset.action
+        };
+
+        axios.get('http://localhost:8080/freewar/', {params: payload})
+            .then(function (response) {
+                //handle success
+                console.log(response.data);
+                this.setState({
+                    routeStartInput: 0,
+                })
+            })
+            .catch(function (error) {
+                console.log(error);
+            });
+    }
+
+    getAccountData = async () => {
+        try {
+            const response = await axios.get("http://localhost:8080/freewar/table_json.jsp", {mode: 'cors'});
+            const accounts = response.data;
+            console.log({accounts});
+
+            this.setState({
+                accounts: accounts,
+                accountSelect: accounts[0].id
+            })
+
+        } catch (err) {
+            this.setState({
+                accounts: []
+            })
+        }
+    }
+
+    handleInputs = (e) => {
+        const value = e.target.value;
+        const target = e.target.dataset.target;
+        this.setState({
+            [target]: value,
+        })
+
+        console.log(this.state.buddelnInput);
+    }
+
+    handleSwitch = (e) => {
+        const value = e.target.checked;
+        const target = e.target.dataset.target;
+        this.setState({
+            [target]: value,
+        })
+
+    }
+
+    fillCoordinateInputs = (e) => {
+        this.setState({
+            xCoordinateInput: e.target.dataset.xcoordinate,
+            yCoordinateInput: e.target.dataset.ycoordinate,
+        })
+    }
+
+    prefillRouteStartInput = () => {
+        const account = this.state.accounts.find(account => account.id === this.state.accountSelect);
+        if (account && account.status.includes('Route:')) {
+            const currentPosition = account.status.split(' ')[1];
+            const newPosition = parseInt(currentPosition) + 1;
+            this.setState({
+                routeStartInput: newPosition
+            })
+        }
+    }
+
+
+    render() {
+        return (
+            <Container className="pt-3 pt-md-5">
+                <Navigator
+                    accounts={this.state.accounts}
+                    xCoordinate={this.state.xCoordinateInput}
+                    yCoordinate={this.state.yCoordinateInput}
+                    handleInputs={this.handleInputs}
+                    fillCoordinateInputs={this.fillCoordinateInputs}
+                    sendForm={this.sendForm}
+                />
+                <Buddeln
+                    buddelnInput={this.state.buddelnInput}
+                    sendForm={this.sendForm}
+                    handleInputs={this.handleInputs}
+                    handleSwitch={this.handleSwitch}
+                />
+                <ModeSelector
+                    sendForm={this.sendForm}
+                />
+                <RouteSelector
+                    routeStartInput={this.state.routeStartInput}
+                    handleInputs={this.handleInputs}
+                    sendForm={this.sendForm}
+                    prefillRouteStartInput={this.prefillRouteStartInput}
+                />
+                <Accounts
+                    accounts={this.state.accounts}
+                    sendForm={this.sendForm}
+                />
+            </Container>
+        )
+    }
+}
+
+
+export default Settings;
--- a/src/style.scss
+++ b/src/style.scss
@@ -0,0 +1,3 @@
+#root {
+  width: 100%;
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>