Add custom images

ryceg · ryceg · commit 75eeba8c3fd8 · 2021-04-23T22:54:48.000+10:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,16 +4,21 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
-## Unreleased
+## 2.8.5
 
 ### Added
-- Edit button to buildings that have an editor.
+- Edit button to buildings that have an editor (it's still rather terrible, but at least now it's more visible)
+- Custom image uploading for Hero patrons accessible in the settings.
 
 ### Changed
+- Fixed issue with Patreon thanks list sometimes breaking.
 - Modified formatting
 - Shifted notification down slightly so it does not collide with the header
 - Fixed an issue with Tippy not initialising for elements created in a table.
 
+### Removed
+- Obsolete 'Show Sliders' setting.
+
 ## 2.8.5
 
 ### Added
diff --git a/lib/src/getIllustration.ts b/lib/src/getIllustration.ts
@@ -1,44 +1,39 @@
-import { Town } from '../town/_common'
-
 type Illustration =
 | 'general-store-illustration'
 | 'tavern-illustration'
 | 'town-illustration'
 | 'city-illustration'
 
-export const getIllustration = (illustration: Illustration, alt: string) => {
-  let img = '<img '
-  img += 'id="illustration" '
-  const path = getPath()
-
-  img += `src="${path}src/Resources/img/hero/${illustration}.jpg" `
-  // If it's in production, then we can add the srcset options, otherwise we might as well omit it.
-  if (process.env.NODE_ENV === 'production' && location.origin !== 'file://') img += `srcset="${path}src/Resources/img/hero/${illustration}-x360.jpg 360w, ${path}src/Resources/img/hero/${illustration}-x411.jpg 411w, ${path}src/Resources/img/hero/${illustration}-x500.jpg 500w, ${path}src/Resources/img/hero/${illustration}-x576.jpg 576w, ${path}src/Resources/img/hero/${illustration}-x768.jpg 768w, ${path}src/Resources/img/hero/${illustration}-x992.jpg 992w, ${path}src/Resources/img/hero/${illustration}-x1200.jpg 1200w, ${path}src/Resources/img/hero/${illustration}.jpg" `
-  img += `alt="${alt || `An image depicting ${lib.articles.output(illustration)}, created by artist Juho Huttunen.`}" `
-  img += '/>'
-  return img
-}
-
 const getPath = () => {
   if (process.env.NODE_ENV === 'production' && location.origin !== 'file://') {
     return './'
   }
   return '../'
 }
 
-// It would obviously be preferable to output actual <img>s instead of having it render via SugarCube.
-// Unfortunately, I am not a clever man, and cannot figure it out.
-export const getImage = (illustration: Illustration) => {
+const addLocalSourceSet = (illustration: Illustration, sizes: string[] = ['360', '411', '500', '576', '768', '992', '1200']) => {
+  let img = ''
+  const path = getPath()
+  for (const size of sizes) {
+    img += `${path}src/Resources/img/hero/${illustration}-x${size}.jpg ${size}w, `
+  }
+  return img
+}
+
+export const getCustomImage = (url: URL) => {
+  const img = document.createElement('img')
+  img.id = 'illustration'
+  img.src = url as unknown as string
+  img.alt = 'A custom-defined image.'
+  return img.outerHTML
+}
+
+export const getLocalImage = (illustration: Illustration) => {
   const img = document.createElement('img')
   const path = getPath()
   img.id = 'illustration'
   img.src = `${path}src/Resources/img/hero/${illustration}.jpg`
-  img.srcset = `${path}src/Resources/img/hero/${illustration}-x360.jpg 360w, ${path}src/Resources/img/hero/${illustration}-x411.jpg 411w, ${path}src/Resources/img/hero/${illustration}-x500.jpg 500w, ${path}src/Resources/img/hero/${illustration}-x576.jpg 576w, ${path}src/Resources/img/hero/${illustration}-x768.jpg 768w, ${path}src/Resources/img/hero/${illustration}-x992.jpg 992w, ${path}src/Resources/img/hero/${illustration}-x1200.jpg 1200w, ${path}src/Resources/img/hero/${illustration}.jpg`
+  if (process.env.NODE_ENV === 'production' && location.origin !== 'file://') img.srcset = `${addLocalSourceSet(illustration)} ${path}src/Resources/img/hero/${illustration}.jpg`
   img.alt = `An image depicting ${lib.articles.output(illustration)}, created by artist Juho Huttunen.`
-  return img
-}
-
-export const townOrCity = (town: Town) => {
-  if (town.type === 'city' || town.type === 'town') return 'city-illustration'
-  return 'town-illustration'
+  return img.outerHTML
 }
diff --git a/src/Settings/CSS/stylesheet.css b/src/Settings/CSS/stylesheet.css
@@ -232,7 +232,7 @@ footer {
     padding-bottom: 20vw;
   }
   #paper {
-    top: 15vw
+    top: 20vw
   }
   body {
     font-size: 16px
@@ -252,7 +252,7 @@ footer {
     padding-bottom: 20vw;
   }
   #paper {
-    top: 14vw;
+    top: 21vw;
   }
   blockquote {
     margin-inline-start: 10px;
@@ -275,7 +275,7 @@ footer {
     padding-bottom: 25vw;
   }
   #paper {
-    top: 13vw
+    top: 20vw
   }
 }
 
@@ -294,7 +294,7 @@ footer {
     padding-bottom: 28vw;
   }
   #paper {
-    top: 13vw
+    top: 20vw
   }
 }
 
@@ -313,7 +313,7 @@ footer {
     padding-bottom: 35vw;
   }
   #paper {
-    top: 13.5vw
+    top: 20vw
   }
 }
 
@@ -332,7 +332,7 @@ footer {
     padding: 19vw;
   }
   #paper {
-    top: 13vw
+    top: 19vw
   }
 }
 
@@ -353,7 +353,7 @@ footer {
   }
 
   #paper {
-    top: 14vw
+    top: 20vw
   }
 }
  
diff --git a/src/Settings/CustomImages.twee b/src/Settings/CustomImages.twee
@@ -23,13 +23,7 @@
 <<switch $targetType>> 
   <<case 'buildingType'>>
     <label name="Select building type" for="listbox-target">
-      <<listbox "$target" autoselect>>
-        <<optionsfrom Object.keys(setup.buildingTypes).filter(building => {
-          const nsfwItems = ['Brothel'];
-          if (!settings.disableNSFW) return building;
-          return !building.includes(nsfwItems);
-        })>>
-      <</listbox>>
+      <<listbox "$target" autoselect>><<optionsfrom setup.buildingTypes>><</listbox>>
     </label>
   <<case 'building'>>
     <label name="Select specific building" for="listbox-target">
@@ -103,8 +97,6 @@
 
 -- 
 <<button "Save">>
-
-  <<set $customImagesData[$targetType][$target] to $url>>
   <<set _outputImage to $url>>
   <<switch $targetType>>
     <<case "npc">>
@@ -117,20 +109,22 @@
       <<set $town.roads[$target].customImage to $url>>
     <<case "town">>
       <<set $town.customImage to $url>>
+    <<default>>
+      <<set $customImagesData[$targetType][$target] to $url>>
   <</switch>>
   <<run State.metadata.set('customImages', $customImagesData)>>
+  <<update>>
 <</button>>
 <br>
-Great sources include:
-<ul>
+Great sources include:<ul>
   <li>[[ArtBreeder|https://www.artbreeder.com/create]]</li>
   <li>[[This gallery of watercolour concept art|https://imgur.com/gallery/5WcP9pn]]</li>
 </ul>
 <br>
-Loaded URL: <<idp _outputImage>>
+Loaded URL: <<if _outputImage>>_outputImage<</if>>
+<br><</liveblock>>
 <br>
-
-<</liveblock>>
+<<include "ShowAllSaved">>
 
 :: PrintImage [nobr]
 <<set $customImages to recall('customImages')>>
@@ -152,27 +146,41 @@ Loaded URL: <<idp _outputImage>>
 <</if>>
 
 :: ShowAllSaved [nobr force-one-column]
-<<run console.log(State.metadata.get('customImages'))>>
+<details><summary>Saved Images</summary>
+<<liveblock>><<run console.log(State.metadata.get('customImages'))>>
 <<set _temp to State.metadata.get('customImages')>>
+<<button "Delete all">>
+  <<run State.metadata.delete('customImages')>>
+  <<set $customImagesData to {
+    'deity': {}, 
+    'buildingType': {}, 
+    'factionType': {}
+  }>>
+  <<run State.metadata.set('customImages', $customImagesData)>>
+  <<update>>
+<</button>> (NPCs and other specifics are flushed on restart)
 <table>
   <tr>
     <th>Object</th>
     <th>Name</th>
     <th>File</th>
     <th>Delete</th>
   </tr>
-<<for _typeKey, _type range _temp>>
+<<for _typeKey, _type range _temp>><<capture _typeKey, _type>>
 <<if Object.keys(_type).length > 0>><<set _length to Object.keys(_type).length + 1>>
   <tr>
   <th @rowspan=_length>_typeKey</th>
   </tr>
-  <<for _itemKey, _item range _type>>
+  <<for _itemKey, _item range _type>><<capture _itemKey, _item>>
   <tr>
   <td>_itemKey</td>
   <td>_item</td>
-  <td>x</td>
-  </tr>
+  <td><<link 'x'>><<run delete _temp[_typeKey][_itemKey]>><<run State.metadata.set('customImages', _temp)>><<update>>
+  <</link>>
+  </td>
+  </tr><</capture>>
   <</for>>
-  <</if>>
+  <</if>><</capture>>
 <</for>>
-</table>
+</table>
+<</liveblock>></details>
diff --git a/src/Settings/Setting.js b/src/Settings/Setting.js
@@ -44,6 +44,28 @@ $(document).on(':dialogopened', function () {
       }
     }
     )
+    setup.addSettingButton({
+      target: 'pantheon',
+      name: 'customImages',
+      description: 'Add custom images.',
+      buttonDescription: 'Open Image Importer'
+    },
+    () => {
+      if (isPatron()) {
+        setup.openDialog({
+          header: 'Import Images',
+          passage: 'CustomImages',
+          rerender: true
+        })
+      } else {
+        setup.openDialog({
+          header: 'Patreon Content',
+          passage: 'ImportPatreon',
+          rerender: true
+        })
+      }
+    }
+    )
   }
 })
 
@@ -72,23 +94,18 @@ Setting.addToggle('darkMode', {
   default: window.matchMedia('(prefers-color-scheme: dark)').matches
 })
 
-Setting.addToggle('showCelsius', {
-  label: 'Show celsius?'
-})
-
-Setting.addToggle('showMetric', {
-  label: 'Show metric?'
-})
-
 Setting.addToggle('showBiomeGeneration', {
   label: 'Edit biome before generation?',
   desc: 'If you want to specify the biome and demographics before town creation, enable this.',
   onChange: settingShowBiomeGeneration
 })
 
-Setting.addToggle('showSliders', {
-  label: 'Show sliders?',
-  desc: 'If you would like to change the variables of buildings, enable this. Warning: feature is in beta.'
+Setting.addToggle('showCelsius', {
+  label: 'Show celsius?'
+})
+
+Setting.addToggle('showMetric', {
+  label: 'Show metric?'
 })
 
 Setting.addToggle('silverStandard', {
diff --git a/src/Start/Start.twee b/src/Start/Start.twee
@@ -6,5 +6,4 @@
 <<include "CreateBuilding">>
 <span id="buildings" role="list"><<include "RoadsList">></span>
 <<run console.log($town)>>
-<<include "Popup">>
-[[CustomImages]]
+<<include "Popup">>
diff --git a/src/Start/StoryInit.twee b/src/Start/StoryInit.twee
@@ -5,7 +5,7 @@
 <<run setup.init()>>
 
 <<set setup.data to {
-	versionNumber: "2.8.5",
+	versionNumber: "2.8.6",
 	badges: {
 		github: lib.createBadge([
 			lib.badges.stats.githubForks, 

Original file line number	Diff line number	Diff line change
`@@ -232,7 +232,7 @@ footer {`
`232`	`232`	`padding-bottom: 20vw;`
`233`	`233`	`}`
`234`	`234`	`#paper {`
`235`		`- top: 15vw`
	`235`	`+ top: 20vw`
`236`	`236`	`}`
`237`	`237`	`body {`
`238`	`238`	`font-size: 16px`
`@@ -252,7 +252,7 @@ footer {`
`252`	`252`	`padding-bottom: 20vw;`
`253`	`253`	`}`
`254`	`254`	`#paper {`
`255`		`- top: 14vw;`
	`255`	`+ top: 21vw;`
`256`	`256`	`}`
`257`	`257`	`blockquote {`
`258`	`258`	`margin-inline-start: 10px;`
`@@ -275,7 +275,7 @@ footer {`
`275`	`275`	`padding-bottom: 25vw;`
`276`	`276`	`}`
`277`	`277`	`#paper {`
`278`		`- top: 13vw`
	`278`	`+ top: 20vw`
`279`	`279`	`}`
`280`	`280`	`}`
`281`	`281`
`@@ -294,7 +294,7 @@ footer {`
`294`	`294`	`padding-bottom: 28vw;`
`295`	`295`	`}`
`296`	`296`	`#paper {`
`297`		`- top: 13vw`
	`297`	`+ top: 20vw`
`298`	`298`	`}`
`299`	`299`	`}`
`300`	`300`
`@@ -313,7 +313,7 @@ footer {`
`313`	`313`	`padding-bottom: 35vw;`
`314`	`314`	`}`
`315`	`315`	`#paper {`
`316`		`- top: 13.5vw`
	`316`	`+ top: 20vw`
`317`	`317`	`}`
`318`	`318`	`}`
`319`	`319`
`@@ -332,7 +332,7 @@ footer {`
`332`	`332`	`padding: 19vw;`
`333`	`333`	`}`
`334`	`334`	`#paper {`
`335`		`- top: 13vw`
	`335`	`+ top: 19vw`
`336`	`336`	`}`
`337`	`337`	`}`
`338`	`338`
`@@ -353,7 +353,7 @@ footer {`
`353`	`353`	`}`
`354`	`354`
`355`	`355`	`#paper {`
`356`		`- top: 14vw`
	`356`	`+ top: 20vw`
`357`	`357`	`}`
`358`	`358`	`}`
`359`	`359`