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

138
maxima_2025.html
View File

@@ -47,8 +47,8 @@
/* background: rgba(20,20,20,0.5); */
/* backdrop-filter: blur(30px); */
/* transition: transform .5s ease, backdrop-filter 2s ease; */
transition: all .5s ease;
background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
/* 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) 25%, rgba(0,0,0,.75) 75%); */
/* background: rgba(0,0,0,.5); */
@@ -58,15 +58,27 @@
justify-content: center;
align-items: center;
cursor: default;
/* transition: opacity .5s ease; */
}
#header-spacer {
height: var(--headheight);
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
transition: height .5s ease;
}
/*#title-intro-container {
transition: opacity .25s ease;
}*/
#gradient {
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 {
text-align: right;
position:fixed;
@@ -159,13 +171,17 @@
/* #controls.scrolled { */
/* backdrop-filter: blur(30px); */
/* } */
.past-header #title-intro-container {
opacity:0;
}
.bottom #header {
/* background: unset; */
/*.past-header #title-intro-container {
opacity:0;
}*/
/*.past-header #header {
opacity:0;
}*/
.bottom #gradient {
opacity: 0;
}
/*.scrolled #header {
min-height:0;
align-items: start;
@@ -220,7 +236,7 @@
}
.aside.caution {
background: rgba(255,192,0,0.1);
background: rgba(255,160,0,0.1);
font-size: 1em;
}
.aside.caution::before {
@@ -259,6 +275,25 @@
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 {
margin-top:0;
/* margin-bottom:0; */
@@ -530,6 +565,7 @@
</head>
<body class="show-c1 show-c2 show-c3 show-c4">
<div id="bg"></div>
<div id="gradient"></div>
<div id="header">
<div id="title-intro-container">
@@ -561,6 +597,9 @@
</div>
</div>
</div>
<div id="header-spacer"></div>
<div id="controls">
<label id="complexity-label">
<div class="complexity-text">
@@ -573,9 +612,6 @@
</label>
</div>
</div>
<div id="header-spacer"></div>
<div id="footer">
<div id="logo">
<img src="images/uzalu.png"></img>
@@ -594,6 +630,7 @@
<div class="section">
<h2>Character Sheet</h2>
<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">
Characters are recorded using only 2 types of information: Modifiers and Sources.
<br />
@@ -642,6 +679,43 @@
</td>
</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">
<td class="mono">
@@ -712,7 +786,7 @@
<div class="section">
<h3 id="modifiers">Modifiers</h3>
<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">
Modifier names define the 'scope' they are relevant in.
@@ -942,6 +1016,7 @@
<div class="section">
<h2>Performance</h2>
<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">
Find Modifiers which are relevant to this Check.
@@ -1003,12 +1078,24 @@
</div>
<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>
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>.
<span class="c4 minor">
<br />
<span class="c4 minor"> If the Storyteller agrees, any RNG method the Storyteller can see can be used.</span>
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>
@@ -1170,6 +1257,7 @@
const display = document.querySelector("#complexity-display");
const input = document.querySelector("#complexity");
const body = document.querySelector("body");
const rt = document.querySelector(":root");
function updateDisplay(){
display.textContent = input.value;
}
@@ -1206,6 +1294,7 @@
input.addEventListener("input", updateDisplay);
input.addEventListener("change", updateTexts);
updateTexts();
setTimeout(updateTexts,100);
const bg = document.querySelector("#bg");
bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 23) + ".jpg\")";
@@ -1269,12 +1358,21 @@
body.classList.remove("past-header");
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);
setTimeout(updateHeaderState,50);
const rt = document.querySelector(":root");
var currentHeaderSpace = 0;
function updateHeaderSpacer() {
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
- the word "health", given its wide use in other contexts, may imply death at zero
- 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