{"ScriptPreparationCode":null,"TestCases":[{"Name":"DOM","Code":"class Line {\r\n\tconstructor(parent) {\r\n\t\tconst line = parent.appendChild(document.createElement(\u0022pre\u0022));\r\n\t\tlist.style.display = \u0022inline-block\u0022;\r\n line.style.margin = \u00220\u0022;\r\n\r\n\t\tthis.element = line;\r\n\t}\r\n\r\n\tget width() {\r\n\t\treturn this.element.offsetWidth;\r\n\t}\r\n\r\n\tget height() {\r\n\t\treturn this.element.offsetHeight;\r\n\t}\r\n\r\n\tget text() {\r\n\t\treturn this.element.textContent;\r\n\t}\r\n\r\n\tset text(value) {\r\n\t\tthis.element.textContent = value;\r\n\t}\r\n}\r\n\r\nclass Box {\r\n\tconstructor(container, characters) {\r\n\t\tthis.container = container;\r\n\t\tthis.characters = characters;\r\n\r\n\t\t// TODO: Update only needed parts of box, rather than replacing the entire shape.\r\n\t\twindow.addEventListener(\u0022resize\u0022, () =\u003E this.render());\r\n\t}\r\n\r\n\trender() {\r\n\t\tthis.container.innerHTML = \u0022\u0022;\r\n\t\tlet currentLine = new Line(this.container);\r\n\r\n\t\t// Top line of the box.\r\n\t\tcurrentLine.text \u002B= this.characters.corner;\r\n\t\twhile(currentLine.width \u003C this.container.scrollWidth) {\r\n\t\t\tcurrentLine.text \u002B= this.characters.horizontal;\r\n\t\t}\r\n\t\tcurrentLine.text = currentLine.text.slice(0, -1) \u002B this.characters.corner;\r\n\t\t\r\n\t\t// Middle portion of the box.\r\n\t\twhile(this.container.offsetHeight === this.container.scrollHeight) {\r\n\t\t\tcurrentLine = new Line(this.container);\r\n\t\t\t\r\n\t\t\tcurrentLine.text = this.characters.vertical;\r\n\t\t\twhile(currentLine.width \u003C this.container.scrollWidth) {\r\n\t\t\t\tcurrentLine.text \u002B= \u0022 \u0022;\r\n\t\t\t}\r\n\t\t\tcurrentLine.text = currentLine.text.slice(0, -1) \u002B this.characters.vertical;\r\n\t\t}\r\n\t\tthis.container.removeChild(this.container.lastChild);\r\n\t\t\r\n\t\t// Bottom line of the box.\r\n\t\tcurrentLine = new Line(this.container);\r\n\r\n\t\tcurrentLine.textContent = this.characters.corner;\r\n\t\twhile(currentLine.width \u003C this.container.scrollWidth) {\r\n\t\t\tcurrentLine.text \u002B= this.characters.horizontal;\r\n\t\t}\r\n\t\tcurrentLine.text = currentLine.text.slice(0, -1) \u002B this.characters.corner;\r\n\t}\r\n}\r\n\r\nconst test = new Box(document.getElementById(\u0022test\u0022), { vertical: \u0022|\u0022, horizontal: \u0022-\u0022, corner: \u0022\u002B\u0022 });\r\ntest.render();","IsDeferred":false},{"Name":"Canvas","Code":"const Ruler = {\r\n\tmeasureText(text, font) {\r\n\t\tconst canvas = Ruler.canvas || (Ruler.canvas = document.createElement(\u0022canvas\u0022));\r\n\t\tconst context = canvas.getContext(\u00222d\u0022);\r\n\t\tcontext.font = font;\r\n\t\treturn Math.ceil(context.measureText(text).width);\r\n\t}\r\n}\r\n\r\nclass Box {\r\n\tconstructor(container, characters) {\r\n\t\tthis.container = container;\r\n\t\tthis.characters = characters;\r\n\r\n\t\tthis.container.style.whiteSpace = \u0022pre\u0022;\r\n\r\n\t\t// TODO: Update only needed parts of box, rather than replacing the entire shape.\r\n\t\twindow.addEventListener(\u0022resize\u0022, () =\u003E this.render());\r\n\t}\r\n\r\n\tget width() {\r\n\t\treturn this.container.scrollWidth;\r\n\t}\r\n\r\n\tget height() {\r\n\t\treturn this.container.scrollHeight;\r\n\t}\r\n\r\n\tget text() {\r\n\t\treturn this.container.textContent;\r\n\t}\r\n\r\n\tset text(value) {\r\n\t\tthis.container.textContent = value;\r\n\t}\r\n\r\n\tget font() {\r\n\t\tconst containerStyle = window.getComputedStyle(this.container);\r\n\t\treturn \u0060${containerStyle.fontWeight} ${containerStyle.fontSize} ${containerStyle.fontFamily}\u0060;\r\n\t}\r\n\r\n\trender() {\r\n\t\tthis.text = \u0022\u0022;\r\n\r\n\t\tconst lines = [];\r\n\t\tlet currentLine = this.characters.corner;\r\n\t\t\r\n\t\t// First line.\r\n\t\twhile(Ruler.measureText(currentLine \u002B this.characters.corner \u002B \u0022\\r\\n\u0022, this.font) \u003C this.width) {\r\n\t\t\tcurrentLine \u002B= this.characters.horizontal;\r\n\t\t}\r\n\t\tlines.push(currentLine \u002B this.characters.corner \u002B \u0022\\r\\n\u0022);\r\n\r\n\t\t// Middle portion.\r\n\t\twhile(parseInt(window.getComputedStyle(this.container).fontSize) * (lines.length \u002B 2) \u003C this.height) {\r\n\t\t\tcurrentLine = this.characters.vertical;\r\n\r\n\t\t\twhile(Math.ceil(Ruler.measureText(currentLine \u002B this.characters.vertical \u002B \u0022\\r\\n\u0022, this.font)) \u003C this.width) {\r\n\t\t\t\tcurrentLine \u002B= \u0022 \u0022;\r\n\t\t\t}\r\n\t\t\tlines.push(currentLine \u002B this.characters.vertical \u002B \u0022\\r\\n\u0022);\r\n\t\t}\r\n\r\n\t\t// Last line.\r\n\t\tcurrentLine = this.characters.corner;\r\n\t\twhile(Ruler.measureText(currentLine \u002B this.characters.corner \u002B \u0022\\r\\n\u0022, this.font) \u003C this.width) {\r\n\t\t\tcurrentLine \u002B= this.characters.horizontal;\r\n\t\t}\r\n\t\tlines.push(currentLine \u002B this.characters.corner);\r\n\t\t\r\n\t\tthis.text = lines.join(\u0022\u0022);\r\n\t}\r\n}\r\n\r\nconst test = new Box(document.getElementById(\u0022test\u0022), { vertical: \u0022|\u0022, horizontal: \u0022-\u0022, corner: \u0022\u002B\u0022 });\r\ntest.render();","IsDeferred":false}]}