chemicalcrux
/
stroll
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 11 Wiki Aktiviteter
Bläddra i källkod

Added a dark mode with persistent storage

tags/v0.7.0
Fen Dweller 7 år sedan
förälder
fcc476f8b7
incheckning
2bfe268147
3 ändrade filer med 85 tillägg och 19 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +32
    -0
      game.js
  2. +21
    -17
      stroll.html
  3. +32
    -2
      style.css

+ 32
- 0
game.js Visa fil

@@ -2,6 +2,27 @@

/*jshint browser: true*/

// do da dark mode

let dark = false;

function toggleDarkMode(e) {
dark = !dark;
setDarkMode(dark);
}

function setDarkMode(darkMode) {
dark = darkMode;
window.localStorage.setItem("dark-mode",dark);
if (dark) {
document.querySelector("body").classList.remove("light");
document.querySelector("body").classList.add("dark");
} else {
document.querySelector("body").classList.remove("dark");
document.querySelector("body").classList.add("light");
}
}

let started = false;

let strolling = false;
@@ -2434,6 +2455,14 @@ function actionTab(e) {

window.addEventListener('load', function(event) {

(function() {
let storage = window.localStorage;

if (storage.getItem("dark-mode") != null) {
setDarkMode(storage.getItem("dark-mode") === "true");
}
}());

victims["stomped"] = initVictims();
victims["tailslapped"] = initVictims();
victims["tailmaw'd"] = initVictims();
@@ -2494,6 +2523,9 @@ window.addEventListener('load', function(event) {
document.getElementById("button-arousal").addEventListener("click",toggle_arousal);
document.getElementById("button-grow-lots").addEventListener("click",grow_lots);

document.getElementById("button-dark-mode-options").addEventListener("click",toggleDarkMode);
document.getElementById("button-dark-mode-game").addEventListener("click",toggleDarkMode);

document.getElementById("button-amount-1").addEventListener("click",function() { grow_pick(1); });
document.getElementById("button-amount-5").addEventListener("click",function() { grow_pick(5); });
document.getElementById("button-amount-10").addEventListener("click",function() { grow_pick(10); });


+ 21
- 17
stroll.html Visa fil

@@ -9,7 +9,7 @@
<script src="recursive-desc.js"></script>
<script src="game.js"></script>
</head>
<body>
<body class="light">
<div class="game-area">
<div class="sidebar" id="stat-container">
<div class="stat-header-self" id="stats-self">
@@ -68,11 +68,12 @@
<button class="stat-button" id="button-units">Units: Metric</button>
<button class="stat-button" id="button-verbose">Verbose</button>
<button class="stat-button" id="button-grow-lots">SUPER BIG</button>
<button class="stat-button" id="button-dark-mode-game">Toggle Dark Mode</button>
</div>
</div>
<div id="log-area">
<div id="log">
<div>Welcome to Stroll 0.5.1</div>
<div>Welcome to Stroll 0.5.2</div>
<div><b>This game features 18+ content</b></div>
<div><a href="https://chemicalcrux.org/stroll">Changelog</a></div>
<div>It's a nice day for a walk</div>
@@ -128,11 +129,12 @@


<div class="option-container" id="option-panel">
<p>Welcome to Stroll 0.5.1</p>
<p>Welcome to Stroll 0.5.2</p>
<p><b>This game features 18+ content</b></p>
<a href="https://chemicalcrux.org/stroll">Changelog</a>
<br>
<div id="custom-species">
<button class="stat-button" id="button-dark-mode-options">Toggle Dark Mode</button>
<p>Build your Character (leave blank for defaults)</p>
<form id="custom-species-form" name="custom-species-form">
<ul class="flex-outer">
@@ -292,20 +294,22 @@
<label for="baseBreastDiameter">Breast diameter</label>
<input type="number" name="baseBreastDiameter" placeholder="0.1"/><br>
</li>
<ul class="flex-outer">
Lactation:
<input type="checkbox" checked="true" name="lactationEnabled"/><br>
<div class="reveal-if-active">
<li>
<label for="lactationFactor" class="has-tooltip" title="scales how much milk is released with each squeeze">Lactation ratio</label>
<input type="number" name="lactationFactor" placeholder="0.25"/><br>
</li>
<li>
<label for="lactationScale">Milk production factor</label>
<input type="number" name="lactationScale" placeholder="1"/><br>
</li>
</div>
</ul>
<div>
<ul class="flex-outer">
Lactation:
<input type="checkbox" checked="true" name="lactationEnabled"/><br>
<div class="reveal-if-active">
<li>
<label for="lactationFactor" class="has-tooltip" title="scales how much milk is released with each squeeze">Lactation ratio</label>
<input type="number" name="lactationFactor" placeholder="0.25"/><br>
</li>
<li>
<label for="lactationScale">Milk production factor</label>
<input type="number" name="lactationScale" placeholder="1"/><br>
</li>
</div>
</ul>
</div>
<li>
<label for="breastVore">Breast vore</label>
<input type="checkbox" checked="true" name="breastVore"/><br>


+ 32
- 2
style.css Visa fil

@@ -1,9 +1,31 @@

body {
.light {
color: #000;
background: #eee;
font-family: Arial;
}

.dark {
color: #eee;
background: #111;
font-family: Arial;
}


body.dark > div > div > div > form input {
color: #eee;
background: #444;
}

body.dark button {
color: #eee;
background: #111;
}

body.dark div {
background: #111;
}

.game-area {
display: flex;
margin: auto;
@@ -26,12 +48,20 @@ body {
display:none;
}

#log {
body.light #log {
height: 900px;
overflow: auto;
color: #000;
background-color: #fff;
}

body.dark #log {
height: 900px;
overflow: auto;
color: #eee;
background-color: #111;
}

.stat-header-self {
font-weight: bold;
font-size: 150%;


Write Förhandsgranska
Laddar…
Avbryt
Spara