2e:null 2f:["$","title",null,{"children":"Baseball card game prototype | senritsu | Observable"}] 34:T691,c = ({ "1": {"front": { "values": {"SSS": "o", "SS": "star", "S": "ok", "A": "o", "B": "x", "C": "x", "D": "x", "E": "x", "F": "ng"}, "target": "bottom-left" }}, "2": {"front": { "values": {"SSS": "star", "SS": "o", "S": "ok", "A": "star", "B": "ok", "C": "ok", "D": "ng", "E": "ng", "F": "ng"}, "target": "top-left" }}, "3": {"front": { "values": {"SSS": "star", "SS": "ok", "S": "o", "A": "ok", "B": "o", "C": "ok", "D": "ok", "E": "ng", "F": "ng"}, "target": "center" }}, "4": {"front": { "values": {"SSS": "star", "SS": "star", "S": "star", "A": "ng", "B": "x", "C": "o", "D": "o", "E": "x", "F": "o"}, "target": "left" }}, "5": {"front": { "values": {"SSS": "star", "SS": "ok", "S": "star", "A": "ok", "B": "o", "C": "x", "D": "ng", "E": "x", "F": "ng"}, "target": "top" }}, "6": {"front": { "values": {"SSS": "o", "SS": "x", "S": "x", "A": "x", "B": "star", "C": "x", "D": "ng", "E": "ng", "F": "o"}, "target": "bottom" }}, "7": {"front": { "values": {"SSS": "star", "SS": "o", "S": "x", "A": "x", "B": "ng", "C": "ng", "D": "o", "E": "o", "F": "x"}, "target": "center" }}, "8": {"front": { "values": {"SSS": "ok", "SS": "ok", "S": "star", "A": "o", "B": "o", "C": "o", "D": "x", "E": "o", "F": "ng"}, "target": "bottom-right" }}, "9": {"front": { "values": {"SSS": "ok", "SS": "star", "S": "o", "A": "ok", "B": "ok", "C": "ng", "D": "x", "E": "o", "F": "ng"}, "target": "top-right" }}, "10": {"front": { "values": {"SSS": "star", "SS": "star", "S": "ok", "A": "star", "B": "ok", "C": "o", "D": "o", "E": "ng", "F": "x"}, "target": "right" }} })35:T582,p1 = ({ "1": {"front": {"position": "P", "stats": {"power": "B", "focus": "B", "speed": "C", "reaction": "B", "catching": "C", "control": "B"}}}, "2": {"front": {"position": "P", "stats": {"power": "D", "focus": "B", "speed": "C", "reaction": "C", "catching": "B", "control": "A"}}}, "3": {"front": {"position": "C", "stats": {"power": "A", "focus": "B", "speed": "B", "reaction": "B", "catching": "A", "control": "B"}}}, "4": {"front": {"position": "1", "stats": {"power": "A", "focus": "A", "speed": "D", "reaction": "B", "catching": "A", "control": "D"}}}, "5": {"front": {"position": "2", "stats": {"power": "C", "focus": "C", "speed": "B", "reaction": "B", "catching": "B", "control": "B"}}}, "6": {"front": {"position": "S", "stats": {"power": "D", "focus": "C", "speed": "A", "reaction": "C", "catching": "A", "control": "B"}}}, "7": {"front": {"position": "3", "stats": {"power": "A", "focus": "B", "speed": "C", "reaction": "A", "catching": "C", "control": "A"}}}, "8": {"front": {"position": "L", "stats": {"power": "A", "focus": "A", "speed": "D", "reaction": "B", "catching": "C", "control": "B"}}}, "9": {"front": {"position": "M", "stats": {"power": "C", "focus": "C", "speed": "S", "reaction": "A", "catching": "B", "control": "B"}}}, "10": {"front": {"position": "R", "stats": {"power": "S", "focus": "A", "speed": "C", "reaction": "B", "catching": "C", "control": "A"}}} })36:T582,p2 = ({ "1": {"front": {"position": "P", "stats": {"power": "A", "focus": "B", "speed": "C", "reaction": "B", "catching": "D", "control": "S"}}}, "2": {"front": {"position": "P", "stats": {"power": "B", "focus": "B", "speed": "B", "reaction": "D", "catching": "B", "control": "A"}}}, "3": {"front": {"position": "C", "stats": {"power": "B", "focus": "C", "speed": "B", "reaction": "A", "catching": "A", "control": "B"}}}, "4": {"front": {"position": "1", "stats": {"power": "A", "focus": "A", "speed": "D", "reaction": "C", "catching": "A", "control": "A"}}}, "5": {"front": {"position": "2", "stats": {"power": "A", "focus": "C", "speed": "A", "reaction": "A", "catching": "B", "control": "C"}}}, "6": {"front": {"position": "S", "stats": {"power": "B", "focus": "A", "speed": "A", "reaction": "D", "catching": "A", "control": "B"}}}, "7": {"front": {"position": "3", "stats": {"power": "D", "focus": "A", "speed": "C", "reaction": "B", "catching": "A", "control": "A"}}}, "8": {"front": {"position": "L", "stats": {"power": "S", "focus": "S", "speed": "D", "reaction": "D", "catching": "A", "control": "B"}}}, "9": {"front": {"position": "M", "stats": {"power": "B", "focus": "A", "speed": "B", "reaction": "B", "catching": "C", "control": "A"}}}, "10": {"front": {"position": "R", "stats": {"power": "B", "focus": "B", "speed": "D", "reaction": "A", "catching": "C", "control": "B"}}} })37:T939,function renderZones(cellExtraStyles = {}) { const gridStyle = { display: 'grid', fontSize: '2.5em', backgroundColor: 'gainsboro', gap: '1px', gridTemplate: '1em 0.5em 0.5em 1em 0.5em 0.5em 1em / 1em 0.5em 0.5em 1em 0.5em 0.5em 1em', } const cell = { // border: '1px solid gainsboro', color: 'gray', backgroundColor: 'white', font: '0.5em sans-serif', display: 'flex', alignItems: 'center', justifyContent: 'center' } const bordered = {border: '1px solid gainsboro', margin: '-1px'} return htl.html`

` }38:T464,function renderShadedGrid(direction) { const gridStyle = { display: 'grid', gridTemplate: `repeat(3, 1em) 1px repeat(3, 1em) / repeat(3, 1em) 1px repeat(3, 1em)`, } const lineStyle = { backgroundColor: 'gainsboro' } const boxStyle = { border: '1px solid gainsboro', gridArea: '3 / 3 / 6 / 6' } const shadeStyle = { backgroundColor: 'skyblue', gridArea: getShadedArea(direction) } function getShadedArea (i) { switch (i) { case 'top-left': return '2 / 2 / 5 / 5' case 'top': return '2 / 3 / 5 / 6' case 'top-right': return '2 / 4 / 5 / 7' case 'left': return '3 / 2 / 6 / 5' case 'center': return '3 / 3 / 6 / 6' case 'right': return '3 / 4 / 6 / 7' case 'bottom-left': return '4 / 2 / 7 / 5' case 'bottom': return '4 / 3 / 7 / 6' case 'bottom-right': return '4 / 4 / 7 / 7' } } return htl.html.fragment`

` }39:T572,function renderP(id, card) { const style = { flex: 1, alignSelf: 'stretch', padding: '0.5em', display: 'grid', gridTemplate: ` "position name name" auto "empty image image" 1fr "empty empty2 stats" auto / auto 1fr 2fr `, fontSize: '0.8em' } const positionStyle = { border: '1px solid gray', padding: '0.2em', margin: '0.1em', alignSelf: 'stretch', justifySelf: 'stretch', gridArea: 'position' } const nameStyle = { border: '1px solid gray', padding: '0.2em', margin: '0.1em', alignSelf: 'stretch', justifySelf: 'stretch', gridArea: 'name' } const imageStyle = { border: '1px solid gray', padding: '0.2em', margin: '0.1em', alignSelf: 'stretch', justifySelf: 'stretch', gridArea: 'image' } const statsStyle = { display: 'flex', flexDirection: 'column', gridArea: 'stats', margin: '0.1em' } const statRowStyle = { display: 'flex', justifyContent: 'space-between', textTransform: 'uppercase', fontSize: '0.8em' } const content = htl.html.fragment`

${card.front.position}

${Object.entries(card.front.stats).map(([stat, value]) => htl.html.fragment`

${stat}${value}

`)}

` return renderCard(id, content) }3a:T4cc,function renderDeviation(x, y) { const gridStyle = { display: 'grid', gridTemplate: 'repeat(7, 1em) / repeat(7, 1em)' } const center = { display: 'flex', alignItems: 'center', justifyContent: 'center', gridArea: '4 / 4 / 5 / 5', fontSize: '0.5em' } const transform = ([x, y]) => `${4 - y} / ${4 + x} / ${5 - y} / ${5 + x}` const verticalLines = { gridArea: '1 / 4 / 8 / 5', borderLeft: '1px solid gainsboro', borderRight: '1px solid gainsboro' } const horizontalLines = { gridArea: '4 / 1 / 5 / 8', borderTop: '1px solid gainsboro', borderBottom: '1px solid gainsboro' } const dark = { backgroundColor: 'whitesmoke' } const target = { backgroundColor: 'skyblue', gridArea: transform([x, y]) } const cells = [ ...Array.from({length: Math.abs(y)}).map((_, i) => [0, Math.sign(y) * i]), ...Array.from({length: Math.abs(x)}).map((_, i) => [Math.sign(x) * i, y]) ] return htl.html`

${cells.map(transform).map(gridArea => htl.html`

`)}

⭕

` }3b:[] 32:{"id":"fd5ce4f982fade19","slug":"baseball-card-game-prototype","title":"Baseball card game prototype","thumbnail":"f8c994380b3d0ce0df08498af52a45014ab3c665b495060e791f56a34a865bb8","access_level":"public","create_time":"$D2021-10-02T06:52:41.476Z","update_time":"$D2021-10-09T17:28:55.425Z","view_time":null,"first_public_time":"$D2021-10-03T17:40:31.159Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"c62aba2ac21021cb","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":"starter_2024"},"version":606,"publish_version":606,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null}],"members":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Baseball card game prototype","cells":[{"id":0,"value":"# Baseball card game prototype\n\nRediscovered in a drawer recently and no idea how it works. Digitizing it to maybe pick it up again at some point.\n\n### Abbreviations\n\n- BC = Batter card?\n- SB = ?\n- C = Catcher? Catcher sign?\n- P = Player\n- PC = Pitch card, each pitcher has its own\n- PT = Pitch target?\n\n### Positions\n\n- P = Pitcher\n- C = Catcher\n- 1/2/3 = 1st/2nd/3rd base\n- L/M/R = left/mid (center)/right field\n- S = Shortstop","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"### Zone Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"renderZones()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"### Batting zones?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"htl.html`\n

\n ${renderShadedGrid('top')}\n

➡

\n ${renderZones({\n 'outer-top-left': {backgroundColor: 'skyblue'},\n 'outer-top': {backgroundColor: 'skyblue'},\n 'outer-top-right': {backgroundColor: 'skyblue'},\n 'top-left': {backgroundColor: 'skyblue'},\n 'top': {backgroundColor: 'skyblue'},\n 'top-right': {backgroundColor: 'skyblue'}\n })}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"htl.html`\n

\n ${renderShadedGrid('bottom-right')}\n

➡

\n ${renderZones({\n 'outer-right': {backgroundColor: 'skyblue'},\n 'outer-bottom-right': {backgroundColor: 'skyblue'},\n 'outer-bottom': {backgroundColor: 'skyblue'},\n 'right': {backgroundColor: 'skyblue'},\n 'bottom-right': {backgroundColor: 'skyblue'},\n 'bottom': {backgroundColor: 'skyblue'}\n })}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"### Pitch zone?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"htl.html`\n

\n ${renderSimpleGrid('top-right')}\n

➕

\n ${renderStrikeBallBox('ball')}\n

➡

\n ${renderZones({\n 'outer-top-right': {backgroundColor: 'skyblue'}\n })}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"htl.html`\n

\n ${renderSimpleGrid('top')}\n

➕

\n ${renderStrikeBallBox('strike')}\n

➡

\n ${renderZones({\n 'top': {backgroundColor: 'skyblue'}\n })}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"# Player 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"renderCardList([\n {idPrefix: 'BC1', cards: bc, render: renderBC},\n {idPrefix: 'SB1', cards: sb, render: renderSB},\n {idPrefix: 'C1', cards: c, render: renderC},\n {idPrefix: 'P1', cards: p1, render: renderP},\n {idPrefix: 'PT1', cards: pt, render: renderPTShaded},\n {idPrefix: 'PC2', cards: pc1, render: renderPC}\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"## Player 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"renderCardList([\n // {idPrefix: 'BC2', cards: bc, render: renderBC}, // unclear if this was left out of physical prototype on purpose\n {idPrefix: 'SB2', cards: sb, render: renderSB},\n {idPrefix: 'C2', cards: c, render: renderC},\n {idPrefix: 'P2', cards: p2, render: renderP},\n {idPrefix: 'PT2', cards: pt, render: renderPTSimple},\n {idPrefix: 'PC2', cards: pc2, render: renderPC}\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"## Card definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"sb = ({\n \"1\": {\"front\": {\"target\": \"strike\"}},\n \"2\": {\"front\": {\"target\": \"ball\"}},\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"bc = ({\n \"1\": {\n \"front\": {\n \"action\": \"wait\"\n }\n },\n \"2\": {\n \"front\": {\n \"action\": \"bunt\"\n }\n },\n \"3\": {\n \"front\": {\n \"action\": \"foul\"\n }\n },\n \"4\": {\n \"front\": {\n \"action\": \"swing\",\n \"height\": \"mid\"\n }\n },\n \"5\": {\n \"front\": {\n \"action\": \"swing\",\n \"height\": \"high\"\n }\n },\n \"6\": {\n \"front\": {\n \"action\": \"swing\",\n \"height\": \"low\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"pt = ({\n \"1\": {\"front\": {\"target\": \"center\"}},\n \"2\": {\"front\": {\"target\": \"right\"}},\n \"3\": {\"front\": {\"target\": \"top-right\"}},\n \"4\": {\"front\": {\"target\": \"top\"}},\n \"5\": {\"front\": {\"target\": \"top-left\"}},\n \"6\": {\"front\": {\"target\": \"left\"}},\n \"7\": {\"front\": {\"target\": \"bottom-left\"}},\n \"8\": {\"front\": {\"target\": \"bottom\"}},\n \"9\": {\"front\": {\"target\": \"bottom-right\"}}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"pc1 = ({\n \"1-1\": {\"front\": {\"name\": \"Fastball (4seam)\", speed: 100, deviation: [0, 0], stats: {\"difficulty\": -2, \"hidden\": -2, \"control\": -1}}},\n \"1-2\": {\"front\": {\"name\": \"Fastball (2seam)\", speed: 90, deviation: [0, 0], stats: {\"difficulty\": 0, \"hidden\": 0, \"control\": +1}}},\n \"1-3\": {\"front\": {\"name\": \"Changeup\", speed: 70, deviation: [0, 0], stats: {\"difficulty\": 0, \"hidden\": -3, \"control\": 0}}},\n \"2-1\": {\"front\": {\"name\": \"Fastball (4seam)\", speed: 90, deviation: [0, 0], stats: {\"difficulty\": -1, \"hidden\": -1, \"control\": +1}}},\n \"2-2\": {\"front\": {\"name\": \"Forkball\", speed: 80, deviation: [0, -2], stats: {\"difficulty\": -1, \"hidden\": -3, \"control\": -1}}}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"pc2 = ({\n \"1-1\": {\"front\": {\"name\": \"Fastball (4seam)\", speed: 95, deviation: [0, 0], stats: {\"difficulty\": -1, \"hidden\": -1, \"control\": +1}}},\n \"1-2\": {\"front\": {\"name\": \"Shuuto\", speed: 80, deviation: [1, -1], stats: {\"difficulty\": -2, \"hidden\": -4, \"control\": -2}}},\n \"2-1\": {\"front\": {\"name\": \"Fastball (2seam)\", speed: '?', deviation: [0, 0], stats: {\"difficulty\": 0, \"hidden\": -1, \"control\": -1}}},\n \"2-2\": {\"front\": {\"name\": \"Curveball\", speed: '?', deviation: [0, -1], stats: {\"difficulty\": -1, \"hidden\": -2, \"control\": +1}}},\n \"2-3\": {\"front\": {\"name\": \"Sinker\", speed: '?', deviation: [2, -1], stats: {\"difficulty\": -3, \"hidden\": -6, \"control\": -2}}}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"cardSize = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"htl.html`${renderCard('TEST-1', 'Test content')}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"function renderCardList(cardBatches) {\n const style = {\n display: 'flex',\n flexFlow: 'row wrap'\n }\n\n const cards = cardBatches.reduce((array, {idPrefix = '', cards, render}) => {\n array.push(...Object.entries(cards).map(([key, card]) => render(`${idPrefix}-${key}`, card)))\n return array\n }, [])\n \n return htl.html`

${cards}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"function renderStrikeBallBox(target) {\n const boxStyle = {\n boxSizing: 'content-box',\n width: '2em',\n height: '2em',\n border: `1em solid ${target === 'strike' ? 'whitesmoke' : 'skyblue'}`,\n backgroundColor: target === 'strike' ? 'skyblue' : 'whitesmoke'\n }\n\n return htl.html`

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"function renderSB(id, card) {\n const style = {display: 'flex', flexDirection: 'column', alignItems: 'center'}\n \n const textStyle = {\n fontSize: '2em',\n transform: 'rotate(15deg)',\n textTransform: 'uppercase'\n }\n \n const content = htl.html.fragment`

\n ${renderStrikeBallBox(card.front.target)}\n ${card.front.target}\n

`\n\n return renderCard(id, content)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"function renderBC(id, card) {\n const style = {\n fontSize: '1.5em',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center'\n }\n const heightStyle = {\n display: 'flex',\n alignItems: 'center',\n fontSize: '0.8em',\n margin: '0.5em',\n visibility: card.front.height ? 'visible' : 'hidden'\n }\n const textStyle = {\n textTransform: 'uppercase',\n }\n const heightGridStyle = {\n display: 'grid',\n margin: '0.5em',\n gridTemplate: `\"high\" 1em \"mid\" 1em \"low\" 1em / 3em`,\n backgroundColor: 'whitesmoke'\n }\n const heightMarkerStyle = {\n backgroundColor: 'skyblue'\n }\n \n const content = htl.html.fragment`

\n ${card.front.action}\n

\n ${card.front.height}\n

`\n\n return renderCard(id, content)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"directions = ['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"function renderDirection (dir) {\n switch(dir) {\n case 'top-left': return '↖'\n case 'top': return '⬆'\n case 'top-right': return '↗'\n case 'left': return '⬅'\n case 'center': return '⭕'\n case 'right': return '➡'\n case 'bottom-left': return '↙'\n case 'bottom': return '⬇'\n case 'bottom-right': return '↘'\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"function renderSimpleGrid(dir) {\n const gridStyle = {\n display: 'grid',\n gridTemplate: `repeat(3, 1.5em) / repeat(3, 1.5em)`,\n gap: '1px',\n backgroundColor: 'gainsboro'\n }\n const cellStyle = {\n backgroundColor: 'white',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: 'monospace'\n }\n\n const cells = Array.from({length: 9})\n\n return htl.html.fragment`\n

\n ${cells.map((_, i) => htl.html.fragment`

${directions.indexOf(dir) === i ? renderDirection(dir) : ''}

`)}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"function renderC(id, card) {\n function renderValue(value) {\n switch(value) {\n case 'star': return '⭐'\n case 'ok': return '✅'\n case 'x': return '❌'\n case 'ng': return '🆖'\n case 'o': return '⭕'\n }\n }\n\n const tableStyle = {\n display: 'grid',\n gap: '0.2em',\n alignItems: 'baseline',\n gridTemplate: 'repeat(5, auto) / repeat(4, 1fr)',\n fontSize: '0.8em'\n }\n const ratings = ['SSS', 'B', 'SS', 'C', 'S', 'D', 'A', 'E', '', 'F']\n const table = htl.html.fragment`\n

\n ${ratings.map((rating, i) => htl.html.fragment`${rating}${card.front.values[rating] && renderValue(card.front.values[rating])}`)}\n

\n`\n \n const grid = renderSimpleGrid(card.front.target)\n \n const style = {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center'\n }\n \n const content = htl.html.fragment`\n

\n ${table}\n ${grid}\n

\n`\n \n return renderCard(id, content)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"function renderPTSimple(id, card) {\n const dir = card.front.target\n return renderCard(id, renderSimpleGrid(dir))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"function renderPTShaded(id, card) {\n const dir = card.front.target\n\n return renderCard(id, renderShadedGrid(dir))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"function renderPC(id, card) {\n const style = {\n display: 'grid',\n gridTemplate: `\n \"header header\" auto\n \"details deviation\" 1fr\n \"stats stats\" 1fr / 1fr 1fr\n `,\n fontSize: '0.8em',\n margin: '0.5em'\n }\n\n const header = {gridArea: 'header', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '1em'}\n const details = {gridArea: 'details', display: 'flex', flexDirection: 'column'}\n const deviation = {gridArea: 'deviation', fontSize: '0.8em'}\n const stats = {gridArea: 'stats', display: 'flex', flexDirection: 'column'}\n\n const content = htl.html`\n

\n ${card.front.name}\n

\n ${card.front.speed}mph\n

${renderDeviation(...card.front.deviation)}

\n ${Object.entries(card.front.stats).map(([stat, value]) => htl.html`${stat} ${value}`)}\n

\n`\n\n return renderCard(id, content)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function renderCard(id, content) {\n const width = cardSize\n const aspectRatio = 2.5 / 3.5\n \n const style = {\n boxSizing: 'border-box',\n width: `${width}em`,\n height: `${width / aspectRatio}em`,\n display: 'flex',\n flexDirection: 'column',\n margin: '0.5em',\n padding: '0.5em',\n borderRadius: '0.5em',\n border: '1px solid ghostwhite',\n font: `${width / 10}em sans-serif`,\n backgroundColor: 'rgba(0,0,0,0.05)'\n }\n\n const contentStyle = {\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: 'white'\n }\n\n const idStyle = {\n paddingTop: '0.2em',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n fontSize: '0.75em',\n backgroundColor: 'white',\n color: 'rgba(0,0,0,0.25)'\n }\n \n return htl.html.fragment`

${content}

${id}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 33:"$32:body"