diff --git a/editor/client/app/components/style.scss b/editor/client/app/components/style.scss index 259c222d..e7bae8dc 100644 --- a/editor/client/app/components/style.scss +++ b/editor/client/app/components/style.scss @@ -17,3 +17,4 @@ @import "ui-route/projects/index/style"; @import "ui-route/projects/new/style"; @import "ui-route/projects/project/index/style"; +@import "ui-route/emulators/hex/style"; diff --git a/editor/client/app/components/ui-route/emulators/hex/component.js b/editor/client/app/components/ui-route/emulators/hex/component.js new file mode 100644 index 00000000..b3ffb1c1 --- /dev/null +++ b/editor/client/app/components/ui-route/emulators/hex/component.js @@ -0,0 +1,14 @@ +import Component from '@ember/component'; +import { computed } from '@ember/object'; + +let base = 'https://felipemanga.github.io/ProjectABE/?skin=BareFit&color=FFFFFF&url=' + +export default Component.extend({ + classNameBindings: [ ':ui-route-emulators-hex' ], + + url: computed('model.url', function() { + let { model: { url } } = this; + return `${base}${encodeURIComponent(url)}`; + }).readOnly(), + +}); diff --git a/editor/client/app/components/ui-route/emulators/hex/style.scss b/editor/client/app/components/ui-route/emulators/hex/style.scss new file mode 100644 index 00000000..9920582c --- /dev/null +++ b/editor/client/app/components/ui-route/emulators/hex/style.scss @@ -0,0 +1,17 @@ +.ui-route-emulators-hex { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + > .content { + display: flex; + flex-direction: column; + border: 1px solid fade-out(#000, 0.7); + box-shadow: 0 1px 5px fade-out(#000, 0.7); + > .iframe { + width: 512px; + height: 256px; + } + } +} diff --git a/editor/client/app/components/ui-route/emulators/hex/template.hbs b/editor/client/app/components/ui-route/emulators/hex/template.hbs new file mode 100644 index 00000000..4b310453 --- /dev/null +++ b/editor/client/app/components/ui-route/emulators/hex/template.hbs @@ -0,0 +1,3 @@ +