Started ai game

src/games/ai/components/app.tsx

@@ -0,0 +1,13 @@
+import { Header } from "./header";
+import { Chat } from "./chat";
+import { Input } from "./input";
+
+export const App = () => {
+    return (
+        <div class='app'>
+            <Header />
+            <Chat />
+            <Input />
+        </div>
+    );
+};

src/games/ai/components/chat.tsx

@@ -0,0 +1,7 @@
+export const Chat = () => {
+    return (
+        <div class="chat">
+            Chat
+        </div>
+    );
+}

src/games/ai/components/header.tsx

@@ -0,0 +1,7 @@
+export const Header = () => {
+    return (
+        <div class="header">
+            Header
+        </div>
+    );
+}

src/games/ai/components/input.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useContext } from "preact/hooks";
+import { GlobalContext } from "../context";
+
+export const Input = () => {
+    const { input, setInput } = useContext(GlobalContext);
+
+    const handleChange = useCallback((e: Event) => {
+        if (e.target instanceof HTMLTextAreaElement) {
+            setInput(e.target.value);
+        }
+    }, []);
+
+    const handleSend = useCallback(() => {
+        console.log('Send:', input);
+        setInput('');
+    }, [input]);
+
+    const handleKeyDown = useCallback((e: KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    }, [handleSend]);
+
+    return (
+        <div class="chat-input">
+            <textarea onInput={handleChange} onKeyDown={handleKeyDown} value={input} />
+            <button onClick={handleSend}>Send</button>
+        </div>
+    );
+}

src/games/ai/context.tsx

@@ -0,0 +1,36 @@
+import { createContext } from "preact";
+import { useMemo, useState } from "preact/hooks";
+
+export interface ISettings {
+    connectionUrl: string;
+    input: string;
+}
+
+export interface IActions {
+    setConnectionUrl: (url: string) => void;
+    setInput: (url: string) => void;
+}
+
+export type IGlobalContext = ISettings & IActions;
+
+export const GlobalContext = createContext<IGlobalContext>({} as IGlobalContext);
+
+export const GlobalContextProvider = ({ children }: { children?: any }) => {
+    const [settings, setSettings] = useState<ISettings>({
+        connectionUrl: 'http://192.168.10.102:5001',
+        input: '',
+    });
+
+    const actions: IActions = useMemo(() => ({
+        setConnectionUrl: (connectionUrl) => setSettings(s => ({ ...s, connectionUrl })),
+        setInput: (input) => setSettings(s => ({ ...s, input })),
+    }), []);
+
+    const value = useMemo(() => ({ ...settings, ...actions }), [settings, actions])
+
+    return (
+        <GlobalContext.Provider value={value}>
+            {children}
+        </GlobalContext.Provider>
+    );
+}

src/games/ai/index.tsx

@@ -0,0 +1,14 @@
+import { render } from "preact";
+import { GlobalContextProvider } from "./context";
+import { App } from "./components/app";
+
+import './style.css';
+
+export default function main() {
+    render(
+        <GlobalContextProvider>
+            <App />
+        </GlobalContextProvider>,
+        document.body
+    );
+}

src/games/ai/style.css

@@ -0,0 +1,72 @@
+* {
+    box-sizing: border-box;
+}
+
+:root {
+    --color: #DCDCD2;
+    --backgroundColor: #333333;
+}
+
+body {
+    color: var(--color);
+    background-color: var(--backgroundColor);
+    width: 100dvw;
+    height: 100dvh;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    font-size: 16px;
+
+    .app {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        max-width: 1200px;
+        height: 100%;
+
+        >.header {
+            display: flex;
+            flex-direction: row;
+            height: 36px;
+            background-color: yellow;
+            width: 100%;
+        }
+
+        >.chat {
+            display: flex;
+            flex-direction: row;
+            height: 100%;
+            background-color: gray;
+            flex-grow: 1;
+            width: 100%;
+            scrollbar-width: thin;
+            scrollbar-color: var(--color) transparent;
+        }
+
+        >.chat-input {
+            display: flex;
+            flex-direction: row;
+            height: auto;
+            min-height: 48px;
+            background-color: green;
+            width: 100%;
+
+            textarea {
+                color: var(--color);
+                background-color: var(--backgroundColor);
+                font-size: 1em;
+                font-family: sans-serif;
+                background-color: transparent;
+                resize: none;
+                appearance: none;
+                outline: none;
+                border: none;
+                width: 100%;
+                scrollbar-width: thin;
+                scrollbar-color: var(--color) transparent;
+            }
+        }
+    }
+}