MultiplayerMinesweeper/client/scripts/interface/mainmenu/create.js

164 lines
3.6 KiB
JavaScript
Raw Normal View History

import * as net from "../../net/netcode.js"
import { changeScene } from "../scene.js"
2022-06-23 19:27:36 +00:00
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"
2022-06-23 19:27:36 +00:00
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)
2022-06-23 19:27:36 +00:00
});
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() {
2022-06-24 12:24:01 +00:00
mineBox.value = Math.abs(Math.round(mineBox.value.replace(/\D/g,'')))
})
mineBox.addEventListener("change", function() {
2022-06-23 19:27:36 +00:00
updateCount(1)
menuPicker.select(3)
})
heightBox.addEventListener("input", function(){
heightBox.value = Math.abs(Math.round(heightBox.value.replace(/\D/g,'')));
2022-06-23 19:27:36 +00:00
updateCount(2)
2022-06-23 19:27:36 +00:00
})
heightBox.addEventListener("change", function(){
heightBox.value = util.clamp(heightBox.value, 8, 500)
2022-06-24 12:24:01 +00:00
updateCount(2)
menuPicker.select(3)
})
widthBox.addEventListener("input", function(){
2022-06-24 12:24:01 +00:00
widthBox.value = Math.abs(Math.round(widthBox.value.replace(/\D/g,'')))
2022-06-23 19:27:36 +00:00
updateCount(2)
2022-06-23 19:27:36 +00:00
})
widthBox.addEventListener("change", function(){
widthBox.value = util.clamp(widthBox.value, 8, 500)
2022-06-24 12:24:01 +00:00
updateCount(2)
menuPicker.select(3)
})
2022-06-23 20:18:23 +00:00
2022-06-23 19:27:36 +00:00
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)
2022-06-23 19:27:36 +00:00
if (mode === 0) {
2022-06-23 20:18:23 +00:00
mines = Math.round((mineSlider.value/10) * (width*height) /100)
2022-06-24 12:24:01 +00:00
2022-06-23 19:27:36 +00:00
updateCount(2)
}
2022-06-23 20:18:23 +00:00
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
2022-06-24 12:24:01 +00:00
mineBox.value = mines;
2022-06-23 20:18:23 +00:00
mineSlider.value = percentage * 10
updatePercentageLabel(percentage)
}
2022-06-23 19:27:36 +00:00
}
function maxMines(width, height) {
return width * height - 10
}
function minMines(width, height) {
2022-06-23 20:18:23 +00:00
return Math.floor((width * height) / 10)
2022-06-23 19:27:36 +00:00
}
function updatePercentageLabel(percentage) {
2022-06-24 12:24:01 +00:00
if (percentage !== percentage) {percentage = 0}
2022-06-23 19:27:36 +00:00
mineSliderNumber.textContent = `${percentage}%`
}
function createGameClick(event) {
2022-06-23 19:27:36 +00:00
const name = ID("createGameUsername").value
const width = Number(widthBox.value);
const height = Number(heightBox.value);
2022-06-24 19:25:38 +00:00
const color = Number(colorPicker.selected + 1);
2022-06-23 19:27:36 +00:00
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)
2022-06-23 19:27:36 +00:00
}