@joystyk/catalog 0.0.0 → 0.2.0

package/dist/components/advertise.js

@@ -0,0 +1,1304 @@
+import { ADVERTISE_EMAIL, CLAIMS_RULES, CONTACT_HONEYPOT, CONTACT_LIMITS, FORMAT_RULES, LANDING_RULES, PROHIBITED, REFUND_RULES, RESTRICTED, REVIEW_STEPS, RULE_SUMMARY, SLOT_NAMES, SURFACE_NAMES, previewSize, sizeLabel } from "../advertise.js";
+import { ADVERTISE_PATH, ADVERTISE_POLICY_PATH } from "../routes.js";
+import { compiled } from "@gyral/core/compiled";
+import { each, invalid, nothing } from "@gyral/core";
+import { SLOTS } from "@joystyk/ui/slots";
+//#region src/components/advertise.ts
+var _gyral$t0 = {
+	"id": "19jxj6k4dn6",
+	"html": "<li><article class=\"slot-card\"><h3></h3><div class=\"slot-preview\"><svg class=\"slot-shape\" aria-hidden=\"true\" focusable=\"false\"><rect width=\"100%\" height=\"100%\" rx=\"3\"/></svg></div><p></p><dl class=\"slot-facts\"><div><dt>Appears on</dt><dd></dd></div><div><dt>Wide screens</dt><dd></dd></div><div><dt>Narrow screens</dt><dd></dd></div><div><dt>Label</dt><dd></dd></div><div><dt>Targeting</dt><dd></dd></div></dl></article></li>",
+	"parts": [
+		[
+			4,
+			[0, 0],
+			"aria-labelledby",
+			["slot-", ""]
+		],
+		[
+			4,
+			[
+				0,
+				0,
+				0
+			],
+			"id",
+			["slot-", ""]
+		],
+		[1, [
+			0,
+			0,
+			0
+		]],
+		[
+			3,
+			[
+				0,
+				0,
+				1,
+				0
+			],
+			"width"
+		],
+		[
+			3,
+			[
+				0,
+				0,
+				1,
+				0
+			],
+			"height"
+		],
+		[1, [
+			0,
+			0,
+			2
+		]],
+		[1, [
+			0,
+			0,
+			3,
+			0,
+			1
+		]],
+		[1, [
+			0,
+			0,
+			3,
+			1,
+			1
+		]],
+		[1, [
+			0,
+			0,
+			3,
+			2,
+			1
+		]],
+		[1, [
+			0,
+			0,
+			3,
+			3,
+			1
+		]],
+		[1, [
+			0,
+			0,
+			3,
+			4,
+			1
+		]]
+	],
+	"segments": [
+		"<li><article class=\"slot-card\"",
+		{
+			"k": "attr",
+			"name": "aria-labelledby",
+			"strings": ["slot-", ""]
+		},
+		"><h3",
+		{
+			"k": "attr",
+			"name": "id",
+			"strings": ["slot-", ""]
+		},
+		">",
+		{
+			"k": "child",
+			"in": "h3"
+		},
+		"</h3><div class=\"slot-preview\"><svg class=\"slot-shape\" aria-hidden=\"true\" focusable=\"false\"",
+		{
+			"k": "attr",
+			"name": "width"
+		},
+		{
+			"k": "attr",
+			"name": "height"
+		},
+		"><rect width=\"100%\" height=\"100%\" rx=\"3\"/></svg></div><p>",
+		{
+			"k": "child",
+			"in": "p"
+		},
+		"</p><dl class=\"slot-facts\"><div><dt>Appears on</dt><dd>",
+		{
+			"k": "child",
+			"in": "dd"
+		},
+		"</dd></div><div><dt>Wide screens</dt><dd>",
+		{
+			"k": "child",
+			"in": "dd"
+		},
+		"</dd></div><div><dt>Narrow screens</dt><dd>",
+		{
+			"k": "child",
+			"in": "dd"
+		},
+		"</dd></div><div><dt>Label</dt><dd>",
+		{
+			"k": "child",
+			"in": "dd"
+		},
+		"</dd></div><div><dt>Targeting</dt><dd>",
+		{
+			"k": "child",
+			"in": "dd"
+		},
+		"</dd></div></dl></article></li>"
+	]
+};
+var _gyral$t1 = {
+	"id": "2bdjjmp1ue3",
+	"html": "<section class=\"advertise-section\" aria-labelledby=\"slots-heading\"><h2 id=\"slots-heading\">The ad slots</h2><p>Each slot has a fixed size on wide and narrow screens, so your ad appears exactly as you made it and the page never jumps around it. The shapes below are drawn to scale.</p><ul class=\"slot-gallery\" role=\"list\"></ul></section>",
+	"parts": [[1, [0, 2]]],
+	"segments": [
+		"<section class=\"advertise-section\" aria-labelledby=\"slots-heading\"><h2 id=\"slots-heading\">The ad slots</h2><p>Each slot has a fixed size on wide and narrow screens, so your ad appears exactly as you made it and the page never jumps around it. The shapes below are drawn to scale.</p><ul class=\"slot-gallery\" role=\"list\">",
+		{
+			"k": "child",
+			"in": "ul"
+		},
+		"</ul></section>"
+	]
+};
+var _gyral$t2 = {
+	"id": "2c5grizm68x",
+	"html": "<section class=\"advertise-section\" aria-labelledby=\"audience-heading\"><h2 id=\"audience-heading\">Who sees your ad</h2><ul class=\"points\"><li><strong>Every age.</strong> Joystyk is for families, children and grown-ups alike, so every ad must suit all of them.</li><li><strong>Chosen by context, never by person.</strong> We pick an ad by the page, game, category and date. Everyone on the same page on the same day sees the same ad.</li><li><strong>No tracking.</strong> No cookies, profiles or third-party ad scripts. We never learn who saw your ad, and neither do you.</li><li><strong>Counted on our server.</strong> We report impressions and clicks per creative per day.</li></ul><p>We don't publish traffic figures yet. Once we have a season of data, we'll share them on request.</p></section>",
+	"parts": [],
+	"segments": ["<section class=\"advertise-section\" aria-labelledby=\"audience-heading\"><h2 id=\"audience-heading\">Who sees your ad</h2><ul class=\"points\"><li><strong>Every age.</strong> Joystyk is for families, children and grown-ups alike, so every ad must suit all of them.</li><li><strong>Chosen by context, never by person.</strong> We pick an ad by the page, game, category and date. Everyone on the same page on the same day sees the same ad.</li><li><strong>No tracking.</strong> No cookies, profiles or third-party ad scripts. We never learn who saw your ad, and neither do you.</li><li><strong>Counted on our server.</strong> We report impressions and clicks per creative per day.</li></ul><p>We don't publish traffic figures yet. Once we have a season of data, we'll share them on request.</p></section>"]
+};
+var _gyral$t3 = {
+	"id": "1f4fkiwv02v",
+	"html": "<section class=\"advertise-section\" aria-labelledby=\"rates-heading\"><h2 id=\"rates-heading\">Rates</h2><p>Contact us for rates. We price each booking by slot and dates: the home page banner sells by the day or the week, and the daily presenting sponsor by the day. We bill by invoice.</p></section>",
+	"parts": [],
+	"segments": ["<section class=\"advertise-section\" aria-labelledby=\"rates-heading\"><h2 id=\"rates-heading\">Rates</h2><p>Contact us for rates. We price each booking by slot and dates: the home page banner sells by the day or the week, and the daily presenting sponsor by the day. We bill by invoice.</p></section>"]
+};
+var _gyral$t4 = {
+	"id": "2crefdy4szm",
+	"html": "<li></li>",
+	"parts": [[1, [0]]],
+	"segments": [
+		"<li>",
+		{
+			"k": "child",
+			"in": "li"
+		},
+		"</li>"
+	]
+};
+var _gyral$t5 = {
+	"id": "198s56ly2ly",
+	"html": "<section class=\"advertise-section\" aria-labelledby=\"rules-heading\"><h2 id=\"rules-heading\">The rules every ad meets</h2><p>Children see these slots, so we hold every ad to children's advertising standards. In short:</p><ul class=\"points\"></ul><p><a>Read the full creative policy</a>, with the image specs for each slot.</p></section>",
+	"parts": [[1, [0, 2]], [
+		3,
+		[
+			0,
+			3,
+			0
+		],
+		"href"
+	]],
+	"segments": [
+		"<section class=\"advertise-section\" aria-labelledby=\"rules-heading\"><h2 id=\"rules-heading\">The rules every ad meets</h2><p>Children see these slots, so we hold every ad to children's advertising standards. In short:</p><ul class=\"points\">",
+		{
+			"k": "child",
+			"in": "ul"
+		},
+		"</ul><p><a",
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		">Read the full creative policy</a>, with the image specs for each slot.</p></section>"
+	]
+};
+var _gyral$t6 = {
+	"id": "10ubthogxl0",
+	"html": "<p class=\"field-error\"></p>",
+	"parts": [[
+		4,
+		[0],
+		"id",
+		["", "-error"]
+	], [1, [0]]],
+	"segments": [
+		"<p class=\"field-error\"",
+		{
+			"k": "attr",
+			"name": "id",
+			"strings": ["", "-error"]
+		},
+		">",
+		{
+			"k": "child",
+			"in": "p"
+		},
+		"</p>"
+	]
+};
+var _gyral$t7 = {
+	"id": "2asbq2uke16",
+	"html": " <span class=\"optional\">(optional)</span>",
+	"parts": [],
+	"segments": [" <span class=\"optional\">(optional)</span>"]
+};
+var _gyral$t8 = {
+	"id": "1xqpxyboz4s",
+	"html": "<div class=\"field\"><label><!----></label> <!----> <input></div>",
+	"parts": [
+		[
+			3,
+			[0, 0],
+			"for"
+		],
+		[
+			2,
+			[0, 0],
+			0
+		],
+		[0, [0, 0]],
+		[
+			2,
+			[0],
+			2
+		],
+		[
+			3,
+			[0, 4],
+			"id"
+		],
+		[
+			3,
+			[0, 4],
+			"name"
+		],
+		[
+			3,
+			[0, 4],
+			"type"
+		],
+		[
+			3,
+			[0, 4],
+			"autocomplete"
+		],
+		[
+			3,
+			[0, 4],
+			"maxlength"
+		],
+		[
+			5,
+			[0, 4],
+			"required"
+		],
+		[
+			3,
+			[0, 4],
+			"value"
+		],
+		[
+			3,
+			[0, 4],
+			"aria-describedby"
+		],
+		[7, [0, 4]]
+	],
+	"segments": [
+		"<div class=\"field\"><label",
+		{
+			"k": "attr",
+			"name": "for"
+		},
+		">",
+		{
+			"k": "child",
+			"in": "label"
+		},
+		"<!---->",
+		{
+			"k": "child",
+			"in": "label"
+		},
+		"</label> ",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"<!----> <input",
+		{
+			"k": "attr",
+			"name": "id"
+		},
+		{
+			"k": "attr",
+			"name": "name"
+		},
+		{
+			"k": "attr",
+			"name": "type"
+		},
+		{
+			"k": "attr",
+			"name": "autocomplete"
+		},
+		{
+			"k": "attr",
+			"name": "maxlength"
+		},
+		{
+			"k": "bool",
+			"name": "required"
+		},
+		{
+			"k": "attr",
+			"name": "value"
+		},
+		{
+			"k": "attr",
+			"name": "aria-describedby"
+		},
+		{ "k": "hook" },
+		"></div>"
+	]
+};
+var _gyral$t9 = {
+	"id": "3pcw9qbqt4",
+	"html": "<li><label class=\"choice\"> <input type=\"checkbox\" name=\"slots\"> <!----> </label></li>",
+	"parts": [
+		[
+			3,
+			[
+				0,
+				0,
+				1
+			],
+			"value"
+		],
+		[
+			5,
+			[
+				0,
+				0,
+				1
+			],
+			"checked"
+		],
+		[
+			2,
+			[0, 0],
+			3
+		]
+	],
+	"segments": [
+		"<li><label class=\"choice\"> <input type=\"checkbox\" name=\"slots\"",
+		{
+			"k": "attr",
+			"name": "value"
+		},
+		{
+			"k": "bool",
+			"name": "checked"
+		},
+		"> ",
+		{
+			"k": "child",
+			"in": "label"
+		},
+		"<!----> </label></li>"
+	]
+};
+var _gyral$t10 = {
+	"id": "20i0erbfz1v",
+	"html": "<a></a>",
+	"parts": [[
+		4,
+		[0],
+		"href",
+		["#", ""]
+	], [1, [0]]],
+	"segments": [
+		"<a",
+		{
+			"k": "attr",
+			"name": "href",
+			"strings": ["#", ""]
+		},
+		">",
+		{
+			"k": "child",
+			"in": "a"
+		},
+		"</a>"
+	]
+};
+var _gyral$t11 = {
+	"id": "1ehrvlrxspw",
+	"html": "<div class=\"form-errors\" role=\"alert\" aria-labelledby=\"form-errors-heading\"><h3 id=\"form-errors-heading\">Your message wasn't sent</h3><ul></ul></div>",
+	"parts": [[1, [0, 1]]],
+	"segments": [
+		"<div class=\"form-errors\" role=\"alert\" aria-labelledby=\"form-errors-heading\"><h3 id=\"form-errors-heading\">Your message wasn't sent</h3><ul>",
+		{
+			"k": "child",
+			"in": "ul"
+		},
+		"</ul></div>"
+	]
+};
+var _gyral$t12 = {
+	"id": "2a2uir5v6dv",
+	"html": "<a></a>",
+	"parts": [[
+		3,
+		[0],
+		"href"
+	], [1, [0]]],
+	"segments": [
+		"<a",
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		">",
+		{
+			"k": "child",
+			"in": "a"
+		},
+		"</a>"
+	]
+};
+var _gyral$t13 = {
+	"id": "qn33rfgouf",
+	"html": "<section class=\"advertise-section contact\" aria-labelledby=\"contact-heading\"><h2 id=\"contact-heading\">Get in touch</h2><p>Tell us what you'd like to advertise and when. We'll reply by email within <!----> business days, with availability and rates. You can also write to us at <!---->.</p><form class=\"contact-form\" method=\"post\" aria-labelledby=\"contact-heading\"><!----> <fieldset class=\"field\" id=\"contact-slots\"><legend>Slots you're interested in</legend><ul class=\"choices\" role=\"list\"></ul></fieldset><fieldset class=\"field dates\" aria-describedby=\"contact-dates-hint\"><legend>Dates</legend><p class=\"hint\" id=\"contact-dates-hint\">The first and last day you'd like your ad to run.</p><div class=\"date-pair\"><div class=\"field\"><label for=\"contact-start\">First day</label> <!----> <input id=\"contact-start\" name=\"start\" type=\"date\"></div><div class=\"field\"><label for=\"contact-end\">Last day</label> <!----> <input id=\"contact-end\" name=\"end\" type=\"date\"></div></div></fieldset><div class=\"field\"><label for=\"contact-message\">Message</label><p class=\"hint\" id=\"contact-message-hint\">What you'd like to advertise, and anything else we should know.</p><!----> <textarea id=\"contact-message\" name=\"message\" rows=\"6\" required>\n</textarea></div><div class=\"trap\"><label>Leave this field empty</label> <input type=\"text\" tabindex=\"-1\" autocomplete=\"off\"></div><p class=\"form-note\"></p><p><button type=\"submit\" class=\"cta\">Send message</button></p></form></section>",
+	"parts": [
+		[
+			2,
+			[0, 1],
+			1
+		],
+		[
+			2,
+			[0, 1],
+			3
+		],
+		[
+			3,
+			[0, 2],
+			"action"
+		],
+		[
+			2,
+			[0, 2],
+			0
+		],
+		[
+			2,
+			[0, 2],
+			2
+		],
+		[
+			3,
+			[
+				0,
+				2,
+				2
+			],
+			"aria-describedby"
+		],
+		[0, [
+			0,
+			2,
+			2,
+			0
+		]],
+		[
+			2,
+			[
+				0,
+				2,
+				2
+			],
+			1
+		],
+		[1, [
+			0,
+			2,
+			2,
+			1
+		]],
+		[0, [
+			0,
+			2,
+			3,
+			0
+		]],
+		[
+			2,
+			[
+				0,
+				2,
+				3,
+				2,
+				0
+			],
+			2
+		],
+		[
+			3,
+			[
+				0,
+				2,
+				3,
+				2,
+				0,
+				4
+			],
+			"value"
+		],
+		[
+			3,
+			[
+				0,
+				2,
+				3,
+				2,
+				0,
+				4
+			],
+			"aria-describedby"
+		],
+		[7, [
+			0,
+			2,
+			3,
+			2,
+			0,
+			4
+		]],
+		[
+			2,
+			[
+				0,
+				2,
+				3,
+				2,
+				1
+			],
+			2
+		],
+		[
+			3,
+			[
+				0,
+				2,
+				3,
+				2,
+				1,
+				4
+			],
+			"value"
+		],
+		[
+			3,
+			[
+				0,
+				2,
+				3,
+				2,
+				1,
+				4
+			],
+			"aria-describedby"
+		],
+		[7, [
+			0,
+			2,
+			3,
+			2,
+			1,
+			4
+		]],
+		[
+			2,
+			[
+				0,
+				2,
+				4
+			],
+			2
+		],
+		[
+			3,
+			[
+				0,
+				2,
+				4,
+				4
+			],
+			"maxlength"
+		],
+		[
+			3,
+			[
+				0,
+				2,
+				4,
+				4
+			],
+			"aria-describedby"
+		],
+		[7, [
+			0,
+			2,
+			4,
+			4
+		]],
+		[8, [
+			0,
+			2,
+			4,
+			4
+		]],
+		[
+			4,
+			[
+				0,
+				2,
+				5,
+				0
+			],
+			"for",
+			["contact-", ""]
+		],
+		[
+			4,
+			[
+				0,
+				2,
+				5,
+				2
+			],
+			"id",
+			["contact-", ""]
+		],
+		[
+			3,
+			[
+				0,
+				2,
+				5,
+				2
+			],
+			"name"
+		],
+		[1, [
+			0,
+			2,
+			6
+		]]
+	],
+	"segments": [
+		"<section class=\"advertise-section contact\" aria-labelledby=\"contact-heading\"><h2 id=\"contact-heading\">Get in touch</h2><p>Tell us what you'd like to advertise and when. We'll reply by email within ",
+		{
+			"k": "child",
+			"in": "p"
+		},
+		"<!----> business days, with availability and rates. You can also write to us at ",
+		{
+			"k": "child",
+			"in": "p"
+		},
+		"<!---->.</p><form class=\"contact-form\" method=\"post\" aria-labelledby=\"contact-heading\"",
+		{
+			"k": "attr",
+			"name": "action"
+		},
+		">",
+		{
+			"k": "child",
+			"in": "form"
+		},
+		"<!----> ",
+		{
+			"k": "child",
+			"in": "form"
+		},
+		"<fieldset class=\"field\" id=\"contact-slots\"",
+		{
+			"k": "attr",
+			"name": "aria-describedby"
+		},
+		"><legend>Slots you're interested in",
+		{
+			"k": "child",
+			"in": "legend"
+		},
+		"</legend>",
+		{
+			"k": "child",
+			"in": "fieldset"
+		},
+		"<ul class=\"choices\" role=\"list\">",
+		{
+			"k": "child",
+			"in": "ul"
+		},
+		"</ul></fieldset><fieldset class=\"field dates\" aria-describedby=\"contact-dates-hint\"><legend>Dates",
+		{
+			"k": "child",
+			"in": "legend"
+		},
+		"</legend><p class=\"hint\" id=\"contact-dates-hint\">The first and last day you'd like your ad to run.</p><div class=\"date-pair\"><div class=\"field\"><label for=\"contact-start\">First day</label> ",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"<!----> <input id=\"contact-start\" name=\"start\" type=\"date\"",
+		{
+			"k": "attr",
+			"name": "value"
+		},
+		{
+			"k": "attr",
+			"name": "aria-describedby"
+		},
+		{ "k": "hook" },
+		"></div><div class=\"field\"><label for=\"contact-end\">Last day</label> ",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"<!----> <input id=\"contact-end\" name=\"end\" type=\"date\"",
+		{
+			"k": "attr",
+			"name": "value"
+		},
+		{
+			"k": "attr",
+			"name": "aria-describedby"
+		},
+		{ "k": "hook" },
+		"></div></div></fieldset><div class=\"field\"><label for=\"contact-message\">Message</label><p class=\"hint\" id=\"contact-message-hint\">What you'd like to advertise, and anything else we should know.</p>",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"<!----> <textarea id=\"contact-message\" name=\"message\" rows=\"6\" required",
+		{
+			"k": "attr",
+			"name": "maxlength"
+		},
+		{
+			"k": "attr",
+			"name": "aria-describedby"
+		},
+		{ "k": "hook" },
+		">\n",
+		{ "k": "text" },
+		"</textarea></div><div class=\"trap\"><label",
+		{
+			"k": "attr",
+			"name": "for",
+			"strings": ["contact-", ""]
+		},
+		">Leave this field empty</label> <input type=\"text\" tabindex=\"-1\" autocomplete=\"off\"",
+		{
+			"k": "attr",
+			"name": "id",
+			"strings": ["contact-", ""]
+		},
+		{
+			"k": "attr",
+			"name": "name"
+		},
+		"></div><p class=\"form-note\">",
+		{
+			"k": "child",
+			"in": "p"
+		},
+		"</p><p><button type=\"submit\" class=\"cta\">Send message</button></p></form></section>"
+	]
+};
+var _gyral$t14 = {
+	"id": "2dsdn8378cu",
+	"html": "<div class=\"advertise-page\"><header class=\"page-head\"><p class=\"kicker\">Advertise</p><h1 tabindex=\"-1\">Advertise with us</h1><p class=\"lede\">Joystyk sells its own ad space, like billboards beside a road. Your ad sits in a fixed, labeled slot beside free games for every age: never inside a game and never during play.</p></header><!----> <!----> <!----> <!----> </div>",
+	"parts": [
+		[
+			2,
+			[0],
+			1
+		],
+		[
+			2,
+			[0],
+			3
+		],
+		[
+			2,
+			[0],
+			5
+		],
+		[
+			2,
+			[0],
+			7
+		],
+		[0, [0]]
+	],
+	"segments": [
+		"<div class=\"advertise-page\"><header class=\"page-head\"><p class=\"kicker\">Advertise</p><h1 tabindex=\"-1\">Advertise with us</h1><p class=\"lede\">Joystyk sells its own ad space, like billboards beside a road. Your ad sits in a fixed, labeled slot beside free games for every age: never inside a game and never during play.</p></header>",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"<!----> ",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"<!----> ",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"<!----> ",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"<!----> ",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"</div>"
+	]
+};
+var _gyral$t15 = {
+	"id": "15h47s4kd6o",
+	"html": "<div><dt></dt><dd></dd></div>",
+	"parts": [[1, [0, 0]], [1, [0, 1]]],
+	"segments": [
+		"<div><dt>",
+		{
+			"k": "child",
+			"in": "dt"
+		},
+		"</dt><dd>",
+		{
+			"k": "child",
+			"in": "dd"
+		},
+		"</dd></div>"
+	]
+};
+var _gyral$t16 = {
+	"id": "y63udkaoj1",
+	"html": "<tr><th scope=\"row\"></th><td></td><td></td><td></td></tr>",
+	"parts": [
+		[1, [0, 0]],
+		[1, [0, 1]],
+		[1, [0, 2]],
+		[1, [0, 3]]
+	],
+	"segments": [
+		"<tr><th scope=\"row\">",
+		{
+			"k": "child",
+			"in": "th"
+		},
+		"</th><td>",
+		{
+			"k": "child",
+			"in": "td"
+		},
+		"</td><td>",
+		{
+			"k": "child",
+			"in": "td"
+		},
+		"</td><td>",
+		{
+			"k": "child",
+			"in": "td"
+		},
+		"</td></tr>"
+	]
+};
+var _gyral$t17 = {
+	"id": "16yic2my4lg",
+	"html": "<article class=\"advertise-page policy-page\" aria-labelledby=\"policy-title\"><nav class=\"crumbs\" aria-label=\"Breadcrumb\"><ol><li><a>Advertise with us</a></li><li><a aria-current=\"page\">Creative policy</a></li></ol></nav><header class=\"page-head\"><p class=\"kicker\">For advertisers</p><h1 id=\"policy-title\" tabindex=\"-1\">Creative policy</h1><p class=\"lede\">Children play on Joystyk, so every ad must suit every age. These rules follow children's advertising standards in the US and the UK, and every creative meets them before it runs.</p></header><section class=\"advertise-section\" aria-labelledby=\"prohibited-heading\"><h2 id=\"prohibited-heading\">Products we never advertise</h2><dl class=\"policy-list\"></dl></section><section class=\"advertise-section\" aria-labelledby=\"restricted-heading\"><h2 id=\"restricted-heading\">Products we advertise with conditions</h2><dl class=\"policy-list\"></dl></section><section class=\"advertise-section\" aria-labelledby=\"claims-heading\"><h2 id=\"claims-heading\">Honest ads, no pressure</h2><ul class=\"points\"></ul></section><section class=\"advertise-section\" aria-labelledby=\"labels-heading\"><h2 id=\"labels-heading\">Labels</h2><p>Every slot carries a label we add: “Advertisement”, or “Sponsored” for the daily presenting sponsor. Your creative must not hide the label, imitate it or call itself anything else.</p></section><section class=\"advertise-section\" aria-labelledby=\"landing-heading\"><h2 id=\"landing-heading\">Landing pages</h2><ul class=\"points\"></ul></section><section class=\"advertise-section\" aria-labelledby=\"specs-heading\"><h2 id=\"specs-heading\">Image specs</h2><ul class=\"points\"></ul><div class=\"table-scroll\" role=\"region\" aria-labelledby=\"specs-caption\" tabindex=\"0\"><table class=\"spec-table\"><caption id=\"specs-caption\">The box each slot reserves, in CSS pixels</caption><thead><tr><th scope=\"col\">Slot</th><th scope=\"col\">Wide screens</th><th scope=\"col\">Narrow screens</th><th scope=\"col\">Label</th></tr></thead><tbody></tbody></table></div></section><section class=\"advertise-section\" aria-labelledby=\"review-heading\"><h2 id=\"review-heading\">Review</h2><ol class=\"steps\"></ol><p>We may refuse any creative, and take down any ad at any time, if it breaks these rules or we judge it unsuitable for a young audience. When we take an ad down, we tell you why.</p></section><section class=\"advertise-section\" aria-labelledby=\"refunds-heading\"><h2 id=\"refunds-heading\">If an ad doesn't run</h2><ul class=\"points\"></ul></section><p><a>Ask us about advertising</a></p></article>",
+	"parts": [
+		[
+			3,
+			[
+				0,
+				0,
+				0,
+				0,
+				0
+			],
+			"href"
+		],
+		[
+			3,
+			[
+				0,
+				0,
+				0,
+				1,
+				0
+			],
+			"href"
+		],
+		[1, [
+			0,
+			2,
+			1
+		]],
+		[1, [
+			0,
+			3,
+			1
+		]],
+		[1, [
+			0,
+			4,
+			1
+		]],
+		[1, [
+			0,
+			6,
+			1
+		]],
+		[1, [
+			0,
+			7,
+			1
+		]],
+		[1, [
+			0,
+			7,
+			2,
+			0,
+			2
+		]],
+		[1, [
+			0,
+			8,
+			1
+		]],
+		[1, [
+			0,
+			9,
+			1
+		]],
+		[
+			3,
+			[
+				0,
+				10,
+				0
+			],
+			"href"
+		]
+	],
+	"segments": [
+		"<article class=\"advertise-page policy-page\" aria-labelledby=\"policy-title\"><nav class=\"crumbs\" aria-label=\"Breadcrumb\"><ol><li><a",
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		">Advertise with us</a></li><li><a aria-current=\"page\"",
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		">Creative policy</a></li></ol></nav><header class=\"page-head\"><p class=\"kicker\">For advertisers</p><h1 id=\"policy-title\" tabindex=\"-1\">Creative policy</h1><p class=\"lede\">Children play on Joystyk, so every ad must suit every age. These rules follow children's advertising standards in the US and the UK, and every creative meets them before it runs.</p></header><section class=\"advertise-section\" aria-labelledby=\"prohibited-heading\"><h2 id=\"prohibited-heading\">Products we never advertise</h2><dl class=\"policy-list\">",
+		{
+			"k": "child",
+			"in": "dl"
+		},
+		"</dl></section><section class=\"advertise-section\" aria-labelledby=\"restricted-heading\"><h2 id=\"restricted-heading\">Products we advertise with conditions</h2><dl class=\"policy-list\">",
+		{
+			"k": "child",
+			"in": "dl"
+		},
+		"</dl></section><section class=\"advertise-section\" aria-labelledby=\"claims-heading\"><h2 id=\"claims-heading\">Honest ads, no pressure</h2><ul class=\"points\">",
+		{
+			"k": "child",
+			"in": "ul"
+		},
+		"</ul></section><section class=\"advertise-section\" aria-labelledby=\"labels-heading\"><h2 id=\"labels-heading\">Labels</h2><p>Every slot carries a label we add: “Advertisement”, or “Sponsored” for the daily presenting sponsor. Your creative must not hide the label, imitate it or call itself anything else.</p></section><section class=\"advertise-section\" aria-labelledby=\"landing-heading\"><h2 id=\"landing-heading\">Landing pages</h2><ul class=\"points\">",
+		{
+			"k": "child",
+			"in": "ul"
+		},
+		"</ul></section><section class=\"advertise-section\" aria-labelledby=\"specs-heading\"><h2 id=\"specs-heading\">Image specs</h2><ul class=\"points\">",
+		{
+			"k": "child",
+			"in": "ul"
+		},
+		"</ul><div class=\"table-scroll\" role=\"region\" aria-labelledby=\"specs-caption\" tabindex=\"0\"><table class=\"spec-table\"><caption id=\"specs-caption\">The box each slot reserves, in CSS pixels</caption><thead><tr><th scope=\"col\">Slot</th><th scope=\"col\">Wide screens</th><th scope=\"col\">Narrow screens</th><th scope=\"col\">Label</th></tr></thead><tbody>",
+		{
+			"k": "child",
+			"in": "tbody"
+		},
+		"</tbody></table></div></section><section class=\"advertise-section\" aria-labelledby=\"review-heading\"><h2 id=\"review-heading\">Review</h2><ol class=\"steps\">",
+		{
+			"k": "child",
+			"in": "ol"
+		},
+		"</ol><p>We may refuse any creative, and take down any ad at any time, if it breaks these rules or we judge it unsuitable for a young audience. When we take an ad down, we tell you why.</p></section><section class=\"advertise-section\" aria-labelledby=\"refunds-heading\"><h2 id=\"refunds-heading\">If an ad doesn't run</h2><ul class=\"points\">",
+		{
+			"k": "child",
+			"in": "ul"
+		},
+		"</ul></section><p><a",
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		">Ask us about advertising</a></p></article>"
+	]
+};
+var _gyral$t18 = {
+	"id": "1hktygu39t9",
+	"html": "<section class=\"sent\" aria-labelledby=\"sent-heading\"><p class=\"kicker\">Message sent</p><h1 id=\"sent-heading\" tabindex=\"-1\">Thanks for getting in touch</h1><p class=\"lede\">We read every message about advertising, and we'll reply by email within <!----> business days.</p><p>To add something to your message, write to us at <!---->.</p><ul class=\"sent-links\"><li><a>Back to Advertise with us</a></li><li><a href=\"/\">See all games</a></li></ul></section>",
+	"parts": [
+		[
+			2,
+			[0, 2],
+			1
+		],
+		[
+			2,
+			[0, 3],
+			1
+		],
+		[
+			3,
+			[
+				0,
+				4,
+				0,
+				0
+			],
+			"href"
+		]
+	],
+	"segments": [
+		"<section class=\"sent\" aria-labelledby=\"sent-heading\"><p class=\"kicker\">Message sent</p><h1 id=\"sent-heading\" tabindex=\"-1\">Thanks for getting in touch</h1><p class=\"lede\">We read every message about advertising, and we'll reply by email within ",
+		{
+			"k": "child",
+			"in": "p"
+		},
+		"<!----> business days.</p><p>To add something to your message, write to us at ",
+		{
+			"k": "child",
+			"in": "p"
+		},
+		"<!---->.</p><ul class=\"sent-links\"><li><a",
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		">Back to Advertise with us</a></li><li><a href=\"/\">See all games</a></li></ul></section>"
+	]
+};
+var TARGET_NAMES = {
+	page: "page",
+	game: "game",
+	category: "category",
+	date: "date"
+};
+/** "a, b and c". */
+var listWords = (words) => words.length < 2 ? words[0] ?? "" : `${words.slice(0, -1).join(", ")} and ${words.at(-1) ?? ""}`;
+var capitalize = (text) => `${text.charAt(0).toUpperCase()}${text.slice(1)}`;
+/** Previews are drawn at a third of the slot's size, so they compare with each other. */
+var PREVIEW_SCALE = 3;
+var SlotCard = (s) => {
+	const box = previewSize(s);
+	return compiled(_gyral$t0, [
+		s.id,
+		s.id,
+		SLOT_NAMES[s.id],
+		Math.round(box.width / PREVIEW_SCALE),
+		Math.round(box.height / PREVIEW_SCALE),
+		s.placement,
+		capitalize(listWords(s.surfaces.map((x) => SURFACE_NAMES[x]))),
+		s.sizes.wide === null ? "Not shown" : sizeLabel(s.sizes.wide),
+		s.sizes.narrow === null ? "Not shown" : sizeLabel(s.sizes.narrow),
+		s.label,
+		capitalize(listWords(s.targeting.map((t) => TARGET_NAMES[t])))
+	]);
+};
+var gallery = () => compiled(_gyral$t1, [each(SLOTS, (s) => s.id, SlotCard)]);
+var audience = () => compiled(_gyral$t2, []);
+var rates = () => compiled(_gyral$t3, []);
+var Point = (text) => compiled(_gyral$t4, [text]);
+var rules = () => compiled(_gyral$t5, [each(RULE_SUMMARY, (r) => r, Point), ADVERTISE_POLICY_PATH]);
+var text = (c, name) => {
+	const value = c.contactForm?.values[name];
+	return typeof value === "string" ? value : "";
+};
+var chosenSlots = (c) => {
+	const value = c.contactForm?.values["slots"];
+	return value === void 0 ? [] : typeof value === "string" ? [value] : value;
+};
+/** The ids an input's aria-describedby names: its hint and its error, when present. */
+var describedBy = (id, hint, errors) => {
+	const ids = [...hint ? [`${id}-hint`] : [], ...errors === void 0 ? [] : [`${id}-error`]];
+	return ids.length === 0 ? null : ids.join(" ");
+};
+var fieldError = (id, errors) => errors === void 0 ? nothing : compiled(_gyral$t6, [id, errors.join(" ")]);
+var TEXT_FIELDS = [
+	{
+		name: "name",
+		label: "Your name",
+		type: "text",
+		autocomplete: "name",
+		required: true
+	},
+	{
+		name: "company",
+		label: "Company or organization",
+		type: "text",
+		autocomplete: "organization",
+		required: false
+	},
+	{
+		name: "email",
+		label: "Email address",
+		type: "email",
+		autocomplete: "email",
+		required: true
+	}
+];
+var optional = compiled(_gyral$t7, []);
+var textField = (f, value, errors) => {
+	const id = `contact-${f.name}`;
+	return compiled(_gyral$t8, [
+		id,
+		f.label,
+		f.required ? nothing : optional,
+		fieldError(id, errors),
+		id,
+		f.name,
+		f.type,
+		f.autocomplete,
+		CONTACT_LIMITS[f.name],
+		f.required,
+		value,
+		describedBy(id, false, errors),
+		invalid(errors)
+	]);
+};
+var SlotChoice = (s, checked) => compiled(_gyral$t9, [
+	s.id,
+	checked,
+	SLOT_NAMES[s.id]
+]);
+/** Where each field's error links to in the summary. */
+var FIELD_TARGETS = {
+	name: "contact-name",
+	company: "contact-company",
+	email: "contact-email",
+	slots: "contact-slots",
+	start: "contact-start",
+	end: "contact-end",
+	message: "contact-message"
+};
+var ProblemItem = (p) => {
+	const target = FIELD_TARGETS[p.field];
+	return compiled(_gyral$t4, [target === void 0 ? p.message : compiled(_gyral$t10, [target, p.message])]);
+};
+var problems = (errors) => ["", ...Object.keys(FIELD_TARGETS)].flatMap((field) => (errors[field] ?? []).map((message) => ({
+	field,
+	message
+})));
+var errorSummary = (errors) => {
+	const list = problems(errors);
+	return list.length === 0 ? nothing : compiled(_gyral$t11, [each(list, (p) => `${p.field}:${p.message}`, ProblemItem)]);
+};
+/** How the form's messages are used and kept (advertising-policy.md, "Contact form messages"). */
+var PRIVACY_NOTE = `We use what you send only to reply to you about advertising. We never add you to a mailing list or share your details. We delete each message ${String(90)} days after we've dealt with it, and always within ${String(12)} months of its arrival. This form is for businesses: if you're under 18, please don't use it.`;
+/** The address, as text anyone can select and copy, and as a mailto: link for those whose mail app opens. */
+var emailLink = () => compiled(_gyral$t12, [`mailto:${ADVERTISE_EMAIL}`, ADVERTISE_EMAIL]);
+var contactForm = (c) => {
+	const errors = c.contactForm?.errors ?? {};
+	const chosen = chosenSlots(c);
+	const isChosen = (s) => chosen.includes(s.id);
+	return compiled(_gyral$t13, [
+		3,
+		emailLink(),
+		ADVERTISE_PATH,
+		errorSummary(errors),
+		TEXT_FIELDS.map((f) => textField(f, text(c, f.name), errors[f.name])),
+		describedBy("contact-slots", false, errors["slots"]),
+		optional,
+		fieldError("contact-slots", errors["slots"]),
+		each(SLOTS, (s) => s.id, SlotChoice, isChosen),
+		optional,
+		fieldError("contact-start", errors["start"]),
+		text(c, "start"),
+		describedBy("contact-start", false, errors["start"]),
+		invalid(errors["start"]),
+		fieldError("contact-end", errors["end"]),
+		text(c, "end"),
+		describedBy("contact-end", false, errors["end"]),
+		invalid(errors["end"]),
+		fieldError("contact-message", errors["message"]),
+		CONTACT_LIMITS.message,
+		describedBy("contact-message", true, errors["message"]),
+		invalid(errors["message"]),
+		text(c, "message"),
+		CONTACT_HONEYPOT,
+		CONTACT_HONEYPOT,
+		CONTACT_HONEYPOT,
+		PRIVACY_NOTE
+	]);
+};
+function advertiseView(c) {
+	return compiled(_gyral$t14, [
+		audience(),
+		gallery(),
+		rates(),
+		rules(),
+		contactForm(c)
+	]);
+}
+var PolicyEntry = (p) => compiled(_gyral$t15, [p.name, p.detail]);
+var SpecRow = (s) => compiled(_gyral$t16, [
+	SLOT_NAMES[s.id],
+	s.sizes.wide === null ? "Not shown" : sizeLabel(s.sizes.wide),
+	s.sizes.narrow === null ? "Not shown" : sizeLabel(s.sizes.narrow),
+	s.label
+]);
+var Step = (text) => compiled(_gyral$t4, [text]);
+function policyView() {
+	return compiled(_gyral$t17, [
+		ADVERTISE_PATH,
+		ADVERTISE_POLICY_PATH,
+		each(PROHIBITED, (p) => p.name, PolicyEntry),
+		each(RESTRICTED, (p) => p.name, PolicyEntry),
+		each(CLAIMS_RULES, (r) => r, Point),
+		each(LANDING_RULES, (r) => r, Point),
+		each(FORMAT_RULES, (r) => r, Point),
+		each(SLOTS, (s) => s.id, SpecRow),
+		each(REVIEW_STEPS, (r) => r, Step),
+		each(REFUND_RULES, (r) => r, Point),
+		`${ADVERTISE_PATH}#contact-heading`
+	]);
+}
+var sentView = () => compiled(_gyral$t18, [
+	3,
+	emailLink(),
+	ADVERTISE_PATH
+]);
+//#endregion
+export { advertiseView, policyView, sentView };
+
+//# sourceMappingURL=advertise.js.map