Move the debug panel to a sidebar
This commit is contained in:
Eevee (Evelyn Woods)
parent
b8dd0ae41e
commit
a96c089d7f
256
index.html
256
index.html
@ -115,97 +115,153 @@
|
||||
</section>
|
||||
</main>
|
||||
<main id="player" hidden>
|
||||
<section class="-main-area">
|
||||
<div class="level"><!-- level canvas and any overlays go here --></div>
|
||||
<div class="overlay-message">
|
||||
<h1 class="-top"></h1>
|
||||
<div class="-middle"></div>
|
||||
<p class="-bottom"></p>
|
||||
<p class="-keyhint"></p>
|
||||
<div id="player-main">
|
||||
<div class="controls">
|
||||
<div class="play-controls">
|
||||
<button class="control-pause" type="button" title="pause">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><path d="M2,1 h4 v14 h-4 z M10,1 h4 v14 h-4 z"></svg>
|
||||
<span class="keyhint">p</span></button>
|
||||
<button class="control-restart" type="button" title="restart">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><path d="M13,13 A 7,7 270 1,1 13,3 L15,1 15,7 9,7 11,5 A 4,4 270 1,0 11,11 z"></svg>
|
||||
</button>
|
||||
<button class="control-undo" type="button" title="undo">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><path d="M6,5 6,2 1,7 6,12 6,9 A 10,10 60 0,1 15,12 A 10,10 90 0,0 6,5"></svg>
|
||||
</button>
|
||||
<button class="control-rewind" type="button" title="rewind">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><path d="M1,8 7,2 7,14 z M9,8 15,2 15,14 z"></svg>
|
||||
<span class="keyhint">z</span></button>
|
||||
<label><input class="control-turn-based" type="checkbox"> Turn-based mode</label>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="action-drop" type="button">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-drop"></use></svg>
|
||||
drop <span class="keyhint">q</span></button>
|
||||
<button class="action-cycle" type="button">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-cycle"></use></svg>
|
||||
cycle <span class="keyhint">e</span></button>
|
||||
<button class="action-swap" type="button">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-swap"></use></svg>
|
||||
switch <span class="keyhint">c</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message"></div>
|
||||
<div class="chips">
|
||||
<h3>Hearts</h3>
|
||||
<output></output>
|
||||
<section id="player-game-area">
|
||||
<div class="level"><!-- level canvas and any overlays go here --></div>
|
||||
<div class="overlay-message">
|
||||
<h1 class="-top"></h1>
|
||||
<div class="-middle"></div>
|
||||
<p class="-bottom"></p>
|
||||
<p class="-keyhint"></p>
|
||||
</div>
|
||||
<div class="message"></div>
|
||||
<div class="chips">
|
||||
<h3>Hearts</h3>
|
||||
<output></output>
|
||||
</div>
|
||||
<div class="time">
|
||||
<h3>Time</h3>
|
||||
<output></output>
|
||||
</div>
|
||||
<div class="bonus">
|
||||
<h3>Bonus</h3>
|
||||
<output></output>
|
||||
</div>
|
||||
<div class="inventory"></div>
|
||||
</section>
|
||||
<div id="player-music">
|
||||
<div id="player-music-left">
|
||||
🎵 <a id="player-music-title">title</a> by <a id="player-music-author">author</a>
|
||||
</div>
|
||||
<div id="player-music-right">
|
||||
<input id="player-music-volume" type="range" min="0" max="1" step="0.05" value="1">
|
||||
<input id="player-music-unmute" type="checkbox" checked>
|
||||
</div>
|
||||
<audio loop preload="auto">
|
||||
</div>
|
||||
<div class="time">
|
||||
<h3>Time</h3>
|
||||
<output></output>
|
||||
</div>
|
||||
<div class="bonus">
|
||||
<h3>Bonus</h3>
|
||||
<output></output>
|
||||
</div>
|
||||
<div class="inventory"></div>
|
||||
</section>
|
||||
</div>
|
||||
<form id="player-debug">
|
||||
<div class="-time">
|
||||
<table class="-time-controls">
|
||||
<tr>
|
||||
<td><button type="button" class="-time-button" data-dt="-1">← 1 tic</button></td>
|
||||
<td id="player-debug-time-tics">0</td>
|
||||
<td>tics</td>
|
||||
<td><button type="button" class="-time-button" data-dt="1">1 tic →</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="-time-button" data-dt="-4">← 1 move</button></td>
|
||||
<td id="player-debug-time-moves">0</td>
|
||||
<td>moves</td>
|
||||
<td><button type="button" class="-time-button" data-dt="4">1 move →</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="-time-button" data-dt="-20">← 1 s</button></td>
|
||||
<td id="player-debug-time-secs">0</td>
|
||||
<td>seconds</td>
|
||||
<td><button type="button" class="-time-button" data-dt="20">1 s →</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Game speed:
|
||||
<select name="speed">
|
||||
<option value="6">6× — 120 tics per second</option>
|
||||
<option value="3">3× — 60 tics per second</option>
|
||||
<option value="2">2× — 40 tics per second</option>
|
||||
<option value="3/2">1½× — 30 tics per second</option>
|
||||
<option value="1" selected>1× — 20 tics per second</option>
|
||||
<option value="1/2">½× — 10 tics per second</option>
|
||||
<option value="1/3">⅓× — 6⅔ tics per second</option>
|
||||
<option value="1/4">¼× — 5 tics per second</option>
|
||||
</select>
|
||||
</p>
|
||||
<div id="player-debug-input"></div>
|
||||
<p id="player-debug-demo-progress"></p>
|
||||
<h3>Time</h3>
|
||||
<table class="-time-controls">
|
||||
<tr>
|
||||
<td><button type="button" class="-time-button" data-dt="-1">← 1 tic</button></td>
|
||||
<td id="player-debug-time-tics">0</td>
|
||||
<td>tics</td>
|
||||
<td><button type="button" class="-time-button" data-dt="1">1 tic →</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="-time-button" data-dt="-4">← 1 move</button></td>
|
||||
<td id="player-debug-time-moves">0</td>
|
||||
<td>moves</td>
|
||||
<td><button type="button" class="-time-button" data-dt="4">1 move →</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="-time-button" data-dt="-20">← 1 s</button></td>
|
||||
<td id="player-debug-time-secs">0</td>
|
||||
<td>seconds</td>
|
||||
<td><button type="button" class="-time-button" data-dt="20">1 s →</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="-buttons" id="player-debug-time-buttons">
|
||||
<!-- populated in js -->
|
||||
</div>
|
||||
<p>Game speed:
|
||||
<select name="speed">
|
||||
<option value="6">6× — 120 tics per second</option>
|
||||
<option value="3">3× — 60 tics per second</option>
|
||||
<option value="2">2× — 40 tics per second</option>
|
||||
<option value="3/2">1½× — 30 tics per second</option>
|
||||
<option value="1" selected>1× — 20 tics per second</option>
|
||||
<option value="1/2">½× — 10 tics per second</option>
|
||||
<option value="1/3">⅓× — 6⅔ tics per second</option>
|
||||
<option value="1/4">¼× — 5 tics per second</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<h3>Replay</h3>
|
||||
<!-- TODO...
|
||||
play back replay
|
||||
record replay, including altering it from here
|
||||
stop replay, without restarting the level
|
||||
show progress in %, length in tics + time
|
||||
browse replay? jump to any point? label points???
|
||||
edit manually?
|
||||
-->
|
||||
<div id="player-debug-input"></div>
|
||||
<p id="player-debug-demo-progress"></p>
|
||||
<div class="input"></div>
|
||||
<div class="-options">
|
||||
<p> Viewport size:
|
||||
<select id="player-debug-viewport">
|
||||
<option value="default" selected>Level default (9 or 10)</option>
|
||||
<option value="12">12 × 12</option>
|
||||
<option value="16">16 × 16</option>
|
||||
<option value="24">24 × 24</option>
|
||||
<option value="32">32 × 32</option>
|
||||
<option value="max">Entire level</option>
|
||||
</select>
|
||||
</p>
|
||||
<ul>
|
||||
<li><label><input type="checkbox" name="show_actor_bboxes"> Show actor bounding boxes</label></li>
|
||||
<li><label><input type="checkbox" name="disable_interpolation"> Disable interpolation</label></li>
|
||||
<!--
|
||||
<li><label><input type="checkbox" disabled> Show actor info</label></li>
|
||||
<li><label><input type="checkbox" disabled> Freeze time for everything else</label></li>
|
||||
<li><label><input type="checkbox" disabled> Player is immortal</label></li>
|
||||
<li><label><input type="checkbox" disabled> Player ignores collision</label></li>
|
||||
<li><label><input type="checkbox" disabled> Player levitates</label></li>
|
||||
-->
|
||||
</ul>
|
||||
<p>(Middle-click to teleport.)</p>
|
||||
</div>
|
||||
|
||||
<h3>Options</h3>
|
||||
<p>Viewport size:
|
||||
<select id="player-debug-viewport">
|
||||
<option value="default" selected>Level default (9 or 10)</option>
|
||||
<option value="12">12 × 12</option>
|
||||
<option value="16">16 × 16</option>
|
||||
<option value="24">24 × 24</option>
|
||||
<option value="32">32 × 32</option>
|
||||
<option value="max">Entire level</option>
|
||||
</select>
|
||||
</p>
|
||||
<ul>
|
||||
<li><label><input type="checkbox" name="show_actor_bboxes"> Show actor bounding boxes</label></li>
|
||||
<li><label><input type="checkbox" name="disable_interpolation"> Disable interpolation</label></li>
|
||||
<!--
|
||||
<li><label><input type="checkbox" disabled> Show actor info</label></li>
|
||||
<li><label><input type="checkbox" disabled> Freeze time for everything else</label></li>
|
||||
<li><label><input type="checkbox" disabled> Player is immortal</label></li>
|
||||
<li><label><input type="checkbox" disabled> Player ignores collision</label></li>
|
||||
<li><label><input type="checkbox" disabled> Player levitates</label></li>
|
||||
-->
|
||||
</ul>
|
||||
|
||||
<h3>Inventory</h3>
|
||||
<div class="-inventory">
|
||||
<!-- populated in js -->
|
||||
</div>
|
||||
<div class="-buttons">
|
||||
|
||||
<h3>Misc</h3>
|
||||
<div class="-buttons" id="player-debug-misc-buttons">
|
||||
<!-- populated in js -->
|
||||
</div>
|
||||
<p>Tip: Middle-click to teleport.</p>
|
||||
|
||||
<!-- TODO?
|
||||
- inspect with mouse
|
||||
@ -222,44 +278,6 @@
|
||||
- total bonus flags?
|
||||
-->
|
||||
</form>
|
||||
<div id="player-music">
|
||||
<div id="player-music-left">
|
||||
🎵 <a id="player-music-title">title</a> by <a id="player-music-author">author</a>
|
||||
</div>
|
||||
<div id="player-music-right">
|
||||
<input id="player-music-volume" type="range" min="0" max="1" step="0.05" value="1">
|
||||
<input id="player-music-unmute" type="checkbox" checked>
|
||||
</div>
|
||||
<audio loop preload="auto">
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="play-controls">
|
||||
<button class="control-pause" type="button" title="pause">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><path d="M2,1 h4 v14 h-4 z M10,1 h4 v14 h-4 z"></svg>
|
||||
<span class="keyhint">p</span></button>
|
||||
<button class="control-restart" type="button" title="restart">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><path d="M13,13 A 7,7 270 1,1 13,3 L15,1 15,7 9,7 11,5 A 4,4 270 1,0 11,11 z"></svg>
|
||||
</button>
|
||||
<button class="control-undo" type="button" title="undo">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><path d="M6,5 6,2 1,7 6,12 6,9 A 10,10 60 0,1 15,12 A 10,10 90 0,0 6,5"></svg>
|
||||
</button>
|
||||
<button class="control-rewind" type="button" title="rewind">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><path d="M1,8 7,2 7,14 z M9,8 15,2 15,14 z"></svg>
|
||||
<span class="keyhint">z</span></button>
|
||||
<label><input class="control-turn-based" type="checkbox"> Turn-based mode</label>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="action-drop" type="button">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-drop"></use></svg>
|
||||
drop <span class="keyhint">q</span></button>
|
||||
<button class="action-cycle" type="button">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-cycle"></use></svg>
|
||||
cycle <span class="keyhint">e</span></button>
|
||||
<button class="action-swap" type="button">
|
||||
<svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-swap"></use></svg>
|
||||
switch <span class="keyhint">c</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<main id="editor" hidden>
|
||||
<header>
|
||||
|
||||
31
js/main.js
31
js/main.js
@ -508,7 +508,7 @@ class Player extends PrimaryView {
|
||||
// Similarly, grab touch events and translate them to directions
|
||||
this.current_touches = {}; // ident => action
|
||||
this.touch_restart_delay = new util.DelayTimer;
|
||||
let touch_target = this.root.querySelector('.-main-area');
|
||||
let touch_target = this.root.querySelector('#player-game-area');
|
||||
let collect_touches = ev => {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
@ -738,16 +738,7 @@ class Player extends PrimaryView {
|
||||
}
|
||||
});
|
||||
this._update_replay_button_enabled();
|
||||
debug_el.querySelector('.-buttons').append(
|
||||
this.debug.replay_button,
|
||||
make_button("green button", () => {
|
||||
TILE_TYPES['button_green'].do_button(this.level);
|
||||
this._redraw();
|
||||
}),
|
||||
make_button("blue button", () => {
|
||||
TILE_TYPES['button_blue'].do_button(this.level);
|
||||
this._redraw();
|
||||
}),
|
||||
debug_el.querySelector('#player-debug-time-buttons').append(
|
||||
make_button("toggle clock", () => {
|
||||
this.level.pause_timer();
|
||||
this.update_ui();
|
||||
@ -765,6 +756,17 @@ class Player extends PrimaryView {
|
||||
this.update_ui();
|
||||
}),
|
||||
);
|
||||
debug_el.querySelector('#player-debug-misc-buttons').append(
|
||||
this.debug.replay_button,
|
||||
make_button("green button", () => {
|
||||
TILE_TYPES['button_green'].do_button(this.level);
|
||||
this._redraw();
|
||||
}),
|
||||
make_button("blue button", () => {
|
||||
TILE_TYPES['button_blue'].do_button(this.level);
|
||||
this._redraw();
|
||||
}),
|
||||
);
|
||||
|
||||
// Link up some options checkboxes
|
||||
let wire_checkbox = (name, onclick) => {
|
||||
@ -781,6 +783,7 @@ class Player extends PrimaryView {
|
||||
this._redraw();
|
||||
});
|
||||
|
||||
this.adjust_scale();
|
||||
if (this.level) {
|
||||
this.update_ui();
|
||||
}
|
||||
@ -1507,9 +1510,13 @@ class Player extends PrimaryView {
|
||||
// - the difference between the size of the play area and the size of our root (which will
|
||||
// add in any gap around the player, e.g. if the controls stretch the root to be wider)
|
||||
let root_rect = this.root.getBoundingClientRect();
|
||||
let player_rect = this.root.querySelector('.-main-area').getBoundingClientRect();
|
||||
let player_rect = this.root.querySelector('#player-game-area').getBoundingClientRect();
|
||||
avail_x += root_rect.width - player_rect.width;
|
||||
avail_y += root_rect.height - player_rect.height;
|
||||
// ...minus the width of the debug panel, if visible
|
||||
if (this.debug.enabled) {
|
||||
avail_x -= this.root.querySelector('#player-debug').getBoundingClientRect().width;
|
||||
}
|
||||
// - the margins around our root, which consume all the extra space
|
||||
let margin_x = parseFloat(style['margin-left']) + parseFloat(style['margin-right']);
|
||||
let margin_y = parseFloat(style['margin-top']) + parseFloat(style['margin-bottom']);
|
||||
|
||||
99
style.css
99
style.css
@ -306,7 +306,6 @@ label.option {
|
||||
}
|
||||
label.option:hover {
|
||||
outline: 2px solid #d0d0d0;
|
||||
outline-radius: 2px;
|
||||
}
|
||||
label.option .option-label {
|
||||
flex: 1;
|
||||
@ -544,12 +543,9 @@ button.level-pack-button p {
|
||||
/* Player */
|
||||
|
||||
#player {
|
||||
flex: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
gap: 0.5em;
|
||||
margin: auto; /* center in both directions baby */
|
||||
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
@ -558,8 +554,20 @@ button.level-pack-button p {
|
||||
--tile-height: 32px;
|
||||
--scale: 1;
|
||||
}
|
||||
#player > .-main-area {
|
||||
#player-main {
|
||||
/* This element basically just exists so that #player can have relative positioning and the
|
||||
* debug panel can use that to sit against the right edge; absolute positioning excludes
|
||||
* margins, so if it were positioned as a child of THIS element, it would be stuffed into the
|
||||
* game area (oops!) */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
gap: 0.5em;
|
||||
margin: auto; /* center in both directions baby */
|
||||
}
|
||||
#player-game-area {
|
||||
isolation: isolate;
|
||||
align-self: center; /* don't stretch if the buttons or music blow out somehow */
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid:
|
||||
@ -570,7 +578,7 @@ button.level-pack-button p {
|
||||
"level inventory" min-content
|
||||
"level actions" min-content
|
||||
/* Need explicit min-content to force the hint to wrap */
|
||||
/ min-content min-content min-content
|
||||
/ min-content min-content
|
||||
;
|
||||
column-gap: 2em;
|
||||
row-gap: 0.5em;
|
||||
@ -847,59 +855,67 @@ dl.score-chart .-sum {
|
||||
|
||||
/* Debug stuff */
|
||||
#player.--debug #player-debug {
|
||||
display: grid;
|
||||
display: flex;
|
||||
}
|
||||
#player-debug {
|
||||
flex: 0 0 max-content;
|
||||
align-self: center;
|
||||
display: none;
|
||||
grid:
|
||||
"time inventory options"
|
||||
"buttons buttons buttons"
|
||||
/ 2fr 1fr 2fr
|
||||
;
|
||||
/* FIXME this blows out the height instead of scrolling and i cannot figure out how to make it
|
||||
* stop, so here is an arbitrary max height on it which i extremely hate */
|
||||
overflow: auto;
|
||||
max-height: 75vh;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
gap: 0.25em;
|
||||
padding: 0.5em;
|
||||
background-image: repeating-linear-gradient(135deg,
|
||||
hsl(0, 0%, 4%) 0em,
|
||||
hsl(0, 0%, 4%) 1em,
|
||||
hsl(15, 25%, 8%) 1em,
|
||||
hsl(15, 25%, 8%) 2em);
|
||||
border: 0.25em solid hsla(30, 100%, 50%, 0.5);
|
||||
hsl(0, 0%, 4%) 0px,
|
||||
hsl(0, 0%, 4%) 16px,
|
||||
hsl(30, 25%, 8%) 16px,
|
||||
hsl(30, 25%, 8%) 32px);
|
||||
border: 0.25em solid hsl(30, 75%, 50%);
|
||||
border-right-width: 0;
|
||||
box-shadow: inset 0 0 0.25em 0.25em #0004;
|
||||
|
||||
}
|
||||
#player-debug > .-time {
|
||||
grid-area: time;
|
||||
#player-debug > h3 {
|
||||
margin: -0.25em -0.25em 0.25em;
|
||||
padding: 0 0.5em;
|
||||
background: hsl(30, 60%, 20%);
|
||||
color: black;
|
||||
}
|
||||
#player-debug > .-time table.-time-controls {
|
||||
#player-debug > * + h3 {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
#player-debug > .-time table.-time-controls button {
|
||||
#player-debug table.-time-controls {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#player-debug table.-time-controls button {
|
||||
width: 100%;
|
||||
text-align: inherit;
|
||||
}
|
||||
#player-debug > .-time table.-time-controls td:nth-child(1) {
|
||||
#player-debug table.-time-controls td:nth-child(1) {
|
||||
/* go backwards button */
|
||||
text-align: left;
|
||||
}
|
||||
#player-debug > .-time table.-time-controls td:nth-child(2) {
|
||||
#player-debug table.-time-controls td:nth-child(2) {
|
||||
/* value */
|
||||
width: 6em;
|
||||
width: 4em;
|
||||
text-align: right;
|
||||
}
|
||||
#player-debug > .-time table.-time-controls td:nth-child(3) {
|
||||
#player-debug table.-time-controls td:nth-child(3) {
|
||||
/* label */
|
||||
}
|
||||
#player-debug > .-time table.-time-controls td:nth-child(4) {
|
||||
#player-debug table.-time-controls td:nth-child(4) {
|
||||
/* go forward button */
|
||||
text-align: right;
|
||||
}
|
||||
#player-debug > .-options {
|
||||
grid-area: options;
|
||||
}
|
||||
#player-debug > .-inventory {
|
||||
grid-area: inventory;
|
||||
#player-debug .-inventory {
|
||||
display: grid;
|
||||
margin: auto;
|
||||
grid: auto-fill var(--tile-height) / repeat(4, var(--tile-width));
|
||||
margin: 0 auto;
|
||||
grid: auto-fill var(--tile-height) / repeat(8, var(--tile-width));
|
||||
gap: 2px;
|
||||
}
|
||||
#player-debug > .-inventory > button {
|
||||
@ -909,14 +925,17 @@ dl.score-chart .-sum {
|
||||
display: block;
|
||||
}
|
||||
#player-debug > .-inventory > button.-wide {
|
||||
grid-column: span 4;
|
||||
grid-column: span 8;
|
||||
padding: 0.25em;
|
||||
}
|
||||
#player-debug > .-buttons {
|
||||
grid-area: buttons;
|
||||
#player-debug .-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.25em;
|
||||
}
|
||||
#player-debug .-buttons button {
|
||||
flex: 1 0 max-content;
|
||||
}
|
||||
|
||||
#player-debug-input {
|
||||
display: grid;
|
||||
@ -974,7 +993,7 @@ dl.score-chart .-sum {
|
||||
#player .controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
#player > .-main-area {
|
||||
#player-game-area {
|
||||
/* Rearrange the grid to be vertical */
|
||||
grid:
|
||||
"level level"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user