Improve encoding and parsing

index.html

@@ -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>

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) =>
+        (val) => `I do not feel any connection with identifying as any gender.`,
-          `${sub} does not feel any connection with identifying as any gender.`,
+        (val) =>
-        (val, sub) =>
+          `I'm somewhat disconnected from the concept of gender, but I closely identify ${val}.`,
-          `${sub} closely identifies ${val}, but they are somewhat disconnected from it.`,
+        (val) =>
-        (val, sub) =>
+          `I don't really care about gender, but I closely identify ${val}.`,
-          `${sub} closely identifies ${val}, but they don't really care.`,
+        (val) =>
-        (val, sub) =>
+          `I am somewhat connected to the concept of gender, and I identify ${val}.`,
-          `${sub} identifies ${val}, and they are somewhat connected to it.`,
+        (val) =>
-        (val, sub) =>
+          `I am very connected to the concept of gender, and I identify ${val}.`,
-          `${sub} identifies ${val}, and they are very connected to it.`,
       ],
       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) => `I don't occupy myself too much with gender expression.`,
-        (val, sub) => `${sub} expresses themselves ${val}.`,
+        (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) => `I do not experience any sexual attraction.`,
-        (val, sub) => `${sub} feels some sexual attraction, ${val}.`,
+        (val) => `I feel some sexual attraction, ${val}.`,
-        (val, sub) => `${sub} feels sexual attraction, ${val}.`,
+        (val) => `I feel an average amount of sexual attraction, ${val}.`,
-        (val, sub) => `${sub} feels more sexual attraction than usual, ${val}.`,
+        (val) => `I feel more sexual attraction than usual, ${val}.`,
-        (val, sub) => `${sub} feels extreme sexual attraction, ${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) => `I do not experience any romantic attraction.`,
-        (val, sub) => `${sub} feels some romantic attraction, ${val}.`,
+        (val) => `I feel some romantic attraction, ${val}.`,
-        (val, sub) => `${sub} feels romantic attraction, ${val}.`,
+        (val) => `I feel an average amount of romantic attraction, ${val}.`,
-        (val, sub) =>
+        (val) => `I feel more romantic attraction than usual, ${val}.`,
-          `${sub} feels more romantic attraction than usual, ${val}.`,
+        (val) => `I feel extreme romantic attraction, ${val}.`,
-        (val, sub) => `${sub} feels 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) => `I would be uncomfortable in any relationship.`,
-        (val, sub) =>
+        (val) =>
-          `${sub} is somewhat uncomfortable with relationships, but they would ${val}.`,
+          `I ${val} - though I am somewhat uncomfortable with relationships.`,
-        (val, sub) => `${sub} would ${val}.`,
+        (val) => `I ${val}.`,
-        (val, sub) =>
+        (val) => `I ${val} - and I would be active in it.`,
-          `${sub} would ${val}. They would also be more active in it than usual.`,
+        (val) => `I ${val} - and I would be dedicated to it.`,
-        (val, sub) =>
-          `${sub} would ${val}. They would also be dedicated to it.`,
       ],
       value: [
-        `prefer a monogamous relationship`,
+        `prefer monogamous relationships`,
-        `prefer a monogamous relationship. However, they can be polygamous if desired`,
+        `prefer monogamous relationships, but polygamy is OK`,
-        `be open to any kind of relationship`,
+        `would be open to any kind of relationship`,
-        `prefer a polygamous relationship. However, they can be monogamous if desired`,
+        `prefer polygamous relationships, but monogamy is OK`,
-        `prefer a polygamous relationship`,
+        `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", () => {
+      // nameElement.addEventListener("input", () => {
-        updateDescription(
+      //   updateDescription(
-          description[0],
+      //     description[0],
-          sliderElement.value,
+      //     sliderElement.value,
-          description[1](overrideElement)
+      //     description[1](overrideElement)
-        );
+      //   );
-        createShareableURL();
+      //   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],
+    descObject.components.value[val]
-    nameElement.value || "[Subject Name Here]"
+    // 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
+  var number =
-  // 000 0000 0 0000 000 000 000 000 000 000
+    (+enc_s_gia.value << (4 + 23)) +
-  const parse = (s, n) => Math.abs(s).toString(2).padStart(n, "0");
+    (+enc_s_gi.value << (1 + 22)) +
-  var string =
+    (+enc_s_geo.checked << (4 + 18)) +
-    parse(enc_s_gia.value, 3) +
+    (+enc_s_ge.value << (3 + 15)) +
-    parse(enc_s_gi.value, 4) +
+    (+enc_s_soa.value << (3 + 12)) +
-    parse(enc_s_geo.checked, 1) +
+    (+enc_s_so.value << (3 + 9)) +
-    parse(enc_s_ge.value, 4) +
+    (+enc_s_roa.value << (3 + 6)) +
-    parse(enc_s_soa.value, 3) +
+    (+enc_s_ro.value << (3 + 3)) +
-    parse(enc_s_so.value, 3) +
+    (+enc_s_raa.value << 3) +
-    parse(enc_s_roa.value, 3) +
+    +enc_s_ra.value;
-    parse(enc_s_ro.value, 3) +
+
-    parse(enc_s_raa.value, 3) +
+  return number.toString(36);
-    parse(enc_s_ra.value, 3);
-  var parsed_string = parseInt(string, 2).toString(16);
-  console.log(string, parsed_string);
-  return parsed_string;
 }
 
 // test pattern (on): 100100011010100100100100100100 246a4924
 // test pattern (off): 001000010000001000001000001000 8408208
 
-function decode(string) {
+function extract_ecfBIN(parsed_string) {
-  var parsed_string = parseInt(string, 16).toString(2).padStart(30, "0");
-
   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({
+  url.hash = "2-" + code;
-    s: code,
-    n: nameElement.value || "[Subject Name Here]",
-  }).toString();
 
   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) {
+  const hash = window.location.hash.replace("#", "");
-    document.addEventListener("DOMContentLoaded", () => triggerSliders(true));
+  if (hash != "") {
-    return;
+    if (hash.startsWith("2-")) {
+      decodev2(hash.substring(2));
+      return lockSliders();
     }
-  nameElement.value = urlParams.get("n") || "";
+  } else if (urlParams.get("s") != null) {
-  decode(urlParams.get("s"));
+    decodev1(urlParams.get("s"));
+    return lockSliders();
+  }
+  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");