uzalu/Maxima_2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

various: visuals, examples, rolls

Browse Source 
Gameplay:
- changed "Boost" section to "Roll", including necessary detail

Page:
- background gradient fades more gradually
- extended character sheet example
- added an "important" aside format

some more minor changes not listed here
This commit is contained in:
uzalu
2025-05-03 08:15:42 +01:00
parent 5e6b978385
commit effffc56a5
2 changed files with 148 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
maxima_2025.html
View File

@@ -47,8 +47,8 @@
/* background: rgba(20,20,20,0.5); */ /* background: rgba(20,20,20,0.5); */
/* backdrop-filter: blur(30px); */ /* backdrop-filter: blur(30px); */
/* transition: transform .5s ease, backdrop-filter 2s ease; */ /* transition: transform .5s ease, backdrop-filter 2s ease; */
transition: all .5s ease; /* transition: all 2s ease; */
background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); /* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */ /* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 25%, rgba(0,0,0,.75) 75%); */ /* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 25%, rgba(0,0,0,.75) 75%); */
/* background: rgba(0,0,0,.5); */ /* background: rgba(0,0,0,.5); */
@@ -58,15 +58,27 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: default; cursor: default;
/* transition: opacity .5s ease; */
} }
#header-spacer { #header-spacer {
height: var(--headheight); height: var(--headheight);
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */ /* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
transition: height .5s ease; transition: height .5s ease;
} }
/*#title-intro-container { #gradient {
transition: opacity .25s ease; position:fixed;
}*/ width:100%;
background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
height:100vh;
transition: opacity .5s ease;
opacity: calc(1 - (var(--scrollratioboundedslower) / 2));
}
#title-intro-container {
opacity: calc(1 - var(--scrollratioboundedslow));
/* transition: filter .5s ease; */
/* backdrop-filter: blur(5px); */
/* border-radius: 10pt; */
}
#controls { #controls {
text-align: right; text-align: right;
position:fixed; position:fixed;
@@ -159,13 +171,17 @@
/* #controls.scrolled { */ /* #controls.scrolled { */
/* backdrop-filter: blur(30px); */ /* backdrop-filter: blur(30px); */
/* } */ /* } */
.past-header #title-intro-container {
/*.past-header #title-intro-container {
opacity:0; opacity:0;
} }*/
.bottom #header { /*.past-header #header {
/* background: unset; */ opacity:0;
}*/
.bottom #gradient {
opacity: 0; opacity: 0;
} }
/*.scrolled #header { /*.scrolled #header {
min-height:0; min-height:0;
align-items: start; align-items: start;
@@ -220,7 +236,7 @@
} }
.aside.caution { .aside.caution {
background: rgba(255,192,0,0.1); background: rgba(255,160,0,0.1);
font-size: 1em; font-size: 1em;
} }
.aside.caution::before { .aside.caution::before {
@@ -259,6 +275,25 @@
font-size: .8em; font-size: .8em;
} }
.aside.important {
/* background: rgba(255,255,0,0.1); */
background: linear-gradient(to bottom right, rgba(255,255,0,0.2), rgba(255,255,0,0.02) 50%);
font-size: 1em;
font-weight: bold;
}
.aside.important::before {
content: 'Important';
/* margin-left:8pt; */
/* margin-right:8pt; */
/* color: rgba(255,255,255,.35); */
color: rgba(255,255,128,.75);
letter-spacing: .35em;
text-transform: uppercase;
font-size: .75em;
margin-bottom:.25em;
display:block;
}
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
margin-top:0; margin-top:0;
/* margin-bottom:0; */ /* margin-bottom:0; */
@@ -530,6 +565,7 @@
</head> </head>
<body class="show-c1 show-c2 show-c3 show-c4"> <body class="show-c1 show-c2 show-c3 show-c4">
<div id="bg"></div> <div id="bg"></div>
<div id="gradient"></div>
<div id="header"> <div id="header">
<div id="title-intro-container"> <div id="title-intro-container">
@@ -561,21 +597,21 @@
</div> </div>
</div> </div>
<div id="controls">
<label id="complexity-label">
<div class="complexity-text">
Detail: <div id="complexity-display"></div>/10
</div>
<input type="range" id="complexity" value="5" min="1" max="10" />
<div id="complexity-subtext">
Drag this slider to change the document's detail level
</div>
</label>
</div>
</div> </div>
<div id="header-spacer"></div> <div id="header-spacer"></div>
<div id="controls">
<label id="complexity-label">
<div class="complexity-text">
Detail: <div id="complexity-display"></div>/10
</div>
<input type="range" id="complexity" value="5" min="1" max="10" />
<div id="complexity-subtext">
Drag this slider to change the document's detail level
</div>
</label>
</div>
<div id="footer"> <div id="footer">
<div id="logo"> <div id="logo">
<img src="images/uzalu.png"></img> <img src="images/uzalu.png"></img>
@@ -594,6 +630,7 @@
<div class="section"> <div class="section">
<h2>Character Sheet</h2> <h2>Character Sheet</h2>
<p class="c10 aside notes">This section requires more work, particularly expanding the example table.</p> <p class="c10 aside notes">This section requires more work, particularly expanding the example table.</p>
<p class="c2 aside caution">Some of the contents of this section are in flux.</p>
<p class="c2"> <p class="c2">
Characters are recorded using only 2 types of information: Modifiers and Sources. Characters are recorded using only 2 types of information: Modifiers and Sources.
<br /> <br />
@@ -642,6 +679,43 @@
</td> </td>
</tr> </tr>
<tr class="c4">
<td class="mono">
Arthritis -1
</td>
<td class="sbs-desc">
A <a href="#modifiers">Modifier</a> with scope "Arthritis", and a Malus of -1. <br />
<span>This will reduce the Character's performance in <a href="#checks">Checks</a> which suffer from "Arthritis" by 1 point.</span>
</td>
</tr>
<tr class="c4">
<td class="mono">
Fat +3 -3
</td>
<td class="sbs-desc">
A <a href="#modifiers">Modifier</a> with scope "Fat", a Bonus of +3, and a Malus of -3. <br />
<span>This will improve the Character's performance in <a href="#checks">Checks</a> which benefit from "Fat" by 3 points.</span>
<br />
<span>This will reduce the Character's performance in <a href="#checks">Checks</a> which suffer from "Fat" by 3 points.</span>
<br />
For example, if the Check relates to bodily insulation, the +3 applies, but if the check relates to mobility, the -3 applies.
</td>
</tr>
<tr class="c4">
<td class="mono">
- Positive and Negative must be equal
</td>
<td class="sbs-desc">
An official clarification line, defining the bounds of the above line.
<br />
The Storyteller must approve all lines starting with a single dash.
<br />
For user-notes, which don't require approval, use two dashes.
</td>
</tr>
<tr class="c2"> <tr class="c2">
<td class="mono"> <td class="mono">
@@ -712,7 +786,7 @@
<div class="section"> <div class="section">
<h3 id="modifiers">Modifiers</h3> <h3 id="modifiers">Modifiers</h3>
<p class="c10 aside notes">This section requires more work.</p> <p class="c10 aside notes">This section requires more work.</p>
<p>Modifiers are any attribute of a Character which increases or decreases their chance of passing a Check.<span class="minor"><br />For example: skills, traits, damage, buff and debuff effects, etc.</span></p> <p>Modifiers are any attribute of a Character which increases or decreases their chance of passing a <a href="#checks">Check</a>.<span class="minor"><br />For example: skills, traits, damage, buff and debuff effects, etc.</span></p>
<p class="c3"> <p class="c3">
Modifier names define the 'scope' they are relevant in. Modifier names define the 'scope' they are relevant in.
@@ -942,6 +1016,7 @@
<div class="section"> <div class="section">
<h2>Performance</h2> <h2>Performance</h2>
<p class="c10 aside notes">This section requires more work, particularly in presentation.</p> <p class="c10 aside notes">This section requires more work, particularly in presentation.</p>
<p class="c10 aside notes">This section, along with the term "Success Rating" may be renamed "Score" for conciseness, clarity, and simplicity.</p>
<p class="c1"> <p class="c1">
Find Modifiers which are relevant to this Check. Find Modifiers which are relevant to this Check.
@@ -1003,12 +1078,24 @@
</div> </div>
<div class="section"> <div class="section">
<h3>Boost (Optional)</h3> <h3>Roll</h3>
<p class="c2 aside">
The Storyteller may waive the Roll requirement if the Character's Success Rating is already enough to easily pass this Check.
</p>
<p> <p>
The Character may choose to improve their chances by rolling 6-sided dice. Roll one-or-more 6-sided dice for the Character<span class="ce1"> if they might fail this Check</span>.
<br />
<span class="c4 minor"> If the Storyteller agrees, any RNG method the Storyteller can see can be used.</span> <span class="c4 minor">
<br />
If the Character is controlled by a Player, that Player should perform the dice-roll.
</span>
<span class="c4 minor">
<br />
If the Storyteller agrees, any RNG method the Storyteller can see can be used.
</span>
</p> </p>
<p> <p>
@@ -1170,6 +1257,7 @@
const display = document.querySelector("#complexity-display"); const display = document.querySelector("#complexity-display");
const input = document.querySelector("#complexity"); const input = document.querySelector("#complexity");
const body = document.querySelector("body"); const body = document.querySelector("body");
const rt = document.querySelector(":root");
function updateDisplay(){ function updateDisplay(){
display.textContent = input.value; display.textContent = input.value;
} }
@@ -1206,6 +1294,7 @@
input.addEventListener("input", updateDisplay); input.addEventListener("input", updateDisplay);
input.addEventListener("change", updateTexts); input.addEventListener("change", updateTexts);
updateTexts(); updateTexts();
setTimeout(updateTexts,100);
const bg = document.querySelector("#bg"); const bg = document.querySelector("#bg");
bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 23) + ".jpg\")"; bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 23) + ".jpg\")";
@@ -1269,12 +1358,21 @@
body.classList.remove("past-header"); body.classList.remove("past-header");
pastHeaderSpace = 0; pastHeaderSpace = 0;
} }
let scrollEnd = body.scrollHeight - body.clientHeight;
let scrollTop = body.scrollTop;
let scrollEndBounded = scrollEnd - body.clientHeight;
let scrollStartBounded = body.clientHeight;
let scrollTopBounded = scrollTop - scrollStartBounded;
// rt.style.setProperty("--scrollpercent",(100 / scrollEnd) * scrollTop);
let scrollRatioBounded = Math.min(1,(1 / (scrollEndBounded - scrollStartBounded)) * scrollTopBounded);
rt.style.setProperty("--scrollratiobounded",scrollRatioBounded);
rt.style.setProperty("--scrollratioboundedslow",scrollRatioBounded.toFixed(2));
rt.style.setProperty("--scrollratioboundedslower",scrollRatioBounded.toFixed(1));
} }
document.addEventListener("scroll", updateHeaderState); document.addEventListener("scroll", updateHeaderState);
setTimeout(updateHeaderState,50); setTimeout(updateHeaderState,50);
const rt = document.querySelector(":root");
var currentHeaderSpace = 0; var currentHeaderSpace = 0;
function updateHeaderSpacer() { function updateHeaderSpacer() {
let oh = header.offsetHeight; let oh = header.offsetHeight;

21
maxima_2025_notes.md
View File

@@ -229,3 +229,24 @@ health
- some principled way to prevent acquiring this must exist, or at least a clear special case - some principled way to prevent acquiring this must exist, or at least a clear special case
- the word "health", given its wide use in other contexts, may imply death at zero - the word "health", given its wide use in other contexts, may imply death at zero
- perhaps it's time to bring back "vigor"? - perhaps it's time to bring back "vigor"?
2025-04-27
over-flexible repetition of checks
- players can try a check once to see if they can succeed without the boost, then if not, try it again
- this is only applicable to some checks, but it is a problem
- sometimes the character would be able to determine to difficulty in these cases, but not always
when rating things, eg. modifiers
- three scales to consider:
- as proportion of this character's total pool
- for comparing to other characters of the same type
- for comparing on a universal scale.
- all 3 of these have to be factored in, with the third one being the most vital as its what checks are compared with
positive/negative modifiers, features
- it is very rare that a modifier needs both, where they are not equal
- besides which, whether some rating is positive or negative is context-dependant
- thus, perhaps modifiers should just use a single number to determine how strongly the term applies as a description
- ! main problem with this is that it makes it harder to reward players for taking negative modifiers, though the current method to do that is not accurate
- by this schema, modifiers become more "features", since they are simply words used to describe the character, instead of directly defining its strengths and weaknesses