section SettingsSectionWeb.tsx

0% Statements 0/28
0% Branches 0/2
0% Functions 0/6
0% Lines 0/27
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useCallback } from "react";
import l10n from "shared/lib/lang/l10n";
import settingsActions from "store/features/settings/settingsActions";
import { Textarea } from "ui/form/Textarea";
import { Button } from "ui/buttons/Button";
import { CardAnchor, CardHeading } from "ui/cards/Card";
import { SearchableSettingRow } from "ui/form/SearchableSettingRow";
import { SettingRowInput, SettingRowLabel } from "ui/form/SettingRow";
import { WebTemplateSelect } from "components/forms/WebTemplateSelect";
import { SearchableCard } from "ui/cards/SearchableCard";
import { useAppDispatch, useAppSelector } from "store/hooks";
import buildGameActions from "store/features/buildGame/buildGameActions";
import { InputGroup, InputGroupAppend } from "ui/form/InputGroup";
import { EjectIcon } from "ui/icons/Icons";
 
interface SettingsSectionWebProps {
  searchTerm: string;
}
 
export const SettingsSectionWeb = ({ searchTerm }: SettingsSectionWebProps) => {
  const dispatch = useAppDispatch();
 
  const customHead = useAppSelector(
    (state) => state.project.present.settings.customHead,
  );
  const webTemplate = useAppSelector(
    (state) => state.project.present.settings.webTemplate,
  );
 
  const onChangeCustomHead = useCallback(
    (e: React.ChangeEvent<HTMLTextAreaElement>) =>
      dispatch(
        settingsActions.editSettings({ customHead: e.currentTarget.value }),
      ),
    [dispatch],
  );
 
  const onChangeWebTemplate = useCallback(
    (webTemplate: string) => {
      dispatch(settingsActions.editSettings({ webTemplate }));
    },
    [dispatch],
  );
 
  const onEjectDefaultTemplate = useCallback(() => {
    dispatch(buildGameActions.ejectWebTemplate());
  }, [dispatch]);
 
  return (
    <SearchableCard
      searchTerm={searchTerm}
      searchMatches={[
        l10n("SETTINGS_WEB_EXPORT"),
        l10n("FIELD_WEB_TEMPLATE"),
        l10n("MENU_EJECT_WEB_TEMPLATE"),
      ]}
    >
      <CardAnchor id="settingsWeb" />
      <CardHeading>{l10n("SETTINGS_WEB_EXPORT")}</CardHeading>
 
      <SearchableSettingRow
        searchTerm={searchTerm}
        searchMatches={[
          l10n("FIELD_WEB_TEMPLATE"),
          l10n("MENU_EJECT_WEB_TEMPLATE"),
        ]}
      >
        <SettingRowLabel>{l10n("FIELD_WEB_TEMPLATE")}</SettingRowLabel>
        <SettingRowInput>
          <InputGroup>
            <WebTemplateSelect
              value={webTemplate}
              onChange={onChangeWebTemplate}
            />
            <InputGroupAppend>
              <Button
                title={l10n("MENU_EJECT_WEB_TEMPLATE")}
                onClick={onEjectDefaultTemplate}
              >
                <EjectIcon />
              </Button>
            </InputGroupAppend>
          </InputGroup>
        </SettingRowInput>
      </SearchableSettingRow>
 
      <SearchableSettingRow
        searchTerm={searchTerm}
        searchMatches={[l10n("FIELD_CUSTOM_HTML_HEADER")]}
      >
        <SettingRowLabel>{l10n("FIELD_CUSTOM_HTML_HEADER")}</SettingRowLabel>
        <SettingRowInput>
          <pre>
            &lt;!DOCTYPE html&gt;{"\n"}
            &lt;html&gt;{"\n  "}
            &lt;head&gt;{"\n  "}
            ...
          </pre>
          <Textarea
            id="customHead"
            value={customHead || ""}
            placeholder={
              'e.g. <style type"text/css">\nbody {\n  background-color: darkgreen;\n}\n</style>'
            }
            onChange={onChangeCustomHead}
            rows={15}
            style={{ fontFamily: "monospace" }}
          />
          <pre>
            {"  "}&lt;/head&gt;{"\n  "}
            &lt;body&gt;{"\n  "}
            ...{"\n  "}
            &lt;body&gt;{"\n"}
            &lt;html&gt;
          </pre>
        </SettingRowInput>
      </SearchableSettingRow>
    </SearchableCard>
  );
};