Initial commit

2019-11-29 19:39:38 +02:00 · 2019-11-29 19:39:38 +02:00 · 3724fb1a4a
commit 3724fb1a4a
23 changed files with 864 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,14 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "corejs": false,
+        "helpers": true,
+        "regenerator": true,
+        "useESModules": false
+      }
+    ]
+  ]
+}
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,14 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.js]
+charset = utf-8
+indent_style = space
+indent_size = 2
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,6 @@
+/node_modules/
+/dist/
+/package-lock.json
+/**/dna.txt
+*.db
+*.sqlite3
--- a/index.html
+++ b/index.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <style type="text/css">*{margin:0;padding:0;}body{width:100%;height:100%;}body,html{overflow:hidden;}</style>
+    <title>Hook Miner</title>
+  </head>
+  <body>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,27 @@
+{
+  "name": "aaaidk",
+  "version": "0.0.1",
+  "description": "idk",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack -p",
+    "watch": "webpack -w --mode=development"
+  },
+  "keywords": [],
+  "private": true,
+  "author": "Evert \"Diamond\" Prants <evert@lunasqu.ee>",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.6",
+    "babel-loader": "^8.0.4",
+    "html-webpack-plugin": "^3.2.0",
+    "standard": "^12.0.1",
+    "webpack": "^4.26.0",
+    "webpack-command": "^0.4.2"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.1.5"
+  }
+}
--- a/src/canvas.js
+++ b/src/canvas.js
@ -0,0 +1,65 @@
+const canvas = document.createElement('canvas')
+const ctx = canvas.getContext('2d')
+
+ctx.mouse = { pos: {} }
+
+canvas.addEventListener('mousemove', (e) => {
+  let x
+  let y
+
+  if (e.changedTouches) {
+    let touch = e.changedTouches[0]
+    if (touch) {
+      e.pageX = touch.pageX
+      e.pageY = touch.pageY
+    }
+  }
+
+  if (e.pageX || e.pageY) {
+    x = e.pageX
+    y = e.pageY
+  } else {
+    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
+    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
+  }
+
+  x -= canvas.offsetLeft
+  y -= canvas.offsetTop
+
+  if (ctx.oX && ctx.oY) {
+    x += ctx.oX
+    y += ctx.oY
+  }
+
+  ctx.mouse.pos.x = x
+  ctx.mouse.pos.y = y
+}, false)
+
+canvas.addEventListener('mousedown', (e) => {
+  e.preventDefault()
+  ctx.mouse['btn' + e.button] = true
+})
+
+canvas.addEventListener('mouseup', (e) => {
+  e.preventDefault()
+  ctx.mouse['btn' + e.button] = false
+})
+
+canvas.addEventListener('contextmenu', (e) => {
+  e.preventDefault()
+})
+
+// Resize the canvas when window is resized
+canvas.resizeWorkspace = function () {
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+}
+
+window.addEventListener('resize', canvas.resizeWorkspace, false)
+
+// Add elements to the document
+document.body.appendChild(canvas)
+
+canvas.resizeWorkspace()
+
+export { canvas, ctx }
--- a/src/game.js
+++ b/src/game.js
@ -0,0 +1,187 @@
+import { canvas, ctx } from './canvas'
+import { Level, Rock, Gold, Diamond, Lootbag } from './level'
+import { randomi } from './utils'
+
+const REWARD_TABLE = {
+  rock: 16,
+  gold: [129, 543, 2399],
+  diamond: 599,
+  lootbag: [5, 5000]
+}
+
+export class Game {
+  constructor (time, player, oh, gw, gh) {
+    this.currentLevel = 0
+    this.player = player
+    this.roundTime = time
+    this.time = time
+    this.score = 0
+    this.goal = 0
+
+    this.level = null
+    this.oh = oh
+    this.gh = gh
+    this.gw = gw
+
+    this.message = null
+
+    this.state = 0
+    this.wait = 0
+  }
+
+  static calculateScore (obj, skipLoot) {
+    if (obj instanceof Rock) {
+      return REWARD_TABLE.rock * obj.size
+    }
+
+    if (obj instanceof Gold) {
+      return REWARD_TABLE.gold[obj.size - 1]
+    }
+
+    if (obj instanceof Diamond) {
+      return REWARD_TABLE.diamond
+    }
+
+    if (skipLoot) return 0
+
+    if (obj instanceof Lootbag) {
+      let ssChance = randomi(0, 3)
+      if (ssChance === 1) {
+        return 'special'
+      }
+      return randomi(REWARD_TABLE.lootbag[0], REWARD_TABLE.lootbag[1])
+    }
+
+    return 0
+  }
+
+  static calculateLevelScore (level) {
+    let total = 0
+    for (let i in level.objects) {
+      total += Game.calculateScore(level.objects[i], true)
+    }
+    return total
+  }
+
+  nextLevel () {
+    this.player.superStrength = false
+    this.currentLevel++
+    this.time = this.roundTime
+    this.level = Level.create(this.currentLevel, this.oh, this.gw, this.gh)
+    this.goal = Math.floor(this.score / 2 + Game.calculateLevelScore(this.level) * 0.65)
+  }
+
+  displayMessage (msg, time = 60) {
+    this.message = { text: msg, time: time, duration: time }
+  }
+
+  scoredItem (obj) {
+    let scored = Game.calculateScore(obj)
+    if (scored === 'special') {
+      this.displayMessage('SUPER STRENGTH!')
+      this.player.superStrength = true
+      return
+    }
+
+    this.displayMessage('$' + scored)
+    this.score += scored
+  }
+
+  update () {
+    ctx.oX = (canvas.width - this.gw) / 2
+    ctx.oY = (canvas.height - this.gh) / 2
+
+    if (this.state === 0 && this.time === 0) {
+      if (this.score > this.goal) {
+        this.state = 1
+        this.wait = 160
+        this.nextLevel()
+      } else {
+        this.state = 2
+      }
+    }
+
+    if (this.state === 1) {
+      if (this.wait > 0) {
+        this.wait--
+      } else {
+        this.state = 0
+      }
+      return
+    }
+
+    if (this.state !== 0) return
+    if (this.message) {
+      if (this.message.time > 0) {
+        this.message.time--
+      } else {
+        this.message = null
+      }
+      return
+    }
+
+    this.player.update(this.level)
+  }
+
+  tick () {
+    if (this.state === 0 && this.time > 0) {
+      this.time -= 1
+    }
+  }
+
+  draw () {
+    if (this.state === 2) {
+      ctx.fillStyle = '#ff1111'
+      ctx.font = '20px sans-serif'
+      let t = 'Game Over!'
+      let s = 'Score: $' + this.score
+      ctx.fillText(t, ctx.oX + this.gw / 2 - ctx.measureText(t).width / 2, ctx.oY + this.gh / 2 - 15)
+      ctx.fillText(s, ctx.oX + this.gw / 2 - ctx.measureText(s).width / 2, ctx.oY + this.gh / 2 + 15)
+      return
+    }
+
+    if (this.state === 1) {
+      ctx.fillStyle = '#05ff05'
+      ctx.font = '20px sans-serif'
+      let t = 'Level Cleared!'
+      let s = 'Next Goal: $' + this.goal
+      ctx.fillText(t, ctx.oX + this.gw / 2 - ctx.measureText(t).width / 2, ctx.oY + this.gh / 2 - 15)
+      ctx.fillText(s, ctx.oX + this.gw / 2 - ctx.measureText(s).width / 2, ctx.oY + this.gh / 2 + 15)
+      return
+    }
+
+    // Underground
+    ctx.fillStyle = '#3a2201'
+    ctx.fillRect(ctx.oX, ctx.oY, this.gw, this.gh)
+    // Room
+    ctx.fillStyle = '#b26b08'
+    ctx.fillRect(ctx.oX, ctx.oY, this.gw, 25 + this.player.h)
+    // Floor
+    ctx.fillStyle = '#2b1a02'
+    ctx.fillRect(ctx.oX, ctx.oY + 25 + this.player.h, this.gw, 15)
+
+    if (this.level) this.level.draw()
+    this.player.draw()
+
+    ctx.fillStyle = '#05ff05'
+    ctx.font = '20px sans-serif'
+    ctx.fillText('Money: $' + this.score, ctx.oX + 20, ctx.oY + 30)
+    ctx.fillStyle = '#eabb4d'
+    ctx.fillText('Goal: $' + this.goal, ctx.oX + 20, ctx.oY + 62)
+    ctx.fillStyle = '#05ff05'
+    let time = 'Time: ' + this.time
+    let ftsize = ctx.measureText(time)
+    ctx.fillText(time, ctx.oX + this.gw - ftsize.width - 5, ctx.oY + 30)
+
+    let round = 'Level ' + this.currentLevel
+    let frsize = ctx.measureText(round)
+    ctx.fillText(round, ctx.oX + this.gw - frsize.width - 5, ctx.oY + 62)
+
+    if (this.message && this.message.time > 0) {
+      let tfloat = this.message.duration - this.message.time
+      ctx.fillStyle = '#05ff05'
+      ctx.font = '20px sans-serif'
+      ctx.fillText(this.message.text, ctx.oX + this.player.x - this.player.w - tfloat, ctx.oY + this.player.y + this.player.h / 2 - tfloat / 2)
+    }
+  }
+}
--- a/src/image.js
+++ b/src/image.js
@ -0,0 +1,33 @@
+import Resource from './resource'
+import { ctx } from './canvas'
+
+let imageCache = {}
+
+class Image {
+  constructor (file, img) {
+    this.file = file
+    this.img = img
+  }
+
+  static async load (file) {
+    if (imageCache[file]) return imageCache[file]
+    let img = await Resource.loadImage(file)
+    let imgCl = new Image(file, img)
+    imageCache[file] = imgCl
+    return imgCl
+  }
+
+  get width () {
+    return this.img.width
+  }
+
+  get height () {
+    return this.img.height
+  }
+
+  draw (x, y, w, h) {
+    ctx.drawImage(this.img, x, y, w, h)
+  }
+}
+
+export { Image }
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,44 @@
+/* global requestAnimationFrame */
+import { canvas, ctx } from './canvas'
+import { Game } from './game'
+import { Player } from './player'
+import RES from './resource'
+
+const GameWidth = 1080
+const GameHeight = 720
+
+let playing = true
+let player = new Player(GameWidth / 2 - 30, 25, GameHeight - 80)
+let game = new Game(60, player, player.h + 60, GameWidth, GameHeight)
+
+// Retranslate score function
+player.score = function (obj) {
+  /* eslint-disable no-useless-call */
+  game.scoredItem.call(game, obj)
+}
+
+function gameLoop () {
+  playing && requestAnimationFrame(gameLoop)
+  ctx.fillStyle = '#111'
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  game.update()
+  game.draw()
+}
+
+function start () {
+  game.nextLevel()
+  gameLoop()
+  setInterval(function () {
+    game.tick()
+  }, 1000)
+}
+
+async function loadAll () {
+  let images = ['static/hook_open.png', 'static/gold_1.png', 'static/gold_2.png', 'static/gold_3.png',
+    'static/rock_1.png', 'static/rock_2.png', 'static/rock_3.png', 'static/diamond.png', 'static/loot.png']
+  for (let i in images) {
+    await RES.loadImage(images[i])
+  }
+}
+
+loadAll().then(start)
--- a/src/level.js
+++ b/src/level.js
@ -0,0 +1,136 @@
+import { ctx } from './canvas'
+import { randomi } from './utils'
+import RES from './resource'
+
+const offset = 50
+
+// Objects
+
+export class GameObject {
+  constructor (x, y, w, h, img) {
+    this.x = x
+    this.y = y
+    this.w = w
+    this.h = h
+    this.img = img
+    this.physical = true
+  }
+
+  draw () {
+    if (!this.physical) return
+    if (this.img.indexOf('#') === 0) {
+      ctx.fillStyle = this.img
+      ctx.fillRect(ctx.oX + this.x, ctx.oY + this.y, this.w, this.h)
+    } else {
+      ctx.drawImage(RES.loadImage(this.img, true), ctx.oX + this.x, ctx.oY + this.y, this.w, this.h)
+    }
+  }
+
+  destroy () {
+    this.physical = false
+  }
+
+  get weight () {
+    return 0.1
+  }
+}
+
+export class Rock extends GameObject {
+  constructor (x, y, size) {
+    let o = size * 20
+    super(x, y, o, o, 'static/rock_' + size + '.png')
+    this.size = size
+  }
+
+  get weight () {
+    return Math.min(0.20 * this.size, 1)
+  }
+}
+
+export class Gold extends GameObject {
+  constructor (x, y, size) {
+    let o = size * 24
+    super(x, y, o, o, 'static/gold_' + size + '.png')
+    this.size = size
+  }
+
+  get weight () {
+    return Math.min(0.25 * this.size, 1)
+  }
+}
+
+export class Diamond extends GameObject {
+  constructor (x, y) {
+    super(x, y, 16, 16, 'static/diamond.png')
+  }
+
+  get weight () {
+    return 0.11
+  }
+}
+
+export class Lootbag extends GameObject {
+  constructor (x, y) {
+    super(x, y, 30, 30, 'static/loot.png')
+  }
+
+  get weight () {
+    return 0.56
+  }
+}
+
+// Level
+
+export class Level {
+  constructor (id, objects) {
+    this.id = id
+    this.objects = objects || []
+  }
+
+  draw () {
+    for (let i in this.objects) {
+      this.objects[i].draw()
+    }
+  }
+
+  static create (index, my, width, height) {
+    let objects = []
+    let rocks = randomi(4, 12)
+    let gold = randomi(4, 12)
+    let diamond = randomi(0, 2)
+    let loot = randomi(0, 2)
+
+    // Add rocks
+    for (let r = 0; r < rocks; r++) {
+      let x = randomi(offset, width - offset)
+      let y = randomi(offset + my, height - (offset + my))
+      let size = randomi(1, 4)
+      objects.push(new Rock(x, y, size))
+    }
+
+    // Add gold
+    for (let r = 0; r < gold; r++) {
+      let x = randomi(offset, width - offset)
+      let y = randomi(offset + my, height - (offset + my))
+      let size = randomi(1, 4)
+      objects.push(new Gold(x, y, size))
+    }
+
+    // Add diamonds
+    for (let r = 0; r < diamond; r++) {
+      let x = randomi(offset, width - offset)
+      let y = randomi(offset + my, height - (offset + my))
+      objects.push(new Diamond(x, y))
+    }
+
+    // Add loot
+    for (let r = 0; r < loot; r++) {
+      let x = randomi(offset, width - offset)
+      let y = randomi(offset + my, height - (offset + my))
+      objects.push(new Lootbag(x, y))
+    }
+
+    let n = new Level(index, objects)
+    return n
+  }
+}
--- a/src/player.js
+++ b/src/player.js
@ -0,0 +1,174 @@
+import { ctx } from './canvas'
+import { GameObject } from './level'
+import { deg2rad, rad2vec, intersectRect } from './utils'
+import RES from './resource'
+
+const FULL_ROTATION = -85
+const FULL_ROTATION_EDGE = -FULL_ROTATION
+
+class Hook extends GameObject {
+  constructor (player, x, y, w, h, len) {
+    super(x, y, w, h)
+    this.player = player
+
+    // Return position
+    this.rx = x
+    this.ry = y
+
+    // Hook rotation
+    // Hook rotation direction
+    this.r = 0
+    this.rd = 1
+
+    // Distance from center
+    // Moving direction
+    this.d = 0
+    this.md = -1
+
+    // Travel length
+    this.len = len
+
+    // Attached object
+    this.obj = null
+  }
+
+  draw () {
+    if (this.md !== -1) {
+      // Draw line
+      ctx.beginPath()
+      ctx.moveTo(ctx.oX + this.rx, ctx.oY + this.ry)
+      ctx.lineTo(ctx.oX + this.x, ctx.oY + this.y)
+      ctx.stroke()
+      ctx.closePath()
+    }
+
+    let hookr = deg2rad(360 - this.r)
+    ctx.save()
+    ctx.translate(ctx.oX + this.x, ctx.oY + this.y)
+    ctx.rotate(hookr)
+    ctx.drawImage(RES.loadImage('static/hook_open.png', true), -this.w / 2, -this.h / 2, this.w, this.h)
+    ctx.restore()
+  }
+
+  update (level) {
+    if (this.d === 0 && this.r < FULL_ROTATION_EDGE && this.rd === 1) {
+      this.r += 1
+    }
+
+    if (this.d === 0 && this.r > FULL_ROTATION && this.rd === 0) {
+      this.r -= 1
+    }
+
+    if (this.r >= FULL_ROTATION_EDGE && this.rd === 1) {
+      this.r = FULL_ROTATION_EDGE
+      this.rd = 0
+    }
+
+    if (this.r <= FULL_ROTATION && this.rd === 0) {
+      this.r = FULL_ROTATION
+      this.rd = 1
+    }
+
+    if (ctx.mouse['btn0'] && this.d === 0) {
+      this.d = 0
+      this.md = 1
+    }
+
+    if (this.md > -1) {
+      if (this.d > this.len && this.md === 1) {
+        this.md = 0
+      }
+
+      if (this.d <= 2 && this.md === 0) {
+        this.d = 0
+        this.md = -1
+        this.x = this.rx
+        this.y = this.ry
+
+        // Score
+        if (this.obj) {
+          this.player.score(this.obj)
+          this.obj.destroy()
+          this.obj = null
+        }
+        return
+      }
+
+      let dir = rad2vec(deg2rad(90 - this.r))
+      dir.x *= this.d
+      dir.y *= this.d
+
+      this.x = this.rx + dir.x
+      this.y = this.ry + dir.y
+
+      if (this.obj) {
+        this.obj.x = this.x - this.obj.w / 2
+        this.obj.y = this.y
+      }
+
+      // Detect intersection
+      if (this.md === 1) {
+        if (!this.obj) {
+          let firstIntersect
+          for (let i in level.objects) {
+            let obj = level.objects[i]
+            if (obj.physical && intersectRect(obj, this)) {
+              firstIntersect = obj
+              break
+            }
+          }
+
+          if (firstIntersect) {
+            this.obj = firstIntersect
+            this.md = 0
+            return
+          }
+        }
+
+        if (this.player.superStrength) {
+          this.d += 10
+        } else {
+          this.d += 5
+        }
+      } else {
+        if (this.player.superStrength) {
+          this.d -= 10
+        } else {
+          this.d -= this.obj ? 5 * (1 - this.obj.weight) : 10
+        }
+      }
+    }
+  }
+}
+
+export class Player extends GameObject {
+  constructor (x, y, mh) {
+    super(x, y, 60, 55, '#4d4b4f')
+    this.x = x
+    this.y = y
+
+    this.hook = new Hook(this, this.x + this.w / 2, this.y + this.h, 20, 20, mh)
+    this.hook.r = FULL_ROTATION
+
+    this.superStrength = false
+  }
+
+  score (object) {
+    console.log('Scored', object)
+  }
+
+  draw () {
+    // Draw player
+    super.draw()
+
+    // Draw hook
+    this.hook.draw()
+
+    //
+  }
+
+  update (level) {
+    if (!level) return
+    this.hook.update(level)
+  }
+}
--- a/src/resource.js
+++ b/src/resource.js
@ -0,0 +1,103 @@
+/* global XMLHttpRequest, Image */
+
+let imgCache = {}
+
+function powerOfTwo (n) {
+  return n && (n & (n - 1)) === 0
+}
+
+function GET (url, istext) {
+  return new Promise((resolve, reject) => {
+    var xmlHttp = new XMLHttpRequest()
+
+    xmlHttp.onreadystatechange = function () {
+      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+        resolve(xmlHttp.responseText)
+      } else if (xmlHttp.readyState === 4 && xmlHttp.status >= 400) {
+        let err = new Error(xmlHttp.status)
+        err.request = xmlHttp
+        reject(err)
+      }
+    }
+
+    xmlHttp.open('GET', url, true)
+    istext && (xmlHttp.responseType = 'text')
+    xmlHttp.send(null)
+  })
+}
+
+function smartGET (data) {
+  if (typeof data === 'string') {
+    data = {
+      url: data,
+      type: 'text'
+    }
+  }
+
+  if (!data.type) data.type = 'text'
+  let istext = (data.type !== 'image' && data.type !== 'file')
+
+  let url = data.url
+  if (!url) throw new Error('URL is required!')
+
+  if (data.type === 'json') {
+    return new Promise((resolve, reject) => {
+      GET(url).then((dtext) => {
+        try {
+          let jsonp = JSON.parse(dtext)
+          return resolve(jsonp)
+        } catch (e) {
+          reject(e)
+        }
+      }, reject)
+    })
+  }
+
+  return GET(data.url, istext)
+}
+
+function loadImage (url, onlyReturn = false, nowarn = false) {
+  if (onlyReturn && imgCache[url]) {
+    return imgCache[url]
+  }
+
+  // Ensure we don't load a texture multiple times
+  if (imgCache[url]) return new Promise((resolve, reject) => resolve(imgCache[url]))
+
+  return new Promise((resolve, reject) => {
+    let img = new Image()
+
+    img.onload = function () {
+      // Friendly warnings
+      if ((!powerOfTwo(img.width) || !powerOfTwo(img.height)) && !nowarn) {
+        console.warn(`warn: image ${url} does not have dimensions that are powers of two. 16x16 to 128x128 recommended.`)
+      }
+
+      if ((img.width / img.height) !== 1 && !nowarn) {
+        console.warn(`warn: image ${url} does not have an aspect ratio of 1 to 1.`)
+      }
+
+      imgCache[url] = img
+      resolve(img)
+    }
+
+    img.onerror = function (e) {
+      reject(e)
+    }
+
+    img.src = url
+  })
+}
+
+function imageToSampler (img) {
+  let canvas = document.createElement('canvas')
+  let ctx = canvas.getContext('2d')
+  canvas.width = img.width
+  canvas.height = img.height
+  ctx.drawImage(img, 0, 0, img.width, img.height)
+  return function (x, y) {
+    return ctx.getImageData(x, y, 1, 1).data
+  }
+}
+
+export default { GET: smartGET, imageToSampler, loadImage }
--- a/src/utils.js
+++ b/src/utils.js
@ -0,0 +1,21 @@
+
+// Utility function
+
+export function randomi (min, max) {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+export function deg2rad (deg) {
+  return deg * Math.PI / 180
+}
+
+export function rad2vec (r) {
+  return { x: Math.cos(r), y: Math.sin(r) }
+}
+
+export function intersectRect (r1, r2) {
+  return !(r2.x > r1.w + r1.x ||
+           r2.w + r2.x < r1.x ||
+           r2.y > r1.h + r1.y ||
+           r2.h + r2.y < r1.y)
+}
--- a/static/diamond.png
+++ b/static/diamond.png
--- a/static/gold_1.png
+++ b/static/gold_1.png
--- a/static/gold_2.png
+++ b/static/gold_2.png
--- a/static/gold_3.png
+++ b/static/gold_3.png
--- a/static/hook_open.png
+++ b/static/hook_open.png
--- a/static/loot.png
+++ b/static/loot.png
--- a/static/rock_1.png
+++ b/static/rock_1.png
--- a/static/rock_2.png
+++ b/static/rock_2.png
--- a/static/rock_3.png
+++ b/static/rock_3.png
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,30 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = (env) => {
+  return {
+    entry: './src/index.js',
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: 'app.js'
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /(node_modules)/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env']
+            }
+          }
+        }
+      ]
+    },
+    devtool: env.mode === 'development' ? 'inline-source-map' : '',
+    plugins: [
+      new HtmlWebpackPlugin({ template: 'index.html' })
+    ]
+  }
+}