new way to choose religion (#31103)

* new way to choose religion

* Capitalize the things, removed debug verb, disappear the search bar when creating a custom religion

* update bundle

code/__HELPERS/cmp.dm

@@ -16,6 +16,12 @@
 /proc/cmp_name_dsc(atom/a, atom/b)
 	return sorttext(a.name, b.name)
 
+/proc/cmp_initial_name_asc(atom/a, atom/b)
+	return sorttext(initial(b.name), initial(a.name))
+
+/proc/cmp_initial_name_dsc(atom/a, atom/b)
+	return sorttext(initial(a.name), initial(b.name))
+
 var/cmp_field = "name"
 /proc/cmp_records_asc(datum/data/record/a, datum/data/record/b)
 	return sorttext((b ? b.fields[cmp_field] : ""), (a ? a.fields[cmp_field] : a))

code/datums/religions.dm

@@ -15,92 +15,163 @@
 	else
 		return "Faithless"
 
-//Proc for selecting a religion
+/datum/religion_ui
-/proc/ChooseReligion(var/mob/living/carbon/human/H)
+	var/choice
-	var/obj/item/weapon/storage/bible/B
+	var/closed = FALSE
-	var/datum/religion/chaplain_religion
-	var/new_religion = sanitize(stripped_input(H, "You are the crew's Religious Services Chaplain. What religion do you follow and teach? (Please put your ID in your ID slot to prevent errors)", "Name of Religion", "Christianity"), 1, MAX_NAME_LEN)
-	if(!new_religion)
-		new_religion = "Christianity" // If nothing was typed
 
-	var/choice = FALSE
+/datum/religion_ui/ui_host(mob/user)
+	return user
 
-	for (var/R in typesof(/datum/religion))
+/datum/religion_ui/proc/wait()
-		var/datum/religion/rel = new R
+	while (!choice && !closed && !gcDestroyed)
-		for (var/key in (rel.keys + rel.deity_names + rel.deity_name))
+		stoplag(1)
-			if (lowertext(new_religion) == lowertext(key))
+
-				rel.equip_chaplain(H) // We do the misc things related to the religion
+/datum/religion_ui/ui_assets()
-				chaplain_religion = rel
+	return list(/datum/asset/spritesheet/bible)
-				B = new rel.bible_type(H)
+
-				B.my_rel = rel
+/datum/religion_ui/ui_close()
-				B.name = rel.bible_name
+	..()
-				H.put_in_hands(B)
+	closed = TRUE
-				chaplain_religion.holy_book = B
+	qdel(src)
-				H.equip_or_collect(new rel.preferred_incense(H.back), slot_in_backpack)
+
-				rel.religiousLeader = H.mind
+/datum/religion_ui/tgui_interact(mob/user, datum/tgui/ui)
-				var/new_alt_title = (H.gender == FEMALE ? rel.female_adept : rel.male_adept)
+	ui = SStgui.try_update_ui(user, src, ui)
-				for(var/object in H.get_body_slots())
+	if(!ui)
+		ui = new(user, src, "ChooseReligion")
+		ui.set_autoupdate(FALSE)
+		ui.open()
+
+/datum/religion_ui/ui_act(action, params, datum/tgui/ui)
+	. = ..()
+	if(.)
+		return
+	if(action != "choose")
+		return
+	choice = params
+	ui.close()
+
+var/list/tgui_religion_data
+
+/datum/religion_ui/ui_static_data(mob/user)
+	if(!tgui_religion_data)
+		var/list/data = list("religions" = list(), "bibleStyles" = list())
+
+		var/list/data_religions = data["religions"]
+		var/list/religion_types = subtypesof(/datum/religion)
+		religion_types = sortTim(religion_types, /proc/cmp_initial_name_asc)
+		for(var/path in religion_types)
+			var/datum/religion/religion = new path
+			var/obj/item/weapon/storage/fancy/incensebox/incensebox_path = religion.preferred_incense
+			var/incense_fragrance = initial(incensebox_path.fragrance)
+			data_religions += list(list(
+				"name" = religion.name,
+				"keywords" = religion.keys,
+				"deityName" = religion.deity_name,
+				"bibleStyle" = religion.bookstyle,
+				"bibleStyleIcon" = all_bible_styles[religion.bookstyle],
+				"bibleName" = religion.bible_name,
+				"maleAdept" = religion.male_adept,
+				"femaleAdept" = religion.female_adept,
+				"convertMethod" = religion.convert_method,
+				"possibleBibleNames" = religion.bible_names,
+				"possibleDeityNames" = religion.deity_names,
+				"preferredIncense" = incense_fragrance,
+				"notes" = religion.ui_notes(),
+			))
+
+		var/list/data_bible_styles = data["bibleStyles"]
+		for(var/name in all_bible_styles)
+			var/icon_name = all_bible_styles[name]
+			if(islist(icon_name))
+				icon_name = icon_name["icon"]
+			data_bible_styles += list(list(
+				"name" = name,
+				"iconName" = icon_name
+			))
+		tgui_religion_data = data
+	return tgui_religion_data
+
+/proc/get_religion_by_name(name)
+	for(var/entry in subtypesof(/datum/religion))
+		var/datum/religion/path = entry
+		if(initial(path.name) == name)
+			return new path
+	return new /datum/religion/default
+
+/proc/ChooseReligion(mob/living/carbon/human/user)
+	var/datum/religion_ui/ui = new
+	ui.tgui_interact(user)
+	ui.wait()
+
+	var/list/data = ui.choice
+	var/datum/religion/new_religion
+	if(!data)
+		new_religion = new /datum/religion/default
+	else if(!data["custom"])
+		new_religion = get_religion_by_name(data["religionName"])
+	else
+		new_religion = new /datum/religion
+		if(data["name"])
+			new_religion.name = data["name"]
+		if(data["deityName"])
+			new_religion.deity_name = data["deityName"]
+		if(data["bibleName"])
+			new_religion.bible_name = data["bibleName"]
+		if(data["bibleStyle"])
+			new_religion.bookstyle = data["bibleStyle"]
+
+	new_religion.equip_chaplain(user)
+	new_religion.religiousLeader = user.mind
+
+	var/obj/item/new_bible = new_religion.spawn_bible(get_turf(user))
+	user.put_in_hands(new_bible)
+
+	user.equip_or_collect(new new_religion.preferred_incense(get_turf(user), slot_in_backpack))
+
+	var/new_alt_title = user.gender == FEMALE ? new_religion.female_adept : new_religion.male_adept
+	for(var/object in user.get_body_slots())
 		if(istype(object, /obj/item/weapon/card/id))
 			var/obj/item/weapon/card/id/ID = object
 			ID.assignment = new_alt_title
-						ID.name = "[H.mind.name]'s ID Card ([ID.assignment])"
+			ID.name = "[user.mind.name]'s ID Card ([new_alt_title])"
 		if(istype(object, /obj/item/device/pda))
 			var/obj/item/device/pda/PDA = object
-						if(PDA.owner == H.real_name)
+			if(PDA.owner == user.real_name)
 				PDA.ownjob = new_alt_title
-							PDA.name = "PDA-[PDA.owner] ([PDA.ownjob])"
+				PDA.name = "PDA-[PDA.owner] ([new_alt_title])"
-				data_core.manifest_modify(H.real_name, new_alt_title)
+	data_core.manifest_modify(user.real_name, new_alt_title)
-				rel.convert(H, null, can_renounce = FALSE)
-				rel.OnPostActivation()
-				to_chat(H, "A great, intense revelation goes through your spirit. You are now the religious leader of [rel.name]. Convert people by [rel.convert_method]")
-				choice = TRUE
-				break // We got our religion ! Abort, abort.
-		if (choice)
-			break
-
-	if (!choice) // Nothing was found
-		chaplain_religion = new
-		chaplain_religion.name = "[new_religion]"
-		chaplain_religion.deity_name = "[new_religion]"
-		chaplain_religion.bible_name = "The Holy Book of [new_religion]"
-		chaplain_religion.equip_chaplain(H) // We do the misc things related to the religion
-		B = new /obj/item/weapon/storage/bible
-		chaplain_religion.holy_book = B
-		B.name = "The Holy Book of [new_religion]"
-		B.my_rel = chaplain_religion
-		H.put_in_hands(B)
-		chaplain_religion.religiousLeader = H.mind
-		to_chat(H, "A great, intense revelation goes through your spirit. You are now the religious leader of [chaplain_religion.name]. Convert people by [chaplain_religion.convert_method]")
-		chaplain_religion.convert(H, null, can_renounce = FALSE)
-
-	switch(input(H, "Would you like the traditional [chaplain_religion.bookstyle] design and to worship [chaplain_religion.deity_names.len ? "one of [english_list(chaplain_religion.deity_names)]" : chaplain_religion.deity_name]?") in list("Yes", "No"))
-		if("No")
-			chaplain_religion.deity_name = ChooseDeity(H,chaplain_religion,FALSE)
-			chooseBible(chaplain_religion,H,FALSE)
-		if("Yes")
-			chaplain_religion.deity_name = ChooseDeity(H,chaplain_religion,TRUE)
-			chooseBible(chaplain_religion,H,TRUE)
-
-	B.icon_state = chaplain_religion.holy_book.icon_state
-	B.item_state = chaplain_religion.holy_book.item_state
 
+	to_chat(user, "A great, intense revelation goes through your spirit. You are now the religious leader of [new_religion.name]. Convert people by [new_religion.convert_method]")
+	new_religion.convert(user, null, can_renounce = FALSE)
+	new_religion.OnPostActivation()
 	if(ticker)
-		ticker.religions += chaplain_religion
+		ticker.religions += new_religion
-	feedback_set_details("religion_deity","[chaplain_religion.deity_name]")
+	SStgui.close_uis(ui)
-	feedback_set_details("religion_book","[B.icon_state]")
+	qdel(ui)
 
-/proc/ChooseDeity(mob/chooser, datum/religion/R, var/default = FALSE)
+/datum/religion/proc/spawn_bible(atom/where)
-	if(default)
+	var/obj/item/weapon/storage/bible/new_bible = new bible_type(where)
-		if(!R.deity_names.len)
+	new_bible.name = bible_name
-			return R.deity_name
+	new_bible.icon_state = bookstyle
+	new_bible.item_state = bookstyle
+	new_bible.my_rel = src
+
+	var/list/data = all_bible_styles[bookstyle]
+	if(islist(data))
+		if(data["icon"])
+			new_bible.icon_state = data["icon"]
+			new_bible.item_state = data["icon"]
+		if(data["desc"])
+			new_bible.desc = data["desc"]
+		if(data["damtype"])
+			new_bible.damtype = data["damtype"]
 	else
-			return input(chooser, "Your religion is polytheistic. Who is your patron?") as anything in R.deity_names
+		new_bible.icon_state = data
-	else
+		new_bible.item_state = data
-		var/new_deity = copytext(sanitize(input(chooser, "Who do you worship?", "Name of Deity", R.deity_name)), 1, MAX_NAME_LEN)
+
-		if(length(new_deity))
+	holy_book = new_bible
-			return new_deity
+
-		else
+	return new_bible
-			return R.deity_name
 
 /mob/proc/renounce_faith()
 	set category = "IC"
@@ -125,7 +196,7 @@
 
 // This file lists all religions, as well as the prototype for a religion
 /datum/religion
-	// Following tradition, the default is Space Jesus (this is here to avoid people getting an empty relgion)
+	// Following tradition, the default is Space Jesus (this is here to avoid people getting an empty religion)
 	var/name = "Christianity"
 	var/deity_name = "Space Jesus"
 	var/bible_name = "The Holy Bible"
@@ -148,6 +219,12 @@
 	var/symbolstyle = 10
 	var/bookstyle = "Holy Light"
 
+/// Returns a string to be displayed in the ChooseReligion UI.
+/// Base proc just cares about whether it can convert anyone but it can be
+/// overridden to say anything.
+/datum/religion/proc/ui_notes()
+	return converts_everyone ? "Automatically converts everyone." : "N/A"
+
 /datum/religion/New() // For religions with several bibles/deities
 	if (bible_names.len)
 		bible_name = pick(bible_names)
@@ -279,6 +356,32 @@
 /datum/religion/proc/interceptPrayer(var/mob/living/L, var/deity, var/prayer_message)
 	return
 
+var/list/all_bible_styles = list(
+	"Bible" = list("icon" = "bible", "desc" = "Apply to head repeatedly.", "damtype" = BRUTE),
+	"Koran" = "koran",
+	"Scrapbook" = "scrapbook",
+	"Creeper" = "creeper",
+	"White Bible" = "white",
+	"Holy Light" = "holylight",
+	"Atheist" = "athiest",
+	"Tome" = list("icon" = "bible-tome", "desc" = "A Nanotrasen-approved heavily revised interpretation of Nar-Sie's teachings. Apply to head repeatedly."),
+	"The King in Yellow" = "kingyellow",
+	"Ithaqua" = "ithaqua",
+	"Scientology" = "scientology",
+	"The Bible melts" = "melted",
+	"Unaussprechlichen Kulten" = "kulten",
+	"Necronomicon" = "necronomicon",
+	"Book of Shadows" = "shadows",
+	"Torah" = "torah",
+	"Burning" = list("icon" = "burning", "damtype" = BURN),
+	"Honk" = "honkbook",
+	"Ianism" = "ianism",
+	"The Guide" = "guide",
+	"Slab" = list("icon" = "slab", "desc" = "A bizarre, ticking device... That looks broken."),
+	"The Dokument" = "gunbible",
+	"Holy Grimoire" = list("icon" = "holygrimoire", "desc" = "A version of the Christian Bible with several apocryphal sections appended which detail how to combat evil forces of the night. Apply to head repeatedly.")
+)
+
 /proc/chooseBible(var/datum/religion/R, var/mob/user, var/noinput = FALSE) //Noinput if they just wanted the defaults
 
 	if (!istype(R) || !user)
@@ -289,85 +392,17 @@
 
 	var/book_style = R.bookstyle
 	if(!noinput)
-		book_style = input(user, "Which bible style would you like?") as null|anything in list("Bible", "Koran", "Scrapbook", "Creeper", "White Bible", "Holy Light", "Athiest", "Slab", "Tome", "The King in Yellow", "Ithaqua", "Scientology", \
+		book_style = input(user, "Which bible style would you like?") as null|anything in all_bible_styles
-																		   "The Bible melts", "Unaussprechlichen Kulten", "Necronomicon", "Book of Shadows", "Torah", "Burning", "Honk", "Ianism", "The Guide", "The Dokument")
+	ASSERT(book_style in all_bible_styles)
-	switch(book_style)
+	var/list/data = all_bible_styles[book_style]
-		if("Koran")
+	if(islist(data))
-			R.holy_book.icon_state = "koran"
+		if(data["icon"])
-			R.holy_book.item_state = "koran"
+			R.holy_book.icon_state = data["icon"]
-		if("Scrapbook")
+			R.holy_book.item_state = data["icon"]
-			R.holy_book.icon_state = "scrapbook"
+		if(data["desc"])
-			R.holy_book.item_state = "scrapbook"
+			R.holy_book.desc = data["desc"]
-		if("Creeper")
+		if(data["damtype"])
-			R.holy_book.icon_state = "creeper"
+			R.holy_book.damtype = data["damtype"]
-			R.holy_book.item_state = "creeper"
-		if("White Bible")
-			R.holy_book.icon_state = "white"
-			R.holy_book.item_state = "white"
-		if("Holy Light")
-			R.holy_book.icon_state = "holylight"
-			R.holy_book.item_state = "holylight"
-		if("Athiest")
-			R.holy_book.icon_state = "athiest"
-			R.holy_book.item_state = "athiest"
-		if("Tome")
-			R.holy_book.icon_state = "bible-tome"
-			R.holy_book.item_state = "bible-tome"
-			R.holy_book.desc = "A Nanotrasen-approved heavily revised interpretation of Nar-Sie's teachings. Apply to head repeatedly."
-		if("The King in Yellow")
-			R.holy_book.icon_state = "kingyellow"
-			R.holy_book.item_state = "kingyellow"
-		if("Ithaqua")
-			R.holy_book.icon_state = "ithaqua"
-			R.holy_book.item_state = "ithaqua"
-		if("Scientology")
-			R.holy_book.icon_state = "scientology"
-			R.holy_book.item_state = "scientology"
-		if("The Bible melts")
-			R.holy_book.icon_state = "melted"
-			R.holy_book.item_state = "melted"
-		if("Unaussprechlichen Kulten")
-			R.holy_book.icon_state = "kulten"
-			R.holy_book.item_state = "kulten"
-		if("Necronomicon")
-			R.holy_book.icon_state = "necronomicon"
-			R.holy_book.item_state = "necronomicon"
-		if("Book of Shadows")
-			R.holy_book.icon_state = "shadows"
-			R.holy_book.item_state = "shadows"
-		if("Torah")
-			R.holy_book.icon_state = "torah"
-			R.holy_book.item_state = "torah"
-		if("Burning")
-			R.holy_book.icon_state = "burning"
-			R.holy_book.item_state = "burning"
-			R.holy_book.damtype = BURN
-		if("Honk")
-			R.holy_book.icon_state = "honkbook"
-			R.holy_book.item_state = "honkbook"
-		if("Ianism")
-			R.holy_book.icon_state = "ianism"
-			R.holy_book.item_state = "ianism"
-		if("The Guide")
-			R.holy_book.icon_state = "guide"
-			R.holy_book.item_state = "guide"
-		if("Slab")
-			R.holy_book.icon_state = "slab"
-			R.holy_book.item_state = "slab"
-			R.holy_book.desc = "A bizarre, ticking device... That looks broken."
-		if ("The Dokument")
-			R.holy_book.icon_state = "gunbible"
-			R.holy_book.item_state = "gunbible"
-		if("Holy Grimoire")
-			R.holy_book.icon_state = "holygrimoire"
-			R.holy_book.item_state = "holygrimoire"
-			R.holy_book.desc = "A version of the Christian Bible with several apocryphal sections appended which detail how to combat evil forces of the night. Apply to head repeatedly."
-		else
-			//If christian bible, revert to default
-			R.holy_book.icon_state = "bible"
-			R.holy_book.item_state = "bible"
-			R.holy_book.desc = "Apply to head repeatedly."
-			R.holy_book.damtype = BRUTE
 
 // The list of all religions spacemen have designed, so far.
 /datum/religion/default
@@ -881,6 +916,7 @@
 	H.equip_or_collect(new /obj/item/clothing/shoes/magboots(H), slot_shoes)
 
 /datum/religion/self
+	name = "Narcissism"
 	bible_type = /obj/item/weapon/storage/bible/booze
 	male_adept = "God"
 	female_adept = "Goddess"

code/modules/client/global cache.dm

@@ -653,3 +653,29 @@ var/list/asset_datums = list()
 
 			Insert(imgid, I)
 	return ..()
+
+/datum/asset/spritesheet/bible
+	name = "bible"
+
+/datum/asset/spritesheet/bible/register()
+	var/const/icon_file = 'icons/obj/storage/bibles.dmi'
+	var/list/bible_icon_states = icon_states(icon_file)
+
+	for(var/name in all_bible_styles)
+		var/list/data = all_bible_styles[name]
+
+		var/icon_state
+		if(islist(data))
+			icon_state = data["icon"]
+		else
+			icon_state = data
+
+		var/icon/I
+		if(icon_state in bible_icon_states)
+			I = icon(icon_file, icon_state, SOUTH)
+		else
+			stack_trace("[icon_state] is not a valid icon state, icon=[icon_file], icon_states=[bible_icon_states]")
+			I = icon('icons/turf/floors.dmi', "", SOUTH)
+
+		Insert(icon_state, I)
+	return ..()

tgui/packages/tgui/interfaces/ChooseReligion.js

@@ -0,0 +1,304 @@
+// Copyright (c) 2021 /vg/station coders
+// SPDX-License-Identifier: MIT
+
+/* eslint-disable max-len */
+import { Window } from '../layouts';
+import { useBackend, useLocalState } from '../backend';
+import { Dropdown, Popper, LabeledList, Box, Button, Flex, Input, Section, Stack } from '../components';
+import { classes } from 'common/react';
+import { createSearch } from 'common/string';
+
+/**
+ * Filters religions, applies search terms.
+ */
+export const selectReligions = (religions, searchText = '') => {
+  if (searchText) {
+    const testSearch = createSearch(searchText, religion => religion.name + religion.keywords?.join("") + religion.deityNames?.join(""));
+    return religions.filter(testSearch);
+  }
+  return religions;
+};
+
+const isBlank = function (str) {
+  return (!str || /^\s*$/.test(str));
+};
+
+const capitalize = (str) => {
+  if (typeof str !== 'string') return '';
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+export const CustomReligion = (props, context) => {
+  const { act, data } = useBackend(context);
+  const [
+    chosenData,
+    setChosenData,
+  ] = useLocalState(context, "chosenData", {
+    name: "Christianity",
+    deityName: "God",
+    bibleName: "The Bible",
+    bibleStyle: "Bible",
+  });
+  const [iconMenuOpen, setIconMenuOpen] = useLocalState(context, "iconMenuOpen", false);
+  const bibleStyles = data.bibleStyles;
+  return (
+    <Section title="Custom religion">
+      <LabeledList>
+        <LabeledList.Item key="Name" label="Name">
+          <Button.Input
+            defaultValue={chosenData.name}
+            currentValue={chosenData.name}
+            content={chosenData.name}
+            onCommit={(_, value) => !isBlank(value)
+              && setChosenData({ ...chosenData, name: value })} />
+        </LabeledList.Item>
+        <LabeledList.Item key="Deity name" label="Deity name">
+          <Button.Input
+            defaultValue={chosenData.deityName}
+            currentValue={chosenData.deityName}
+            content={chosenData.deityName}
+            onCommit={(_, value) => !isBlank(value)
+              && setChosenData({ ...chosenData, deityName: value })} />
+        </LabeledList.Item>
+        <LabeledList.Item key="Bible style" label="Bible style">
+          <Popper popperContent={iconMenuOpen && (
+            <Box width="200px" height={`${32*4}px`} backgroundColor="grey" padding="5px">
+              <Stack vertical fill>
+                <Stack.Item overflowX="hidden" overflowY="hidden">
+                  <Flex wrap>
+                    {bibleStyles.map(style => {
+                      return (
+                        <Flex.Item
+                          key={style.name}
+                          basis="39px">
+                          <Button
+                            tooltip={style.name}
+                            tooltipPosition="right"
+                            onClick={() => { setChosenData({
+                              ...chosenData, bibleStyle: style.name,
+                            }); setIconMenuOpen(false); }}>
+                            <span
+                              className={classes([
+                                'bible32x32',
+                                style.iconName,
+                              ])}
+                              style={{
+                                'vertical-align': 'middle',
+                                'horizontal-align': 'middle',
+                              }} />
+                          </Button>
+                        </Flex.Item>);
+                    })}
+                  </Flex>
+                </Stack.Item>
+              </Stack>
+            </Box>
+          )} options={{
+            placement: "right",
+          }}>
+            <Button
+              onClick={() => setIconMenuOpen(!iconMenuOpen)}>
+              <span
+                className={classes([
+                  'bible32x32',
+                  bibleStyles.find(entry => entry.name === chosenData.bibleStyle)?.iconName || bibleStyles[0].iconName,
+                ])}
+                style={{
+                  'vertical-align': 'middle',
+                  'horizontal-align': 'middle',
+                }} />
+            </Button>
+          </Popper>
+        </LabeledList.Item>
+        <LabeledList.Item key="Bible name" label="Bible name">
+          <Button.Input
+            defaultValue={chosenData.bibleName}
+            currentValue={chosenData.bibleName}
+            content={chosenData.bibleName}
+            onCommit={(_, value) => !isBlank(value)
+              && setChosenData({ ...chosenData, bibleName: value })} />
+        </LabeledList.Item>
+        <LabeledList.Item key="Job title" label="Job title">
+          Chaplain
+        </LabeledList.Item>
+        <LabeledList.Item key="Conversion ritual" label="Conversion ritual">
+          Splashing them with holy water, holding a bible in hand.
+        </LabeledList.Item>
+        <LabeledList.Item key="Preferred incense" label="Preferred incense">
+          Harebells
+        </LabeledList.Item>
+        <LabeledList.Item key="Notes" label="Notes">
+          This custom religion will have no special gear or other effect.
+        </LabeledList.Item>
+      </LabeledList>
+      <Button
+        lineHeight={2}
+        mt={1}
+        onClick={() => {
+          act("choose", {
+            custom: true,
+            ...chosenData.name && { name: chosenData.name },
+            ...chosenData.deityName && { deityName: chosenData.deityName },
+            ...chosenData.bibleName && { bibleName: chosenData.bibleName },
+            ...chosenData.bibleStyle && { bibleStyle: chosenData.bibleStyle },
+          });
+        }}>
+        OK
+      </Button>
+    </Section>
+  );
+};
+
+export const DefinedReligion = (props, context) => {
+  const { act, data } = useBackend(context);
+  const [
+    selectedReligion,
+    setSelectedReligion,
+  ] = useLocalState(context, "selectedReligion", data.religions.find(religion => religion.name === "Christianity"));
+  const [
+    selectedBible,
+    setSelectedBible,
+  ] = useLocalState(context, "selectedBible");
+  const [
+    selectedDeity,
+    setSelectedDeity,
+  ] = useLocalState(context, "selectedDeity");
+  return (
+    <Section title="Selected religion">
+      {selectedReligion && (
+        <LabeledList>
+          <LabeledList.Item key="Name" label="Name">
+            {selectedReligion.name}
+          </LabeledList.Item>
+          <LabeledList.Item key="Deity name" label="Deity name">
+            {selectedReligion.possibleDeityNames?.length ? (
+              <Dropdown
+                width="200px"
+                options={selectedReligion.possibleDeityNames}
+                selected={selectedDeity || selectedReligion.deityName}
+                onSelected={value => setSelectedDeity(value)} />
+            ) : selectedReligion.deityName}
+          </LabeledList.Item>
+          <LabeledList.Item key="Sacred text" label="Sacred text">
+            {selectedReligion.possibleBibleNames.length ? (
+              <Dropdown
+                width="200px"
+                options={selectedReligion.possibleBibleNames}
+                selected={selectedBible || selectedReligion.bibleName}
+                onSelected={value => setSelectedBible(value)} />
+            ) : selectedReligion.bibleName}
+            <span
+              className={classes([
+                'bible32x32',
+                selectedReligion.bibleStyleIcon,
+              ])}
+              style={{
+                'vertical-align': 'middle',
+                'horizontal-align': 'middle',
+              }} />
+          </LabeledList.Item>
+          <LabeledList.Item key="Male adept" label="Male adept">
+            {selectedReligion.maleAdept}
+          </LabeledList.Item>
+          <LabeledList.Item key="Female adept" label="Female adept">
+            {selectedReligion.femaleAdept}
+          </LabeledList.Item>
+          <LabeledList.Item key="Conversion ritual" label="Conversion ritual">
+            {capitalize(selectedReligion.convertMethod)}
+          </LabeledList.Item>
+          <LabeledList.Item key="Preferred incense" label="Preferred incense">
+            {capitalize(selectedReligion.preferredIncense)}
+          </LabeledList.Item>
+          <LabeledList.Item key="Notes" label="Notes">
+            {selectedReligion.notes}
+          </LabeledList.Item>
+        </LabeledList>
+      )}
+      <Button
+        lineHeight={2}
+        mt={1}
+        onClick={() => {
+          act("choose", { religionName: selectedReligion.name }); }}>
+        OK
+      </Button>
+    </Section>);
+};
+
+export const ChooseReligion = (props, context) => {
+  const { act, data } = useBackend(context);
+  const [
+    searchText,
+    setSearchText,
+  ] = useLocalState(context, 'searchText', '');
+  const religions = selectReligions(data.religions, searchText);
+  const [
+    selectedReligion,
+    setSelectedReligion,
+  ] = useLocalState(context, "selectedReligion", religions.find(religion => religion.name === "Christianity"));
+  const [
+    useCustomReligion,
+    setUseCustomReligion,
+  ] = useLocalState(context, "useCustomReligion", false);
+  return (
+    <Window
+      title="Choose a religion"
+      width={800}
+      height={340}>
+      <Stack fill m={1}>
+        <Stack.Item height="100%" width="50%">
+          <Flex height="100%" width="100%"
+            direction={"column"}>
+            <Flex.Item>
+              <Button
+                selected={useCustomReligion}
+                onClick={() => setUseCustomReligion(!useCustomReligion)}
+                textAlign="center" width="100%">
+                Create a custom religion
+              </Button>
+            </Flex.Item>
+            <Flex.Item>
+              {!useCustomReligion && (
+                <Input
+                  autoFocus
+                  fluid
+                  mt={1}
+                  placeholder="Search for a religion or deity"
+                  onInput={(_, value) => setSearchText(value)} />
+              )}
+            </Flex.Item>
+            <Flex.Item height="100%">
+              {!useCustomReligion &&(
+                <Section
+                  fill scrollable>
+                  {religions.map(religion => (
+                  // We're not using the component here because performance
+                  // would be absolutely abysmal (50+ ms for each re-render).
+                    <div
+                      key={religion.name}
+                      title={religion.name}
+                      className={classes([
+                        'Button',
+                        'Button--fluid',
+                        'Button--color--transparent',
+                        'Button--ellipsis',
+                        selectedReligion
+                && religion.name === selectedReligion.name
+                && 'Button--selected',
+                      ])}
+                      onClick={() => { setSelectedReligion(religion); }}>
+                      {religion.name}
+                    </div>
+                  ))}
+                </Section>)}
+            </Flex.Item>
+          </Flex>
+        </Stack.Item>
+        <Stack.Item width="100%">
+          <Box>
+            {useCustomReligion ? <CustomReligion /> : <DefinedReligion />}
+          </Box>
+        </Stack.Item>
+      </Stack>
+    </Window>
+  );
+};