Improve encoding and parsing
This commit is contained in:
parent
8c26b27d86
commit
bf5fe2a16b
2 changed files with 88 additions and 86 deletions
|
|
@ -96,7 +96,7 @@
|
|||
<p>Like spectrum.avris.it, but a little more detailed.</p>
|
||||
</section>
|
||||
</header>
|
||||
<section class="hideIfReadOnly">
|
||||
<!-- <section class="hideIfReadOnly">
|
||||
<h2>Name</h2>
|
||||
<p>What's your name? This will be used throughout the form.</p>
|
||||
<label>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
placeholder="[Subject Name Here]"
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
</section> -->
|
||||
<section>
|
||||
<h2>Gender</h2>
|
||||
<h3>Identity</h3>
|
||||
|
|
|
|||
170
scripts/index.js
170
scripts/index.js
|
|
@ -1,4 +1,4 @@
|
|||
const nameElement = document.getElementById("spec-name");
|
||||
// const nameElement = document.getElementById("spec-name");
|
||||
|
||||
const sliders = [
|
||||
[
|
||||
|
|
@ -38,16 +38,15 @@ const descs = {
|
|||
descElement: document.getElementById("spec-gen-idt-dsc"),
|
||||
components: {
|
||||
amount: [
|
||||
(val, sub) =>
|
||||
`${sub} does not feel any connection with identifying as any gender.`,
|
||||
(val, sub) =>
|
||||
`${sub} closely identifies ${val}, but they are somewhat disconnected from it.`,
|
||||
(val, sub) =>
|
||||
`${sub} closely identifies ${val}, but they don't really care.`,
|
||||
(val, sub) =>
|
||||
`${sub} identifies ${val}, and they are somewhat connected to it.`,
|
||||
(val, sub) =>
|
||||
`${sub} identifies ${val}, and they are very connected to it.`,
|
||||
(val) => `I do not feel any connection with identifying as any gender.`,
|
||||
(val) =>
|
||||
`I'm somewhat disconnected from the concept of gender, but I closely identify ${val}.`,
|
||||
(val) =>
|
||||
`I don't really care about gender, but I closely identify ${val}.`,
|
||||
(val) =>
|
||||
`I am somewhat connected to the concept of gender, and I identify ${val}.`,
|
||||
(val) =>
|
||||
`I am very connected to the concept of gender, and I identify ${val}.`,
|
||||
],
|
||||
value: [
|
||||
`as male`,
|
||||
|
|
@ -66,8 +65,8 @@ const descs = {
|
|||
descElement: document.getElementById("spec-gen-exp-dsc"),
|
||||
components: {
|
||||
amount: [
|
||||
(val, sub) => `${sub} isn't too occupied with expressing themselves.`,
|
||||
(val, sub) => `${sub} expresses themselves ${val}.`,
|
||||
(val) => `I don't occupy myself too much with gender expression.`,
|
||||
(val) => `I express myself ${val}.`,
|
||||
],
|
||||
value: [
|
||||
`super masculinely`,
|
||||
|
|
@ -88,17 +87,17 @@ const descs = {
|
|||
descElement: document.getElementById("spec-sex-ori-dsc"),
|
||||
components: {
|
||||
amount: [
|
||||
(val, sub) => `${sub} does not feel any sexual attraction.`,
|
||||
(val, sub) => `${sub} feels some sexual attraction, ${val}.`,
|
||||
(val, sub) => `${sub} feels sexual attraction, ${val}.`,
|
||||
(val, sub) => `${sub} feels more sexual attraction than usual, ${val}.`,
|
||||
(val, sub) => `${sub} feels extreme sexual attraction, ${val}.`,
|
||||
(val) => `I do not experience any sexual attraction.`,
|
||||
(val) => `I feel some sexual attraction, ${val}.`,
|
||||
(val) => `I feel an average amount of sexual attraction, ${val}.`,
|
||||
(val) => `I feel more sexual attraction than usual, ${val}.`,
|
||||
(val) => `I feel extreme sexual attraction, ${val}.`,
|
||||
],
|
||||
value: [
|
||||
`to another gender`,
|
||||
`more to another gender than their own`,
|
||||
`more to another gender than my own`,
|
||||
`to any gender`,
|
||||
`more towards their own gender than another`,
|
||||
`more towards my own gender than another`,
|
||||
`towards their own gender`,
|
||||
],
|
||||
},
|
||||
|
|
@ -107,18 +106,17 @@ const descs = {
|
|||
descElement: document.getElementById("spec-rom-ori-dsc"),
|
||||
components: {
|
||||
amount: [
|
||||
(val, sub) => `${sub} does not feel any romantic attraction.`,
|
||||
(val, sub) => `${sub} feels some romantic attraction, ${val}.`,
|
||||
(val, sub) => `${sub} feels romantic attraction, ${val}.`,
|
||||
(val, sub) =>
|
||||
`${sub} feels more romantic attraction than usual, ${val}.`,
|
||||
(val, sub) => `${sub} feels extreme romantic attraction, ${val}.`,
|
||||
(val) => `I do not experience any romantic attraction.`,
|
||||
(val) => `I feel some romantic attraction, ${val}.`,
|
||||
(val) => `I feel an average amount of romantic attraction, ${val}.`,
|
||||
(val) => `I feel more romantic attraction than usual, ${val}.`,
|
||||
(val) => `I feel extreme romantic attraction, ${val}.`,
|
||||
],
|
||||
value: [
|
||||
`to another gender`,
|
||||
`more to another gender than their own`,
|
||||
`more to another gender than my own`,
|
||||
`to any gender`,
|
||||
`more towards their own gender than another`,
|
||||
`more towards my own gender than another`,
|
||||
`towards their own gender`,
|
||||
],
|
||||
},
|
||||
|
|
@ -127,21 +125,19 @@ const descs = {
|
|||
descElement: document.getElementById("spec-rel-att-dsc"),
|
||||
components: {
|
||||
amount: [
|
||||
(val, sub) => `${sub} would be uncomfortable in any relationship.`,
|
||||
(val, sub) =>
|
||||
`${sub} is somewhat uncomfortable with relationships, but they would ${val}.`,
|
||||
(val, sub) => `${sub} would ${val}.`,
|
||||
(val, sub) =>
|
||||
`${sub} would ${val}. They would also be more active in it than usual.`,
|
||||
(val, sub) =>
|
||||
`${sub} would ${val}. They would also be dedicated to it.`,
|
||||
(val) => `I would be uncomfortable in any relationship.`,
|
||||
(val) =>
|
||||
`I ${val} - though I am somewhat uncomfortable with relationships.`,
|
||||
(val) => `I ${val}.`,
|
||||
(val) => `I ${val} - and I would be active in it.`,
|
||||
(val) => `I ${val} - and I would be dedicated to it.`,
|
||||
],
|
||||
value: [
|
||||
`prefer a monogamous relationship`,
|
||||
`prefer a monogamous relationship. However, they can be polygamous if desired`,
|
||||
`be open to any kind of relationship`,
|
||||
`prefer a polygamous relationship. However, they can be monogamous if desired`,
|
||||
`prefer a polygamous relationship`,
|
||||
`prefer monogamous relationships`,
|
||||
`prefer monogamous relationships, but polygamy is OK`,
|
||||
`would be open to any kind of relationship`,
|
||||
`prefer polygamous relationships, but monogamy is OK`,
|
||||
`prefer polygamous relationships`,
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -149,7 +145,6 @@ const descs = {
|
|||
|
||||
function triggerSliders(generate) {
|
||||
sliders.forEach(([slider, override, description, func]) => {
|
||||
console.log(slider, override);
|
||||
var overrideElement = document.getElementById(override);
|
||||
var sliderElement = document.getElementById(slider);
|
||||
|
||||
|
|
@ -180,14 +175,14 @@ function triggerSliders(generate) {
|
|||
});
|
||||
|
||||
// Update description on name change
|
||||
nameElement.addEventListener("input", () => {
|
||||
updateDescription(
|
||||
description[0],
|
||||
sliderElement.value,
|
||||
description[1](overrideElement)
|
||||
);
|
||||
createShareableURL();
|
||||
});
|
||||
// nameElement.addEventListener("input", () => {
|
||||
// updateDescription(
|
||||
// description[0],
|
||||
// sliderElement.value,
|
||||
// description[1](overrideElement)
|
||||
// );
|
||||
// createShareableURL();
|
||||
// });
|
||||
}
|
||||
|
||||
sliderElement.disabled = !func(overrideElement);
|
||||
|
|
@ -206,8 +201,8 @@ function triggerSliders(generate) {
|
|||
function updateDescription(id, val, amt) {
|
||||
var descObject = descs[id];
|
||||
descObject.descElement.innerHTML = descObject.components.amount[amt](
|
||||
descObject.components.value[val],
|
||||
nameElement.value || "[Subject Name Here]"
|
||||
descObject.components.value[val]
|
||||
// nameElement.value || "[Subject Name Here]"
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -222,31 +217,25 @@ var enc_s_ro = document.getElementById("spec-rom-ori");
|
|||
var enc_s_raa = document.getElementById("spec-rel-att-amt");
|
||||
var enc_s_ra = document.getElementById("spec-rel-att");
|
||||
function encode() {
|
||||
// out string len is 3 + 4 + 1 + 4 + 3 + 3 + 3 + 3 + 3 + 3 = 30
|
||||
// 000 0000 0 0000 000 000 000 000 000 000
|
||||
const parse = (s, n) => Math.abs(s).toString(2).padStart(n, "0");
|
||||
var string =
|
||||
parse(enc_s_gia.value, 3) +
|
||||
parse(enc_s_gi.value, 4) +
|
||||
parse(enc_s_geo.checked, 1) +
|
||||
parse(enc_s_ge.value, 4) +
|
||||
parse(enc_s_soa.value, 3) +
|
||||
parse(enc_s_so.value, 3) +
|
||||
parse(enc_s_roa.value, 3) +
|
||||
parse(enc_s_ro.value, 3) +
|
||||
parse(enc_s_raa.value, 3) +
|
||||
parse(enc_s_ra.value, 3);
|
||||
var parsed_string = parseInt(string, 2).toString(16);
|
||||
console.log(string, parsed_string);
|
||||
return parsed_string;
|
||||
var number =
|
||||
(+enc_s_gia.value << (4 + 23)) +
|
||||
(+enc_s_gi.value << (1 + 22)) +
|
||||
(+enc_s_geo.checked << (4 + 18)) +
|
||||
(+enc_s_ge.value << (3 + 15)) +
|
||||
(+enc_s_soa.value << (3 + 12)) +
|
||||
(+enc_s_so.value << (3 + 9)) +
|
||||
(+enc_s_roa.value << (3 + 6)) +
|
||||
(+enc_s_ro.value << (3 + 3)) +
|
||||
(+enc_s_raa.value << 3) +
|
||||
+enc_s_ra.value;
|
||||
|
||||
return number.toString(36);
|
||||
}
|
||||
|
||||
// test pattern (on): 100100011010100100100100100100 246a4924
|
||||
// test pattern (off): 001000010000001000001000001000 8408208
|
||||
|
||||
function decode(string) {
|
||||
var parsed_string = parseInt(string, 16).toString(2).padStart(30, "0");
|
||||
|
||||
function extract_ecfBIN(parsed_string) {
|
||||
enc_s_gia.value = parseInt(parsed_string.substring(0, 3), 2);
|
||||
enc_s_gi.value = parseInt(parsed_string.substring(3, 7), 2);
|
||||
enc_s_geo.checked = parseInt(parsed_string.substring(7, 8), 2);
|
||||
|
|
@ -257,8 +246,18 @@ function decode(string) {
|
|||
enc_s_ro.value = parseInt(parsed_string.substring(21, 24), 2);
|
||||
enc_s_raa.value = parseInt(parsed_string.substring(24, 27), 2);
|
||||
enc_s_ra.value = parseInt(parsed_string.substring(27, 30), 2);
|
||||
}
|
||||
|
||||
triggerSliders(false);
|
||||
function decodev1(string) {
|
||||
var parsed_string = parseInt(string, 16).toString(2).padStart(30, "0");
|
||||
|
||||
extract_ecfBIN(parsed_string);
|
||||
}
|
||||
|
||||
function decodev2(string) {
|
||||
var parsed_string = parseInt(string, 36).toString(2).padStart(30, "0");
|
||||
|
||||
extract_ecfBIN(parsed_string);
|
||||
}
|
||||
|
||||
const s_share_link = document.getElementById("spec-share-link");
|
||||
|
|
@ -267,10 +266,7 @@ function createShareableURL() {
|
|||
const url = new URL(window.location.href);
|
||||
const code = encode();
|
||||
|
||||
url.search = new URLSearchParams({
|
||||
s: code,
|
||||
n: nameElement.value || "[Subject Name Here]",
|
||||
}).toString();
|
||||
url.hash = "2-" + code;
|
||||
|
||||
s_share_link.innerHTML = url.toString();
|
||||
s_share_link.href = url.toString();
|
||||
|
|
@ -278,17 +274,23 @@ function createShareableURL() {
|
|||
|
||||
function parseURL() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get("s") == null) {
|
||||
document.addEventListener("DOMContentLoaded", () => triggerSliders(true));
|
||||
return;
|
||||
const hash = window.location.hash.replace("#", "");
|
||||
if (hash != "") {
|
||||
if (hash.startsWith("2-")) {
|
||||
decodev2(hash.substring(2));
|
||||
return lockSliders();
|
||||
}
|
||||
} else if (urlParams.get("s") != null) {
|
||||
decodev1(urlParams.get("s"));
|
||||
return lockSliders();
|
||||
}
|
||||
nameElement.value = urlParams.get("n") || "";
|
||||
decode(urlParams.get("s"));
|
||||
document.addEventListener("DOMContentLoaded", () => triggerSliders(true));
|
||||
}
|
||||
|
||||
function lockSliders() {
|
||||
triggerSliders(false);
|
||||
sliders.forEach(([slider, override]) => {
|
||||
document.body.classList.add("readOnly");
|
||||
nameElement.classList.add("ro");
|
||||
nameElement.disabled = true;
|
||||
document.getElementById(slider).classList.add("ro");
|
||||
document.getElementById(slider).disabled = true;
|
||||
document.getElementById(override).classList.add("ro");
|
||||
|
|
|
|||
Loading…
Reference in a new issue