public static void Main() { var canvasSize = new IntSize(400, 800); var div = new HTMLDivElement(); div.style.width = $"{canvasSize.Width}px"; div.style.height = $"{canvasSize.Height}px"; document.body.appendChild(div); var button = new HTMLButtonElement(); button.innerHTML = "Click on game area to start it!"; button.style.width = "100%"; button.style.height = "100%"; button.style.backgroundColor = "#6495ED"; button.style.color = "#ffffff"; button.style.fontSize = "20px"; div.appendChild(button); button.onclick = (ev) => { div.removeChild(button); var canvas = new HTMLCanvasElement(); canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.id = "monogamecanvas"; div.appendChild(canvas); game = new TheGame(canvasSize, Platform.Desktop); game.Run(); }; }
static void Main() { var div = new HTMLDivElement(); div.style.width = "800px"; div.style.height = "480px"; document.body.appendChild(div); var button = new HTMLButtonElement(); button.innerHTML = "Click on game area to start it!"; button.style.width = "100%"; button.style.height = "100%"; button.style.backgroundColor = "#000000"; button.style.color = "#ffffff"; button.style.fontSize = "20px"; div.appendChild(button); button.onclick = (ev) => { div.removeChild(button); var canvas = new HTMLCanvasElement(); canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.id = "monogamecanvas"; div.appendChild(canvas); game = new GameProject.Game1(); game.Run(); }; }
public static void Main() { document.body.setAttribute("style", "margin: 0; overflow: hidden;"); var div = new HTMLDivElement(); div.setAttribute("style", "width: 960px; height: 540px;"); var button = new HTMLButtonElement(); button.innerHTML = "Run Game"; button.setAttribute("style", "width: 100%; height: 100%; background-color: rgb(100, 149, 237); color: rgb(255, 255, 255); font-size: 20px; border: 0;"); document.body.appendChild(div); div.appendChild(button); button.onclick = (ev) => { var canvas = new HTMLCanvasElement(); canvas.width = 960; canvas.height = 540; canvas.id = "monogamecanvas"; div.removeChild(button); div.appendChild(canvas); _game = new Game1(); _game.Run(); canvas.focus(); }; }
public HTMLElement Render() { if (_grid is object) { _container.appendChild(_grid.Render()); } else { _container.appendChild(_stack.Render()); } return(_container); }
public static void Main() { var divdata = new HTMLDivElement(); divdata.innerHTML = "This is an example web game that uses MonoGame, it just uses a prototype that @Jjagg and me made in like 3h for a gamejam, and than didn't have the time to finish it...<br><br>Once in game press space to spawn enemies.<br><br>Green screen means that the game is loading, I didn't want to bother implementing a custom loading screen.<br><br>"; document.body.appendChild(divdata); var button = new HTMLButtonElement(); button.innerHTML = "Run Game"; divdata.appendChild(button); var brelem = new HTMLBRElement(); document.body.appendChild(brelem); var canvas = new HTMLCanvasElement(); canvas.width = 1024; canvas.height = 576; canvas.id = "monogamecanvas"; document.body.appendChild(canvas); button.onclick = (ev) => { game = new Game1(); game.Run(); document.body.removeChild(divdata); document.body.removeChild(brelem); }; }
public VirtualizedList WithListItems(IEnumerable <IComponent> listItems) { if (listItems == null) { throw new ArgumentNullException(nameof(listItems)); } _listPageCache.AddComponents(listItems); if (_listPageCache.HasComponents && !_initialPagesCreated) { CreatePagesDownwards(GetInitialPages()); AttachOnLastComponentMountedEvent(); AttachBasicListContainerOnScrollEvent(); _initialPagesCreated = true; } else if (_emptyListMessageGenerator != null) { _basicListContainer.appendChild(_emptyListMessageGenerator().Render()); } return(this); }
public void InternalLog(string source, ConsoleLogType logType = ConsoleLogType.Log) { var para = new HTMLParagraphElement() { className = "console-para" }; switch (logType) { case ConsoleLogType.Debug: para.style.color = Color.ForestGreen; break; case ConsoleLogType.Error: para.style.color = Color.Red; break; } para.innerHTML = source; logContent.appendChild(para); if (logContent.children.length > 1000) { logContent.removeChild(logContent.children[0]); } para.scrollIntoView(false); }
private void Fire() { _toastContainer = Div(_("tss-toast-container")); _contentHtml = Div(_($"tss-toast tss-toast-{_type.ToString().ToLower()} tss-toast-{_position.ToString().ToLower()}"), _toastContainer); if (_title is object) { _toastContainer.appendChild(Div(_("tss-toast-title"), _title.Render())); } if (_message is object) { _toastContainer.appendChild(Div(_("tss-toast-message"), _message.Render())); } _toastContainer.onmouseenter = (e) => { ClearTimeout(); }; _toastContainer.onclick = (e) => { ClearTimeout(); RemoveAndHide(); }; _toastContainer.onmouseleave = (e) => { ResetTimeout(); }; if (!OpenToasts.TryGetValue(_simplePosition, out var list)) { list = new List <Toast>(); OpenToasts[_simplePosition] = list; } list.Add(this); RefreshPositioning(); Show(); ResetTimeout(); }
private static HTMLElement GetMessage(string text, string hrefIfTextShouldLink, bool isSuccess, string additionalInfo = null) { var wrapper = new HTMLDivElement(); wrapper.style.color = "white"; wrapper.style.backgroundColor = isSuccess ? "#0a0" : "#c00"; wrapper.style.border = "1px solid " + (isSuccess ? "#080" : "#900"); wrapper.style.borderRadius = "0.25rem"; wrapper.style.padding = "0.5rem 1rem"; wrapper.style.marginBottom = "0.5rem"; var messageContainer = new HTMLDivElement(); wrapper.appendChild(messageContainer); HTMLElement message; if (string.IsNullOrWhiteSpace(hrefIfTextShouldLink)) { message = new HTMLSpanElement(); } else { message = new HTMLAnchorElement { href = hrefIfTextShouldLink }; message.style.color = wrapper.style.color; message.style.textDecoration = "none"; } message.innerText = text; messageContainer.appendChild(message); if (!string.IsNullOrWhiteSpace(additionalInfo)) { var additionalMessage = new HTMLDivElement { innerText = additionalInfo }; additionalMessage.style.fontSize = "0.8rem"; wrapper.appendChild(additionalMessage); } return(wrapper); }
public void SetupNavButtons(params HTMLButtonElement[] buttons) { for (int i = 0; i < buttons.Length; i++) { var button = buttons[i]; button.className = "nav-button"; button.style.left = (i * 25) + "%"; button.tabIndex = -1; NavigationBar.appendChild(button); } }
/// <summary> /// Original sources: http://jsfiddle.net/wout/7wL1uv8n/?utm_source=website&utm_medium=embed&utm_campaign=7wL1uv8n /// </summary> private static void RenderAnimation() { if (_rootDiv != null) { _content.removeChild(_rootDiv); } // Create Input for text: var input = new HTMLInputElement { type = "text", value = "Retyped.svg.js -- - ->", placeholder = "Type text here..." }; // Create Div for SVG elements: var svgDiv = new HTMLDivElement(); var draw = svgjs2.Self(svgDiv).viewbox(0, 0, 300, 140); var text = draw.text(add => { add.tspan(input.value); }); text .path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80") .animate(1000, "<>") .plot("M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80") .loop(null, true); input.addEventListener("keyup", () => text.tspan(input.value)); // Add root Div to the Document _rootDiv = new HTMLDivElement(); _rootDiv.appendChild(input); _rootDiv.appendChild(svgDiv); _content.appendChild(_rootDiv); }
void addLoadingIcon(IHTMLDOMNode div) { HTMLDivElement loadingIconDivOuter = (HTMLDivElement)document.createElement("div"); loadingIconDivOuter.className = "libron_loading_icon_div_outer"; loadingIconDivOuter.style.cssText = "padding:7px;border:1px solid #cbc6bd;background:#e8e4db;-moz-border-radius:5px;-webkit-border-radius:5px;font-size:12px;"; HTMLDivElement loadingIconDiv = (HTMLDivElement)document.createElement("div"); loadingIconDiv.className = "libron_loading_icon_div"; loadingIconDiv.innerHTML = "<span style='color:#666;'>図書館を検索中</span> <image style='vertical-align:middle;' src='" + loadingIcon + "'><br /><br /><br />"; loadingIconDivOuter.appendChild((IHTMLDOMNode)loadingIconDiv); div.appendChild((IHTMLDOMNode)loadingIconDivOuter); }
private void RenderItem(TodoItem item) { var itemDiv = new HTMLDivElement(); // Create a CheckBox var checkBox = new HTMLInputElement { type = "checkbox", style = { margin = "10px" } }; checkBox.addEventListener("click", e => { // Set the item as Completed: item.Completed = checkBox.@checked; }); var button = new HTMLButtonElement { innerHTML = "del", onclick = e => { // Remove the item and the controls: _todoDiv.removeChild(itemDiv); _todos.remove(item); return(null); } }; itemDiv.appendChild(button); itemDiv.appendChild(checkBox); itemDiv.appendChild(new HTMLLabelElement { innerHTML = item.Task }); itemDiv.appendChild(new HTMLBRElement()); _todoDiv.appendChild(itemDiv); }
public void AttachElement(HTMLElement element) { if (AssignedElement != null) { Container.removeChild(AssignedElement); } AssignedElement = element; AssignedElement.style.position = "absolute"; AssignedElement.style.boxSizing = "border-box"; ControlSettings = new ControlSettings(); Container.appendChild(AssignedElement); }
/// <summary> /// Original sources: http://jsfiddle.net/wout/ncb3w5Lv/1/?utm_source=website&utm_medium=embed&utm_campaign=ncb3w5Lv /// </summary> private static void RenderPongGame() { if (_rootDiv != null) { _content.removeChild(_rootDiv); } // Create Div for SVG elements: var svgDiv = new HTMLDivElement(); new PongGame().Render(svgDiv); // Add Label: var label = new HTMLLabelElement(); label.innerHTML = "You are Red. Hit SPACE to start. Use ARROWS to control the pad."; // Add root Div to the Document _rootDiv = new HTMLDivElement(); _rootDiv.appendChild(svgDiv); _rootDiv.appendChild(label); _content.appendChild(_rootDiv); }
static void Run() // HTML body.onload event entry point, see index.html { rnd = new Random(); canvas_div.appendChild(canvas); canvas.width = 640; canvas.height = 480; canvas_div.style.width = document.body.clientWidth.ToString(); canvas.style.marginLeft = "25%"; //canvas_div.style.display = "flex"; //canvas_div.style.justifyContent = "center"; //canvas_div.style.alignItems = "center"; canvas.style.backgroundColor = "#9E9E9E"; document.body.appendChild(canvas_div); Draw(30, 30); GameLoop(); }
private void Render(HTMLElement root) { // Create HTML elements: var headerDiv = new HTMLDivElement(); _todoDiv = new HTMLDivElement(); root.appendChild(headerDiv); root.appendChild(_todoDiv); // Header (to do item creation): var input = new HTMLInputElement(); var addButton = new HTMLButtonElement { innerHTML = "Add", className = "btn btn-primary", style = { margin = "10px" }, disabled = true }; input.onkeyup = e => { if (e?.keyCode == 13) { addButton.click(); } else { addButton.disabled = string.IsNullOrEmpty(input.value); } return(null); }; addButton.onclick = e => { AddTodoItem(input.value); input.value = string.Empty; input.onkeyup(null); return(null); }; _progressLabel = new HTMLLabelElement(); headerDiv.appendChild(input); headerDiv.appendChild(addButton); headerDiv.appendChild(new HTMLBRElement()); headerDiv.appendChild(_progressLabel); headerDiv.appendChild(new HTMLBRElement()); headerDiv.appendChild(new HTMLBRElement()); }
public Game(HTMLElement element) { _element = element; window.document.title = Name; wrapper = (HTMLDivElement)window.document.createElement("DIV"); wrapper.className = "vtjGame"; element.appendChild(wrapper); canvas = (HTMLCanvasElement)window.document.createElement("CANVAS"); wrapper.appendChild(canvas); var toolbar = window.document.createElement("DIV"); toolbar.className = "vtjToolbar"; element.appendChild(toolbar); var title = (HTMLSpanElement)window.document.createElement("SPAN"); title.innerHTML = Name; toolbar.appendChild(title); if (window.localStorage != null) { var s = (GameSettings)window.JSON.parse(window.localStorage.getItem("GameSettings")); if (s != null) settings = s; } if (!(dynamic)settings) settings = new GameSettings(); window.addEventListener("resize", (e) => { refresh(); }, false); var m = buildMenus(); if ((dynamic)m && (dynamic)m.length) { foreach (var menu in m) { menu.Render(toolbar); menu.changed += menuChanged; } } refresh(); }
private static (HTMLElement SummaryContentToDisplay, Action <string> SetStatus, Action <int> SetSuccessCount, Action <int> SetFailureCount, Action <int> SetSkippedCount) GetRunningSummary(int numberOfTests, bool showSkippedCount) { var runningSummary = new HTMLDivElement(); runningSummary.style.lineHeight = "1.4"; runningSummary.style.margin = "0.5rem"; var status = new HTMLDivElement { innerText = "Running.." }; status.style.fontWeight = "bold"; runningSummary.appendChild(status); var(successProgress, setSuccessCount) = GetProgressLine("Successes"); runningSummary.appendChild(successProgress); var(failureProgress, setFailureCount) = GetProgressLine("Failures"); runningSummary.appendChild(failureProgress); var(skippedProgress, setSkippedCount) = GetProgressLine("Skipped"); if (showSkippedCount) { runningSummary.appendChild(skippedProgress); } return( runningSummary, statusText => status.innerText = statusText, setSuccessCount, setFailureCount, setSkippedCount ); (HTMLElement Line, Action <int> SetValue) GetProgressLine(string text) { var progress = new HTMLDivElement(); var label = new HTMLSpanElement { innerText = text + ": " }; label.style.display = "inline-block"; label.style.width = "10rem"; progress.appendChild(label); var countWrapper = new HTMLSpanElement(); progress.appendChild(countWrapper); var count = new HTMLSpanElement { innerText = "0" }; countWrapper.appendChild(count); countWrapper.appendChild(new HTMLSpanElement { innerText = " / " + numberOfTests }); return(progress, value => count.innerText = value.ToString()); } }
public ResizeContainer() { Container = new HTMLDivElement(); Container.style.position = "absolute"; Container.style.boxSizing = "border-box"; Container.style.overflow = "hidden"; Container.style.userSelect = "none"; Container.style.transition = $"width {Program.MoveTransitionTimeMs}ms, height {Program.MoveTransitionTimeMs}ms, left {Program.MoveTransitionTimeMs}ms, top {Program.MoveTransitionTimeMs}ms"; // Move Container.appendChild(createResizeButton("0", "0", (ev) => { Left = Snap(startingX - (float)(Program.MouseDownX - Program.CurrentMouseX), Program.SnapToGridX); Top = Snap(startingY - (float)(Program.MouseDownY - Program.CurrentMouseY), Program.SnapToGridY); }, "100%", "100%", "999", "transparent")); // Bottom Right Container.appendChild(createResizeButton("calc(100% - 10px)", "calc(100% - 10px)", (ev) => { Width = Snap(startingWidth - (float)(Program.MouseDownX - Program.CurrentMouseX), Program.SnapToGridX); Height = Snap(startingHeight - (float)(Program.MouseDownY - Program.CurrentMouseY), Program.SnapToGridY); })); // Top Right Container.appendChild(createResizeButton("calc(100% - 10px)", "0", (ev) => { Top = Snap(startingY - (float)(Program.MouseDownY - Program.CurrentMouseY), Program.SnapToGridY); Width = Snap(startingWidth - (float)(Program.MouseDownX - Program.CurrentMouseX), Program.SnapToGridX); Height = Snap(startingHeight - (Top - startingY), Program.SnapToGridY); })); // Top Left Container.appendChild(createResizeButton("0", "0", (ev) => { Top = Snap(startingY - (float)(Program.MouseDownY - Program.CurrentMouseY), Program.SnapToGridY); Height = Snap(startingHeight - (Top - startingY), Program.SnapToGridY); Left = Snap(startingX - (float)(Program.MouseDownX - Program.CurrentMouseX), Program.SnapToGridX); Width = Snap(startingWidth - (Left - startingX), Program.SnapToGridX); })); // Bottom Left Container.appendChild(createResizeButton("0", "calc(100% - 10px)", (ev) => { Height = Snap(startingHeight - (float)(Program.MouseDownY - Program.CurrentMouseY), Program.SnapToGridY); Left = Snap(startingX - (float)(Program.MouseDownX - Program.CurrentMouseX), Program.SnapToGridX); Width = Snap(startingWidth - (Left - startingX), Program.SnapToGridX); })); // Top Middle Container.appendChild(createResizeButton("calc(50% - 5px)", "0", (ev) => { Top = Snap(startingY - (float)(Program.MouseDownY - Program.CurrentMouseY), Program.SnapToGridY); Height = Snap(startingHeight - (Top - startingY), Program.SnapToGridY); })); // Middle Right Container.appendChild(createResizeButton("calc(100% - 10px)", "calc(50% - 5px)", (ev) => { Width = Snap(startingWidth - (float)(Program.MouseDownX - Program.CurrentMouseX), Program.SnapToGridX); })); // Middle Left Container.appendChild(createResizeButton("0", "calc(50% - 5px)", (ev) => { Left = Snap(startingX - (float)(Program.MouseDownX - Program.CurrentMouseX), Program.SnapToGridX); Width = Snap(startingWidth - (Left - startingX), Program.SnapToGridX); })); // Bottom Middle Container.appendChild(createResizeButton("calc(50% - 5px)", "calc(100% - 10px)", (ev) => { Height = Snap(startingHeight - (float)(Program.MouseDownY - Program.CurrentMouseY), Program.SnapToGridY); })); }
/// <summary> /// Render elements and setup the listeners for each sprite click area. /// </summary> /// <param name="rootEl"></param> private void Render(HTMLDivElement rootEl) { var instructDiv = new HTMLDivElement { className = "instructions" }; var titleSpan = new HTMLSpanElement { className = "spriteTitle", innerHTML = "Audio Sprite Visual" }; var descSpan = new HTMLSpanElement { className = "description", innerHTML = "Click a section of the waveform to play the sprite." }; var waveDiv = new HTMLDivElement { id = "waveform" }; var spritesDiv = new HTMLDivElement { className = "sprites" }; instructDiv.appendChild(titleSpan); instructDiv.appendChild(new HTMLBRElement()); instructDiv.appendChild(descSpan); rootEl.appendChild(instructDiv); rootEl.appendChild(waveDiv); rootEl.appendChild(spritesDiv); var count = 0; foreach (var spriteName in _options.SpriteNames) { var spriteDiv = new HTMLDivElement { id = $"sprite{count++}", className = "sprite" }; spriteDiv.addEventListener("click", e => { Play(spriteName); }, false); var spriteLabelDiv = new HTMLDivElement { className = "sprite-label", innerHTML = spriteName }; spriteDiv.appendChild(spriteLabelDiv); spritesDiv.appendChild(spriteDiv); _spriteElms.Add(spriteName, spriteDiv); } }
void addLink(XmlDocument xdoc, IHTMLDOMNode div, string isbn, string title) { try { removeLoadingIcon((IHTMLDOMNode)div); XmlNode apibookstatus = xdoc.SelectSingleNode("result/books/book[@isbn='" + isbn + "']/system[@systemid='" + selectedSystemId + "']/status"); XmlNode libkeys = null; List <string> calil_library_links = new List <string>(); HTMLDivElement linkDivOuter = (HTMLDivElement)document.createElement("div"); HTMLDivElement linkDiv = (HTMLDivElement)document.createElement("div"); linkDiv.className = "libron_link_div"; linkDiv.style.cssText = "padding:7px;border:1px solid #cbc6bd;background:#e8e4db;-moz-border-radius:5px;-webkit-border-radius:5px;font-size:12px;"; string tweet_body = null; string twitter_link_inner = null; string libreq_link = ""; if (apibookstatus != null && apibookstatus.InnerText == "Error") { HTMLDivElement error_link = (HTMLDivElement)document.createElement("div"); error_link.innerHTML = "<span>エラーが発生しました <image src='" + ngIcon + "'></span>"; linkDiv.appendChild((IHTMLDOMNode)error_link); } else { XmlNode reserveurl = null; reserveurl = xdoc.SelectSingleNode("result/books/book[@isbn='" + isbn + "']/system[@systemid='" + selectedSystemId + "']/reserveurl"); libkeys = xdoc.SelectSingleNode("result/books/book[@isbn='" + isbn + "']/system[@systemid='" + selectedSystemId + "']/libkeys"); foreach (XmlNode libkey in libkeys.ChildNodes) { string calil_library_link = "<a href='http://calil.jp/library/search?s=" + selectedSystemId + "&k=" + HttpUtility.UrlEncode(libkey.InnerText) + "' target='_blank'>" + libkey.InnerText + "(" + libkey + ")" + "</a>"; calil_library_links.Add(calil_library_link); } if (calil_library_links.Count > 0) { HTMLDivElement ok_link = (HTMLDivElement)document.createElement("div"); if (reserveurl != null) { ok_link.innerHTML = "<span>» <a target='_blank' href='" + reserveurl.InnerText + "'>" + selectedSystemName + "で予約する</a> <image style='vertical-align:middle;' src='" + okIcon + "'></span>"; } else { ok_link.innerHTML = "<span style='color:#666666;'>" + selectedSystemName + "に蔵書あり <image style='vertical-align:middle;' src='" + okIcon + "'> " + string.Join("・", calil_library_links.ToArray()) + "</span>"; } linkDiv.appendChild((IHTMLDOMNode)ok_link); tweet_body = "「" + title + "」を" + selectedSystemName + "の図書館" + "で予約しました。 http://libron.net"; twitter_link_inner = "「予約したよ」とつぶやく"; } else { HTMLDivElement ng_message = (HTMLDivElement)document.createElement("div"); ng_message.innerHTML = "<span style='color:#666666;'>" + selectedSystemName + "には見つかりません <image style='vertical-align:middle;' src='" + ngIcon + "'></span>"; linkDiv.appendChild((IHTMLDOMNode)ng_message); tweet_body = "@libreq " + isbn + " " + selectedSystemName + " 「" + title + "」を図書館にリクエスト。 http://libreq.net"; libreq_link = " <a href='http://libreq.net/top/about' target='_blank'>[これは何?]</a>"; twitter_link_inner = "リクエストをつぶやく(借りられるようになったら通知を受け取れます)"; } } HTMLDivElement calil_link = (HTMLDivElement)document.createElement("div"); calil_link.style.marginTop = "3px"; string calil_url = "http://calil.jp/book/" + isbn; calil_link.innerHTML = "<span>» <a target='_blank' href='" + calil_url + "'>他の図書館で検索する(カーリル)</a> <image style='vertical-align:middle;' src='" + calilIcon + "'> </span>"; linkDiv.appendChild((IHTMLDOMNode)calil_link); if (tweet_body != null) { HTMLDivElement twitter_link = (HTMLDivElement)document.createElement("div"); twitter_link.style.marginTop = "3px"; string twitter_url = "http://twitter.com/home?status=" + HttpUtility.UrlEncode(tweet_body); twitter_link.innerHTML = "<span>» <a target='_blank' href='" + twitter_url + "'>" + twitter_link_inner + "</a>" + libreq_link + " <image style='vertical-align:middle;' src='" + twitterIcon + "'> </span>"; linkDiv.appendChild((IHTMLDOMNode)twitter_link); } linkDivOuter.appendChild((IHTMLDOMNode)linkDiv); div.appendChild((IHTMLDOMNode)linkDivOuter); } catch { } }
/// <summary> /// Render station. /// </summary> private RadioStationRenderInfo Render(HTMLElement rootEl, RadioStation station, int stationIndex) { var stationDiv = new HTMLDivElement { className = "station" }; var titleDiv = new HTMLDivElement { className = "title" }; var subtitleDiv = new HTMLDivElement { className = "subtitle" }; var liveDiv = new HTMLDivElement { className = "live", innerHTML = "LIVE" }; var playingDiv = new HTMLDivElement { className = "playing" }; var rect1Div = new HTMLDivElement { className = "rect1" }; var rect2Div = new HTMLDivElement { className = "rect2" }; var rect3Div = new HTMLDivElement { className = "rect3" }; var rect4Div = new HTMLDivElement { className = "rect4" }; var rect5Div = new HTMLDivElement { className = "rect5" }; playingDiv.appendChild(rect1Div); playingDiv.appendChild(rect2Div); playingDiv.appendChild(rect3Div); playingDiv.appendChild(rect4Div); playingDiv.appendChild(rect5Div); titleDiv.appendChild(subtitleDiv); titleDiv.appendChild(liveDiv); titleDiv.appendChild(playingDiv); stationDiv.appendChild(titleDiv); var renderInfo = new RadioStationRenderInfo { Station = stationDiv, Title = subtitleDiv, Live = liveDiv, Playing = playingDiv }; renderInfo.Title.innerHTML = $"<b>{station.Freq}</b> {station.Title}"; renderInfo.Station.addEventListener("click", e => { var isNotPlaying = station.Howl == null || !station.Howl.playing(); // Stop other sounds or the current one. Stop(); // If the station isn't already playing or it doesn't exist, play it. if (station.Howl == null || isNotPlaying) { Play(stationIndex); } }); rootEl.appendChild(stationDiv); return(renderInfo); }