diff --git a/README_NEW.md b/README_NEW.md new file mode 100644 index 0000000..78892c2 --- /dev/null +++ b/README_NEW.md @@ -0,0 +1,13 @@ +## Conventions + +For file structure reference this [repo](https://github.com/wiledal/vanilla-bean). + +Branches are named after category, task number and with meaningful description. E.g.'ui-18/add_portrait_component'. + +## Warnings + +Parcel in v2 has a [bug](https://github.com/parcel-bundler/parcel/issues/5965) witch it's cache and will not update changes on website without manual page refresh. + +## Useful resources + +- [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), diff --git a/index.html b/index.html index 12db059..9a065fc 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,6 @@
- + diff --git a/src/app/App.js b/src/app/App.js index bd85fe3..e9196bf 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1 +1,3 @@ -export const App = ({ options }) => {}; +export const App = ({ options: { rootNodeId } }) => { + const rootNode = document.getElementById(rootNodeId); +}; diff --git a/src/components/Portrait/Portrait.js b/src/components/Portrait/Portrait.js new file mode 100644 index 0000000..43e89a1 --- /dev/null +++ b/src/components/Portrait/Portrait.js @@ -0,0 +1,30 @@ +import * as classes from './style.module.scss'; + +export const PORTRAIT_COMPONENT_NAME = 'portrait-component'; + +class Portrait extends HTMLElement { + constructor() { + super(); + this._contents = new DocumentFragment(); + + this.imageContainer = Portrait.imageContainerBuilder(); + + this._contents.appendChild(this.imageContainer); + } + + connectedCallback() { + this.imageContainer.style.backgroundImage = `url(${this.getAttribute( + 'data-image-url', + )})`; + this.appendChild(this._contents); + } + + static imageContainerBuilder() { + const imageContainer = document.createElement('div'); + imageContainer.className = classes.imageContainer; + + return imageContainer; + } +} + +customElements.define(PORTRAIT_COMPONENT_NAME, Portrait); diff --git a/src/components/Portrait/style.module.scss b/src/components/Portrait/style.module.scss new file mode 100644 index 0000000..886f7ff --- /dev/null +++ b/src/components/Portrait/style.module.scss @@ -0,0 +1,11 @@ +@use '../../themes/theme.scss' as *; + +.portrait { + display: flex; + flex: 1; + box-shadow: $red-box-shadow; + border-radius: $border-radius; + min-height: 100px; + background-size: cover; + background-position: center; +} diff --git a/src/index.js b/src/index.js index 49ce214..5d4ea41 100644 --- a/src/index.js +++ b/src/index.js @@ -7,11 +7,14 @@ const SW_API_BASE_URL = process.env.SW_API_BASE_URL || 'https://swapi.dev/api'; const QUIZ_MAX_TIME = process.env.QUIZ_MAX_TIME_SECONDS ? process.env.QUIZ_MAX_TIME_SECONDS * ONE_SECOND_MILLIS : 120 * ONE_SECOND_MILLIS; +const ROOT_NODE_ID = 'swquiz-app'; -window.onload = () => +window.onload = () => { App({ options: { swApiBaseUrl: SW_API_BASE_URL, quizMaxTime: QUIZ_MAX_TIME, + rootNodeId: ROOT_NODE_ID, }, }); +}; diff --git a/src/themes/theme.scss b/src/themes/theme.scss new file mode 100644 index 0000000..f507fbd --- /dev/null +++ b/src/themes/theme.scss @@ -0,0 +1,3 @@ +$red-box-shadow: 4px 4px 40px 0px #ff0000e5, 0px 4px 4px 0px #00000040; + +$border-radius: 16px;