☰

Kanklippy

Adds Kankappy to your Kanka experience to share some useful tips

  1. // ==UserScript==
  2. // @name         Kanklippy
  3. // @namespace    http://tampermonkey.net/
  4. // @license MIT
  5. // @version      1
  6. // @description  Adds Kankappy to your Kanka experience to share some useful tips
  7. // @author       Salvatos
  8. // @match        https://kanka.io/*/campaign/*
  9. // @icon         https://www.google.com/s2/favicons?domain=kanka.io
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13. /* User preferences */
  14. // % of messages that are quips
  15. const quipThresh = 10;
  16. // % of tips that aren’t specific to the current page
  17. const specificTipThresh = 40;
  18. // How long the initial message remains on-screen after page load in milliseconds
  19. const initialMessageDuration = 10000;
  20.  
  21. GM_addStyle(`
  22. #klippy {
  23. 	position: fixed;
  24. 	bottom: 10px;
  25. 	right: 10px;
  26. 	z-index: 420;
  27. 	cursor: pointer;
  28. }
  29. #klippy .img {
  30. 	height: 69px;
  31. 	width: 96px;
  32. 	background-image: url('https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/wcYsVFCGApEgUZs9BX9OxDRPsROlJFmGYKIuNBev.png');
  33. 	background-position: 0 0;
  34. }
  35. #klippy .img:hover {
  36. 	background-position: 96px 0;
  37. }
  38. #klippy-actions {
  39. 	position: absolute;
  40. 	right: 95px;
  41. 	top: 30%;
  42. 	display: flex;
  43. }
  44. .klippy-action {
  45. 	cursor: pointer;
  46. 	background: #F2F2F2;
  47. 	color: black;
  48. 	font-size: 17px;
  49. 	padding: 4px 4px 1px;
  50. 	border-radius: 25%;
  51. 	margin-right: 5px;
  52. 	display: none;
  53. 	border: 1px solid #868686;
  54. }
  55. .klippy-action:hover {
  56. 	background: #C8C7C7;
  57. }
  58. #klippy:hover + #clippy-balloon {
  59. 	display: block !important;
  60. }
  61. #clippy-balloon {
  62.     position: absolute;
  63.     z-index: 1000;
  64.     cursor: pointer;
  65.     background: var(--btn-default-background);
  66.     color: var(--btn-default-text);
  67.     padding: 8px;
  68.     border: 1px solid #868686;
  69.     border-radius: 5px;
  70. 	position: fixed;
  71. 	bottom: 100px;
  72. 	right: 15px;
  73. }
  74.  
  75. #clippy-content {
  76.     max-width: 200px;
  77.     min-width: 120px;
  78.     font-family: "Microsoft Sans", sans-serif;
  79.     font-size: 12px;
  80.     line-height: 20px;
  81.     hyphens: auto;
  82. }
  83. #clippy-balloon::before {
  84. 	content: "";
  85. 	width: 0px;
  86. 	height: 0px;
  87. 	position: absolute;
  88. 	border-left: 10px solid transparent;
  89. 	border-right: 12px solid #9d9d9d;
  90. 	border-top: 10px solid #9d9d9d;
  91. 	border-bottom: 10px solid transparent;
  92. 	right: 50px;
  93. 	bottom: -20px;
  94. }
  95. #clippy-balloon::after {
  96. 	content: "";
  97. 	width: 0px;
  98. 	height: 0px;
  99. 	position: absolute;
  100. 	border-left: 10px solid transparent;
  101. 	border-right: 10px solid var(--btn-default-background);
  102. 	border-top: 10px solid var(--btn-default-background);
  103. 	border-bottom: 10px solid transparent;
  104. 	right: 52px;
  105. 	bottom: -20px;
  106. }
  107. #clippy-balloon .emoji {
  108. 	font-size: 16px;
  109. }
  110. `);
  111.  
  112. var tips = new Array();
  113. tips.specific = new Array();
  114. var quips = new Array();
  115.  
  116. /* Define area-specific tips & quips */
  117. // User settings
  118. if (/settings/.test(window.location.href) === true) {
  119. 	tips.specific.push(
  120. 		'The <strong>Layout</strong> page contains several useful settings to customize your experience on Kanka.',
  121. 		'Visit the <strong>Apps</strong> page to link your Discord account to Kanka and receive the relevant group memberships for your subscription level.',
  122. 		'Visit the <strong>Boost</strong> page to assign your boosters to your various campaigns and see the perks of <strong>Boosted</strong> and <strong>Superboosted</strong> campaigns.',
  123. 		'Boosts last as long as your subscription. You can reassign them to different campaigns anytime.'
  124. 	);
  125. }
  126. // Campaign editor
  127. if (/campaigns\/\d*\/edit/.test(window.location.href) === true) {
  128. 	tips.specific.push(
  129. 		'The campaign’s description in the <strong>Entry</strong> tab appears only in the Overview page. Go to the <strong>Dashboard</strong> tab to edit the description at the top of your dashboards.',
  130. 		'The <strong>Sharing</strong> tab controls whether your campaign is private or public, as well as details such as language and game system.',
  131. 		'The <strong>Interface</strong> and <strong>Boosted</strong> tabs have useful settings that apply to this campaign as a whole. Your user profile also contains useful options specific to your account.'
  132. 	);
  133. }
  134. // Entity editor
  135. if (/\/edit/.test(window.location.href) === true) {
  136. 	tips.specific.push(
  137. 		'Use Ctrl+Shift+V in the editor to paste without formatting.',
  138. 		'If you copy-paste text from another entity, you will need to remake any mentions in order for their tooltips to work.'
  139. 	);
  140. }
  141. // Entity main page
  142. if ($("body.entity-story").length > 0) {
  143. 	tips.specific.push(
  144. 		'Click the cogwheel next to the entity’s name to access all available actions.',
  145.         'If you want several entities to share the same format, attributes, tags, etc., you can set one of them as a template from the cogwheel menu and then select that template when creating new ones.',
  146. 		'Posts are sections of an entity that have distinct permissions and can be collapsed and expanded at will. You can create them using the top-right button and reorder them from the cogwheel action menu.',
  147. 		'Posts are useful to organize information, but aren’t included in dashboard widgets and map markers.',
  148. 		'The entity’s <strong>Overview</strong> shows its entry, posts, pins, profile information and mentions.',
  149. 		'The entity’s <strong>Connections</strong> page shows various related entities in a table or graph.',
  150. 		'The entity’s <strong>Abilities</strong> page shows all attached character abilities and their uses.',
  151. 		'The entity’s <strong>Reminders</strong> page points to all related events and important dates.',
  152. 		'The entity’s <strong>Attributes</strong> page lists all attributes, and can be customized using Marketplace attribute templates in Boosted campaigns.',
  153. 		'The entity’s <strong>Inventory</strong> can be used to keep track of a character’s equipment, but also things like a store’s inventory.',
  154. 		'The entity’s <strong>Assets</strong> is where you can upload and retrieve various files or external links. Subscribers get more storage!',
  155. 		'The entity’s <strong>Permissions</strong> page lets you control who is allowed to see it. Private entities will also be hidden from lists, mentions, etc.'
  156. 	);
  157. }
  158. // Dashboards
  159. if ($("#campaign-dashboard").length > 0) {
  160. 	tips.specific.push(
  161. 		'Your campaign can have multiple dashboards to showcase all kinds of information, and various user groups can have different default dashboards and access rights.',
  162. 	);
  163. }
  164. // Maps
  165. if (/maps/.test(window.location.href) === true) {
  166. 	tips.specific.push(
  167. 		'Maps can have multiple layers and marker groups to navigate between levels and filter landmark types.',
  168.         'Want your map to center on a specific marker when you mention that place? Use an advanced mention like <strong>[map:123|My Place|page:explore?focus=456]</strong>.',
  169.         'From the Settings tab of a map, you can make it focus on a marker or specific coordinates when opened.'
  170. 	);
  171. }
  172. // Calendars
  173. if (/calendars/.test(window.location.href) === true) {
  174. 	tips.specific.push(
  175. 		'Click the "..." button on a calendar date to make it the current date, add an event or set its weather.'
  176. 	);
  177. 	quips.push(
  178. 		'Calendars are <em>so</em> 2020. <em>Carpe diem!</em>'
  179. 	);
  180. }
  181.  
  182. /* Define general tips */
  183. tips.general = [
  184. 	'Quick links can point to important entities, but also filtered lists, a random entity or a dashboard.',
  185. 	'You can <strong>follow</strong> public campaigns from their dashboard, which adds them to your campaign picker in the main menu.',
  186. 	'You can export your campaign’s entities as a JSON archive, but there is currently no import/export tool for specific third-party platforms.',
  187. 	'Deleted entities can be recovered from a Boosted campaign’s settings for up to 30 days, even if the campaign wasn’t Boosted at the time!',
  188. 	'Use the <strong>Campaign > Members</strong> page to invite other users by link or by e-mail, and the <strong>Roles</strong> page to manage user groups and permissions.',
  189. 	'You can deactivate entity types you don’t need in the <strong>Campaign > Modules</strong> page, to remove them from the main menu.',
  190. 	'<strong>Boosted</strong> campaigns can be customized with CSS styles in the <strong>Campaign > Theming</strong> page and with Marketplace themes in the <strong>Plugins</strong> page.',
  191. 	'Every month, subscribers at all tiers get to take part in a <strong>Community Vote</strong> to steer Kanka’s development.',
  192. 	'You can set your preferred theme in your profile settings, though individual Boosted campaigns may override a user’s choice.',
  193. 	'To exclude partial matches from search, use an equal sign in your query (e.g. "=Max" excludes "Maximum").',
  194.     'If you are an admin in a campaign, the <strong>Campaign > Members</strong> page allows you to select a member and "View Campaign as user" to check what they have access to.'
  195. ];
  196.  
  197.  
  198. /* Define general quips */
  199. quips.push(
  200. 	'What you’re trying to do doesn’t match our vision for Kanka',
  201. 	'Did you wash your hands before clicking me?',
  202. 	'I used to be an adventurer like you. Then I took a scrollbar in the face.',
  203. 	'Don’t ask me, I’ve never seen this page',
  204. 	'Kanka is love, Kanka is life'
  205. );
  206.  
  207. // Insert elements
  208. $("#app")[0].insertAdjacentHTML("beforeend", '<div id="klippy"><div class="img"></div></div>');
  209. $("#klippy")[0].insertAdjacentHTML("beforeend", '<div id="klippy-actions"><div class="klippy-action" title="info">&nbsp;ℹ&nbsp;</div><div class="klippy-action" title="banter">😏</div><div class="klippy-action" title="tip">🦉</div></div>');
  210. $("#app")[0].insertAdjacentHTML("beforeend", `<div id="clippy-balloon"><div id="clippy-content"></div></div>`);
  211.  
  212.  
  213. // On load, show a random tip/quip for 10 seconds
  214. klippySays(tips, quips);
  215. // Hide the default message unless the menu has been opened in the meantime
  216. setTimeout(function() { if (!$(".klippy-action:visible")[0]) { $("#clippy-balloon").hide(800); }}, initialMessageDuration);
  217.  
  218.  
  219. // Add click events
  220. $("#klippy .img")[0].addEventListener('click', ()=>{
  221. 	// Make sure the balloon becomes visible when we open the menu and hidden when we close it, regardless of its current state/timer
  222. 	if ($(".klippy-action:visible")[0]) {
  223. 		$("#clippy-balloon").hide(400);
  224. 	}
  225. 	else {
  226. 		$("#clippy-balloon").show(400);
  227. 	}
  228. 	$(".klippy-action").toggle(400);
  229. });
  230. $(".klippy-action")[0].addEventListener('click', ()=>{
  231. 	$("#clippy-balloon").hide(100);
  232. 	klippySays(tips, quips, "info");
  233. });
  234. $(".klippy-action")[1].addEventListener('click', ()=>{
  235. 	$("#clippy-balloon").hide(100);
  236. 	klippySays(tips, quips, "quip");
  237. });
  238. $(".klippy-action")[2].addEventListener('click', ()=>{
  239. 	$("#clippy-balloon").hide(100);
  240. 	klippySays(tips, quips, "tip");
  241. });
  242.  
  243.  
  244. function klippySays(tips, quips, sayWhat) {
  245. 	// At page load, choose randomly between tips and quips (90/10%)
  246. 	if (!sayWhat) {
  247. 		var roll = Math.floor(Math.random() * 100);
  248. 		sayWhat = (roll < quipThresh + 1) ? "quip" : "tip";
  249. 		console.log("Kanklippy rolled " + roll + " for message type.");
  250. 	}
  251.  
  252. 	var sayThis;
  253. 	switch (sayWhat) {
  254. 		case "quip":
  255. 			// Choose a random quip for the current page and say it
  256. 			sayThis = quips[Math.floor(Math.random() * quips.length)] + ' <span class="emoji">😏</span>';
  257. 			break;
  258. 		case "tip":
  259. 			// Choose between a general tip or one specific to the current area (40/60%)
  260. 			roll = Math.floor(Math.random() * 100);
  261. 			console.log("Kanklippy rolled " + roll + " for tip specificity.");
  262. 			// Also default to general if nothing is set for the current page
  263. 			sayThis = (roll < specificTipThresh + 1 || tips.specific.length < 1) ?
  264. 				tips.general[Math.floor(Math.random() * tips.general.length)] : tips.specific[Math.floor(Math.random() * tips.specific.length)];
  265. 			break;
  266. 		case "info":
  267. 			// Plugin info
  268. 			sayThis = `<p style='font-size: 10px; font-weight: bold; text-align: center;'>Kanklippy v.1.4.2022 by Salvatos</p>
  269. 			<p style='font-size: 12px;'>Click <span class="emoji">ℹ</span> for info, <span class="emoji">😏</span> for banter, or <span class="emoji">🦉</span> for a useful tip.</p>`;
  270. 			break;
  271. 		default:
  272. 			sayThis = "Error: couldn’t find anything to say.";
  273. 	}
  274. 	$("#clippy-content").html(sayThis);
  275. 	$("#clippy-balloon").show(400);
  276. }
  277.  
  278.  
  279. // Props for making Clippy.JS work in Tampermonkey, though sources needed to be updated https://stackoverflow.com/a/52868815