chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MTG PWA

Browse Source
This commit is contained in:
chris 2022-09-15 20:04:38 -04:00
parent 92496a85de
commit 5ffe99e150
4 changed files with 68 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
MTG/index.html
View File

@ -18,6 +18,7 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="/menu/menu.css" /> <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="manifest" href="mainfest.json" />
</head> </head>
<body> <body>
@ -26,6 +27,22 @@
<div id="nav_menu"> <div id="nav_menu">
</div> </div>
</nav> </nav>
<script>
if('serviceWorker' in navigator) {
window.addEventListiner('load', () => {
navigator.serviceWorker.register('sw.js')
.then((registration) => {
console.log(`service worker registered succesfully ${registration}`)
})
.catch((err) => {
console.log(`Error registring ${err}`)
})
})
} else {
console.log(`Service worker is not supported in this browser.`)
}
</script>
<div id="buttonWrapper"> <div id="buttonWrapper">
<div onclick="removePlayer()" id="removePlayer" class="buttons"><i class="fas fa-minus-circle"></i></div> <div onclick="removePlayer()" id="removePlayer" class="buttons"><i class="fas fa-minus-circle"></i></div>
<div onclick="reset()" id="reset" class="buttons"><i class="fas fa-undo-alt"></i><span class="buttonText"></span></div> <div onclick="reset()" id="reset" class="buttons"><i class="fas fa-undo-alt"></i><span class="buttonText"></span></div>

25
MTG/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "MTG Life Counter",
"name": "MTG Life Counter",
"icons": [
{
"src": "icons/favicon.ico",
"sizes": "64x64",
"type": "image/x-icon"
},
{
"src": "icons/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "icons/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

20
MTG/style.css
View File

@ -16,26 +16,30 @@ background: radial-gradient(circle, #792f22 0%, #4f644f 47%, rgb(108, 127, 131)
height: 100vh height: 100vh
} }
html{
height: 100vh;
}
#full{ #full{
color:rgb(165, 162, 162); color:rgb(165, 162, 162);
} }
main { main {
display: flex; display: flex;
flex-shrink: 1;
justify-content: space-evenly; justify-content: space-evenly;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
Verdana, sans-serif; Verdana, sans-serif;
flex-wrap: wrap; flex-wrap: wrap;
width: 100vw; width: 100vw;
height: 100vh;
position: relative; position: relative;
margin-top: 70px; margin-top: 70px;
} }
.name { .name {
font-size: 3em; font-size: 2rem;
display: flex; display: flex;
margin: 0 0 20px; margin: 0 0 10px;
padding: 10px 0; padding: 10px 0;
opacity: 0.9; opacity: 0.9;
background-color: #eee; background-color: #eee;
@ -57,7 +61,7 @@ main {
text-shadow: 0 1px 0 #eee; text-shadow: 0 1px 0 #eee;
background-color: #eee; background-color: #eee;
width: auto; width: auto;
min-height: 75px; /* min-height: px; */
justify-content: center; justify-content: center;
align-content: center; align-content: center;
} }
@ -83,13 +87,16 @@ main {
/* padding: 10px 0; */ /* padding: 10px 0; */
text-shadow: 0 1px 0 #eee; text-shadow: 0 1px 0 #eee;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* height:250px; */ /* height:2rem; */
height: calc(100%-35px);
min-width: auto; min-width: auto;
font-size: 3em; font-size: 3em;
user-select: none; user-select: none;
height:fit-content /* margin-bottom: -50px; */
} }
.life div { .life div {
@ -102,6 +109,7 @@ main {
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
margin: min(1rem, 1rem); margin: min(1rem, 1rem);
margin-bottom: -100px;
/* max-width: max-content; */ /* max-width: max-content; */
width: clamp(min-content, max-content, max-content+1rem); width: clamp(min-content, max-content, max-content+1rem);
/* max-width: 25%; */ /* max-width: 25%; */

12
MTG/sw.js Normal file
View File

@ -0,0 +1,12 @@
self.addEventListener('install', () => {
console.log(`installing service worker`);
})
self.addEventListener('activate', () => {
console.log(`activating service worker`);
})
self.addEventListener('fetch', event => {
console.log(`fetching...
${event.request.url}`);
})