Skip to content

Commit

Permalink
chore: Simplify the UI colors and scheme (#147)
Browse files Browse the repository at this point in the history
  • Loading branch information
@philschatz
philschatz committed Mar 13, 2019
1 parent ada225e commit 1d6f062
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 103 deletions.
251 changes: 162 additions & 89 deletions pwa-template.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
font-size: 12px;
font-family: helvetica, arial, sans-serif;
}
body[data-mode="playingGame"] #browseGamesRoot { display: none; }
body:not([data-mode="playingGame"]) #playGameRoot { display: none; }
body[data-mode="playingGame"] #browseGamesRoot { display: none !important; }
body:not([data-mode="playingGame"]) #playGameRoot { display: none !important; }

.hidden { display: none !important; }

Expand Down Expand Up @@ -63,20 +63,36 @@
/* When the CSS is disabled then show a plain table with borders */
.ps-table.ps-ui-disabled {
width: 100%;
background-color: white;
}
.ps-table.ps-ui-disabled td {
border: 1px solid #ccc;
}
.ps-table.ps-ui-disabled caption {
background-color: white;
border-collapse: collapse;
/* compensate for the chrome `left: 1px` hack */
position: fixed;
left: 0;
top: 3rem; /* so the header bar does not overlap */
}

/* When the CSS is disabled, still mark the player cell in bold */
table.ps-table .ps-cell-label.ps-player {
font-weight: bold;
}

/* Handle light and dark games */

body.is-background-dark .ps-table.ps-ui-disabled,
body.is-background-dark .ps-table.ps-ui-disabled caption { background-color: black; }
body.is-background-dark .ps-table.ps-ui-disabled td { border: 1px solid #999; }
body.is-background-dark .ps-table.ps-ui-disabled td { color: #999; }
body.is-background-dark .ps-table.ps-ui-disabled caption,
body.is-background-dark table.ps-table .ps-cell-label.ps-player { color: white; }

body:not(.is-background-dark) .ps-table.ps-ui-disabled,
body:not(.is-background-dark) .ps-table.ps-ui-disabled caption { background-color: white; }
body:not(.is-background-dark) .ps-table.ps-ui-disabled td { border: 1px solid #999; }
body:not(.is-background-dark) .ps-table.ps-ui-disabled td { color: #666; }
body:not(.is-background-dark) .ps-table.ps-ui-disabled caption
body:not(.is-background-dark) table.ps-table .ps-cell-label.ps-player { color: black; }



#gamepadIcon:not(.enabled) {
filter: grayscale(100%);
opacity: .8;
Expand Down Expand Up @@ -151,90 +167,120 @@
* =================================================
*/

body[data-ps-game-limited-by="WIDTH"] #playGameRoot {
display: flex;
flex-direction: column;
justify-content: center;
top: 0;
bottom: 0;
position: fixed;
}

body[data-ps-game-limited-by="HEIGHT"] #playGameRoot {
display: flex;
flex-direction: row;
justify-content: center;
left: 0;
right: 0;
position: fixed;
}

#fullscreenRoot {
margin: auto;
position: fixed;
bottom: 0;
width: 100%; /* to horizontally center */
position: fixed; /* so we can left-shift to avoid the chrome fractional pixel problem */
}


#fullscreenButtons {
#fullscreenTopLeftButtons { top: 0; left: 0; }
#fullscreenTopRightButtons { top: 0; right: 0; }
#gamepadSection { bottom: 0; left: 0; }
#fullscreenBottomRightButtons { bottom: 0; right: 0; }
.fullscreen-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
margin: 0.5rem;
}

color: white;
padding: 0.5rem;
background-color: rgba(64, 64, 64, 0.5);
.fullscreen-menu-toggle-item.ui-has-icon {
padding-top: 0.25rem;
padding-bottom: .5rem;
padding-left: .5rem;
padding-right: .5rem;
}
.fullscreen-menu-toggle-item.ui-has-icon .ui-icon {
width: 1rem;
height: 1rem;
position: relative;
top: .25rem;
}
.ui-icon { fill: currentColor; }

#fullscreenButtons #fullscreenGameInfo {
flex: 1;
.fullscreen-menu-toggle-item,
.fullscreen-menu-button {
cursor: pointer;
display: inline-block;
padding: 0.5rem;
border-radius: 6px;
border-width: 1px;
border-style: solid;
}
#fullscreenButtons #fullscreenGameInfo a { color: white; }

/* Make the background transparent in case the buttons cover the game */
#fullscreenButtons .ui-button {
background-color: rgba(90, 90, 238, 0.5);
}
#fullscreenButtons .ui-button:focus,
#fullscreenButtons .ui-button:hover {
background-color: rgba(90, 90, 238, 1);
.fullscreen-menu-button .ui-icon {
height: 0.75rem;
}
#fullscreenButtons .ui-button-green {
background-color: rgba(90, 238, 90, 0.5);

.fullscreen-menu-arbitrary-text {
display: inline-block;
padding: 0.5rem;
border-radius: 6px;
}
#fullscreenButtons .ui-button-green:focus,
#fullscreenButtons .ui-button-green:hover {
background-color: rgba(90, 238, 90, 1);
.fullscreen-menu-checkbox:checked ~ .fullscreen-menu-arbitrary-text {
display: none;
}

#disableCss { display: none; }
a.fullscreen-menu-button { text-decoration: none; }
button.fullscreen-menu-button { background-color: transparent; }

/* Handle light and dark mode */

#messageDialogClose {
margin: 0.5rem;
}
body.is-background-dark .fullscreen-menu,
body.is-background-dark .fullscreen-menu a,
body.is-background-dark .fullscreen-menu .ui-icon,
body.is-background-dark .fullscreen-menu-button { color: white; }
body.is-background-dark .fullscreen-menu-toggle-item,
body.is-background-dark .fullscreen-menu-button { border-color: rgba(255, 255, 255, 50%); }
body.is-background-dark .fullscreen-menu-arbitrary-text { background-color: rgba(0, 0, 0, 25%); }
body.is-background-dark .fullscreen-menu-button:hover,
body.is-background-dark .fullscreen-menu-toggle-item:hover,
body.is-background-dark .fullscreen-menu-checkbox:checked ~ .fullscreen-menu-toggle-item { background-color: rgba(255, 255, 255, 50%); }

body.is-background-dark #sourceCode,
body.is-background-dark #gamepadSection {
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
body:not(.is-background-dark) .fullscreen-menu,
body:not(.is-background-dark) .fullscreen-menu a,
body:not(.is-background-dark) .fullscreen-menu .ui-icon,
body:not(.is-background-dark) .fullscreen-menu-button { color: black; }
body:not(.is-background-dark) .fullscreen-menu-toggle-item,
body:not(.is-background-dark) .fullscreen-menu-button { border-color: rgba(0, 0, 0, 15%); }
body:not(.is-background-dark) .fullscreen-menu-arbitrary-text { background-color: rgba(255, 255, 255, 70%); }
body:not(.is-background-dark) .fullscreen-menu-button:hover,
body:not(.is-background-dark) .fullscreen-menu-toggle-item:hover,
body:not(.is-background-dark) .fullscreen-menu-checkbox:checked ~ .fullscreen-menu-toggle-item { background-color: rgba(0, 0, 0, 15%); }

body:not(.is-background-dark) #sourceCode,
body:not(.is-background-dark) #gamepadSection {
background-color: rgba(255, 255, 255, 0.7);
color: black;
}

#sourceCode,
#gamepadSection {
padding: .5rem;
margin: .5rem;
border-radius: 6px;
}
#sourceCode {
position: fixed;
bottom: 0;
right: 0;
}
#gamepadSection {
position: fixed;
bottom: 0;
left: 0;

cursor: pointer;


.fullscreen-menu-checkbox { display: none; }
.fullscreen-menu-checkbox:not(:checked) ~ .fullscreen-menu-items {
position: absolute;
left: -1000rem;
}

#gamepadSection:not(:focus):not(:hover) #gamepadDescription {
display: none;
#disableCss { display: none; }


#messageDialogClose {
margin: 0.5rem;
}



/* *************************************
Expand Down Expand Up @@ -309,8 +355,6 @@
height: fit-content;
margin: auto;
padding: 1em;
background: white;
color: black;
display: block;
}
dialog:not([open]) {
Expand All @@ -330,6 +374,17 @@
top: 50%;
transform: translate(0, -50%);
}

/* Handle light and dark mode */

body.is-background-dark dialog {
background-color: rgba(0, 0, 0, 85%);
color: white;
}
body:not(.is-background-dark) dialog {
background-color: white;
color: black;
}
</style>

<meta charset="utf-8" />
Expand Down Expand Up @@ -386,28 +441,44 @@
</table>
</div>

<div id="fullscreenButtons">
<!-- needs to occur after the game so it appears on top of the game -->
<div id="fullscreenTopLeftButtons">
<a class="ui-button" href="#">Games</a>
<button id="gameInstructionsButton2" class="ui-button">Help</button>
<input id="disableCss" type="checkbox"/><label for="disableCss" class="ui-button ui-button-green" aria-hidden="true">Toggle UI</label>
</div>
<div id="fullscreenGameInfo">
<!-- needs to occur after the game so it appears on top of the game -->
<div id="fullscreenTopLeftButtons" class="fullscreen-menu">
<input id="menuTopLeft" type="checkbox" class="fullscreen-menu-checkbox"/>
<label for="menuTopLeft" class="fullscreen-menu-toggle-item ui-has-icon" aria-hidden="true">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" class="ui-icon ui-icon-three-bars" viewBox="0 0 12 16" version="1.1"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"></path></svg>
</label>
<span class="fullscreen-menu-items">
<a class="fullscreen-menu-button" href="#">Games</a>
<button id="gameInstructionsButton2" class="fullscreen-menu-button">Help</button>
<input id="disableCss" type="checkbox"/><label for="disableCss" class="fullscreen-menu-button" aria-hidden="true">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" class="ui-icon" viewBox="0 0 448 512" version="1.1"><path fill="currentColor" d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z" class=""></path></svg>
Toggle UI
</label>
</span>
<span class="fullscreen-menu-arbitrary-text">
<span id="fullscreenTitle"></span> <span id="fullscreenPercentage"></span> : by <a id="authorInfo" target="_window"></a>
</div>
<div id="fullscreenTopRightButtons">
<button id="gameButtonUndo" class="ui-button">Undo</button>
<button id="gameButtonRestart" class="ui-button">Restart</button>
</div>
</span>
</div>
<div id="fullscreenTopRightButtons" class="fullscreen-menu">
<input id="menuTopRight" type="checkbox" class="fullscreen-menu-checkbox"/>
<span class="fullscreen-menu-items">
<button id="gameButtonUndo" class="fullscreen-menu-button">Undo</button>
<button id="gameButtonRestart" class="fullscreen-menu-button">Restart</button>
</span>
<label for="menuTopRight" class="fullscreen-menu-toggle-item ui-has-icon" aria-hidden="true">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" class="ui-icon ui-icon-kebab-vertical" viewBox="0 0 3 16" version="1.1"><path fill-rule="evenodd" d="M0 2.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zm0 5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zM1.5 14a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path></svg>
</label>
</div>

<div id="gamepadSection" tabindex="0">
<img id="gamepadIcon" alt="gamepad icon" width="40" height="40" src="./pwa-icon.svg"/>
<span id="gamepadDescription">
<span id="gamepadDisabled" class="hidden"><strong>Tip:</strong> Connect a gamepad controller (XBOX/PS3/PS4/etc) to use it to play.</span>
<div id="gamepadSection" class="fullscreen-menu">
<input id="menuBottomLeft" type="checkbox" class="fullscreen-menu-checkbox"/>
<label for="menuBottomLeft" class="fullscreen-menu-toggle-item ui-has-icon" aria-hidden="true">
<svg id="gamepadIcon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" class="ui-icon ui-icon-gamepad" viewBox="0 0 640 512" version="1.1"><path fill-rule="evenodd" d="M480 96H160C71.6 96 0 167.6 0 256s71.6 160 160 160c44.8 0 85.2-18.4 114.2-48h91.5c29 29.6 69.5 48 114.2 48 88.4 0 160-71.6 160-160S568.4 96 480 96zM256 276c0 6.6-5.4 12-12 12h-52v52c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-52H76c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h52v-52c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h52c6.6 0 12 5.4 12 12v40zm184 68c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-80c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" class=""></path></svg>
</label>
<span class="fullscreen-menu-items">
<span id="gamepadDisabled" class="hidden">Connect a gamepad controller (XBOX/PS3/PS4/etc) and play.</span>
<span id="gamepadRecognized" class="hidden">Gamepad is detected. You can play using it now. Just make sure the game is focused.</span>
<span id="gamepadNotRecognized" class="hidden">Gamepad is detected but not recognized. Please submit an Issue on the Repository and we will help get it added</span>
<span id="gamepadNotRecognized" class="hidden">Gamepad is detected but not recognized. Please submit an Issue so it can be added.</span>
</span>
</div>

Expand Down Expand Up @@ -439,8 +510,10 @@
</div>



<a id="sourceCode" href="https://github.com/philschatz/puzzlescript" target="_window">Source Code</a>
<div id="fullscreenBottomRightButtons" class="fullscreen-menu">
<a class="fullscreen-menu-button" href="https://github.com/philschatz/puzzlescript" target="_window">Source Code</a>
</div>


<dialog id="messageDialog">
<p id="messageDialogText"></p>
Expand Down
18 changes: 14 additions & 4 deletions src/browser/ResizeWatcher.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import { _debounce } from '../util'

export enum LIMITED_BY {
WIDTH = 'WIDTH',
HEIGHT = 'HEIGHT'
}

export type ResizeHandler = (width: number, left: number, limitedBy: LIMITED_BY) => void

export default class ResizeWatcher {
private readonly table: HTMLTableElement
private readonly handler: (width: number, left: number) => void
private readonly handler: ResizeHandler
private readonly boundResizeHandler: any
private columns: number
private rows: number

constructor(table: HTMLTableElement, handler: (width: number, left: number) => void) {
constructor(table: HTMLTableElement, handler: ResizeHandler) {
this.table = table
this.handler = handler
this.columns = 1
Expand All @@ -30,15 +37,18 @@ export default class ResizeWatcher {
const availableWidth = Math.min(window.outerWidth, window.innerWidth) - leftWithoutAutoMargins
const availableHeight = Math.min(window.outerHeight, window.innerHeight) - this.table.offsetTop
let newWidth = 0
let limitedBy = LIMITED_BY.WIDTH
if (availableWidth / levelRatio < availableHeight) {
// Width is the limiting factor
newWidth = Math.floor(availableWidth / this.columns / 5) * this.columns * 5
limitedBy = LIMITED_BY.WIDTH
newWidth = Math.floor(availableWidth)
} else {
// Height is the limiting factor
limitedBy = LIMITED_BY.HEIGHT
newWidth = Math.floor(availableHeight * levelRatio / this.rows / 5) * this.rows * 5
}
const leftOffset = availableWidth / 2 - newWidth / 2 - leftWithoutAutoMargins
this.handler(Math.floor(newWidth), Math.floor(leftOffset))
this.handler(Math.floor(newWidth), Math.floor(leftOffset), limitedBy)
}

public dispose() {
Expand Down
Loading

0 comments on commit 1d6f062

Please sign in to comment.