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

176 lines
3.7 KiB
JavaScript

import {joinGame, createGame} from "/scripts/net/netcode.js"
import { changeScene } from "/scripts/interface/scene.js"
import {Picker} from "./picker.js"
import {tileArray, menuArray} from "/scripts/display/tileRenderer.js"
import * as util from "/scripts/util.js"
import {ID} from "/scripts/util.js"
import * as status from "/scripts/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 => {
create(e)
// picker.destroy("createGameSelectColorBar")
});
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 create(event) {
const name = ID("createGameUsername").value
const mines = ID("createGameOptionsMines").value
const width = widthBox.value;
const height = heightBox.value;
const color = colorPicker.selected
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
}
console.log(data)
createGame(data)
}