163 lines
3.5 KiB
JavaScript
163 lines
3.5 KiB
JavaScript
import * as net from "../../net/netcode.js"
|
|
import {Picker} from "./picker.js"
|
|
import {tileArray, menuArray} from "../../display/tileRenderer.js"
|
|
import * as util from "../../util.js"
|
|
import {ID} from "../../util.js"
|
|
import * as status from "../../net/status.js"
|
|
|
|
var menuPicker, colorPicker;
|
|
|
|
export function init(){
|
|
colorPicker = new Picker("createGameSelectColorBar", tileArray, [8, 16], null, 0, null)
|
|
menuPicker = new Picker ("createGameSelectModeBar", menuArray, [0,4], "wide", 0, updateMenu)
|
|
changeMode()
|
|
}
|
|
|
|
ID("createRoomButton").addEventListener("click", e => {
|
|
createGameClick(e)
|
|
});
|
|
|
|
const mineSlider = ID("createGameOptionsMinePercent")
|
|
const mineBox = ID("createGameOptionsMines")
|
|
const mineSliderNumber = ID("createGameOptionsMinePercentIndicator")
|
|
const widthBox = ID("createGameOptionsWidth")
|
|
const heightBox = ID("createGameOptionsHeight")
|
|
|
|
|
|
mineSlider.oninput = function() {
|
|
updateCount(0)
|
|
menuPicker.select(3)
|
|
}
|
|
|
|
mineBox.addEventListener("input", function() {
|
|
mineBox.value = Math.abs(Math.round(mineBox.value.replace(/\D/g,'')))
|
|
})
|
|
|
|
mineBox.addEventListener("change", function() {
|
|
updateCount(1)
|
|
menuPicker.select(3)
|
|
})
|
|
|
|
heightBox.addEventListener("input", function(){
|
|
heightBox.value = Math.abs(Math.round(heightBox.value.replace(/\D/g,'')));
|
|
updateCount(2)
|
|
|
|
})
|
|
|
|
heightBox.addEventListener("change", function(){
|
|
heightBox.value = util.clamp(heightBox.value, 8, 500)
|
|
updateCount(2)
|
|
menuPicker.select(3)
|
|
})
|
|
|
|
widthBox.addEventListener("input", function(){
|
|
widthBox.value = Math.abs(Math.round(widthBox.value.replace(/\D/g,'')))
|
|
updateCount(2)
|
|
|
|
})
|
|
|
|
widthBox.addEventListener("change", function(){
|
|
widthBox.value = util.clamp(widthBox.value, 8, 500)
|
|
updateCount(2)
|
|
menuPicker.select(3)
|
|
})
|
|
|
|
|
|
|
|
|
|
var mines = 5;
|
|
var mode = 0;
|
|
|
|
function updateMenu(){
|
|
mode = menuPicker.selected
|
|
changeMode(menuPicker.selected)
|
|
}
|
|
|
|
function changeMode() {
|
|
var width = widthBox.value;
|
|
var height = heightBox.value;
|
|
switch (mode) {
|
|
case 0:
|
|
width = 9;
|
|
height = 9;
|
|
mines = 10;
|
|
break;
|
|
case 1:
|
|
width = 16;
|
|
height = 16;
|
|
mines = 40
|
|
break;
|
|
case 2:
|
|
width = 30
|
|
height = 16
|
|
mines = 99;
|
|
break;
|
|
}
|
|
widthBox.value = width;
|
|
heightBox.value = height;
|
|
updateCount(2)
|
|
}
|
|
|
|
|
|
function updateCount(mode) {
|
|
let percentage;
|
|
const width = widthBox.value
|
|
const height = heightBox.value
|
|
|
|
const max = maxMines(width, height)
|
|
const min = minMines(width, height)
|
|
|
|
if (mode === 0) {
|
|
mines = Math.round((mineSlider.value/10) * (width*height) /100)
|
|
|
|
updateCount(2)
|
|
}
|
|
else if (mode === 1) {
|
|
mines = mineBox.value;
|
|
|
|
updateCount(2)
|
|
}
|
|
|
|
else if (mode === 2) {
|
|
if (mines > max) {
|
|
mines = max
|
|
}
|
|
if (mines < min) {
|
|
mines = min
|
|
}
|
|
percentage = Math.floor((mines / (width * height)) * 1000)/ 10
|
|
mineBox.value = mines;
|
|
mineSlider.value = percentage * 10
|
|
updatePercentageLabel(percentage)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function maxMines(width, height) {
|
|
return width * height - 10
|
|
}
|
|
|
|
function minMines(width, height) {
|
|
return Math.floor((width * height) / 10)
|
|
}
|
|
|
|
function updatePercentageLabel(percentage) {
|
|
if (percentage !== percentage) {percentage = 0}
|
|
mineSliderNumber.textContent = `${percentage}%`
|
|
}
|
|
|
|
|
|
function createGameClick(event) {
|
|
const name = ID("createGameUsername").value
|
|
const width = Number(widthBox.value);
|
|
const height = Number(heightBox.value);
|
|
const color = Number(colorPicker.selected + 1);
|
|
if (name == '' || mines == '' || width == '' || height == '' || status.get() == 'disconnected') return
|
|
const options = { mines: mines, width: width, height: height};
|
|
const data = {name: name, color: color, options: options};
|
|
net.createGame(data)
|
|
|
|
}
|