-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
5 lines (4 loc) · 16.6 KB
/
index.html
1
2
3
4
5
<!DOCTYPE html><html lang="en-US"><head><script async src="https://www.googletagmanager.com/gtag/js?id=G-H2JTWDBY7W"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-H2JTWDBY7W');</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="resources/blueimp-load-image/js/load-image.all.min.js"></script><script type="text/javascript" src="resources/OverlayScrollbars-master/js/OverlayScrollbars.min.js"></script><script type="module" src="js/main.js"></script><title id="page_title" class="translatable">Game of Life</title><link rel="icon" type="image/png" href="img/favicon.png"><meta name="author" content="Dr. Nord"><meta name="description" content="Dr. Nord's realization of Conway's Game of Life"><meta name="keywords" content="evolution, simulation, cellular automaton, development"><meta property="og:title" content="Game of Life"><meta property="og:description" content="The famous cellular automaton invented by John Conway in the distant 70's and presented to you by Dr. Nord."><meta property="og:type" content="website"><meta property="og:url" content="https://drnord.github.io/conway-s-game-of-life/"><meta property="og:image" content="https://github.com/DrNord/conway-s-game-of-life/blob/gh-pages/img/social-preview-card.png?raw=true"><meta property="og:image:alt" content="Icon and description"><meta name="twitter:card" content="summary_large_image"></head><body class="colorsDarkMode"><noscript>Your browser must support JavaScript to display the content properly!</noscript><div id="mainBackground"></div><div id="mainForeground"><div id="mainVisibleWindow"><div id="gamepad_switch" class="button fontBigger invisible"><i class="fas fa-gamepad" title="Controls switch"></i></div></div><header id="mainHeader"><div id="menu_header" class="paddingNormal"><div id="game_title"><h1 id="title" style="font:inherit" class="paddingNormal translatable">Game of Life</h1><div id="lang_switch" class="button translatable glow" title="Включить русский язык"><p id="lang_text" class="textCenter">EN</p></div></div><div id="menu_title" style="display: flex; flex-wrap: wrap; justify-content: center"><div class="headerMenuElems menuElems fontBigger"><div id="playPause" class="button translatable" title="Play/Pause switch"><i class="far fa-play-circle"></i></div><div id="play_epoch" class="button translatable" title="Evolve once"><div class="far fa-circle font-awesome-circumscribed"><div class="fas fa-eject font-awesome-inscribed-rotate-01"></div></div></div><div id="fullwindow" class="button translatable" title="Fullwindow switch"><i class="fas fa-expand-alt font-awesome-rotate-45"></i></div><div id="restart" class="button translatable" title="Fill randomly"><i class="fas fa-random"></i></div><div id="fit_field" class="button translatable" title="Fit the game field into the client area and restart"><div class="far fa-square font-awesome-circumscribed"><div class="fas fa-random font-awesome-inscribed-01"></div></div></div></div><div class="headerMenuElems menuElems fontBigger"><div id="game_edit_invert" class="button game_edit translatable" title="Edit: invert mode"><i class="fab fa-flipboard"></i></div><div id="game_edit_erase" class="button game_edit translatable" title="Edit: erase mode"><i class="fas fa-eraser"></i></div><div id="game_edit_add" class="button game_edit translatable" title="Edit: spawn mode"><i class="fas fa-pen-square"></i></div><div id="game_edit_all_spawn_kill" class="button translatable" title="Spawn/kill life in all cells"><i class="far fa-minus-square"></i></div><div id="game_edit_evolution" class="button game_edit translatable" title="Evolution-on-mousemove mode"><i class="fas fa-forward"></i></div></div></div></div></header><div id="mainContent"><div id="game-container"><div id="game-viewport"><canvas id="game-canvas"></canvas><canvas id="game-canvas-grid"></canvas><div id="game-scroll" class="os-theme-light"><div id="game-field"></div></div></div><div id="hud-info" class="paddingNormal"><p><span id="hud_total" class="translatable">Total: </span><span>-</span></p><p><span id="hud_size" class="translatable">Size#: </span><span>-</span></p><p><span id="hud_cell" class="translatable">Cell#: </span><span>-</span></p><p><span id="hud_alive" class="translatable">Alive: </span><span>-</span></p><p><span id="hud_epoch" class="translatable">Epoch: </span><span>-</span></p></div><div id="hud-buttons-header" style="height: 0; width: 100%; position: absolute; top:0; left:0; display: flex; justify-content: center;"><div id="gamepad_area_left"></div><div><div id="controls_container" class="controls_container invisible"></div></div><div id="gamepad_area_right"></div></div><div id="hud-buttons-footer" style="height: 0; width: 100%; position: absolute; bottom:0; left:0; display: flex; justify-content: center;"><div><div id="controls_container_2" class="controls_container invisible fontBigger" style="transform: translate(0, -100%)"></div></div></div></div></div><div style="position: relative"><footer id="mainFooter"><div class="paddingNormal"><div id="footer_info" class="button" style="white-space: nowrap; position: relative; display: flex; justify-content: center"><p id="drNord" class="translatable" style="width: calc(7 * var(--main-font-size))">© 2021 Dr. Nord</p><a id="info_on_hover" target="_blank" class="button translatable" href="https://drnord.github.io" title="Dr. Nord's GitHub page: https://drnord.github.io/"><p>drnord.github.io</p></a></div><div style="display: flex; justify-content: space-between; flex-grow: 1"><div id="footer_buttons" style="display: flex; justify-content: center"><div class="menuElems fontBigger"><div id="game_info" class="button glow translatable" title="Game info"><i class="fas fa-info-circle"></i></div><div id="game_settings" class="button translatable" title="Game settings"><i class="fas fa-cog"></i></div><div id="switch_audio" class="button translatable" title="Switch audio"><i class="fas fa-volume-mute"></i></div><div id="fullscreen" class="button translatable" title="Fullscreen switch"><i class="fas fa-expand"></i></div><div id="switchLight" class="button translatable" title="Dark <-> Light mode"><i class="fas fa-flip-horizontal fa-moon"></i></div></div></div><div id="footer_slides0"></div><div id="footer_slides" style="display: flex; justify-content: right"><div id="settingsSection" class="fontBigger"><div id="cogs" class="button" title="Settings"><i class="fas fa-sliders-h"></i></div><div id="dropMenu" class="invisible"><div><div id="hud_info_switch" class="button pressed translatable" title="Switch cells info"><i class="fas fa-list fa-rotate-180"></i></div><div id="savegame" class="button translatable" title="Save game"><i class="fas fa-download fa-sm"></i></div><div id="loadgame" class="button translatable" title="Load game"><i class="fas fa-upload fa-sm"></i></div></div><div><div id="zoomOut" class="button translatable" title="Zoom Out"><i class="fas fa-search-minus"></i></div><div class="button"><label for="zoom_slider"></label> <input id="zoom_slider" class="translatable" title="Zoom slider" type="range" min="0" max="100" value="100"></div><div id="zoomIn" class="button translatable" title="Zoom In"><i class="fas fa-search-plus"></i></div></div><div><div id="volume_minus" class="button translatable" title="Sound quieter"> <i class="fas fa-volume-off"></i> </div><div class="button"><label for="volume_slider"></label> <input id="volume_slider" class="translatable" title="Volume slider" type="range" min="0" max="100" value="100"></div><div id="volume_plus" class="button translatable" title="Sound louder"><i class="fas fa-volume-up"></i></div></div><div class="movableFooterMenuElem"><div id="speed_slower" class="button translatable" title="Simulation slower"><i class="fas fa-walking"></i></div><div id="speed" class="button"><label for="t_epoch"></label> <input id="t_epoch" class="translatable" title="Simulation speed" type="range" min="0" max="100" value="100"></div><div id="speed_faster" class="button translatable" title="Simulation faster"><i class="fas fa-running"></i></div></div></div></div></div></div></div></footer></div><div id="game_info_modal_container" class="modal_container"><div id="game_info_modal" class="modal_content" tabindex="0"><div class="paddingNormal relative"><h1 class="textCenter"><i class="fab fa-envira"></i> <span id="gi_h1" class="translatable">The Conway's Game of Life</span><div id="info_close" class="button close_button"><i class="fas fa-times"></i></div></h1><h2 class="textCenter"><span id="gi_h2" class="translatable">by <strong>Dr. Nord</strong></span></h2><p class="textCenter"><span id="gi_h2-2" class="translatable">(v2.0.0, Apr 23, 2022)</span></p><p id="gi_h2-3-parent" class="textCenter"><span id="gi_h2-3" class="translatable">Watch primitive cells evolve in their primitive universe</span></p><p><i class="fas fa-info-circle"></i> <span id="gi_txt01" class="translatable">The famous <strong>Game of Life</strong> is a cellular automaton invented in 1970 by <em>John Horton Conway</em> - the British mathematician.</span></p><p><i class="fas fa-stopwatch"></i> <span id="gi_txt02" class="translatable">It is a <strong>zero-player</strong> game - the initial state fully determines the game evolution. No further input is required.</span></p><p class="accordion"><i class="fas fa-keyboard"></i> <span id="gi_txt03" class="translatable">Nevertheless, the game realization includes <b>advanced controls</b>:</span></p><ul class="panel"><li><span id="gi_txt04" class="translatable"><b>drag-n-drop</b> any picture (jpeg, png) into the game field to see it evolve;</span></li><li><span id="gi_txt05" class="translatable">use the <b>mouse wheel</b> to scale the game field;</span></li><li><span id="gi_txt06" class="translatable"><b>click-n-move</b> the mouse to navigate through the zoomed game field;</span></li><li><span id="gi_txt07" class="translatable">see below for <b>more</b>.</span></li></ul><p class="accordion"><i class="fas fa-tablet-alt"></i> <span id="gi_txt08" class="translatable">Using a <b>touchscreen</b> device (smartphone or tablet) may improve your gaming experience:</span></p><ul class="panel"><li><span id="gi_txt09" class="translatable"><b>swipe</b> (using 1 or 2 fingers) to navigate through the zoomed game field;</span></li><li><span id="gi_txt10" class="translatable"><b>pinch/zoom</b> (using 2 fingers) to scale the game field.</span></li></ul><p class="accordion"><i class="fas fa-clipboard-list"></i> <span id="gi_txt11" class="translatable">Switch to <b>edit</b> mode and use your mouse or touchscreen to:</span></p><ul class="panel"><li><i class="fas fa-pen-square"></i> <span id="gi_txt12" class="translatable">- add cells;</span></li><li><i class="fas fa-eraser"></i> <span id="gi_txt13" class="translatable">- delete cells;</span></li><li><i class="fab fa-flipboard"></i> <span id="gi_txt14" class="translatable">- invert cells;</span></li><li><i class="far fa-minus-square"></i>/<i class="far fa-plus-square"></i> <span id="gi_txt15" class="translatable">- clean/fill the whole field;</span></li><li><i class="fas fa-forward"></i> <span id="gi_txt16" class="translatable">- evolve <b>once</b> (single tap) or <b>continuously</b> (tap-and-move), try when paused.</span></li></ul><p class="accordion"><i class="fas fa-sliders-h"></i> <span id="gi_txt17" class="translatable">The sliders button is located in the lowest right corner and opens additional parameters:</span></p><ul class="panel"><li><i class="fas fa-list fa-rotate-180"></i> <span id="gi_txt18" class="translatable">- the <b>HUD info</b> switch, which displays the current game information;</span></li><li><i class="fas fa-download fa-sm"></i>, <i class="fas fa-upload fa-sm"></i> <span id="gi_txt19" class="translatable">- the <b>Save/Load</b> buttons, you may save your current game state as an image and choose any <b>picture</b> (jpeg, png) to load - the game will interpret its pixels as dead or alive cells dependent on their brightness;</span></li><li><i class="fas fa-search-minus"></i>/<i class="fas fa-search-plus"></i>, <i class="fas fa-volume-off"></i>/<i class="fas fa-volume-up"></i>, <i class="fas fa-walking"></i>/<i class="fas fa-running"></i> <span id="gi_txt20" class="translatable">- these sliders allow you to <b>scale</b> the field, change sound <b>volume</b> and simulation <b>speed</b>.</span></li></ul><p class="accordion"><i class="fas fa-clipboard-list"></i> <span id="gi_txt21" class="translatable">The <b>basic game interface</b> also includes:</span></p><ul class="panel"><li><i class="far fa-play-circle"></i>/<i class="far fa-pause-circle"></i> <span id="gi_txt22" class="translatable">- the Play/Pause button;</span></li><li><div class="far fa-circle font-awesome-circumscribed"><div class="fas fa-eject font-awesome-inscribed-rotate-01"></div></div><span id="gi_txt23" class="translatable">- evolve manually by a single click;</span></li><li><i class="fas fa-expand-alt font-awesome-rotate-45"></i>/<i class="fas fa-compress-alt font-awesome-rotate-45"></i> <span id="gi_txt24" class="translatable">- expand/compress the game area by hiding/showing menu bars;</span></li><li><i class="fas fa-gamepad"></i> <span id="gi_txt25" class="translatable">- reveal the menu (this button appears in the top right corner when the game field is expanded);</span></li><li><div class="fas fa-random"></div><span id="gi_txt26" class="translatable">- spawn cells randomly;</span></li><li><div class="far fa-square font-awesome-circumscribed"><div class="fas fa-random font-awesome-inscribed-01"></div></div><span id="gi_txt27" class="translatable">- resize the game field to fit the available area and spawn cells randomly.</span></li></ul><p class="accordion"><i class="fas fa-clipboard-list"></i> <span id="gi_txt28" class="translatable">The <b>footer menu</b> consists of:</span></p><ul class="panel"><li><i class="fas fa-info-circle"></i> <span id="gi_txt29" class="translatable">- this info;</span></li><li><i class="fas fa-cog"></i> <span id="gi_txt30" class="translatable">- settings button, where you can manually set game field size, cells spawn probability and simulation speed slider limits;</span></li><li><i class="fas fa-volume-mute"></i>, <i class="fas fa-expand"></i>/<i class="fas fa-compress"></i>, <i class="fas fa-sun"></i>/<i class="fas fa-flip-horizontal fa-moon"></i> <span id="gi_txt31" class="translatable">- sound mute switch, full window expand/compress switch, Day/Night mode switch.</span></li></ul><br><p id="have_fun" class="textCenter button glow"><i class="fas fa-gamepad"></i> <span id="gi_txt99" class="translatable">Have fun!</span></p></div></div></div><div id="game_settings_modal_container" class="modal_container"><div id="game_settings_modal" class="modal_content" tabindex="0"><div id="setting_title"><i class="fas fa-cog"></i> <b id="gs_title" class="translatable">Game settings</b><div id="settings_close" class="button close_button"><i class="fas fa-times"></i></div></div><div id="gs_fieldSize" class="marginNormal translatable textCenter" style="white-space: pre-line;">Field size (<i>please be reasonable</i>)</div><div class="flex_align_inputs"><label id="gs_w" class="translatable" for="settings_field_width">Width:</label> <input id="settings_field_width" type="text" min="2" placeholder="Enter a number" required></div><div class="flex_align_inputs"><label id="gs_h" class="translatable" for="settings_field_height">Height:</label> <input id="settings_field_height" type="text" min="2" placeholder="Height" required></div><div class="paddingNormal"></div><div class="flex_align_2lines"><label id="gs_p" class="translatable" for="settings_alive_probability">Probability of spawn:</label> <input id="settings_alive_probability" type="text" min="0" max="0" placeholder="Enter a number" required></div><div class="paddingNormal"></div><div id="gs_slider" class="marginNormal translatable textCenter">Simulation speed slider</div><div class="flex_align_inputs"><label id="gs_f" class="translatable" for="settings_dt_epoch_min">Fastest, ms:</label> <input id="settings_dt_epoch_min" type="text" min="0" placeholder="Slider fast" required></div><div class="flex_align_inputs"><label id="gs_s" class="translatable" for="settings_dt_epoch_max">Slowest, ms:</label> <input id="settings_dt_epoch_max" type="text" min="1" placeholder="Slider slow" required></div><div class="paddingNormal"></div><div class="flex_align_inputs"><div id="settings_apply" class="button bordered fixed_width"><i class="fas fa-check-circle"></i> <span id="gs_apply" class="translatable">Apply</span></div><div id="settings_cancel" class="button bordered fixed_width"><i class="fas fa-ban"></i> <span id="gs_cancel" class="translatable">Cancel</span></div></div></div></div></div></body></html>