Created competition-element to display regional competitions.

1 files changed, 58 insertions, 0 deletions

diff --git a/src/components/competition-element.js b/src/components/competition-element.js
new file mode 100644
index 0000000..afa94d2
--- /dev/null
+++ b/src/components/competition-element.js
@@ -0,0 +1,58 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { LitElement, html } from '@polymer/lit-element';
+
+// Import paper elements
+import '@polymer/paper-card/paper-card.js';
+
+class CompetitionElement extends LitElement {
+  _render(props) {
+    return html`
+      <style>
+
+        paper-card {
+            --paper-card-background-color: #f7f7f7;
+            width:      100%;
+            text-align: center;
+        }
+
+      </style>
+      <paper-card 
+      onmouseover   ="${() => this.toggleTab()}" 
+      onmouseout    ="${() => this.toggleTab()}">
+        <div class="card-content">
+            <h3>${props.name}</h3>
+            <p hidden="${!this.infoTabOpen}"> ${props.information}</p>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() { return {
+    name:           String,
+    information:    String,
+    infoTabOpen:    Boolean
+  }};
+
+  constructor() {
+    super();
+
+    this.name           =   "Competition";
+    this.information    =   "Competition Information";
+    this.infoTabOpen    =   false;
+  }
+
+  toggleTab() {
+      this.infoTabOpen  =   !this.infoTabOpen;
+  }
+}
+
+window.customElements.define('competition-element', CompetitionElement);