158 lines
3.4 KiB
JavaScript
158 lines
3.4 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 {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("change", function() {
|
|
updateCount(1)
|
|
menuPicker.select(3)
|
|
})
|
|
|
|
heightBox.addEventListener("change", function(){
|
|
updateCount(2)
|
|
widthBox.value = Math.abs(Math.round(heightBox.value))
|
|
menuPicker.select(3)
|
|
})
|
|
|
|
widthBox.addEventListener("change", function(){
|
|
updateCount(2)
|
|
widthBox.value = Math.abs(Math.round(widthBox.value))
|
|
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)
|
|
console.log(max, min)
|
|
if (mode === 0) {
|
|
mines = Math.round((mineSlider.value/10) * (width*height) /100)
|
|
console.log(mines, mineBox.value)
|
|
updateCount(2)
|
|
}
|
|
else if (mode === 1) {
|
|
mineBox.value = Math.abs(Math.round(mineBox.value))
|
|
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) {
|
|
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)
|
|
|
|
}
|