From 902a07087c2808c77943b9617a2ab063b1c260e9 Mon Sep 17 00:00:00 2001
From: Frans Bongers <fransbongers@franss-mbp.home>
Date: Sun, 24 Nov 2024 22:36:37 +0100
Subject: initial setup

---
 play.ts | 131 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 play.ts

(limited to 'play.ts')

diff --git a/play.ts b/play.ts
new file mode 100644
index 0000000..2c3d2a2
--- /dev/null
+++ b/play.ts
@@ -0,0 +1,131 @@
+'use strict';
+
+import { StaticData } from './data';
+import { Player, View } from './rules';
+
+declare function action_button(action: string, text: string): void;
+// declare function register_action(element: HTMLElement, type: string, s: number): void;
+declare function send_action(action: string, text: string): boolean;
+declare const data: StaticData;
+declare const view: View;
+declare const player: Player;
+
+/* global view, player, send_action, action_button */
+
+// const SPACE_COUNT = 64;
+// const PIECE_COUNT = 32;
+const CARD_COUNT = 62;
+
+let ui = {
+  map: document.getElementById('map'),
+  hand: document.getElementById('hand'),
+  fronts: [],
+  spaces: [],
+  pieces: [],
+  cards: [],
+};
+
+let action_register = [];
+
+// @ts-ignore
+(function build_map() {
+  // @ts-ignore
+
+  const spaces = document.getElementById('spaces');
+  console.log('build_map', data);
+  data.fronts.forEach((front, index) => {
+    const { id, top, left } = front;
+    const element = (ui.fronts[index] = document.createElement('div'));
+    element.classList.add('front');
+    element.style.left = `${left}px`;
+    element.style.top = `${top}px`;
+    // element.style.height = `${height}px`;
+    // element.style.width = `${width}px`;
+    element.setAttribute('data-front-id', `${id}`);
+    spaces.appendChild(element);
+  });
+})();
+
+// @ts-ignore
+function register_action(
+  e: HTMLElement,
+  _action: string,
+  _id: string | number
+) {
+  // e.my_action = action
+  // e.my_id = id
+  e.onmousedown = on_click_action;
+  action_register.push(e);
+}
+
+function on_click_action(evt) {
+  if (evt.button === 0)
+    if (send_action(evt.target.my_action, evt.target.my_id))
+      evt.stopPropagation();
+}
+
+// function is_action(action, arg) {
+//   if (arg === undefined) return !!(view.actions && view.actions[action] === 1);
+//   return !!(
+//     view.actions &&
+//     view.actions[action] &&
+//     view.actions[action].includes(arg)
+//   );
+// }
+
+let on_init_once = false;
+
+function on_init() {
+  console.log('on_init');
+  if (on_init_once) return;
+  on_init_once = true;
+
+  console.log('ui', ui);
+
+  console.log('document', document);
+
+  // create space elements
+  // for (let s = 0; s < SPACE_COUNT; ++s) {
+  //   let e = ui.spaces[s].document.createElement('div');
+  //   e.className = 'space';
+  //   register_action(e, 'space', s);
+  //   ui.map.appendChild(e);
+  // }
+
+  // // create piece elements
+  // for (let p = 0; p < PIECE_COUNT; ++p) {
+  //   let e = (ui.pieces[p] = document.createElement('div'));
+  //   e.className = 'piece';
+  //   register_action(e, 'piece', p);
+  // }
+
+  // create card elements
+  for (let c = 1; c < CARD_COUNT; ++c) {
+    let e = (ui.cards[c] = document.createElement('div'));
+    e.className = 'card';
+		e.setAttribute('data-card-id', '' + data.cards[c].id)
+    register_action(e, 'card', c);
+  }
+}
+
+// @ts-ignore
+function on_update() {
+  console.log('on_update', view);
+  on_init();
+
+  // for (let s = 0; s < SPACE_COUNT; ++s) ui.spaces[s].replaceChildren();
+
+  // for (let p = 0; p < PIECE_COUNT; ++p) {
+  //   let s = view.location[p];
+  //   ui.spaces[s].appendChild(ui.pieces[p]);
+  // }
+
+  ui.hand.replaceChildren();
+  for (let c of view.hand) ui.hand.appendChild(ui.cards[c]);
+
+  // for (let e of action_register)
+  //   e.classList.toggle('action', is_action(e.my_action, e.my_id));
+
+  action_button('next', 'Next');
+  action_button('undo', 'Undo');
+}
-- 
cgit v1.2.3