diff --git a/index.html b/index.html index a4949c5..14d92be 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ HexFlagGen - +
-

HexFlagGen

+

SteamTheWoz

-

+ type="number" + id="steam_game" + style="width: 8ch" + min="10" + value="620" + /> +
+
-
- -
- + O + Scott's Stash )
+ - +
-

- Hex: ... -

- +
diff --git a/public/woz0.png b/public/woz0.png new file mode 100644 index 0000000..124690b Binary files /dev/null and b/public/woz0.png differ diff --git a/public/woz1.png b/public/woz1.png new file mode 100644 index 0000000..b7e2849 Binary files /dev/null and b/public/woz1.png differ diff --git a/public/woz2.png b/public/woz2.png new file mode 100644 index 0000000..5dde1b0 Binary files /dev/null and b/public/woz2.png differ diff --git a/public/woz3.png b/public/woz3.png new file mode 100644 index 0000000..1fb567e Binary files /dev/null and b/public/woz3.png differ diff --git a/public/woz4.png b/public/woz4.png new file mode 100644 index 0000000..0911dbe Binary files /dev/null and b/public/woz4.png differ diff --git a/public/woz5.png b/public/woz5.png new file mode 100644 index 0000000..f2ebe73 Binary files /dev/null and b/public/woz5.png differ diff --git a/public/woz6.png b/public/woz6.png new file mode 100644 index 0000000..b2dbd7b Binary files /dev/null and b/public/woz6.png differ diff --git a/public/woz7.png b/public/woz7.png new file mode 100644 index 0000000..7e29f70 Binary files /dev/null and b/public/woz7.png differ diff --git a/public/woz8.png b/public/woz8.png new file mode 100644 index 0000000..6b311bf Binary files /dev/null and b/public/woz8.png differ diff --git a/public/woz9.png b/public/woz9.png new file mode 100644 index 0000000..a8a253b Binary files /dev/null and b/public/woz9.png differ diff --git a/public/wozstash.png b/public/wozstash.png new file mode 100644 index 0000000..4d91e4f Binary files /dev/null and b/public/wozstash.png differ diff --git a/scripts/index.js b/scripts/index.js index 316b266..48a4b1a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -3,113 +3,79 @@ const data = document.getElementById("data"); const generateButton = document.getElementById("generateButton"); const hexdisplay = document.getElementById("hexdisplay"); -const size_width = document.getElementById("size_width"); -const size_height = document.getElementById("size_height"); -const flag_type = document.getElementById("flag_type"); +const steam_game = document.getElementById("steam_game"); +const scott_index = document.getElementById("scott_index"); +const stash = document.getElementById("stash"); +const align = document.getElementById("align"); const root = document.querySelector(":root"); const ctx = canvas.getContext("2d"); -function getData() { - data.value = data.value.toUpperCase().replace(/[^0-9A-F]*/g, ""); - - var hexValue = data.value.match(/.{1,2}/g).map((x) => x.padStart(2, "0")); - - hexdisplay.innerHTML = hexValue.join(" "); - - createFlag( - hexValue.join("").match(/.{1,6}/g), - size_width.value, - size_height.value, - flag_type.value - ); - var ac = averageColors(hexValue); - console.log(ac); - root.style.setProperty( - "--background-color", - arrayToColor(darkenColor(ac, 70)) - ); - root.style.setProperty("--color", arrayToColor(lightenColor(ac, 70))); - root.style.setProperty("--accent-color", arrayToColor(ac)); - root.style.setProperty( - "--accent-color-fg", - arrayToColor(lightenColor(ac, 90)) - ); -} -generateButton.addEventListener("click", getData); - -function averageColors(hex) { - var averageSet = [[], [], []]; - hex.forEach((number, index) => { - averageSet[index % 3].push(parseInt(number, 16)); +async function loadImage(url) { + return new Promise((r) => { + let img = new Image(); + img.onload = () => r(img); + img.src = url; }); - return averageSet.map((array) => - Math.floor(array.reduce((a, b) => a + b) / array.length) - ); } -function createFlag(hex, w, h, type) { - canvas.width = w; - canvas.height = h; +async function getScott() { + var gameID = steam_game.value; + var scottID = scott_index.value; + var alignment = align.value; - // Initialize stuff + const ctx = canvas.getContext("2d"); - var width = ctx.canvas.width; - var height = ctx.canvas.height; - var textHeight = 24; - ctx.font = `${textHeight}px "Lexend Deca"`; + var hero = await loadImage( + `https://cdn.cloudflare.steamstatic.com/steam/apps/${gameID}/library_hero.jpg` + ).catch(() => "404"); + var scott = await loadImage( + stash.checked ? `public/wozstash.png` : `public/woz${scottID}.png` + ).catch(() => "404"); + var logo = await loadImage( + `https://cdn.cloudflare.steamstatic.com/steam/apps/${gameID}/logo.png` + ).catch(() => "404"); - ctx.clearRect(0, 0, width, height); - - console.log(hex); - - var hexColors = []; - var excessHex = ""; - - hex.forEach((compound) => { - if (compound.length < 6) excessHex = compound; - else hexColors.push(compound); - }); - - var rectWidth = width / hexColors.length; - var rectHeight = height / hexColors.length; - for (color in hexColors) { - ctx.fillStyle = "#" + hexColors[color]; - if (type === "horiz") ctx.fillRect(rectWidth * color, 0, rectWidth, height); - else if (type === "vert") - ctx.fillRect(0, rectHeight * color, width, rectHeight); + if (scott === "404") { + console.log("Scott error: " + scottID); + return `Scott ID ${scottID} does not exist.`; } - if (excessHex.length > 0) { - var text = "+ " + excessHex.match(/.{1,2}/g).join(" "); - var textWidth = ctx.measureText(text).width; - ctx.strokeStyle = "black"; - ctx.lineWidth = 4; - ctx.fillStyle = "white"; - ctx.strokeText(text, width - (textWidth + 8), height - textHeight / 2); - ctx.fillText(text, width - (textWidth + 8), height - textHeight / 2); + if (hero === "404" || logo === "404") { + console.log("404 error: " + gameID); + return `Steam ID ${gameID} does not have logo, hero image, or does not exist.`; } + var xalign; + switch (alignment) { + case "left": + xalign = 0; + break; + case "right": + xalign = -950; + break; + default: + xalign = -505; + break; + } + console.log("Generating: " + gameID); + ctx.drawImage(hero, xalign, 0, 2229, 720); + ctx.drawImage(scott, 0, 0, 1280, 720); + + const newHeight = 800 / (logo.width / logo.height); + ctx.fillStyle = "#000"; + ctx.shadowColor = "#000"; + ctx.shadowBlur = 16; + + if (stash.checked) + ctx.drawImage( + logo, + 400, + Math.min(560 - newHeight / 2, 669 - newHeight), + 800, + newHeight + ); + else + ctx.drawImage(logo, 64, Math.max(240 - newHeight / 2, 32), 800, newHeight); } -const clamp = (n, mi, ma) => Math.max(mi, Math.min(n, ma)); - -function lightenColor(color, mult) { - return [ - clamp(color[0] + (mult / 100) * (255 - color[0]), 0, 255), - clamp(color[1] + (mult / 100) * (255 - color[1]), 0, 255), - clamp(color[2] + (mult / 100) * (255 - color[2]), 0, 255), - ]; -} -function darkenColor(color, mult) { - return [ - clamp(color[0] - (mult / 100) * color[0], 0, 255), - clamp(color[1] - (mult / 100) * color[1], 0, 255), - clamp(color[2] - (mult / 100) * color[2], 0, 255), - ]; -} - -function arrayToColor(color) { - return ( - "#" + color.map((x) => Math.floor(x).toString(16).padStart(2, "0")).join("") - ); -} +generateButton.addEventListener("click", getScott); diff --git a/styles/normal.css b/styles/normal.css deleted file mode 100644 index 0cc5f16..0000000 --- a/styles/normal.css +++ /dev/null @@ -1,217 +0,0 @@ -/* Document form */ - -:root { - --base-scale: 16px; - - --background-color: hsl(0, 0%, 15%); - --color: hsl(0, 0%, 85%); - --accent-color: #808080; - --accent-color-fg: hsl(0, 0%, 95%); - --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; - --document-width: 40em; - - --border-style: 0.0625em solid var(--color); -} - -body { - width: 100vw; - max-width: var(--document-width); - margin: auto; - padding: 0.5em; -} - -html.base { - --background-color: #fff !important; - --color: #000 !important; - --accent-color: #000 !important; - --accent-color-fg: #fff !important; - --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol" !important; - --document-width: 40em; - - --border-style: 0.0625em solid var(--color); -} - -html.base body { - margin: 0; -} - -/* Size and type normalize */ - -html { - font-size: var(--base-scale); - background-color: var(--background-color); - color: var(--color); -} - -h1 { - font-size: 2em; - line-height: 1.5em; - margin: 0; - margin-bottom: 0.125em; -} - -h2 { - font-size: 1.5em; - line-height: 1.25em; - margin: 0; - margin-bottom: 0.25em; -} - -h3 { - font-size: 1.1em; - line-height: 1.25em; - margin: 0; - margin-bottom: 0.25em; -} - -p { - font-size: 1em; - line-height: 1.25em; - margin: 0.5em 0; -} - -small { - font-size: 0.75em; -} - -big { - font-size: 1.5em; -} - -code { - font-size: 1em; - line-height: 1.25em; - font-family: monospace; -} - -hr { - border: none; - border-top: var(--border-style); - background-color: transparent; - margin: 0.25em 0; -} - -/* Form normalize */ - -html { - font-family: var(--font-family); -} - -* { - box-sizing: border-box; -} - -*:focus { - outline: 2px solid var(--accent-color-fg); -} - -/* Interactive normalize */ - -a { - color: var(--accent-color); -} - -a:hover, -a:focus { - opacity: 0.8; -} - -a:active { - opacity: 0.5; -} - -input, -select, -textarea { - font-family: inherit; - border: var(--border-style); - padding: 0.25em 0.5em; - margin: 0.25em 0; - font-size: 1em; - background-color: var(--background-color); - color: var(--color); -} - -button, -input[type="button"], -input[type="submit"], -input[type="reset"] { - border: var(--border-style); - padding: 0.25em 0.5em; - margin: 0.25em 0; - font-size: 1em; - font-family: inherit; - background-color: var(--accent-color); - color: var(--accent-color-fg); -} - -button[data-outlined], -input[type="button"][data-outlined], -input[type="submit"][data-outlined], -input[type="reset"][data-outlined] { - border: var(--border-style); - background-color: var(--background-color); - color: var(--accent-color); -} - -button:hover, -input[type="button"]:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -button:focus, -input[type="button"]:focus, -input[type="submit"]:focus, -input[type="reset"]:focus { - opacity: 0.8; -} -button:active, -input[type="button"]:active, -input[type="submit"]:active, -input[type="reset"]:active { - opacity: 0.5; -} - -/* -- Checkbox styling */ - -label.checkbox { - display: inline-block; - position: relative; - margin: 0.25em 0; -} - -label.checkbox input[type="checkbox"] { - /* visibility: hidden; */ - opacity: 0; - width: 0; - height: 0; - position: absolute; - top: 0; - left: 0; -} - -label.checkbox input[type="checkbox"] + span.checkbox { - display: inline-block; - width: 1em; - height: 1em; - line-height: 1em; - padding: 0.25em; - box-sizing: content-box; - border: var(--border-style); - color: transparent; - text-align: center; - user-select: none; -} - -label.checkbox input[type="checkbox"]:focus + span.checkbox { - outline: 2px solid var(--accent-color-fg); -} - -label.checkbox input[type="checkbox"]:checked + span.checkbox { - background-color: var(--accent-color); - border: var(--border-style); - color: var(--accent-color-fg); -}