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
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);
-}