diff --git a/index.html b/index.html
index 5248a45..50e2076 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,27 @@
cg
+
+
diff --git a/src/main.ts b/src/main.ts
index 4901bd8..9f7e92d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,10 +13,7 @@ import textInputCode from './textinput-test.cg?raw';
import testCode from './test.cg?raw';
import counterApp from './counter.cg?raw';
-const canvas = document.createElement('canvas');
-canvas.width = 800;
-canvas.height = 600;
-canvas.style.border = "1px solid #000";
+const canvas = document.createElement('canvas') as HTMLCanvasElement;
document.body.appendChild(canvas);
const cgCode = stdlibCode + '\n' + designTokensCode + '\n' + uiComponentsCode + '\n' + textInputCode;
@@ -27,13 +24,8 @@ const ast = parser.parse();
console.log(ast);
const env: Env = new Map(Object.entries(builtins));
-// const res = evaluate(ast, env);
-// console.log(res);
-
const appRecord = evaluate(ast, env);
-console.log(appRecord);
-
if (appRecord.kind !== 'record')
throw new Error('Expected record');
diff --git a/src/runtime.ts b/src/runtime.ts
index 8750c28..d8e2c3c 100644
--- a/src/runtime.ts
+++ b/src/runtime.ts
@@ -12,6 +12,18 @@ export type App = {
export function runApp(app: App, canvas: HTMLCanvasElement) {
let state = app.init;
+ function setupCanvas() {
+ const dpr = window.devicePixelRatio || 1;
+
+ canvas.width = window.innerWidth * dpr;
+ canvas.height = window.innerHeight * dpr;
+
+ canvas.style.width = window.innerWidth + 'px';
+ canvas.style.height = window.innerHeight + 'px';
+ }
+
+ setupCanvas();
+
function rerender() {
if (app.view.kind !== 'closure')
throw new Error('view must be a function');
@@ -19,8 +31,8 @@ export function runApp(app: App, canvas: HTMLCanvasElement) {
const viewport: Value = {
kind: 'record',
fields: {
- width: { kind: 'int', value: canvas.width },
- height: { kind: 'int', value: canvas.height }
+ width: { kind: 'int', value: window.innerWidth },
+ height: { kind: 'int', value: window.innerHeight }
}
};
@@ -77,5 +89,10 @@ export function runApp(app: App, canvas: HTMLCanvasElement) {
}
})
+ window.addEventListener('resize', (e) => {
+ setupCanvas();
+ rerender();
+ })
+
rerender();
}
diff --git a/src/ui.ts b/src/ui.ts
index c7f98d0..6a24587 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -25,7 +25,12 @@ let focusedInputSubmit: Value | null = null;
export function render(ui: UIValue, canvas: HTMLCanvasElement) {
const ctx = canvas.getContext('2d');
if (ctx) {
+ const dpr = window.devicePixelRatio || 1;
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
clickRegions = [];
textInputRegions = [];
renderUI(ui, ctx, 0, 0);