init

static/main.js

@@ -0,0 +1,208 @@
+const socket = io("/");
+
+const data = { is_host: false, cursors: {}, field: [], flags: 0, bombs: 0, text: "" }
+
+/** @returns {string} */
+function getNickname() {
+    return document.getElementById("nickname").value
+}
+/** @returns {string} */
+function getRoomId() {
+    return document.getElementById("room-id").value
+}
+/** @returns {string} */
+function getWidth() {
+    return document.getElementById("width").value
+}
+/** @returns {string} */
+function getHeight() {
+    return document.getElementById("height").value
+}
+/** @returns {string} */
+function getBombs() {
+    return document.getElementById("bombs").value
+}
+
+function create() {
+    data.is_host = true;
+    socket.emit("create-room", getNickname(), getWidth(), getHeight(), getBombs())
+}
+
+function join() {
+    data.is_host = false;
+    socket.emit("join-room", getNickname(), getRoomId())
+}
+
+function restart() {
+    socket.emit("restart")
+}
+
+/** 
+ * @argument {string} block 
+ */
+function show(block) {
+    document.querySelectorAll('[data-block]').forEach(x => x.style.display = 'none');
+    document.querySelectorAll('[data-block="' + block + '"]').forEach(x => x.style.display = '');
+}
+
+/** 
+ * @argument {string} msg
+ */
+function roomError(msg) {
+    alert(msg)
+}
+/** 
+ * @argument {string} roomId
+ */
+function roomJoin(roomId) {
+    // alert(`Вы подключились к комнате #${roomId}`)
+    localStorage.setItem("__saper_nickname", getNickname())
+    otherJoin(socket.id, getNickname() + (data.is_host ? " (Вы 👑)" : " (Вы)"), true)
+    chatMessage('service', "Вы подключены к комнате #" + roomId)
+    show('game')
+
+    startGame()
+}
+
+/**
+ * @param {"service" | "self" | "other"} type 
+ * @param {string} message 
+ */
+function chatMessage(type, message) {
+    const msg = document.createElement('div')
+    msg.classList.add('chat-' + type + '-msg')
+    msg.innerText = message
+    document.getElementById('chat').appendChild(msg)
+    msg.scrollIntoView({ 'behavior': 'smooth' })
+}
+/**
+ * 
+ * @param {string} sid 
+ * @param {string} nickname 
+ * @param {boolean} onlyList
+ */
+function otherJoin(sid, nickname, onlyList = false) {
+    if (!document.querySelector('[data-sid="' + sid + '"]')) {
+        const user = document.createElement('div');
+        user.classList.add('chat-service-msg')
+        user.innerText = nickname;
+        user.setAttribute('data-sid', sid)
+        document.getElementById('users').appendChild(user)
+    }
+
+    if (!onlyList) {
+        chatMessage('service', "К комнате подключился " + nickname)
+        socket.emit("about-me")
+    }
+}
+
+/**
+ * 
+ * @param {string} sid
+ */
+function otherDisconnect(sid, nickname) {
+    const user = document.querySelector('[data-sid="' + sid + '"]')
+    if (user)
+        user.remove();
+
+    chatMessage('service', "От комнаты отключился " + nickname)
+    if (data.cursors[sid])
+        delete data.cursors[sid];
+}
+
+function chat(nickname, msg) {
+    chatMessage("other", nickname + ": " + msg)
+}
+
+function cursor(sid, nickname, x, y) {
+    data.cursors[sid] = { x, y, nickname }
+}
+
+function updateField(field, flags, bombs, text) {
+    data.field = field
+    data.flags = flags
+    data.bombs = bombs
+    data.text = text
+}
+
+socket.on("room-error", roomError)
+socket.on("room-join", roomJoin)
+socket.on("other-join", otherJoin)
+socket.on("about-me", (sid, nickname) => otherJoin(sid, nickname, true))
+socket.on("other-disconnect", otherDisconnect)
+socket.on("chat", chat)
+socket.on("reload-page", () => window.location.reload())
+socket.on("cursor", cursor)
+socket.on('update-field', updateField)
+
+document.getElementById("nickname").value = localStorage.getItem("__saper_nickname") || ""
+
+const chatMsg = document.getElementById("chat-msg")
+
+const colors = {
+    bg: new ColorPicker('#color-bg'),
+    bg2: new ColorPicker('#color-bg-2'),
+    fg: new ColorPicker('#color-fg'),
+    bgChatService: new ColorPicker('#color-bg-chat-service'),
+    fgChatService: new ColorPicker('#color-fg-chat-service'),
+    bgChatSelf: new ColorPicker('#color-bg-chat-self'),
+    fgChatSelf: new ColorPicker('#color-fg-chat-self'),
+    bgChatOther: new ColorPicker('#color-bg-chat-other'),
+    fgChatOther: new ColorPicker('#color-fg-chat-other'),
+    bgCellOpen: new ColorPicker("#color-bg-cell-open"),
+    bgCellClosed: new ColorPicker("#color-bg-cell-closed"),
+    bgCellBomb: new ColorPicker("#color-bg-cell-bomb"),
+    fgCell1: new ColorPicker("#color-fg-cell-1"),
+    fgCell2: new ColorPicker("#color-fg-cell-2"),
+    fgCell3: new ColorPicker("#color-fg-cell-3"),
+    fgCell4: new ColorPicker("#color-fg-cell-4"),
+    fgCell5: new ColorPicker("#color-fg-cell-5"),
+    fgCell6: new ColorPicker("#color-fg-cell-6"),
+    fgCell7: new ColorPicker("#color-fg-cell-7"),
+    fgCell8: new ColorPicker("#color-fg-cell-8"),
+}
+
+/**
+ * 
+ * @param {keyof colors} color 
+ * @returns {string}
+ */
+function getColor(color) {
+    return colors[color].color.string('hex')
+}
+
+const root = document.querySelector('html')
+const computeStyles = window.getComputedStyle(root);
+for (const color_e of Object.values(colors)) {
+    const color_var = color_e.element.id.replace('color-', '--')
+    const color_key = "__saper_" + color_e.element.id
+    const color = localStorage.getItem(color_key) || computeStyles.getPropertyValue(color_var);
+    color_e.setColor(color)
+    const text = document.createElement('span')
+    text.innerText = color_var.replace('--', '')
+    color_e.element.appendChild(text)
+    root.style.setProperty(color_var, color)
+    color_e.on('pick', c => {
+        const color = c.string('hex')
+        console.log(color)
+        root.style.setProperty(color_var, color)
+        localStorage.setItem(color_key, color)
+
+    })
+}
+
+chatMsg.addEventListener("keyup", function (event) {
+    if (event.key === "Enter") {
+        const msg = chatMsg.value;
+        chatMsg.value = "";
+        socket.emit("chat", msg)
+        chatMessage("self", "Вы: " + msg)
+    }
+});
+
+
+document.getElementById("room-id").addEventListener("keyup", function (event) {
+    if (event.key === "Enter") {
+        join()
+    }
+});