evan/ludum-dare-46
Archived
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CSS mappings and docs

Browse Source
This commit is contained in:
Evan Pratten 2020-04-17 18:36:29 -04:00
parent e9a5521dfc
commit 516ff1b846
No known key found for this signature in database
GPG Key ID: 93AC7B3D071356D3
4 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_sass/ui/page-loader.scss
View File

@ -9,8 +9,8 @@
height: 99.9vh;
width: 99.9vw;
overflow: hidden;
background-color: #242424;
color: white;
background-color: var(--theme-webpage-bg_color);
color: var(--theme-webpage-text_color);
}
.disappear {
@ -32,7 +32,7 @@
top: calc(50% - 40px);
display: inline-block;
vertical-align: text-bottom;
border: 8px solid #ff4136;
border: 8px solid var(--theme-webpage-loading_animation_color);;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border .75s linear infinite;

3
docs/assets/js/constants.js
View File

@ -11,7 +11,8 @@ var constants = {
webpage: {
bg_color: "#242424",
text_color: "#ffffff",
canvas_border: "rgb(63, 63, 63)"
canvas_border: "rgb(63, 63, 63)",
loading_animation_color: "#ff4136"
},
// Theme variables specific to the game

20
docs/assets/js/injection/cssinjector.js
View File

@ -1,6 +1,13 @@
/**
* This file contains code that injects variables from constants.js
* into the document root as CSS variables or use inside style scripts.
*
* To add a new dictionary of variables to the document, just add a
* new line to the "mappings" section
*/
// Document root theme
let _rootCSS = document.body.style;
// Document root style object
let _rootStyle = document.documentElement.style;
/**
* Inject all KVPs from a dictionary into the document
@ -17,15 +24,16 @@ function injectMultiCSS(prefix, source_dict) {
Object.keys(source_dict).forEach((k) => {
let varname = `--${prefix}-${k}`;
_rootCSS += `${varname}:${source_dict[k]};`
_rootStyle.setProperty(varname, source_dict[k]);
});
}
/* Mappings from constants file to CSS */
// If you are adding theme variables to constants.js,
// make sure to also define them here
injectMultiCSS("theme-webpage", constants.ui.theme.webpage);
injectMultiCSS("theme-game", constants.ui.theme.game);
injectMultiCSS("theme-game", constants.ui.theme.game);

15
docs/index.html
View File

@ -5,14 +5,14 @@
<title>title</title>
<style>
html {
background-color: #242424;
color: white;
background-color: var(--theme-webpage-bg_color);
color: var(--theme-webpage-text_color);
}
canvas {
position:absolute;
top:0;bottom:0;right:0;left:0;
margin:auto;
border: 5px solid rgb(63, 63, 63);
border: 5px solid var(--theme-webpage-canvas_border);
border-radius: 10px;
}
</style>
@ -20,10 +20,19 @@
</head>
<body>
<canvas width="1000" height="800" id="game"></canvas>
<!-- Graphics Library -->
<script src="assets/js/game.js"></script>
<!-- Constants & Globals -->
<script src="assets/js/constants.js"></script>
<script src="assets/js/utils.js"></script>
<!-- Webpage -->
<script src="assets/js/injection/cssinjector.js"></script>
<script src="assets/js/preloader/preloader.js"></script>
<!-- Game -->
<script src="assets/js/index.js"></script>
</body>
</html>