diff --git a/www/game.html b/www/game.html
index 015f26f..a2e5ab0 100644
--- a/www/game.html
+++ b/www/game.html
@@ -56,7 +56,10 @@
Game Settings
Number of mines
diff --git a/www/scripts/interface/mainmenu/create.js b/www/scripts/interface/mainmenu/create.js
new file mode 100644
index 0000000..56b732c
--- /dev/null
+++ b/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)
+
+}
diff --git a/www/scripts/interface/mainmenu/menu.js b/www/scripts/interface/mainmenu/menu.js
index 3ca06f9..6df0252 100644
--- a/www/scripts/interface/mainmenu/menu.js
+++ b/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 {tileArray, menuArray} from "/scripts/display/tileRenderer.js"
-
-
+import * as createMenu from "./create.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])
-picker.create("createGameSelectModeBar", menuArray, [0,4], "wide")
+createMenu.init()
})
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)
-
-}
diff --git a/www/scripts/interface/mainmenu/picker.js b/www/scripts/interface/mainmenu/picker.js
index 203b96a..249b1a2 100644
--- a/www/scripts/interface/mainmenu/picker.js
+++ b/www/scripts/interface/mainmenu/picker.js
@@ -1,37 +1,43 @@
-function clickSelector(e, parentID) {
- document.getElementById(parentID).querySelectorAll('.button').forEach(item => {
- item.style ="";
- item.active ="false";
- })
- event.target.style = "background: #4CAF50;"
- event.target.active = "true"
+export class Picker {
+ constructor(parentID, spriteSheet, ranges, style, selected = null, clickEvent){
+ this.parentID = parentID
+ this.selected = selected;
+ this.buttons = []
+ 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;
-export function getButton(parentID) {
- document.getElementById(parentID).querySelectorAll('.button').forEach(item => {
- if (item.active === "true") {
- return item.no
+ span.addEventListener('click', e => {
+ 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 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);
- });
-};
-};
-
export function destroy(parentID) {
const buttonBar = document.getElementById(parentID);
while (buttonBar.lastChild) {
diff --git a/www/scripts/util.js b/www/scripts/util.js
index 5ddd7f2..815e1e8 100644
--- a/www/scripts/util.js
+++ b/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)
+}
diff --git a/www/style.css b/www/style.css
index 103e620..065d195 100644
--- a/www/style.css
+++ b/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;