@pkmn/engine 0.1.0-dev.cbdbb719 → 0.1.0-dev.cdc837af

package/src/tools/display/dom.ts

@@ -0,0 +1,96 @@
+/** @license MIT modified from Vadim Demedes's https://github.com/vadimdemedes/dom-chef */
+type Attributes = JSX.IntrinsicElements['div'];
+type DocumentFragmentConstructor = typeof DocumentFragment;
+type ElementFunction = (props?: any) => HTMLElement;
+
+declare global {
+  namespace JSX {
+    interface Element extends HTMLElement, DocumentFragment {
+      addEventListener: HTMLElement['addEventListener'];
+      removeEventListener: HTMLElement['removeEventListener'];
+      className: HTMLElement['className'];
+    }
+  }
+}
+
+interface JSXElementClassDocumentFragment extends DocumentFragment, JSX.ElementClass { }
+interface Fragment {
+  prototype: JSXElementClassDocumentFragment;
+  new(): JSXElementClassDocumentFragment;
+}
+
+// https://github.com/preactjs/preact/blob/1bbd687c/src/constants.js#L3
+const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+
+const isFragment = (type: DocumentFragmentConstructor | ElementFunction):
+  type is DocumentFragmentConstructor => type === DocumentFragment;
+
+const setCSSProps = (element: HTMLElement, style: CSSStyleDeclaration) => {
+  for (const [name, value] of Object.entries(style)) {
+    if (name.startsWith('-')) {
+      element.style.setProperty(name, value);
+    } else if (typeof value === 'number' && !IS_NON_DIMENSIONAL.test(name)) {
+      element.style[name as any] = `${value as string}px`;
+    } else {
+      element.style[name as any] = value;
+    }
+  }
+};
+
+const setAttribute = (element: HTMLElement, name: string, value: string) => {
+  if (value !== undefined && value !== null) element.setAttribute(name, value);
+};
+
+const addChildren = (parent: Element | DocumentFragment, children: Node[]) => {
+  for (const child of children) {
+    if (child instanceof Node) {
+      parent.appendChild(child);
+    } else if (Array.isArray(child)) {
+      addChildren(parent, child);
+    } else if (typeof child !== 'boolean' && typeof child !== 'undefined' && child !== null) {
+      parent.appendChild(document.createTextNode(child));
+    }
+  }
+};
+
+// https://github.com/facebook/react/blob/3f899089/packages/react-dom/src/shared/DOMProperty.js#L288-L322
+const FALSIFIABLE_ATTRIBUTES = ['contentEditable', 'draggable', 'spellCheck', 'value'];
+
+export const h = (
+  type: DocumentFragmentConstructor | ElementFunction | string,
+  attributes?: Attributes,
+  ...children: Node[]
+) => {
+  if (typeof type !== 'string') {
+    const element = isFragment(type) ? document.createDocumentFragment() : type(attributes);
+    addChildren(element, children);
+    return element;
+  }
+
+  const element = document.createElement(type);
+  addChildren(element, children);
+  if (!attributes) return element;
+
+  for (let [name, value] of Object.entries(attributes)) {
+    if (name === 'htmlFor') name = 'for';
+
+    if (name === 'class' || name === 'className') {
+      const existingClassname = element.getAttribute('class') ?? '';
+      setAttribute(element, 'class', (existingClassname + ' ' + String(value)).trim());
+    } else if (name === 'style') {
+      setCSSProps(element, value);
+    } else if (name.startsWith('on')) {
+      const eventName = name.slice(2).toLowerCase().replace(/^-/, '');
+      element.addEventListener(eventName, value);
+    } else if (name === 'dangerouslySetInnerHTML' && '__html' in value) {
+      element.innerHTML = value.__html;
+    } else if (name !== 'key' && (FALSIFIABLE_ATTRIBUTES.includes(name) || value !== false)) {
+      setAttribute(element, name, value === true ? '' : value);
+    }
+  }
+
+  return element;
+};
+
+export const Fragment =
+  (typeof DocumentFragment === 'function' ? DocumentFragment : () => {}) as Fragment;

package/src/tools/display/ui.css

@@ -0,0 +1,354 @@
+body {
+  background: white;
+  color: black;
+}
+code {
+  background: white;
+  color: black;
+}
+#content {
+  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  margin: 4em auto;
+  max-width: 1300px;
+  line-height: 1.4em;
+  --hp-bar: 151px;
+  --hp-text: 32px;
+  --radius: 10px;
+}
+details > summary {
+  list-style: none;
+}
+details > summary::-webkit-details-marker {
+  display: none;
+}
+.battle > .details {
+  background: #eee;
+  border-bottom: 3px solid black;
+  border-radius: var(--radius) var(--radius) 0 0;
+  padding: 0 1em;
+  display: flex;
+  justify-content: space-between;
+}
+.inner {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.side > .details {
+  padding: 0.5em 1em;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  flex: 0 1 auto;
+}
+.active {
+  flex: 1 1 auto;
+}
+details {
+  flex: 0 1 auto;
+}
+.sides {
+  display: flex;
+}
+.side {
+  flex: 1;
+  display: flex;
+  flex-flow: column;
+}
+.side.p1 {
+  border-right: 1px solid black;
+}
+.battle {
+  border: 3px solid black;
+  border-radius: var(--radius);
+}
+summary {
+  border-top: 1px solid #eee;
+  text-align: center;
+  padding: 0.25em;
+}
+.good {
+  color: green;
+}
+.bad {
+  color: red;
+}
+.pokemon {
+  position: relative;
+  padding: 0.5em 1em;
+  border-top: 1px solid black;
+  display: flex;
+}
+.active > .pokemon {
+  border-top: 1px solid #eee;
+}
+table {
+  border-collapse: collapse;
+  border-style: hidden;
+  border-spacing: 0px;
+  line-height: 1.5em;
+}
+th, td {
+  border: 1px solid black;
+  padding: 0 0.5em;
+}
+.statbar {
+  display: none;
+  width: calc(var(--hp-bar) + var(--hp-text));
+  padding: 2px 0;
+  line-height: normal;
+}
+.statbar .name {
+  display: block;
+  text-align: center;
+  line-height: 1.25em;
+}
+.statbar strong {
+  color: #222222;
+  text-shadow:
+    #FFFFFF 1px 1px 0, #FFFFFF 1px -1px 0,
+    #FFFFFF -1px 1px 0, #FFFFFF -1px -1px 0;
+}
+.statbar strong small {
+  font-weight: normal;
+}
+.statbar .hpbar {
+  position: relative;
+  border: 1px solid #777777;
+  background: #FCFEFF;
+  padding: 1px;
+  height: 8px;
+  margin: 0 0 0 0;
+  width: calc(var(--hp-bar) + var(--hp-text) + 1px);
+  border-radius: 4px;
+}
+.statbar .hpbar .hp {
+  height: 4px;
+  border-top: 2px solid #00dd60;
+  background: #00bb51;
+  border-bottom: 2px solid #007734;
+  border-right: 1px solid #007734;
+  border-radius: 3px;
+}
+.statbar .hpbar .hp-yellow {
+  border-top-color: #f8e379;
+  background-color: #f5d538;
+  border-bottom-color: #be9f0a;
+  border-right-color: #be9f0a;
+}
+.statbar .hpbar .hp-red {
+  border-top-color: #f37f67;
+  background-color: #ee4928;
+  border-bottom-color: #a3260d;
+  border-right-color: #a3260d;
+}
+.statbar .hpbar .prevhp {
+  background: #BBEECC;
+  height: 8px;
+  border-radius: 3px;
+}
+.statbar .hpbar .prevhp-yellow {
+  background-color: #fcf4ca;
+}
+.statbar .hpbar .prevhp-red {
+  background-color: #facec5;
+}
+.statbar .hpbar .hptext {
+  position: absolute;
+  background: #777777;
+  color: #EEEEEE;
+  text-shadow: #000000 0 1px 0;
+  font-size: 10px;
+  width: 32px;
+  height: 12px;
+  top: -1px;
+  text-align: center;
+}
+.status, .volatile {
+  padding: 0px 1px;
+  border: 1px solid #FF4400;
+  border-radius: 3px;
+}
+.status {
+  min-height: 10px;
+  font-size: 7pt;
+  vertical-align: middle;
+  padding: 1px 2px;
+  border: 0;
+  border-radius: 3px;
+  text-transform: uppercase;
+  margin: 0 2px;
+}
+.status.brn {
+  background: #EE5533;
+  color: #FFFFFF;
+}
+.status.psn {
+  background: #A4009A;
+  color: #FFFFFF;
+}
+.status.par {
+  background: #9AA400;
+  color: #FFFFFF;
+}
+.status.slp {
+  background: #AA77AA;
+  color: #FFFFFF;
+}
+.status.frz {
+  background: #009AA4;
+  color: #FFFFFF;
+}
+.volatile {
+  display: inline-block;
+  padding: 0 5px;
+  margin: 2px
+}
+.volatile.bad {
+  background: #FFE5E0;
+  color: #FF4400;
+  border-color: #FF4400;
+}
+.volatile.good {
+  background: #E5FFE0;
+  color: #33AA00;
+  border-color: #33AA00;
+}
+.volatile.neutral {
+  background: #F0F0F0;
+  color: #555555;
+  border-color: #555555;
+}
+.rstatbar .hpbar .hptext {
+  right: 0px;
+  border-radius: 0 4px 4px 0;
+}
+.moves ul {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  gap: 0 2em;
+}
+.left {
+  padding-right: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.stats {
+  display: flex;
+  padding: 0 1em;
+  justify-content: space-between;
+  text-align: center;
+  width: 100%;
+}
+.boosts {
+  margin: 0 5px;
+}
+.types {
+  display: inherit;
+}
+.disabled {
+  color: #AAAAAA;
+}
+.position {
+  position: absolute;
+  right: 10px;
+  color: #AAAAAA;
+}
+.left .position {
+  display: none;
+}
+.right .position {
+  display: block;
+}
+.teamicons {
+  display: inline-block;
+}
+@media(max-width: 1300px) {
+  #content {
+    font-size: 0.85em;
+    max-width: 95%;
+    margin: 2em auto;
+  }
+}
+@media(max-width: 1200px) {
+  .moves ul {
+    grid-template-columns: repeat(1, auto);
+  }
+}
+@media(max-width: 1100px) {
+  .pokemon {
+    flex-direction: column;
+  }
+  .stats {
+    justify-content: center;
+    padding: 0;
+  }
+  .moves ul {
+    grid-template-columns: repeat(2, auto);
+  }
+  .left {
+    padding-right: 0;
+  }
+  .right {
+    padding-top: 1em;
+  }
+  .volatiles {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .left .position {
+    display: block;
+  }
+  .right .position {
+    display: none;
+  }
+}
+@media(max-width: 800px) {
+  .moves {
+    display: flex;
+    justify-content: center;
+  }
+  .moves ul {
+    display: inline-block;
+    padding: 0;
+  }
+}
+@media(max-width: 680px) {
+  .stats {
+    flex-direction: column;
+    padding: 0;
+  }
+  .boosts {
+    display: flex;
+    justify-content: space-between;
+    margin: 0.5em 0 0 0;
+  }
+}
+@media(max-width: 550px) {
+  #content {
+    font-size: 0.65em;
+    max-width: 95%;
+    margin: 1em auto;
+    --hp-bar: 101px;
+  }
+}
+@media(max-width: 425px) {
+  .stats {
+    font-size: 0.9em;
+  }
+}
+h1 {
+  text-align: center;
+}
+.error {
+  overflow: auto;
+  scrollbar-width: none;
+  padding: 10px 20px;
+  border: 3px solid #DD4422;
+  background: #FFF8F2;
+}
+.error::-webkit-scrollbar {
+  display: none;
+}