squash commits

packages/space-opera/src/components/best_practices/best_practices.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {html} from 'lit';
+import {customElement, state, query} from 'lit/decorators.js';
+import {reduxStore} from '../../space_opera_base';
+import {BestPracticesState, State} from '../../types';
+import {ConnectedLitElement} from '../connected_lit_element/connected_lit_element';
+import {CheckboxElement} from '../shared/checkbox/checkbox';
+import {dispatchSetARButton, dispatchSetARPrompt, dispatchSetProgressBar, getBestPractices} from './reducer';
+
+/**
+ * A section of best practices to enable or disable.
+ */
+@customElement('best-practices')
+export class BestPractices extends ConnectedLitElement {
+  @state() bestPractices?: BestPracticesState;
+
+  @query('me-checkbox#progress-bar') progressBarCheckbox!: CheckboxElement;
+  @query('me-checkbox#ar-button') arButtonCheckbox!: CheckboxElement;
+  @query('me-checkbox#ar-prompt') arPromptCheckbox!: CheckboxElement;
+
+  stateChanged(state: State) {
+    this.bestPractices = getBestPractices(state);
+  }
+
+  onProgressBarChange() {
+    reduxStore.dispatch(
+        dispatchSetProgressBar(this.progressBarCheckbox.checked));
+  }
+
+  onARButtonChange() {
+    reduxStore.dispatch(dispatchSetARButton(this.arButtonCheckbox.checked));
+  }
+
+  onARPromptChange() {
+    reduxStore.dispatch(dispatchSetARPrompt(this.arPromptCheckbox.checked));
+  }
+
+  render() {
+    return html`
+    <div style="font-size: 14px; font-weight: 500; margin: 0px 0px 10px 0px;">
+      Use Custom:
+    </div>
+    <me-checkbox
+      id="progress-bar"
+      label="Progress Bar"
+      ?checked="${this.bestPractices?.progressBar}"
+      @change=${this.onProgressBarChange}
+      >
+    </me-checkbox>
+    <me-checkbox
+      id="ar-button"
+      label="AR Button"
+      ?checked="${this.bestPractices?.arButton}"
+      @change=${this.onARButtonChange}
+      >
+    </me-checkbox>
+    <me-checkbox
+      id="ar-prompt"
+      label="AR Prompt"
+      ?checked="${this.bestPractices?.arPrompt}"
+      @change=${this.onARPromptChange}
+      >
+    </me-checkbox>
+    `;
+  }
+}
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'best-practices': BestPractices;
+  }
+}