sketch: map editor framing

readme.md

@@ -3,3 +3,5 @@
 
 # ⚒ tinyforge
 
+*small game, big strategies*
+

s/dom/elements/app.css.ts

@@ -1,7 +1,7 @@
 
 import {css} from "@benev/slate"
 
-export const styles = css`
+export default css`
 
 :host {
 	display: block;

s/dom/elements/app.ts

@@ -1,14 +1,11 @@
 
-import {html} from "@benev/slate"
-
 import {nexus} from "../nexus.js"
-import {styles} from "./app.css.js"
+import styles from "./app.css.js"
+import {MapEditor} from "../views/map-editor.js"
 
 export const TinyforgeApp = nexus.shadow_component(use => {
 	use.styles(styles)
 
-	return html`
-		<h1>TINYFORGE</h1>
-	`
+	return MapEditor([])
 })
 

s/dom/views/map-editor.css.ts

@@ -0,0 +1,32 @@
+
+import {css} from "@benev/slate"
+
+export default css`
+
+.easel {
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+canvas {
+	width: 100%;
+	height: 100%;
+	background: #222;
+}
+
+.sidebar {
+	position: absolute;
+	width: 3em;
+	height: 100%;
+
+	background: #333a;
+	top: 0;
+
+	&.alpha { left: 0; }
+	&.bravo { right: 0; }
+}
+
+`
+

s/dom/views/map-editor.ts

@@ -0,0 +1,18 @@
+
+import {html} from "@benev/slate"
+
+import {nexus} from "../nexus.js"
+import styles from "./map-editor.css.js"
+
+export const MapEditor = nexus.shadow_view(use => () => {
+	use.styles(styles)
+
+	return html`
+		<div class="easel">
+			<canvas></canvas>
+			<div class="sidebar alpha"></div>
+			<div class="sidebar bravo"></div>
+		</div>
+	`
+})
+

s/index.css

@@ -1,8 +1,20 @@
 
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+
 html, body {
 	font-size: 16px;
-	background: #333;
+	background: #111;
 	color: #fffc;
 	height: 100%;
 }
 
+tinyforge-app {
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	aspect-ratio: 16 / 9;
+}