CodeBattle Show

codebattle-show.js

(function() {
  'use strict'

  const css = document.createElement('style')
  css.textContent = `
    .navbar,
    .fixed-bottom,
    #tasklang-dropdown-toggle {
      display: none;
    }

    .navbar-brand {
      padding-top: 2rem;
    }

    .navbar-brand img {
      padding-right: 0.5rem;
    }

    .cb-game {
      height: 100%;
    }

    div[class ^= 'styles__SlackFeedback'] {
      display: none;
    }

    div[aria-label="User info"] {
      display: none;
    }

    .cb-game .cb-height-info:nth-child(1) {
    }

    div[data-guide-id="Task"] .flex-column:nth-child(2) .card-text {
      columns: 2;
    }

    div[data-guide-id="Task"] .flex-column:nth-child(3),
    div[data-guide-id="Task"] .flex-column:nth-child(4) {
      display: none !important;
    }

    .cb-game .cb-height-info:nth-child(1) nav {
      display: none;
    }

    .cb-game .cb-height-info:nth-child(2) .d-flex .col-12:nth-child(1) {
      display: none;
    }

    div[data-editor-state] nav {
      display: none;
    }

    button[title="Show guide"] {
      display: none;
    }

    .game-chat-container {
      display: none !important;
    }

    .game-control-container {
      min-width: auto;
    }
  `
  document.body.appendChild(css)

  let readyTimer, ready = false
  document.querySelector('#game-widget-root').addEventListener('DOMNodeInserted', () => {
    clearTimeout(readyTimer)
    ready || (readyTimer = setTimeout(() => {
      ready = true

      const p = document.evaluate('//div[p[contains(., "Online users")]]', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null)
      for(let i = 0; i < p.snapshotLength; i++) p.snapshotItem(i).style.display = 'none'

      document.querySelectorAll('.col-lg-6').forEach((d, i) => d.classList.replace('col-lg-6', `col-lg-${[10, 2][i] || 6}`))

      const task = document.querySelector('div[data-guide-id="Task"] .flex-column:nth-child(2) .card-text')
      ;[...document.querySelector('div[data-guide-id="Task"] .flex-column:nth-child(3)').childNodes].forEach(n => task.appendChild(n))
      task.appendChild(document.querySelector('.navbar-brand'))
    }, 200))
  })
})()

codebattle-show.user.js

// ==UserScript==
// @name         Codebattle as a Show
// @namespace    https://codebattle.hexlet.io
// @version      0.1
// @description  Interface tweaks for showing CodeBattle on big screen
// @author       [email protected]
// @match        https://codebattle.hexlet.io/games/*
// @icon         https://codebattle.hexlet.io/assets/images/logo.svg
// @require      https://gist.githubusercontent.com/veged/e52542381c6636410928829b67498cd2/raw/codebattle-show.js
// @grant        none
// ==/UserScript==