40:null 41:["$","title",null,{"children":"CSE 510 project use case 1 | Luke Snyder | Observable"}] 47:T4b0,{ function does_intersect(el, mouse) { return ( mouse.clientX >= el.left && mouse.clientX <= el.right && mouse.clientY >= el.top && mouse.clientY <= el.bottom ); } let board = document.querySelector("#game-board"); let protag = board.querySelector("#protag"); let enemy = board.querySelector("#enemy"); let is_dragged = false; let dragged_elem = null; // Disable image preview drag protag.ondragstart = function() { return false; }; enemy.ondragstart = function() { return false; }; // Add image drag event listeners [].slice.call(board.children).forEach((el) => { el.addEventListener("mouseenter", function(event) { if (is_dragged) { el.appendChild(dragged_elem); } }); }); // Add global image click event listeners document.addEventListener("mousedown", function(event) { if (does_intersect(protag.getBoundingClientRect(), event)) { dragged_elem = protag; is_dragged = true; } else if (does_intersect(enemy.getBoundingClientRect(), event)) { dragged_elem = enemy; is_dragged = true; } }); document.addEventListener("mouseup", function() { is_dragged = false; }); }48:T794,{ const board = html`

${"

".repeat( num_rows_cols ** 2 )}

`; // Create protagonist image let protag = html`

`; let protag_pos = Math.floor(Math.random() * num_rows_cols ** 2); board.querySelector(`:nth-child(${protag_pos + 1})`).appendChild(protag); // Create enemy image let enemy = html`

`; let enemy_pos = protag_pos; while (enemy_pos === protag_pos) { enemy_pos = Math.floor(Math.random() * num_rows_cols ** 2); } board.querySelector(`div:nth-child(${enemy_pos + 1})`).appendChild(enemy); // Detecting arrow key presses and moving protagonist board.addEventListener("keydown", async (e) => { let new_pos = protag_pos; switch (e.key) { case "ArrowLeft": new_pos -= 1; break; case "ArrowUp": new_pos -= num_rows_cols; break; case "ArrowRight": new_pos += 1; break; case "ArrowDown": new_pos += num_rows_cols; break; default: return; } e.preventDefault(); if (new_pos < 0 || new_pos >= num_rows_cols ** 2) { return; } protag_pos = new_pos; let user_next = eval(`(${my_code})`)(protag_pos, enemy_pos, num_rows_cols); let correct_next = eval(`(${correct_code})`)( protag_pos, enemy_pos, num_rows_cols ); console.log(user_next, correct_next); board.querySelector("div.user-next")?.classList.remove("user-next"); board.querySelector("div.correct-next")?.classList.remove("correct-next"); board .querySelector(`div:nth-child(${user_next})`) ?.classList.add("user-next"); board .querySelector(`div:nth-child(${correct_next})`) ?.classList.add("correct-next"); board.querySelector(`div:nth-child(${protag_pos + 1})`).appendChild(protag); }); return board; }49:[] 45:{"id":"eae7d4dde3da2eba","slug":null,"title":"CSE 510 project use case 1","thumbnail":"d654f798cf94be462cd01af5dbc8caf6800a1f7c58d2fb1872d27287ff579ca7","access_level":"public","create_time":"$D2022-02-03T10:09:23.339Z","update_time":"$D2022-02-03T11:25:04.615Z","view_time":null,"first_public_time":"$D2023-05-30T00:23:33.462Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"cc00293cc3788b65","login":"luke-s-snyder","name":"Luke Snyder","avatar_url":"https://avatars-next.observableusercontent.com/8fe1767ce8d041d91556f9ab13bd94bdda7e2a1227888705b4a2c3c0153198a4","tier":"starter_2024","bio":"","following":false},"version":550,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b69da7dd934c9a5","login":"luke-s-snyder","name":"Luke Snyder","avatar_url":"https://avatars-next.observableusercontent.com/8fe1767ce8d041d91556f9ab13bd94bdda7e2a1227888705b4a2c3c0153198a4","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"4b69da7dd934c9a5","login":"luke-s-snyder","name":"Luke Snyder","avatar_url":"https://avatars-next.observableusercontent.com/8fe1767ce8d041d91556f9ab13bd94bdda7e2a1227888705b4a2c3c0153198a4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CSE 510 project use case 1","cells":[{"id":314,"value":"# CSE 510 project use case 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"viewof num_rows_cols = Inputs.range([2, 20], {\n step: 1,\n value: 5,\n label: \"num_rows_cols\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"User task: given your position and Mario's position, return the correct next position for Bowser","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"The next location of Bowser (according to the user code) is highlighted in blue. \nThe correct next location of Bowser is highlighted in green.\n\nTODO: figure out what the actual correct next location is","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"TODO:\n- make both images draggable (DONE)\n- disallow dragging out of the bounds (DONE)\n- code up \"correct\" solution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":449,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"viewof my_code = Inputs.textarea({\n label: \"Code to insert\",\n rows: 20,\n value: correct_code,\n submit: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"{\n const size = `${Math.min(100, width / num_rows_cols)}px`;\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"enemy_img_src = \"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/77a638c2-9d34-4f8d-9aef-edb8d196b304/d6ebtax-b9380050-b687-43dd-a42b-f74c3dd57307.png/v1/fill/w_1024,h_1303,strp/bowser_png_by_brokenheartdesignz_d6ebtax-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTMwMyIsInBhdGgiOiJcL2ZcLzc3YTYzOGMyLTlkMzQtNGY4ZC05YWVmLWVkYjhkMTk2YjMwNFwvZDZlYnRheC1iOTM4MDA1MC1iNjg3LTQzZGQtYTQyYi1mNzRjM2RkNTczMDcucG5nIiwid2lkdGgiOiI8PTEwMjQifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.Bw_-_BSZzKDu771C-F92ZtRMDCf_Su_x96sXfkVA3Zw\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"mario_img_src = \"https://pngimg.com/uploads/mario/mario_PNG57.png\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"correct_code = `function whereShouldMarioGo(protag_pos, enemy_pos, num_rows_cols) {\n // this is wrong\n const divmod = (x, y) => [Math.floor(x / y), x % y];\n const constrain = (n) => Math.min(Math.max(n, 0), num_rows_cols - 1);\n let [px, py] = divmod(protag_pos, num_rows_cols);\n let [ex, ey] = divmod(enemy_pos, num_rows_cols);\n px += Math.sign(px - ex + 0.1);\n py += Math.sign(py - ey + 0.1);\n return constrain(px) * num_rows_cols + constrain(py);\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"