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) }