game start menu + market

src/panel.js

@@ -0,0 +1,54 @@
+import {PANEL_WIDTH, PANEL_HEIGHT, PANEL_FONT_SIZE, PANEL_BG_COLOR, PANEL_BORDER_COLOR, W, H, FONT_WIDTH} from './constants.js?v=4';
+import {drawRect, drawLine} from './gfx.js?v=4';
+
+const PANEL_X = (W - PANEL_WIDTH) / 2;
+const PANEL_Y = (H - PANEL_HEIGHT) / 2;
+
+export function drawPanelBg(ctx) {
+  ctx.fillStyle = PANEL_BG_COLOR;
+  ctx.fillRect(PANEL_X, PANEL_Y, PANEL_WIDTH, PANEL_HEIGHT);
+
+  ctx.strokeStyle = PANEL_BORDER_COLOR;
+  ctx.lineWidth = 2;
+  ctx.strokeRect(PANEL_X + 1, PANEL_Y + 1, PANEL_WIDTH - 2, PANEL_HEIGHT - 2);
+
+  ctx.strokeStyle = '#999';
+  ctx.lineWidth = 1;
+  ctx.strokeRect(PANEL_X + 3, PANEL_Y + 3, PANEL_WIDTH - 6, PANEL_HEIGHT - 6);
+}
+
+export function drawPanelTitle(ctx, text) {
+  const x = PANEL_X + PANEL_WIDTH / 2;
+  const y = PANEL_Y + 20;
+  drawPanelText(ctx, text, x, y, 'white', 'center');
+}
+
+export function drawPanelText(ctx, text, x, y, color = 'white', align = 'left') {
+  ctx.font = `${PANEL_FONT_SIZE}px text`;
+  ctx.textBaseline = 'top';
+  ctx.textAlign = align;
+  ctx.fillStyle = 'black';
+  ctx.fillText(text, x + 1, y + 1);
+  ctx.fillStyle = color;
+  ctx.fillText(text, x, y);
+}
+
+export function drawPanelDivider(ctx, y) {
+  const x1 = PANEL_X + 20;
+  const x2 = PANEL_X + PANEL_WIDTH - 20;
+  drawLine(ctx, x1, y, x2, y, '#999');
+}
+
+export function drawPanelMenu(ctx, items, selectedIndex, y) {
+  for (let i = 0; i < items.length; i++) {
+    const itemY = y + i * 20;
+    const isSelected = i === selectedIndex;
+    const prefix = isSelected ? '> ' : '  ';
+    const color = isSelected ? 'yellow' : 'white';
+    drawPanelText(ctx, prefix + items[i], PANEL_X + 40, itemY, color);
+  }
+}
+
+export function getPanelBounds() {
+  return {x: PANEL_X, y: PANEL_Y, w: PANEL_WIDTH, h: PANEL_HEIGHT};
+}