/
bundle.js.map
1 lines (1 loc) · 16.3 KB
/
bundle.js.map
1
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/dart.js","webpack:///./src/game.js","webpack:///./src/index.js","webpack:///./src/kite.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,kDAA0C,gCAAgC;AAC1E;AACA;;AAEA;AACA;AACA;AACA,gEAAwD,kBAAkB;AAC1E;AACA,yDAAiD,cAAc;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAyC,iCAAiC;AAC1E,wHAAgH,mBAAmB,EAAE;AACrI;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;;AAGA;AACA;;;;;;;;;;;;;;;;ACjF+B;AAC/B;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,sF;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA,e;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEA;;;AAGA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEe,mEAAI,EAAC;;AAEpB;;;;;;;;;;;;;AC/GA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA0B;AACA;AAC1B;AACA;AACA;;AAEO;AACP;AACO;;AAEP;AACA;AACA;AACA;AACA;;AAEA;AACA;;;AAGA;AACA,qBAAqB,6CAAI;AACzB;AACA;AACA;;;AAGA;AACA;AACA,qBAAqB,6CAAI;AACzB;AACA;AACA;;AAEA;;AAEA,yD;AACA;AACA;AACA;AACA;;;AAGA;AACA,gEAAgE;;AAEhE;AACA,kDAAkD;;AAElD;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,MAAM;AACN;;AAEA;AACA;AACA;;;;;;AAMA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,2E;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;;;;;AAKA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,C;;AAEe;AACf;AACA;AACA;AACA,8BAA8B;;AAE9B;AACA;AACA;;;;;;;;;;;;;;AC1KA;AAAA;AAAA;AAAA;AAA4B;AACC;AACE;;AAE/B;AACA;;AAEA;AACA;AACA;;AAEA,IAAI,wDAAO;;AAEX;AACA;;AAEA;AACA;AACA,CAAC;;;AAGD,+B;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;;;;;ACvCA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;;AAEA;AACA;;;AAGA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEA;;;;;AAKe,mEAAI,E","file":"bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.js\");\n","\nimport ALL_TILES from './game';\nlet PHI = (Math.sqrt(5) + 1)/2;\nlet to_radians = Math.PI / 180;\nlet colors = [\"#ecadb6\", \"#cc0030\", \"#566f56\"];\n\nclass Dart {\n constructor(options) {\n this.x = 200;\n this.y = 180;\n this.angle = 0;\n this.color = colors[Math.floor(Math.random() * colors.length)];\n this.size = 70;\n }\n\n centerX() {\n return (2 * this.x + this.size * Math.sin(this.angle * to_radians) / PHI) / 2; \n }\n\n centerY(){\n return (2 * this.y - (this.size * Math.cos(this.angle * to_radians)) / PHI) / 2;\n }\n\n xGivenCenter(center) {\n return (2 * PHI * center - this.size * Math.sin(this.angle * to_radians)) / (2 * PHI);\n }\n\n yGivenCenter(center) {\n return (2 * PHI * center + this.size * Math.cos(this.angle * to_radians)) / (2 * PHI);\n }\n\n\n draw(ctx) { \n\n let size = this.size;\n let angle = this.angle;\n \n ctx.beginPath();\n ctx.moveTo(this.x, this.y);\n \n ctx.lineTo(this.x + size * Math.sin((36 + angle) * to_radians), \n this.y - size * Math.cos((36 + angle) * to_radians));\n ctx.lineTo(this.x + size * Math.sin(angle * to_radians) / PHI, \n this.y - size * Math.cos(angle * to_radians) / PHI);\n ctx.lineTo(this.x - size * Math.sin((36 - angle) * to_radians), \n this.y - size * Math.cos((36 - angle) * to_radians));\n \n ctx.closePath();\n \n var grd = ctx.createRadialGradient(this.centerX(), this.centerY(), 2, this.centerX(), this.centerY(), 45 );\n grd.addColorStop(0, \"white\");\n grd.addColorStop(1, this.color);\n ctx.fillStyle = grd;\n ctx.fill();\n\n\n ctx.lineWidth = 2;\n // ctx.strokeStyle = \"#35374C\";\n ctx.strokeStyle = \"#82e3e3\";\n ctx.stroke();\n \n }\n\n\n highlight(ctx) {\n\n let size = this.size;\n let angle = this.angle;\n\n ctx.beginPath();\n ctx.moveTo(this.x, this.y);\n\n ctx.lineTo(this.x + size * Math.sin((36 + angle) * to_radians),\n this.y - size * Math.cos((36 + angle) * to_radians));\n ctx.lineTo(this.x + size * Math.sin(angle * to_radians) / PHI,\n this.y - size * Math.cos(angle * to_radians) / PHI);\n ctx.lineTo(this.x - size * Math.sin((36 - angle) * to_radians),\n this.y - size * Math.cos((36 - angle) * to_radians));\n\n ctx.closePath();\n\n ctx.lineWidth = 2;\n ctx.strokeStyle = \"#2a2abb\";\n ctx.stroke();\n\n }\n\n // addCircles(ctx) {\n // var centerX = this.x;\n // var centerY = this.y;\n // var radius = 3;\n\n // ctx.beginPath();\n // ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);\n // ctx.fillStyle = 'blue';\n // ctx.fill();\n\n // var centerX = this.x + (this.size * Math.sin(this.angle * to_radians)) / PHI;\n // var centerY = this.y - (this.size * Math.cos(this.angle * to_radians)) / PHI;\n // // var radius = 3;\n\n // ctx.beginPath();\n // ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);\n // ctx.fillStyle = 'blue';\n // ctx.fill();\n \n // }\n}\n\nexport default Dart;\n\n//prev pink: #F7CAC9\n","import Kite from './kite';\nimport Dart from './dart';\nlet canvas = document.getElementById('penrosy-canvas')\nlet ctx = canvas.getContext(\"2d\");\nlet circles = false;\n\nexport const currentTile = [];\nlet draggingTile = [];\nexport const ALL_TILES = [];\n\nfunction drawTiles() {\n ctx.clearRect(0, 0, 1250, 900);\n ALL_TILES.forEach(tile => tile.draw(ctx))\n // console.log(\"ahahah\");\n}\n\n//Place a kite when the create-kite button is clicked\n//Add kite to shape array \n\n\ndocument.getElementById(\"create-kite\").onclick = () => {\n const kite = new Kite();\n ALL_TILES.push(kite);\n currentTile[0] = kite;\n};\n\n\n//Place a dart when dart button clicked\ndocument.getElementById('create-dart').onclick = () => {\n const dart = new Dart(ctx);\n ALL_TILES.push(dart);\n currentTile[0] = dart;\n}\n\n//Clear canvas when clear canvas button is pushed \n\ndocument.getElementById('clear-canvas').onclick = () => { \n ALL_TILES.length = 0;\n currentTile.length = 0;\n draggingTile.length = 0;\n}\n\n\n//Clear current selected tile\ndocument.getElementById('clear-current').onclick = function () { deleteCurrent() }\n\nfunction deleteCurrent() {\n let index = ALL_TILES.indexOf(currentTile[0]); //Find the index of the current tile\n\n if (index !== -1) {\n ALL_TILES.splice(index, 1);\n }\n\n currentTile[0] = null;\n}\n\n// document.getElementById(\"marker-circles\").onclick = function() {\n// addCircles();\n// };\n\n// function addCircles() {\n// circles = true;\n// })\n// }\n\n// function drawCircles() {\n// ALL_TILES.forEach( tile => tile.addCircles(ctx))\n// }\n\n\n\n\n\n//Rotate tile when clicking on A or D\n\ndocument.addEventListener(\"keydown\", rotateShape);\n\nfunction rotateShape(e) {\n\n e.stopPropagation();\n switch (e.keyCode) {\n case 37:\n currentTile[0].angle -= 36;\n break;\n case 39:\n currentTile[0].angle += 36;\n break;\n case 65:\n currentTile[0].angle -= 36;\n break;\n case 68:\n currentTile[0].angle += 36;\n break;\n }\n}\n\n\n//When you mousedown, go through shape array\n//If mousedown was on shape, set shape's selected and dragging attributes to true\n\ncanvas.addEventListener('mousedown', onMouseDown);\n\nfunction distance(mx, my, x, y){\n let xDist = mx - x;\n let yDist = my - y;\n return Math.sqrt((xDist * xDist) + (yDist * yDist))\n}\n\nfunction getMousePos(evt) {\n var rect = canvas.getBoundingClientRect();\n return {\n x: evt.clientX - rect.left,\n y: evt.clientY-rect.top \n };\n}\n\nfunction onMouseDown(e){\n console.log(currentTile);\n const pos = getMousePos(e)\n ALL_TILES.forEach(tile => {\n \n if (distance(pos.x, pos.y, tile.centerX(), tile.centerY()) < 30 ) { \n currentTile[0] = tile;\n draggingTile[0] = tile;\n document.addEventListener('mousemove', onMouseMove);\n }\n })\n}\n\n\n\n\nfunction onMouseMove(e) {\n const mouse = getMousePos(e);\n let tile = draggingTile[0];\n\n //xGivenCenter is written for each class, and is an equation that finds x given the center\n //This is done so the mouse stays in the center of the tile rather than a corner\n tile.x = tile.xGivenCenter(mouse.x) \n tile.y = tile.yGivenCenter(mouse.y)\n}\n\ncanvas.addEventListener('mouseup', onMouseUp);\n \nfunction onMouseUp(e) {\n document.removeEventListener('mousemove', onMouseMove);\n}\n\n// ------ANIMATE FUNCTIONS ------\n\nfunction highlightSelected() {\n if (currentTile[0]) {\n currentTile[0].highlight(ctx)\n }\n}\n\nfunction clearCanvas() {\n var rect = canvas.getBoundingClientRect();\n // ctx.clearRect(rect.left, rect.top, rect.right, rect.bottom)\n ctx.clearRect(10, 10, 100, 100)\n} \n\nexport default function animate() {\n // clearCanvas();\n drawTiles();\n highlightSelected();\n // if (circles === true) {drawCircles()}\n \n // button.addEventListener(\"click\", clearCanvas);\n requestAnimationFrame(animate);\n}\n\n","import Kite from './kite.js'\nimport Dart from './dart.js';\nimport animate from './game.js'\n\nlet modal = document.getElementById(\"about\");\nlet penrosy = document.getElementById('bod');\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const canvas = document.getElementById(\"penrosy-canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n animate();\n\n document.getElementById(\"learn\").addEventListener(\"click\", openModal);\n penrosy.addEventListener(\"click\", closeModal);\n\n // const dart = new Dart(ctx);\n // dart.draw(ctx);\n});\n\n\nconst openModal = function(e) { \n e.stopPropagation();\n\n modal.style.display = \"block\";\n penrosy.classList.add(\"hiding\");\n\n penrosy.addEventListener(\"click\", closeModal);\n // penrosy.id = 'hiding';\n}\n\nconst closeModal = function(e) {\n e.stopPropagation();\n\n modal.style.display = \"none\";\n penrosy.className = penrosy.className.replace(/\\bhiding\\b/g, \"\");\n\n penrosy.removeEventListener(\"click\", closeModal);\n // penrosy.id = 'not';\n\n}\n","\nlet to_radians = Math.PI / 180;\nlet colors = [\"#ecadb6\", \"#cc0030\", \"#566f56\"];\n\n\nclass Kite {\n constructor(options) {\n this.x = 200;\n this.y = 95;\n this.angle = 0;\n this.color = colors[Math.floor(Math.random() * colors.length)];\n this.size = 70;\n }\n\n centerX() {\n return ((2 * this.x + this.size * Math.sin(this.angle * to_radians)) / 2);\n }\n\n centerY() {\n return ((2 * this.y - this.size * Math.cos(this.angle * to_radians)) / 2);\n }\n\n xGivenCenter(center) {\n return (2 * center - this.size * Math.sin(this.angle * to_radians)) / 2;\n }\n\n yGivenCenter(center) {\n return (2 * center + this.size * Math.cos(this.angle * to_radians))/2\n }\n\n\n draw(ctx) {\n \n let size = this.size;\n let angle = this.angle;\n \n \n ctx.beginPath();\n \n //create kite shape \n \n ctx.moveTo(this.x, this.y);\n ctx.lineTo(this.x + size * Math.sin((36 + angle) * to_radians), \n this.y - size * Math.cos((36 + angle) * to_radians));\n ctx.lineTo(this.x + size * Math.sin(angle * to_radians), \n this.y - size * Math.cos(angle * to_radians));\n ctx.lineTo(this.x - size * Math.sin((36 - angle) * to_radians), \n this.y - size * Math.cos((36 - angle) * to_radians));\n ctx.closePath();\n\n \n var grd = ctx.createRadialGradient(this.centerX(), this.centerY(), 1, this.centerX(), this.centerY(), 55);\n grd.addColorStop(0, \"white\");\n grd.addColorStop(1, this.color);\n ctx.fillStyle = grd;\n ctx.fill();\n\n ctx.lineWidth = 2;\n ctx.strokeStyle = \"#82e3e3\";\n ctx.stroke();\n // ctx.fillStyle = this.color;\n // ctx.fill();\n }\n\n highlight(ctx) {\n ctx.beginPath();\n ctx.moveTo(this.x, this.y);\n ctx.lineTo(this.x + this.size * Math.sin((36 + this.angle) * to_radians),\n this.y - this.size * Math.cos((36 + this.angle) * to_radians));\n ctx.lineTo(this.x + this.size * Math.sin(this.angle * to_radians),\n this.y - this.size * Math.cos(this.angle * to_radians));\n ctx.lineTo(this.x - this.size * Math.sin((36 - this.angle) * to_radians),\n this.y - this.size * Math.cos((36 - this.angle) * to_radians));\n ctx.closePath();\n\n\n ctx.lineWidth = 2;\n ctx.strokeStyle = \"#2a2abb\";\n ctx.stroke();\n }\n\n}\n\n\n\n\nexport default Kite;"],"sourceRoot":""}