Fix line-endings; Increase portability; Add speedtyper.py
This commit is contained in:
olari
@@ -1,36 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>osu!mania playfield</title>
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<script src="../shared.js"></script>
|
||||
<script src="mania.js"></script>
|
||||
|
||||
|
||||
<canvas id="playfield" width="800" height="600" style="border: 1px solid #000000"></canvas>
|
||||
<br>
|
||||
|
||||
<label for="columnstart">Column start</label><br>
|
||||
<input type="range" id="columnstart" min="0" max="200" value="150">
|
||||
<output id="columnstart_out"></output><br>
|
||||
|
||||
<label for="columnwidth">Column width</label><br>
|
||||
<input type="range" id="columnwidth" min="16" max="70" value="40">
|
||||
<output id="columnwidth_out"></output><br>
|
||||
|
||||
<label for="hitposition">Hit position</label><br>
|
||||
<input type="range" id="hitposition" min="350" max="480" value="420">
|
||||
<output id="hitposition_out"></output><br>
|
||||
|
||||
<label for="scrollspeed">Scroll speed</label><br>
|
||||
<input type="range" id="scrollspeed" min="12" max="40" value="28">
|
||||
<output id="scrollspeed_out"></output><br>
|
||||
|
||||
<label for="noteratio">Note ratio</label><br>
|
||||
<input type="range" id="noteratio" min="0" max="1" value="0.5" step="0.1">
|
||||
<output id="noteratio_out"></output><br>
|
||||
|
||||
<label for="keycount">Key count</label><br>
|
||||
<input type="range" id="keycount" min="4" max="9" value="7">
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>osu!mania playfield</title>
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<script src="../shared.js"></script>
|
||||
<script src="mania.js"></script>
|
||||
|
||||
|
||||
<canvas id="playfield" width="800" height="600" style="border: 1px solid #000000"></canvas>
|
||||
<br>
|
||||
|
||||
<label for="columnstart">Column start</label><br>
|
||||
<input type="range" id="columnstart" min="0" max="200" value="150">
|
||||
<output id="columnstart_out"></output><br>
|
||||
|
||||
<label for="columnwidth">Column width</label><br>
|
||||
<input type="range" id="columnwidth" min="16" max="70" value="40">
|
||||
<output id="columnwidth_out"></output><br>
|
||||
|
||||
<label for="hitposition">Hit position</label><br>
|
||||
<input type="range" id="hitposition" min="350" max="480" value="420">
|
||||
<output id="hitposition_out"></output><br>
|
||||
|
||||
<label for="scrollspeed">Scroll speed</label><br>
|
||||
<input type="range" id="scrollspeed" min="12" max="40" value="28">
|
||||
<output id="scrollspeed_out"></output><br>
|
||||
|
||||
<label for="noteratio">Note ratio</label><br>
|
||||
<input type="range" id="noteratio" min="0" max="1" value="0.5" step="0.1">
|
||||
<output id="noteratio_out"></output><br>
|
||||
|
||||
<label for="keycount">Key count</label><br>
|
||||
<input type="range" id="keycount" min="4" max="9" value="7">
|
||||
<output id="keycount_out"></output><br>
|
||||
@@ -1,112 +1,112 @@
|
||||
var canvas;
|
||||
var ctx;
|
||||
|
||||
/* Base resolution in osu! skins used for scaling */
|
||||
const internal_width = 640;
|
||||
const internal_height = 480;
|
||||
|
||||
/* Updates per second */
|
||||
const framerate = 60;
|
||||
|
||||
/* Colors for playfield */
|
||||
const colors = {
|
||||
playfield: "#000",
|
||||
lane_separator: "#222",
|
||||
hitposition: "#AA0",
|
||||
note: "#FFF"
|
||||
};
|
||||
|
||||
/* Values retrieved from DOM */
|
||||
var options = {
|
||||
columnstart: 0,
|
||||
columnwidth: 0,
|
||||
hitposition: 0,
|
||||
scrollspeed: 0,
|
||||
noteratio: 0,
|
||||
keycount: 0
|
||||
}
|
||||
|
||||
/* Clears the canvas */
|
||||
function clear() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
/* Draws a rectangle */
|
||||
function rect(x, y, w, h, color) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x, y, w, h);
|
||||
}
|
||||
|
||||
/* Draws a string */
|
||||
function text(string, x, y, color) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(string, x, y);
|
||||
}
|
||||
|
||||
/* Translates osu! coordinates to screen coordinates */
|
||||
function translate_pos(x, y) {
|
||||
return {
|
||||
x: Math.floor(x / internal_width * canvas.width),
|
||||
y: Math.floor(y / internal_height * canvas.height)
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
clear()
|
||||
|
||||
const columnstart = translate_pos(options.columnstart, 0);
|
||||
const columnwidth = translate_pos(options.columnwidth, 0);
|
||||
const hitposition = translate_pos(options.columnstart, options.hitposition);
|
||||
|
||||
const playfield_width = columnwidth.x * options.keycount;
|
||||
const note_height = columnwidth.x * options.noteratio;
|
||||
|
||||
// playfield background
|
||||
rect(columnstart.x, 0, playfield_width, canvas.height, colors.playfield);
|
||||
|
||||
// lane separators
|
||||
for (var i = 0; i <= options.keycount; i++) {
|
||||
rect(columnstart.x + i * columnwidth.x, 0, 1, canvas.height, colors.lane_separator);
|
||||
}
|
||||
|
||||
// hitpos
|
||||
rect(hitposition.x, hitposition.y, playfield_width, 5, colors.hitposition);
|
||||
|
||||
// notes
|
||||
let y_pos = hitposition.y - note_height;
|
||||
while (y_pos > 0) {
|
||||
for (let i = 0; i < options.keycount; ++i) {
|
||||
rect (
|
||||
columnstart.x + i * columnwidth.x,
|
||||
y_pos,
|
||||
columnwidth.x, note_height, colors.note
|
||||
);
|
||||
|
||||
// completely inaccurate but i cba to simulate the whole playfield
|
||||
y_pos -= options.scrollspeed * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
create_prologue();
|
||||
|
||||
canvas = document.getElementById("playfield");
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
ctx.font = "15px Arial";
|
||||
ctx.textBaseline = "hanging";
|
||||
|
||||
for (let input of document.getElementsByTagName("input")) {
|
||||
input.onchange = function () {
|
||||
options[this.id] = this.value;
|
||||
document.getElementById(this.id + "_out").innerText = this.value;
|
||||
};
|
||||
|
||||
input.onchange();
|
||||
}
|
||||
|
||||
setInterval(function () {
|
||||
draw();
|
||||
}, 1000 / framerate);
|
||||
};
|
||||
var canvas;
|
||||
var ctx;
|
||||
|
||||
/* Base resolution in osu! skins used for scaling */
|
||||
const internal_width = 640;
|
||||
const internal_height = 480;
|
||||
|
||||
/* Updates per second */
|
||||
const framerate = 60;
|
||||
|
||||
/* Colors for playfield */
|
||||
const colors = {
|
||||
playfield: "#000",
|
||||
lane_separator: "#222",
|
||||
hitposition: "#AA0",
|
||||
note: "#FFF"
|
||||
};
|
||||
|
||||
/* Values retrieved from DOM */
|
||||
var options = {
|
||||
columnstart: 0,
|
||||
columnwidth: 0,
|
||||
hitposition: 0,
|
||||
scrollspeed: 0,
|
||||
noteratio: 0,
|
||||
keycount: 0
|
||||
}
|
||||
|
||||
/* Clears the canvas */
|
||||
function clear() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
/* Draws a rectangle */
|
||||
function rect(x, y, w, h, color) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x, y, w, h);
|
||||
}
|
||||
|
||||
/* Draws a string */
|
||||
function text(string, x, y, color) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(string, x, y);
|
||||
}
|
||||
|
||||
/* Translates osu! coordinates to screen coordinates */
|
||||
function translate_pos(x, y) {
|
||||
return {
|
||||
x: Math.floor(x / internal_width * canvas.width),
|
||||
y: Math.floor(y / internal_height * canvas.height)
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
clear()
|
||||
|
||||
const columnstart = translate_pos(options.columnstart, 0);
|
||||
const columnwidth = translate_pos(options.columnwidth, 0);
|
||||
const hitposition = translate_pos(options.columnstart, options.hitposition);
|
||||
|
||||
const playfield_width = columnwidth.x * options.keycount;
|
||||
const note_height = columnwidth.x * options.noteratio;
|
||||
|
||||
// playfield background
|
||||
rect(columnstart.x, 0, playfield_width, canvas.height, colors.playfield);
|
||||
|
||||
// lane separators
|
||||
for (var i = 0; i <= options.keycount; i++) {
|
||||
rect(columnstart.x + i * columnwidth.x, 0, 1, canvas.height, colors.lane_separator);
|
||||
}
|
||||
|
||||
// hitpos
|
||||
rect(hitposition.x, hitposition.y, playfield_width, 5, colors.hitposition);
|
||||
|
||||
// notes
|
||||
let y_pos = hitposition.y - note_height;
|
||||
while (y_pos > 0) {
|
||||
for (let i = 0; i < options.keycount; ++i) {
|
||||
rect (
|
||||
columnstart.x + i * columnwidth.x,
|
||||
y_pos,
|
||||
columnwidth.x, note_height, colors.note
|
||||
);
|
||||
|
||||
// completely inaccurate but i cba to simulate the whole playfield
|
||||
y_pos -= options.scrollspeed * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
create_prologue();
|
||||
|
||||
canvas = document.getElementById("playfield");
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
ctx.font = "15px Arial";
|
||||
ctx.textBaseline = "hanging";
|
||||
|
||||
for (let input of document.getElementsByTagName("input")) {
|
||||
input.onchange = function () {
|
||||
options[this.id] = this.value;
|
||||
document.getElementById(this.id + "_out").innerText = this.value;
|
||||
};
|
||||
|
||||
input.onchange();
|
||||
}
|
||||
|
||||
setInterval(function () {
|
||||
draw();
|
||||
}, 1000 / framerate);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user