Verified Commit 8e83b4f3 authored by ace2k's avatar ace2k

Initial commit

parent 2e0dd521
Pipeline #69488774 passed with stage
in 21 seconds
This diff is collapsed.
![Build Status](https://gitlab.com/pages/plain-html/badges/master/build.svg)
---
Example plain HTML site using GitLab Pages.
Learn more about GitLab Pages at https://pages.gitlab.io and the official
documentation https://docs.gitlab.com/ce/user/project/pages/.
---
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
- [GitLab CI](#gitlab-ci)
- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
- [Did you fork this project?](#did-you-fork-this-project)
- [Troubleshooting](#troubleshooting)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## GitLab CI
This project's static Pages are built by [GitLab CI][ci], following the steps
defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
```
image: alpine:latest
pages:
stage: deploy
script:
- echo 'Nothing to do...'
artifacts:
paths:
- public
only:
- master
```
The above example expects to put all your HTML files in the `public/` directory.
## GitLab User or Group Pages
To use this project as your user/group website, you will need one additional
step: just rename your project to `namespace.gitlab.io`, where `namespace` is
your `username` or `groupname`. This can be done by navigating to your
project's **Settings**.
Read more about [user/group Pages][userpages] and [project Pages][projpages].
## Did you fork this project?
If you forked this project for your own use, please go to your project's
**Settings** and remove the forking relationship, which won't be necessary
unless you want to contribute back to the upstream project.
## Troubleshooting
1. CSS is missing! That means that you have wrongly set up the CSS URL in your
HTML files. Have a look at the [index.html] for an example.
[ci]: https://about.gitlab.com/gitlab-ci/
[index.html]: https://gitlab.com/pages/plain-html/blob/master/public/index.html
[userpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#user-or-group-pages
[projpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#project-pages
## ⚔️ Grow Castle Calculator
**Website: https://growcalc.gitlab.io**
Simple calc I've put together. The formula can calculate upgrade requirements for waves 500 - 100000.
**Preview:**
![preview](https://gitlab.com/growcalc/growcalc.gitlab.io/blob/master/preview.gif)
**Credits:**
Formula by Bamboozle
Icons by &#128154;&#128175;[Icons8](https://icons8.com) & [Microsoft](https://docs.microsoft.com/typography/font-list/segoe-ui)
Background by [Gfycat](https://gfycat.com)
Thumbnail by [RAON GAMES](https://www.raongames.com/)
**App Stores:**
[iTunes](https://apps.apple.com/app/grow-castle/id1133478462)
[Google Play](https://play.google.com/store/apps/details?id=com.raongames.growcastle)
preview.gif

2.52 MB

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 48 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="ArtBoard1" x="0" y="0" width="48" height="96" style="fill:none;"/><g id="greyscale"><rect x="0" y="0" width="48" height="48" style="fill:none;"/><g><rect x="0" y="0" width="48" height="48" style="fill:none;"/><path d="M24,4c-11.022,0 -20,8.978 -20,20c0,11.022 8.978,20 20,20c11.022,0 20,-8.978 20,-20c0,-11.022 -8.978,-20 -20,-20Zm0,4c8.86,0 16,7.14 16,16c0,8.86 -7.14,16 -16,16c-8.86,0 -16,-7.14 -16,-16c0,-8.86 7.14,-16 16,-16Zm-2,6l0,4l4,0l0,-4l-4,0Zm0,8l0,12l4,0l0,-12l-4,0Z" style="fill:#333;fill-rule:nonzero;"/></g></g><g id="filled"><rect x="0" y="48" width="48" height="48" style="fill:none;"/><g><rect x="0" y="48" width="48" height="48" style="fill:none;"/><path d="M24,52c-11.022,0 -20,8.978 -20,20c0,11.022 8.978,20 20,20c11.022,0 20,-8.978 20,-20c0,-11.022 -8.978,-20 -20,-20Zm0,4c8.86,0 16,7.14 16,16c0,8.86 -7.14,16 -16,16c-8.86,0 -16,-7.14 -16,-16c0,-8.86 7.14,-16 16,-16Zm-2,6l0,4l4,0l0,-4l-4,0Zm0,8l0,12l4,0l0,-12l-4,0Z" style="fill:#04c45b;fill-rule:nonzero;"/></g></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 48 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="ArtBoard1" x="0" y="0" width="48" height="96" style="fill:none;"/><g id="greyscale"><rect x="0" y="0" width="48" height="48" style="fill:none;"/><path d="M24,4.8c-10.603,0 -19.2,8.597 -19.2,19.2c0,10.603 8.597,19.2 19.2,19.2c10.603,0 19.2,-8.597 19.2,-19.2c0,-10.603 -8.597,-19.2 -19.2,-19.2Zm1.6,28.8l-3.2,0l0,-11.2l3.2,0l0,11.2Zm-1.6,-15.2c-1.325,0 -2.4,-1.075 -2.4,-2.4c0,-1.325 1.075,-2.4 2.4,-2.4c1.325,0 2.4,1.075 2.4,2.4c0,1.325 -1.075,2.4 -2.4,2.4Z" style="fill:#7a7a7a;fill-rule:nonzero;"/></g><g id="filled"><rect x="0" y="48" width="48" height="48" style="fill:none;"/><path d="M24,52.8c-10.603,0 -19.2,8.597 -19.2,19.2c0,10.603 8.597,19.2 19.2,19.2c10.603,0 19.2,-8.597 19.2,-19.2c0,-10.603 -8.597,-19.2 -19.2,-19.2Zm1.6,28.8l-3.2,0l0,-11.2l3.2,0l0,11.2Zm-1.6,-15.2c-1.325,0 -2.4,-1.075 -2.4,-2.4c0,-1.325 1.075,-2.4 2.4,-2.4c1.325,0 2.4,1.075 2.4,2.4c0,1.325 -1.075,2.4 -2.4,2.4Z" style="fill:#2ecc71;fill-rule:nonzero;"/></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 48 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="ArtBoard1" x="0" y="0" width="48" height="96" style="fill:none;"/><g id="greyscale"><rect x="0" y="0" width="48" height="48" style="fill:none;"/><g id="surface1"><path d="M24,43l-8,-23l16,0l-8,23Z" style="fill:#333;fill-rule:nonzero;"/><path d="M24,43l18,-23l-10,0l-8,23Z" style="fill:#666;fill-rule:nonzero;"/><path d="M37,5l5,15l-10,0l5,-15Z" style="fill:#333;fill-rule:nonzero;"/><path d="M24,43l18,-23l3,8l-21,15Z" style="fill:#ccc;fill-rule:nonzero;"/><path d="M24,43l-18,-23l10,0l8,23Z" style="fill:#666;fill-rule:nonzero;"/><path d="M11,5l-5,15l10,0l-5,-15Z" style="fill:#333;fill-rule:nonzero;"/><path d="M24,43l-18,-23l-3,8l21,15Z" style="fill:#ccc;fill-rule:nonzero;"/></g></g><g id="filled"><rect x="0" y="48" width="48" height="48" style="fill:none;"/><g id="surface2"><path d="M24,91l-8,-23l16,0l-8,23Z" style="fill:#e53935;fill-rule:nonzero;"/><path d="M24,91l18,-23l-10,0l-8,23Z" style="fill:#ff7043;fill-rule:nonzero;"/><path d="M37,53l5,15l-10,0l5,-15Z" style="fill:#e53935;fill-rule:nonzero;"/><path d="M24,91l18,-23l3,8l-21,15Z" style="fill:#ffa726;fill-rule:nonzero;"/><path d="M24,91l-18,-23l10,0l8,23Z" style="fill:#ff7043;fill-rule:nonzero;"/><path d="M11,53l-5,15l10,0l-5,-15Z" style="fill:#e53935;fill-rule:nonzero;"/><path d="M24,91l-18,-23l-3,8l21,15Z" style="fill:#ffa726;fill-rule:nonzero;"/></g></g></svg>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Plain HTML site using GitLab Pages</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
<a href="https://gitlab.com/pages/plain-html/">Repository</a>
<a href="https://gitlab.com/pages/">Other Examples</a>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grow Castle Calculator</title>
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="library/style.css">
<script type="text/javascript" src="library/global.js"></script>
</head>
<noscript>
<div style="display: block; position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; background: #fff; text-align: center; line-height: 50vh; z-index: 5555;">
<p>Well, this wont work without Javascript. &#128542;</p>
</div>
<h1>Hello World!</h1>
<p>
This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
</p>
</body>
</noscript>
<body>
<video autoplay muted loop>
<source src="videos/cat02.webm" type="video/webm">
</video>
<div id="wrapper">
<div id="info">
<a class="shortcuts" id="icon-01" href="https://gitlab.com/growcalc/growcalc.gitlab.io"></a>
<span class="shortcuts" id="icon-02"></span>
</div>
<table id="calc">
<tr>
<th class="calc-header" colspan="2">
<div id="logo"></div>
<div id="decoration"></div>
<div id="title"></div>
</th>
</tr>
<tr>
<td class="calc-var" id="icon-wave">Current Wave</td>
<td>
<input id="wave" type="number" min="0" max="100000" maxlength="6" autocomplete="off" required onfocus="this.value=''" placeholder="500 - 100.000">
<span id="input-reset">&#215;</span>
</td>
</tr>
<tr>
<td class="calc-var" id="icon-castle">Castle Level</td>
<td>
<span class="calc-result" id="castlelevel"></span>
</td>
</tr>
<tr>
<td class="calc-var" id="icon-archer">Archer Level</td>
<td>
<span class="calc-result" id="archerlevel"></span>
</td>
</tr>
<tr>
<td class="calc-var" id="icon-topheroes">Top Heroes</td>
<td>
<span class="calc-result" id="topheroes"></span>
</td>
</tr>
<tr>
<td class="calc-var" id="icon-midheroes">Mid Heroes</td>
<td>
<span class="calc-result" id="midheroes"></span>
</td>
</tr>
<tr>
<th class="calc-footer" colspan="2">
<div id="button" onclick="castleCalc();"></div>
</th>
</tr>
</table>
<div id="version"></div>
</div>
<div id="modalWindow" class="modal">
<div class="modal-content">
<span class="close">&#215;</span>
<h6>Hey there! &#128526;</h6>
<p>
This is a level calculator for the game Grow Castle, which helps you to deternmine whether you need any additional upgrades. I've built it for myself out of pure lazyness and convenience as I was tired of punching in the formula, but ended up sharing since it's based on web technologies.
If you want to report a bug, head over to the <a href="https://gitlab.com/growcalc/growcalc.gitlab.io/issues">Gitlab repo</a>. Cheers!
</p>
<hr style="border-top: 1px dotted #929292; border-bottom: none;">
<h6>Credits:</h6>
<p>
Formula by Bamboozle<br>
Icons by &#128154;&#128175;<a href="https://icons8.com">Icons8</a> &amp; <a href="https://docs.microsoft.com/typography/font-list/segoe-ui">Microsoft</a><br>
Background by <a href="https://gfycat.com">Gfycat</a><br>
Thumbnail by <a href="https://www.raongames.com/">RAON GAMES</a>
</p>
</div>
</div>
</body>
</html>
// Calculator
function castleCalc() {
'use strict';
// Pass user input to var and define limit
var x = document.getElementById('wave').value;
// Define input boundaries
if (x < 500) {
return false;
}
else if (x > 100000) {
return false;
}
// Formula grabbed from reddit
var a = 875;
var b = 0.4987;
var c = -1.076;
var d = Math.pow(10, -6);
var e = Math.pow(x, 2);
// Calculate the values
var ar = (a + b * x + c * d * e).toFixed(0);
var ca = (ar / 2.75).toFixed(0);
var to = (ar / 6.875).toFixed(0);
var mi = (ar / 9.1667).toFixed(0);
// Display the results
document.getElementById('archerlevel').innerHTML = ar;
document.getElementById('castlelevel').innerHTML = ca;
document.getElementById('topheroes').innerHTML = to;
document.getElementById('midheroes').innerHTML = mi;
// Retain input focus on mobile so the native keyboard wont pop up/down on invocation
if (document.documentElement.clientWidth < 1000) {
document.getElementById('wave').focus();
}
}
// Modal
window.onload = function modalWindow() {
'use strict';
var modal = document.getElementById('modalWindow');
var faq = document.getElementById('icon-02');
var closebtn = document.getElementsByClassName('close')[0];
faq.onclick = function() {
modal.style.display = 'block';
};
closebtn.onclick = function() {
modal.style.display = 'none';
};
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
};
};
// Wait for DOM, then beat JS with a stick until it does what I want
document.addEventListener('DOMContentLoaded', function(event) {
'use strict';
// Fetch version from file
var author = 'ace2k';
fetch('VERSION')
.then(response => response.text())
.then ((version) => {
document.getElementById('version').innerHTML = author + ' | v.' + version;
});
// Trigger calc on Enter keyup
var input = document.getElementById('wave');
if(input){
input.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById('button').click();
}
});
}
// Validate and max input value
input.oninput = function () {
if (this.value > 100000) {
this.value = 100000;
}
};
// Reset input button
var resetbtn = document.getElementById('input-reset');
resetbtn.onclick = function() {
input.focus();
input.value = '';
};
// Debug viewport dimensions
/*
var vw = window.innerWidth;
var vh = window.innerHeight;
var bo = document.body;
var ho = document.createElement('div');
var ve = document.createElement('div');
var bx = document.createElement('div');
bo.insertBefore(ho, bo.childNodes[0]);
bo.insertBefore(ve, bo.childNodes[1]);
bo.insertBefore(bx, bo.childNodes[1]);
ho.style.cssText = 'display: block; position: fixed; z-index: 9997; content: ""; min-width: 100vw; height: 0px; border: dashed 1px green; top: 50%;';
ve.style.cssText = 'display: block; position: fixed; z-index: 9998; content: ""; width: 0; min-height: 100vh; border: dashed 1px green; left: 50%;';
bx.style.cssText = 'display: block; position: absolute; z-index: 9999; padding: 10px; width: 100px; border: double 5px #fff; margin-top: calc(50vh - 80px); margin-left: calc(50% - 144px); background: #008000; color: #fff; font-family: monospace, courier; font-size: 12px; text-align: center;';
bx.innerHTML = 'Width: ' + vw + 'px' + '<br>Height: ' + vh + 'px';
*/
});
This diff is collapsed.
body {
font-family: sans-serif;
margin: auto;
max-width: 1280px;
}
.navbar {
background-color: #313236;
border-radius: 2px;
max-width: 800px;
}
.navbar a {
color: #aaa;
display: inline-block;
font-size: 15px;
padding: 10px;
text-decoration: none;
}
.navbar a:hover {
color: #ffffff;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment