Boom!

.gitignore

@@ -0,0 +1,5 @@
+web/assets/oppai.js
+web/assets/vendor
+bin
+node_modules
+beatmaps/*.osu

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "oppai-web",
+  "version": "1.0.0",
+  "description": "web interface for oppai",
+  "author": "oamaok",
+  "license": "MIT",
+  "dependencies": {
+    "autoprefixer": "^6.3.6",
+    "babel-core": "^6.8.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "bluebird": "^3.3.5",
+    "body-parser": "^1.15.1",
+    "connect-multiparty": "^2.0.0",
+    "css-loader": "^0.23.1",
+    "express": "^4.13.4",
+    "md5-file": "^2.0.4",
+    "multer": "^1.1.0",
+    "node-sass": "^3.7.0",
+    "postcss-loader": "^0.9.1",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.0"
+  }
+}

src/client/oppai.js

@@ -0,0 +1,36 @@
+require('../sass/main.sass');
+
+const file = document.getElementById('map');
+const form = document.getElementById('oppai');
+const output = document.getElementById('output');
+const mods = ['nf', 'ez', 'hd', 'hr', 'dt', 'ht', 'fl', 'so'];
+
+const modInputs = mods.map(mod => document.getElementById('mod-' + mod))
+
+map.addEventListener('change', evt => {
+  document.getElementById('filename').innerText = map.value.replace(/\\/g, '/').replace(/.*\//, '');
+});
+
+form.addEventListener('submit', (evt) => {
+  evt.preventDefault();
+  const body = new FormData(form);
+  body.append('mods', [...modInputs].filter(node => node.checked).map(node => node.id.substr(-2)));
+
+  fetch('/oppai', {
+    method: 'post',
+    body: body
+  })
+  .then(res => res.json())
+  .then(res => {
+
+    if (res.error) {
+      output.innerText = res.error;
+      return;
+    }
+
+    output.innerText = res.output.split('\n').slice(19).join('\n');
+  })
+  .catch((error) => {
+    output.innerText = res.error;
+  })
+})

src/sass/main.sass

@@ -0,0 +1,9 @@
+@import 'partials/reset'
+@import 'partials/file'
+@import 'partials/mod'
+@import 'partials/submit-btn'
+
+
+@import 'modules/output'
+@import 'modules/container'
+@import 'modules/field'

src/sass/modules/_container.sass

@@ -0,0 +1,2 @@
+.container
+  max-width: 50em

src/sass/modules/_field.sass

@@ -0,0 +1,5 @@
+.field
+  width: 33.333%
+  box-sizing: border-box
+  padding: 1em
+  float: left

src/sass/modules/_output.sass

@@ -0,0 +1,7 @@
+
+pre#output
+  margin-top: 1em
+  border: 1px solid #555
+  padding: 1em
+  background-color: #777
+  color: #f7f7f7

src/sass/partials/_file.sass

@@ -0,0 +1,18 @@
+.btn-file 
+  position: relative
+  overflow: hidden
+
+.btn-file input[type=file]
+  position: absolute
+  top: 0
+  right: 0
+  min-width: 100%
+  min-height: 100%
+  font-size: 100px
+  text-align: right
+  filter: alpha(opacity=0)
+  opacity: 0
+  outline: none
+  background: white
+  cursor: inherit
+  display: block

src/sass/partials/_mod.sass

@@ -0,0 +1,48 @@
+.mod
+  width: 25%
+  float: left
+  text-align: center
+  [type="checkbox"]
+    position: absolute
+    opacity: 0
+  label::before
+    transition: all 0.1s ease-out
+    content: ' '
+    display: block
+    width: 92px
+    height: 68px
+    transform: scale(0.8)
+    opacity: 0.2
+    filter: grayscale(75%)
+    background-repeat: no-repeat
+  [type="checkbox"]:checked+label::before
+    transform: scale(1.0) rotate(10deg)
+    opacity: 1
+    filter: none
+  label
+    cursor: pointer
+
+  &.mod-dt 
+    label::before
+      background-image: url('../../web/assets/img/selection-mod-doubletime.png')
+  &.mod-ez 
+    label::before
+      background-image: url('../../web/assets/img/selection-mod-easy.png')
+  &.mod-fl
+    label::before
+      background-image: url('../../web/assets/img/selection-mod-flashlight.png')
+  &.mod-ht
+    label::before
+      background-image: url('../../web/assets/img/selection-mod-halftime.png')
+  &.mod-hr
+    label::before
+      background-image: url('../../web/assets/img/selection-mod-hardrock.png')
+  &.mod-hd
+    label::before
+      background-image: url('../../web/assets/img/selection-mod-hidden.png')
+  &.mod-nf
+    label::before
+      background-image: url('../../web/assets/img/selection-mod-nofail.png')
+  &.mod-so
+    label::before
+      background-image: url('../../web/assets/img/selection-mod-spunout.png')

src/sass/partials/_reset.sass

@@ -0,0 +1,20 @@
+*
+  margin: 0
+  padding: 0
+  outline: 0
+  color: #f7f7f7
+  font-family: Oxygen
+
+h1,h2,h3,h4
+  color: #f7f7f7
+  font-family: Oxygen
+  margin-bottom: 0.5em
+
+body
+  background-color: #666
+
+label
+  font-weight: 600
+
+input[type="text"]
+

src/sass/partials/_submit-btn.sass

@@ -0,0 +1,3 @@
+[type="submit"]
+  font-size: 2em
+  width: 100%

src/server/index.js

@@ -0,0 +1,46 @@
+const express = require('express');
+const path = require('path');
+const oppai = require('./oppai');
+const fs = require('fs');
+const md5file = require('md5-file');
+const multer = require('multer');
+const multiparty = require('connect-multiparty')();
+
+const app = express();
+
+app.use('/', express.static(path.resolve(__dirname, '../../web/')));
+
+app.post('/oppai', multiparty, (req, res) => {
+
+  console.log(req.body);
+
+  if (!req.files || !req.files.map)
+    return res.send({error: 'invalid or no file'}).end();
+
+  const file = req.files.map;
+
+  if (file.name.substr(-4) !== '.osu' || file.size > 1024 * 1024 * 2)
+    return res.send({error: 'invalid or no file'}).end();
+
+  const filename = path.resolve(__dirname, '../../beatmaps/', md5file(file.path) + '.osu');
+
+  fs.readFile(file.path, (err, data) => {
+    if (err)
+      return res.send({error: err});
+
+    fs.writeFile(filename, data, (err) => {
+
+      const mods = req.body.mods.split(',');
+      const options = Object.assign(req.body, {mods});
+
+      console.log(options);
+
+      oppai(filename, options)
+      .then(output => res.send({output}))
+      .catch(error => res.send({error: 'error occured, pls no break'}));
+    });
+  });
+
+});
+
+app.listen(3000);

src/server/oppai.js

@@ -0,0 +1,35 @@
+const exec = require('child_process').exec;
+const Promise = require('bluebird');
+const path = require('path');
+
+module.exports = (beatmap, options) =>
+{
+  const EXECUTABLE_PATH = path.resolve(__dirname, '../../bin/oppai');
+  options = options || {};
+
+  return new Promise((resolve, reject) => {
+    if (!Array.isArray(options.mods))
+      options.mods = ['nomod'];
+
+    const acc = (parseFloat(options.acc) || 100) + '%';
+    const availMods = ['nomod', 'nf', 'ez', 'hd', 'hr', 'dt', 'ht', 'nc', 'fl', 'so'];
+    const mods = (options.mods).filter(selected => availMods.some(mod => mod === selected)).join('');
+    const combo = parseInt(options.combo) || '';
+    const misses = parseInt(options.misses) || '';
+    const scorev = 'scorev' + (parseInt(options.scorev) || '2');
+
+    const command = [EXECUTABLE_PATH, beatmap, acc, mods.length ? '+' + mods : '', combo, misses, scorev].join(' ');
+    console.log(command);
+    exec(command, (error, stdout, stderr) => {
+
+      if (error)
+        return reject(error);
+
+      if (stderr)
+        return reject(stderr);
+
+      resolve(stdout);
+    });
+
+  });
+}

web/index.html

@@ -0,0 +1,79 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="author" content="oamaok">
+  <title>oppai-web</title>
+  <link href="assets/vendor/bootstrap.min.css" rel="stylesheet">
+  <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
+</head>
+<body>
+  <div class="container">
+    <h1>OPPAI-WEB<sub>beta</sub></h1>
+    <form id="oppai">
+      <div class="">
+        <label for="map">Select map file: </label>
+        <span class="btn btn-primary btn-file">
+          Browse... <input type="file" accept=".osu" id="map" name="map">
+        </span>
+        <span id="filename"></span>
+      </div>
+      <div class="field">
+        <label for="acc">Accuracy</label>
+        <input type="text" class="form-control" name="acc" id="acc" value="100">
+      </div>
+      <div class="field">
+        <label for="combo">Combo</label>
+        <input type="text" class="form-control" name="combo" id="combo" value="">
+      </div>
+      <div class="field">
+        <label for="misses">Misses</label>
+        <input type="text" class="form-control" name="misses" id="misses" value="0">
+      </div>
+      <div class="mods">
+        <h3>Mods</h3>
+        <div class="mod mod-dt">
+          <input type="checkbox" id="mod-dt">
+          <label for="mod-dt">DoubleTime</label>
+        </div>
+        <div class="mod mod-ez">
+          <input type="checkbox" id="mod-ez">
+          <label for="mod-ez">Easy</label>
+        </div>
+        <div class="mod mod-fl">
+          <input type="checkbox" id="mod-fl">
+          <label for="mod-fl">Flashlight</label>
+        </div>
+        <div class="mod mod-ht">
+          <input type="checkbox" id="mod-ht">
+          <label for="mod-ht">HalfTime</label>
+        </div>
+        <div class="mod mod-hr">
+          <input type="checkbox" id="mod-hr">
+          <label for="mod-hr">HardRock</label>
+        </div>
+        <div class="mod mod-hd">
+          <input type="checkbox" id="mod-hd">
+          <label for="mod-hd">Hidden</label>
+        </div>
+        <div class="mod mod-nf">
+          <input type="checkbox" id="mod-nf">
+          <label for="mod-nf">NoFail</label>
+        </div>
+        <div class="mod mod-so">
+          <input type="checkbox" id="mod-so">
+          <label for="mod-so">SpunOut</label>
+        </div>
+      </div>
+      <input class="btn btn-success" type="submit" value="Give PP!">
+      <div class="clearfix"></div>
+    </form>
+
+    <pre class="output" id="output">Output will be displayed here.</pre>
+  </div>
+  <script src="assets/oppai.js"></script>
+</body>
+</html>