results.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838
  1. "use strict";
  2. var urlToCopy = document.getElementById("urlToCopy");
  3. if (urlToCopy) {
  4. urlToCopy.innerHTML = location.href;
  5. }
  6. function shareLink() {
  7. var urlToCopy = document.getElementById("urlToCopy");
  8. var urlToCopyContainer = document.getElementById("urlToCopyContainer");
  9. try {
  10. if (document.body.createTextRange) {
  11. // for Internet Explorer
  12. var range = document.body.createTextRange();
  13. range.moveToElementText(urlToCopy);
  14. range.select();
  15. document.execCommand("Copy");
  16. } else if (window.getSelection) {
  17. // other browsers
  18. var selection = window.getSelection();
  19. var range = document.createRange();
  20. range.selectNodeContents(urlToCopy);
  21. selection.removeAllRanges();
  22. selection.addRange(range);
  23. document.execCommand("Copy");
  24. }
  25. var button = document.getElementById("buttonLink");
  26. if (button) {
  27. button.className = "button buttonLinkGood";
  28. setTimeout(function() {
  29. var buttonTimeout = document.getElementById("buttonLink");
  30. if (buttonTimeout) button.className = "button buttonLink";
  31. }, 2000);
  32. }
  33. } catch (err) {}
  34. }
  35. function rot13(s) {
  36. return s.replace(/[A-Za-z]/g, function (c) {
  37. return "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".charAt(
  38. "NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm".indexOf(c)
  39. );
  40. } );
  41. }
  42. function getQueryVariable(variable) {
  43. var query = rot13(window.atob(window.location.search.substring(1)));
  44. var vars = query.split("&");
  45. for (var i = 0; i < vars.length; i++) {
  46. var pair = vars[i].split("=");
  47. if (pair[0] == variable) {
  48. if (pair[1] == "NaN") {
  49. return 0;
  50. } else {
  51. return pair[1] / 100;
  52. }
  53. }
  54. }
  55. return 0;
  56. }
  57. function setAxisValue(name, value) {
  58. var axis = document.getElementById(name);
  59. if (!axis) return;
  60. var text = document.getElementById(name + "Text");
  61. if (!text) return;
  62. axis.style.width = (100 * value).toFixed(1) + "%";
  63. text.innerHTML = (100 * value).toFixed(0) + "%";
  64. if (text.offsetWidth > (axis.offsetWidth - 5)) text.style.display = "none";
  65. else text.style.display = "";
  66. }
  67. function setBonus(name, value, limit) {
  68. var axis = document.getElementById(name);
  69. if (!axis) return;
  70. if (value > limit) {
  71. axis.style.display = "flex";
  72. axis.style.opacity = value * value;
  73. } else {
  74. axis.style.display = "none";
  75. }
  76. }
  77. var axes = ["c", "b", "p", "m", "s", "j", "e", "t"];
  78. var bonus = {
  79. anar: 0.9,
  80. prag: 0.5,
  81. femi: 0.9,
  82. comp: 0.9,
  83. vega: 0.5,
  84. reli: 0.5,
  85. mona: 0.5
  86. };
  87. var characteristics = [];
  88. var axesValues = {
  89. c: 0,
  90. b: 0,
  91. p: 0,
  92. m: 0,
  93. s: 0,
  94. j: 0,
  95. e: 0,
  96. t: 0
  97. };
  98. for (var i = 0; i < axes.length; i++) {
  99. var negativeValue = getQueryVariable(axes[i] + "0");
  100. var positiveValue = getQueryVariable(axes[i] + "1");
  101. setAxisValue(axes[i] + "AxisNeg", negativeValue);
  102. setAxisValue(axes[i] + "AxisPos", positiveValue);
  103. setAxisValue(axes[i] + "AxisMid", 1 - negativeValue - positiveValue);
  104. if (negativeValue > positiveValue) {
  105. characteristics.push({ name: axes[i] + "0", value: negativeValue });
  106. } else {
  107. characteristics.push({ name: axes[i] + "1", value: positiveValue });
  108. }
  109. axesValues[axes[i]] = positiveValue - negativeValue;
  110. }
  111. var bonusEnabled = 0;
  112. for (var b in bonus) {
  113. var value = getQueryVariable(b);
  114. setBonus(b + "Bonus", value, bonus[b]);
  115. if (value > bonus[b]) {
  116. bonusEnabled = 1;
  117. characteristics.push({ name: b, value: value });
  118. }
  119. }
  120. characteristics.sort(function(a, b) {
  121. return a.value < b.value;
  122. });
  123. var charSlogan = {
  124. b0: "Humanity",
  125. b1: "Fatherland",
  126. c0: "Equality",
  127. e0: "Ecology",
  128. j0: "Justice",
  129. j1: "Order",
  130. m1: "Liberty",
  131. p0: "Socialism",
  132. p1: "Work",
  133. s1: "Family",
  134. t0: "Revolution"
  135. };
  136. function findFlagColors() {
  137. var colors = [];
  138. for (var i = 0; i < flagColors.length; i++) {
  139. var accepted = 1;
  140. var mainValue = 0;
  141. var mainValueFound = 0;
  142. for (var j = 0; j < flagColors[i].cond.length; j++) {
  143. var charFound = 0;
  144. for (var k = 0; k < characteristics.length; k++) {
  145. if (characteristics[k].name == flagColors[i].cond[j].name) {
  146. charFound = 1;
  147. if (
  148. characteristics[k].value < flagColors[i].cond[j].vmin ||
  149. characteristics[k].value > flagColors[i].cond[j].vmax
  150. )
  151. accepted = 0;
  152. else if (!mainValueFound) {
  153. mainValueFound = 1;
  154. mainValue = characteristics[k].value;
  155. }
  156. break;
  157. }
  158. }
  159. if (!charFound) accepted = 0;
  160. if (!accepted) break;
  161. }
  162. if (accepted) {
  163. colors.push({
  164. bgColor: flagColors[i].bgColor,
  165. fgColor: flagColors[i].fgColor,
  166. value: mainValue
  167. });
  168. }
  169. }
  170. colors.sort(function(a, b) {
  171. return b.value - a.value;
  172. });
  173. return colors;
  174. }
  175. function findFlagShape(numColors) {
  176. var flagFound = -1;
  177. var flagValue = [0, 0, 0];
  178. var flagColor = 0;
  179. for (var i = 0; i < flagShapes.length; i++) {
  180. if (flagShapes[i].numColors > numColors) continue;
  181. var condValue = [0, 0];
  182. var accepted = 1;
  183. if (flagShapes[i].cond.length > 0) {
  184. for (var j = 0; j < flagShapes[i].cond.length; j++) {
  185. var value = axesValues[flagShapes[i].cond[j].name];
  186. if (
  187. value < flagShapes[i].cond[j].vmin ||
  188. value > flagShapes[i].cond[j].vmax
  189. ) {
  190. accepted = 0;
  191. }
  192. if (j < 3) condValue[j] = Math.abs(value);
  193. if (!accepted) break;
  194. }
  195. } else {
  196. var condValue = [0, 0];
  197. }
  198. if (accepted && flagColor <= flagShapes[i].numColors) {
  199. if (flagShapes[i].numColors > flagColor) {
  200. flagColor = flagShapes[i].numColors;
  201. flagValue[0] = condValue[0];
  202. flagValue[1] = condValue[1];
  203. flagValue[2] = condValue[2];
  204. flagFound = i;
  205. } else if (condValue[0] > flagValue[0]) {
  206. flagColor = flagShapes[i].numColors;
  207. flagValue[0] = condValue[0];
  208. flagValue[1] = condValue[1];
  209. flagValue[2] = condValue[2];
  210. flagFound = i;
  211. } else if (condValue[0] == flagValue[0]) {
  212. if (condValue[1] > flagValue[1]) {
  213. flagColor = flagShapes[i].numColors;
  214. flagValue[0] = condValue[0];
  215. flagValue[1] = condValue[1];
  216. flagValue[2] = condValue[2];
  217. flagFound = i;
  218. } else if (condValue[1] == flagValue[1]) {
  219. if (condValue[2] > flagValue[2]) {
  220. flagColor = flagShapes[i].numColors;
  221. flagValue[0] = condValue[0];
  222. flagValue[1] = condValue[1];
  223. flagValue[2] = condValue[2];
  224. flagFound = i;
  225. }
  226. }
  227. }
  228. }
  229. }
  230. return flagFound;
  231. }
  232. function getCharacteristic(name, vmin, vmax) {
  233. for (var k = 0; k < characteristics.length; k++) {
  234. if (characteristics[k].name != name) continue;
  235. if (characteristics[k].value >= vmin && characteristics[k].value <= vmax)
  236. return characteristics[k].value;
  237. else return -1.0;
  238. }
  239. return -1.0;
  240. }
  241. function findFlagSymbol(numColors) {
  242. var symbol0 = {
  243. parent_type: "none",
  244. transform: {}
  245. };
  246. var symbol1 = {
  247. parent_type: "none",
  248. transform: {}
  249. };
  250. var valueMax = 0;
  251. if (numColors == 0) {
  252. symbol0.parent_type = "dot";
  253. symbol0.transform = {
  254. child_type: "none",
  255. x: 3,
  256. y: 3,
  257. main: true,
  258. parent_tx: 0,
  259. parent_ty: 0,
  260. parent_sx: 1,
  261. parent_sy: 1,
  262. parent_r: 0,
  263. child_tx: 0,
  264. child_ty: 0,
  265. child_sx: 1,
  266. child_sy: 1,
  267. child_r: 0
  268. };
  269. }
  270. for (var s0 = 0; s0 < flagSymbols.length; s0++) {
  271. var charVal0 = getCharacteristic(
  272. flagSymbols[s0].cond.name,
  273. flagSymbols[s0].cond.vmin,
  274. flagSymbols[s0].cond.vmax
  275. );
  276. if (charVal0 > 0) {
  277. var value = charVal0 * 1.5;
  278. var transform0 = -1;
  279. if (value > valueMax) {
  280. for (k0 = 0; k0 < flagSymbols[s0].data.transforms.length; k0++) {
  281. if (flagSymbols[s0].data.transforms[k0].child_type == "none") {
  282. transform0 = k0;
  283. }
  284. }
  285. if (transform0 >= 0) {
  286. symbol0.parent_type = flagSymbols[s0].data.parent_type;
  287. symbol0.transform = flagSymbols[s0].data.transforms[transform0];
  288. symbol1.parent_type = "none";
  289. valueMax = value;
  290. }
  291. }
  292. for (var s1 = s0 + 1; s1 < flagSymbols.length; s1++) {
  293. transform0 = -1;
  294. var transform1 = -1;
  295. var k0 = -1;
  296. for (k0 = 0; k0 < flagSymbols[s0].data.transforms.length; k0++) {
  297. for (var k1 = 0; k1 < flagSymbols[s1].data.transforms.length; k1++) {
  298. if (
  299. flagSymbols[s0].data.parent_type ==
  300. flagSymbols[s1].data.transforms[k1].child_type &&
  301. flagSymbols[s1].data.parent_type ==
  302. flagSymbols[s0].data.transforms[k0].child_type
  303. ) {
  304. transform0 = k0;
  305. transform1 = k1;
  306. }
  307. }
  308. }
  309. if (transform1 < 0 || transform0 < 0) continue;
  310. var charVal1 = getCharacteristic(
  311. flagSymbols[s1].cond.name,
  312. flagSymbols[s1].cond.vmin,
  313. flagSymbols[s1].cond.vmax
  314. );
  315. if (charVal1 > 0) {
  316. value = charVal0 + charVal1;
  317. if (value > valueMax) {
  318. symbol0.parent_type = flagSymbols[s0].data.parent_type;
  319. symbol0.transform = flagSymbols[s0].data.transforms[transform0];
  320. symbol1.parent_type = flagSymbols[s1].data.parent_type;
  321. symbol1.transform = flagSymbols[s1].data.transforms[transform1];
  322. valueMax = value;
  323. }
  324. }
  325. }
  326. }
  327. }
  328. if (
  329. symbol0.parent_type != "none" &&
  330. symbol1.parent_type != "none" &&
  331. symbol1.transform.main &&
  332. !symbol0.transform.main
  333. )
  334. return [symbol1, symbol0];
  335. else return [symbol0, symbol1];
  336. }
  337. var generatedSlogan = "";
  338. var sloganDiv = document.getElementById("slogan");
  339. if (sloganDiv) {
  340. var selectedSlogan = [];
  341. for (var i = 0; i < characteristics.length; i++) {
  342. if (
  343. characteristics[i].value > 0 &&
  344. charSlogan.hasOwnProperty(characteristics[i].name)
  345. ) {
  346. selectedSlogan.push({
  347. text: charSlogan[characteristics[i].name],
  348. value: characteristics[i].value
  349. });
  350. }
  351. }
  352. selectedSlogan.sort(function(a, b) {
  353. return a.value < b.value;
  354. });
  355. var counter = 0;
  356. for (var i = 0; i < selectedSlogan.length; i++) {
  357. if (generatedSlogan != "") generatedSlogan += " · ";
  358. generatedSlogan += selectedSlogan[i].text;
  359. counter++;
  360. if (counter >= 3) break;
  361. }
  362. sloganDiv.innerHTML = generatedSlogan;
  363. }
  364. if (!bonusEnabled) {
  365. var bonusBox = document.getElementById("bonusBox");
  366. bonusBox.style.display = "none";
  367. }
  368. var images = {
  369. sprites: "/images/flag_sprites.png",
  370. c0: "/images/constructivism_small.png",
  371. c1: "/images/essentialism_small.png",
  372. j0: "/images/justice_soft_small.png",
  373. j1: "/images/justice_hard_small.png",
  374. s0: "/images/progressism_small.png",
  375. s1: "/images/conservatism_small.png",
  376. b0: "/images/internationalism_small.png",
  377. b1: "/images/nationalism_small.png",
  378. p0: "/images/communism_small.png",
  379. p1: "/images/capitalism_small.png",
  380. m0: "/images/regulation_small.png",
  381. m1: "/images/laissezfaire_small.png",
  382. e0: "/images/ecology_small.png",
  383. e1: "/images/productivism_small.png",
  384. t0: "/images/revolution_small.png",
  385. t1: "/images/reformism_small.png",
  386. anar: "/images/anarchism_small.png",
  387. prag: "/images/pragmatism_small.png",
  388. femi: "/images/feminism_small.png",
  389. comp: "/images/complotism_small.png",
  390. vega: "/images/veganism_small.png",
  391. mona: "/images/monarchism_small.png",
  392. reli: "/images/religion_small.png"
  393. };
  394. var numImageLoaded = 0;
  395. function onImageLoaded() {
  396. numImageLoaded++;
  397. if (numImageLoaded < images.length) {
  398. return;
  399. }
  400. var flag = document.getElementById("generatedFlag");
  401. if (flag) {
  402. var ctx = flag.getContext("2d");
  403. var spriteX = 256;
  404. var spriteY = 128;
  405. var spriteS = 1.0;
  406. var colors = findFlagColors();
  407. var symbolData = findFlagSymbol(colors.length);
  408. var flagId = findFlagShape(colors.length);
  409. if (colors.length <= 0)
  410. colors.push({ bgColor: "#ffffff", fgColor: "#000000" });
  411. if (flagId < 0) {
  412. ctx.beginPath();
  413. ctx.rect(0, 0, 512, 256);
  414. ctx.fillStyle = "#ffffff";
  415. ctx.fill();
  416. } else {
  417. for (var i = 0; i < flagShapes[flagId].shapes.length; i++) {
  418. var path = flagShapes[flagId].shapes[i];
  419. var numPoints = path.length / 2;
  420. ctx.beginPath();
  421. ctx.moveTo(path[1] * 512, path[2] * 256);
  422. if (path[1] == "circle") {
  423. ctx.arc(
  424. path[2] * 512,
  425. path[3] * 256,
  426. path[4] * 256,
  427. 0,
  428. 2 * Math.PI,
  429. false
  430. );
  431. } else if (
  432. path[1] == "circleSymbol" &&
  433. symbolData[0].parent_type != "none"
  434. ) {
  435. ctx.arc(
  436. path[2] * 512,
  437. path[3] * 256,
  438. path[4] * 256,
  439. 0,
  440. 2 * Math.PI,
  441. false
  442. );
  443. } else {
  444. for (var j = 1; j < numPoints; j++) {
  445. ctx.lineTo(path[1 + j * 2 + 0] * 512, path[1 + j * 2 + 1] * 256);
  446. }
  447. }
  448. ctx.fillStyle = colors[path[0]].bgColor;
  449. ctx.fill();
  450. }
  451. spriteX = flagShapes[flagId].symbol[0] * 512;
  452. spriteY = flagShapes[flagId].symbol[1] * 256;
  453. spriteS = flagShapes[flagId].symbol[2];
  454. }
  455. if (symbolData[0].parent_type != "none") {
  456. var tmpC = document.createElement("canvas");
  457. tmpC.width = images["sprites"].width;
  458. tmpC.height = images["sprites"].height;
  459. var tmpCtx = tmpC.getContext("2d");
  460. var coloredSprites = tmpCtx.getImageData(0, 0, tmpC.width, tmpC.height);
  461. tmpCtx.beginPath();
  462. tmpCtx.rect(0, 0, tmpC.width, tmpC.height);
  463. tmpCtx.fillStyle = colors[0].fgColor;
  464. tmpCtx.fill();
  465. tmpCtx.globalCompositeOperation = "destination-in";
  466. tmpCtx.drawImage(images["sprites"], 0, 0);
  467. ctx.save();
  468. ctx.translate(spriteX, spriteY);
  469. ctx.scale(spriteS, spriteS);
  470. var sx = symbolData[0].transform.x;
  471. var sy = symbolData[0].transform.y;
  472. ctx.save();
  473. ctx.translate(
  474. symbolData[0].transform.parent_tx,
  475. -symbolData[0].transform.parent_ty
  476. );
  477. ctx.rotate((symbolData[0].transform.parent_r * Math.PI) / 180);
  478. ctx.scale(
  479. symbolData[0].transform.parent_sx,
  480. symbolData[0].transform.parent_sy
  481. );
  482. ctx.drawImage(tmpC, sx * 128, sy * 128, 128, 128, -64, -64, 128, 128);
  483. ctx.restore();
  484. if (symbolData[1].parent_type != "none") {
  485. var sx = symbolData[1].transform.x;
  486. var sy = symbolData[1].transform.y;
  487. ctx.translate(
  488. symbolData[0].transform.child_tx,
  489. -symbolData[0].transform.child_ty
  490. );
  491. ctx.rotate((symbolData[0].transform.child_r * Math.PI) / 180);
  492. ctx.scale(
  493. symbolData[0].transform.child_sx,
  494. symbolData[0].transform.child_sy
  495. );
  496. ctx.translate(
  497. symbolData[1].transform.parent_tx,
  498. -symbolData[1].transform.parent_ty
  499. );
  500. ctx.rotate((symbolData[1].transform.parent_r * Math.PI) / 180);
  501. ctx.scale(
  502. symbolData[1].transform.parent_sx,
  503. symbolData[1].transform.parent_sy
  504. );
  505. ctx.drawImage(tmpC, sx * 128, sy * 128, 128, 128, -64, -64, 128, 128);
  506. ctx.restore();
  507. }
  508. ctx.restore();
  509. }
  510. }
  511. var rPreview = document.getElementById("generatedResults");
  512. if (rPreview) {
  513. var ctx = rPreview.getContext("2d");
  514. ctx.beginPath();
  515. ctx.rect(0, 0, rPreview.width, rPreview.height);
  516. ctx.fillStyle = "#ebebeb";
  517. ctx.fill();
  518. var yPos = 20;
  519. if (flag) {
  520. var flagCtx = flag.getContext("2d");
  521. var flagSize = 160;
  522. //Logo
  523. ctx.beginPath();
  524. ctx.rect(0, 0, rPreview.width, 42);
  525. ctx.fillStyle = "#500076";
  526. ctx.fill();
  527. ctx.fillStyle = "#ffffff";
  528. ctx.font = "bold 25px sans-serif";
  529. ctx.textAlign = "left";
  530. ctx.fillText("🅱️olitiScales", 10, 30);
  531. ctx.fillStyle = "#ffffff";
  532. ctx.font = "bold 15px sans-serif";
  533. ctx.textAlign = "right";
  534. ctx.fillText("dbhq.github.io", rPreview.width - 10, 27);
  535. yPos += 48;
  536. //Flag
  537. ctx.drawImage(
  538. flag,
  539. 0,
  540. 0,
  541. flag.width,
  542. flag.height,
  543. rPreview.width / 2.0 - flagSize,
  544. yPos,
  545. flagSize * 2,
  546. flagSize
  547. );
  548. yPos += flagSize + 10;
  549. //Slogan
  550. ctx.fillStyle = "#000000";
  551. ctx.font = "25px sans-serif";
  552. ctx.textAlign = "center";
  553. ctx.fillText(generatedSlogan, rPreview.width / 2.0, yPos + 30);
  554. yPos += 70;
  555. //Axes
  556. var axesDrawInfo = [
  557. {
  558. key: "c",
  559. color0: "#a425b6",
  560. color1: "#34b634",
  561. name0: "Constructivism",
  562. name1: "Essentialism"
  563. },
  564. {
  565. key: "j",
  566. color0: "#14bee1",
  567. color1: "#e6cc27",
  568. name0: "Rehabilitative justice",
  569. name1: "Punitive justice"
  570. },
  571. {
  572. key: "s",
  573. color0: "#850083",
  574. color1: "#970000",
  575. name0: "Progressive",
  576. name1: "Conservative"
  577. },
  578. {
  579. key: "b",
  580. color0: "#3e6ffd",
  581. color1: "#ff8500",
  582. name0: "Internationalism",
  583. name1: "Nationalism"
  584. },
  585. {
  586. key: "p",
  587. color0: "#cc0000",
  588. color1: "#ffb800",
  589. name0: "Communism",
  590. name1: "Capitalism"
  591. },
  592. {
  593. key: "m",
  594. color0: "#269B32",
  595. color1: "#6608C0",
  596. name0: "Regulation",
  597. name1: "Laissez-faire"
  598. },
  599. {
  600. key: "e",
  601. color0: "#a0e90d",
  602. color1: "#4deae9",
  603. name0: "Ecology",
  604. name1: "Production"
  605. },
  606. {
  607. key: "t",
  608. color0: "#eb1a66",
  609. color1: "#0ee4c8",
  610. name0: "Revolution",
  611. name1: "Reform"
  612. }
  613. ];
  614. var axeMargin = 100;
  615. var axeWidth = rPreview.width - axeMargin * 2;
  616. ctx.strokeStyle = "#888888";
  617. for (var i = 0; i < axesDrawInfo.length; i++) {
  618. var negativeValue = getQueryVariable(axesDrawInfo[i]["key"] + "0");
  619. var positiveValue = getQueryVariable(axesDrawInfo[i]["key"] + "1");
  620. var neutralValue = 1 - negativeValue - positiveValue;
  621. var negSize = axeWidth * negativeValue;
  622. var posSize = axeWidth * positiveValue;
  623. var ntrSize = axeWidth * neutralValue;
  624. ctx.beginPath();
  625. ctx.rect(0.5 + axeMargin + negSize, 0.5 + yPos, ntrSize, 30);
  626. ctx.stroke();
  627. ctx.beginPath();
  628. ctx.rect(0.5 + axeMargin, 0.5 + yPos, negSize, 30);
  629. ctx.fillStyle = axesDrawInfo[i]["color0"];
  630. ctx.fill();
  631. ctx.stroke();
  632. ctx.beginPath();
  633. ctx.rect(
  634. 0.5 + rPreview.width - axeMargin - posSize,
  635. 0.5 + yPos,
  636. posSize,
  637. 30
  638. );
  639. ctx.fillStyle = axesDrawInfo[i]["color1"];
  640. ctx.fill();
  641. ctx.stroke();
  642. if (negSize > 40) {
  643. ctx.fillStyle = "#ffffff";
  644. ctx.font = "20px sans-serif";
  645. ctx.textAlign = "right";
  646. ctx.fillText(
  647. Math.round(negativeValue * 100) + "%",
  648. axeMargin + negSize - 5,
  649. yPos + 23
  650. );
  651. }
  652. if (posSize > 40) {
  653. ctx.fillStyle = "#ffffff";
  654. ctx.font = "20px sans-serif";
  655. ctx.textAlign = "left";
  656. ctx.fillText(
  657. Math.round(positiveValue * 100) + "%",
  658. axeMargin + negSize + ntrSize + 5,
  659. yPos + 23
  660. );
  661. }
  662. if (ntrSize > 40) {
  663. ctx.fillStyle = "#888888";
  664. ctx.font = "20px sans-serif";
  665. ctx.textAlign = "center";
  666. ctx.fillText(
  667. Math.round(neutralValue * 100) + "%",
  668. axeMargin + negSize + ntrSize / 2,
  669. yPos + 23
  670. );
  671. }
  672. ctx.drawImage(
  673. images[axesDrawInfo[i]["key"] + "0"],
  674. axeMargin - 73,
  675. yPos - 27
  676. );
  677. ctx.drawImage(
  678. images[axesDrawInfo[i]["key"] + "1"],
  679. rPreview.width - axeMargin + 73 - 86,
  680. yPos - 27
  681. );
  682. ctx.fillStyle = "#000000";
  683. ctx.font = "16px sans-serif";
  684. ctx.textAlign = "left";
  685. ctx.fillText(axesDrawInfo[i]["name0"], axeMargin + 8, yPos - 6);
  686. ctx.textAlign = "right";
  687. ctx.fillText(
  688. axesDrawInfo[i]["name1"],
  689. rPreview.width - axeMargin - 8,
  690. yPos - 6
  691. );
  692. yPos += 100;
  693. }
  694. var xShift = 0;
  695. var numBonus = 0;
  696. for (var b in bonus) {
  697. value = getQueryVariable(b);
  698. if (value > bonus[b]) {
  699. numBonus++;
  700. }
  701. }
  702. for (var b in bonus) {
  703. value = getQueryVariable(b);
  704. if (value > bonus[b]) {
  705. ctx.drawImage(
  706. images[b],
  707. rPreview.width / 2 - ((numBonus - 1) * 100) / 2 + xShift - 43,
  708. yPos - 27
  709. );
  710. xShift += 100;
  711. }
  712. }
  713. }
  714. }
  715. }
  716. for (var b in images) {
  717. var src = images[b];
  718. images[b] = new Image();
  719. images[b].src = src;
  720. images[b].onload = onImageLoaded;
  721. }
  722. function download_image(){
  723. var canvas = document.getElementById('generatedResults');
  724. var link = document.createElement('a');
  725. link.href = canvas.toDataURL();
  726. link.download = `PolitiScales_Results_${+ new Date()}.png`;
  727. document.body.appendChild(link);
  728. link.click();
  729. document.body.removeChild(link);
  730. }