Create game menu is lookign good

www/game.html

@@ -56,7 +56,10 @@
             <h3>Game Settings</h3>
               <div class="row">
               <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 class="row">
               <span>Number of mines</span>

www/scripts/interface/mainmenu/create.js

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

www/scripts/interface/mainmenu/menu.js

@@ -1,10 +1,7 @@
 import * as status from "../../net/status.js"
 import {joinGame, createGame} from "/scripts/net/netcode.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) {
 	return document.getElementById(id)
@@ -14,11 +11,11 @@ const joinType = ID("joinType")
 const joinGameMenu = ID("joinGame")
 const createGameMenu = ID("createGame")
 
+
 ID("gotoCreate").addEventListener("click", e => {
 joinType.style.display = "none"
 createGameMenu.style.display = ""
-picker.create("createGameSelectColorBar", tileArray, [8, 16])
+createMenu.init()
-picker.create("createGameSelectModeBar", menuArray, [0,4], "wide")
 })
 
 ID("gotoJoin").addEventListener("click", e => {
@@ -39,30 +36,3 @@ function join(event) {
 	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)
-
-}

www/scripts/interface/mainmenu/picker.js

@@ -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}`
 			const n = i + ranges[0]
 			span.appendChild(spriteSheet[n]);
 			buttonBar.appendChild(span);
 			span.no = i;
+
 			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) {
 	const buttonBar = document.getElementById(parentID);

www/scripts/util.js

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

www/style.css

@@ -21,6 +21,7 @@ p, span, input, button, u {
   font-size: 1.7em;
 }
 
+
 hr {
   border-color: white;
   /* height: 3px; */
@@ -68,8 +69,24 @@ hr {
   /* 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 {
-  display: inline-block;
   -webkit-appearance: none;
   appearance: none;
   height: 55px;