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

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

@ -11,7 +11,8 @@ var constants = {
webpage: { webpage: {
bg_color: "#242424", bg_color: "#242424",
text_color: "#ffffff", 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 // Theme variables specific to the game

14
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 // Document root style object
let _rootCSS = document.body.style; let _rootStyle = document.documentElement.style;
/** /**
* Inject all KVPs from a dictionary into the document * Inject all KVPs from a dictionary into the document
@ -18,12 +25,13 @@ function injectMultiCSS(prefix, source_dict) {
let varname = `--${prefix}-${k}`; let varname = `--${prefix}-${k}`;
_rootCSS += `${varname}:${source_dict[k]};` _rootStyle.setProperty(varname, source_dict[k]);
}); });
} }
/* Mappings from constants file to CSS */ /* Mappings from constants file to CSS */
// If you are adding theme variables to constants.js, // If you are adding theme variables to constants.js,
// make sure to also define them here // make sure to also define them here

15
docs/index.html
View File

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