Create game menu is lookign good

This commit is contained in:
Alexander Bass 2022-06-23 15:27:36 -04:00
parent 78b205fd3f
commit 643c693496
6 changed files with 224 additions and 64 deletions

View file

@ -56,7 +56,10 @@
<h3>Game Settings</h3> <h3>Game Settings</h3>
<div class="row"> <div class="row">
<span>Percentage mines</span> <span>Percentage mines</span>
<input type="range" min="0" max="1000" value="50" class="slider"> <div class="sliderContainer">
<div class="sliderNumber" id="createGameOptionsMinePercentIndicator"></div>
<input type="range" id="createGameOptionsMinePercent" min="0" max="1000" value="50" class="slider">
</div>
</div> </div>
<div class="row"> <div class="row">
<span>Number of mines</span> <span>Number of mines</span>

View file

@ -0,0 +1,160 @@
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)
menuPicker.select(3)
})
widthBox.addEventListener("change", function(){
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.ceil((mineSlider.value/10) * (width*height) /100)
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 (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;
if (name == '' || mines == '' || width == '' || height == '' || status.get() == 'disconnected') return
const options = {
mines: mines,
width: width,
height: height
}
const data =
{
name: name,
options: options
}
console.log(data)
createGame(data)
}

View file

@ -1,10 +1,7 @@
import * as status from "../../net/status.js" import * as status from "../../net/status.js"
import {joinGame, createGame} from "/scripts/net/netcode.js" import {joinGame, createGame} from "/scripts/net/netcode.js"
import { changeScene } from "/scripts/interface/scene.js" import { changeScene } from "/scripts/interface/scene.js"
import * as picker from "./picker.js" import * as createMenu from "./create.js"
import {tileArray, menuArray} from "/scripts/display/tileRenderer.js"
function ID(id) { function ID(id) {
return document.getElementById(id) return document.getElementById(id)
@ -14,11 +11,11 @@ const joinType = ID("joinType")
const joinGameMenu = ID("joinGame") const joinGameMenu = ID("joinGame")
const createGameMenu = ID("createGame") const createGameMenu = ID("createGame")
ID("gotoCreate").addEventListener("click", e => { ID("gotoCreate").addEventListener("click", e => {
joinType.style.display = "none" joinType.style.display = "none"
createGameMenu.style.display = "" createGameMenu.style.display = ""
picker.create("createGameSelectColorBar", tileArray, [8, 16]) createMenu.init()
picker.create("createGameSelectModeBar", menuArray, [0,4], "wide")
}) })
ID("gotoJoin").addEventListener("click", e => { ID("gotoJoin").addEventListener("click", e => {
@ -39,30 +36,3 @@ function join(event) {
joinGame({room: roomCode, name: name}) joinGame({room: roomCode, name: name})
} }
ID("createRoomButton").addEventListener("click", e => {
create(e)
picker.destroy("createGameSelectColorBar")
});
function create(event) {
const name = ID("createGameUsername").value
const mines = ID("createGameOptionsMines").value
const width = ID("createGameOptionsWidth").value
const height = ID("createGameOptionsHeight").value
if (name == '' || mines == '' || width == '' || height == '' || status.get() == 'disconnected') return
const options = {
mines: mines,
width: width,
height: height
}
const data =
{
name: name,
options: options
}
console.log(data)
createGame(data)
}

View file

@ -1,36 +1,42 @@
function clickSelector(e, parentID) { export class Picker {
document.getElementById(parentID).querySelectorAll('.button').forEach(item => { constructor(parentID, spriteSheet, ranges, style, selected = null, clickEvent){
item.style =""; this.parentID = parentID
item.active ="false"; this.selected = selected;
}) this.buttons = []
event.target.style = "background: #4CAF50;" const buttonBar = document.getElementById(parentID);
event.target.active = "true"
} for(let i=0;i < ranges[1]-ranges[0];i++) {
let span = document.createElement('span')
export function getButton(parentID) {
document.getElementById(parentID).querySelectorAll('.button').forEach(item => {
if (item.active === "true") {
return item.no
}
})
}
export function create(parentID, spriteSheet, ranges, style = "") {
const buttonBar = document.getElementById(parentID);
for(let i=0;i < ranges[1]-ranges[0];i++) {
let span = document.createElement('span')
span.className = `button ${style}` span.className = `button ${style}`
const n = i + ranges[0] const n = i + ranges[0]
span.appendChild(spriteSheet[n]); span.appendChild(spriteSheet[n]);
buttonBar.appendChild(span); buttonBar.appendChild(span);
span.no = i; span.no = i;
span.addEventListener('click', e => { span.addEventListener('click', e => {
clickSelector(e, parentID); this.select(e.target.no);
if (clickEvent instanceof Function) {
clickEvent()
}
}); });
}; this.buttons.push(span)
}; };
if (typeof selected ==="number") {
this.select(selected)
}
}
select(number) {
const target = this.buttons[number]
this.selected = number
document.getElementById(this.parentID).querySelectorAll('.button').forEach(item => {
item.style ="";
item.active ="false";
})
target.style = "background: #4CAF50;"
target.active = "true"
}
}
export function destroy(parentID) { export function destroy(parentID) {
const buttonBar = document.getElementById(parentID); const buttonBar = document.getElementById(parentID);

View file

@ -1,3 +1,7 @@
export function randomNumber(min, max) { export function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min); return Math.floor(Math.random() * (max - min) + min);
} }
export function ID(id) {
return document.getElementById(id)
}

View file

@ -21,6 +21,7 @@ p, span, input, button, u {
font-size: 1.7em; font-size: 1.7em;
} }
hr { hr {
border-color: white; border-color: white;
/* height: 3px; */ /* height: 3px; */
@ -68,8 +69,24 @@ hr {
/* background: red; */ /* background: red; */
} }
.sliderNumber {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: black;
font-size: 1.7em;
pointer-events: none;
}
.sliderContainer {
display: flex;
align-items: center;
justify-content: center;
}
.slider { .slider {
display: inline-block;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
height: 55px; height: 55px;