CryptoPhunk viewer

cryptophunk-viewer.markdown

CryptoPhunk viewer

A Pen by iApe on CodePen.

License.

script.vue

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
	<div id="app">
		<h1>CryptoPhunk Viewer</h1>

		<img :src="punkUrl" :style="{ background: background }" />
		<input v-model="number" type="number" min="0" max="9999" />

		<div class="background-choices">
			<div
				v-for="(background, index) in backgrounds"
				:key="index"
				:style="{ background: background }"
				@click="setBackground(background)"
				class="background-choice"
			></div>
		</div>
	</div>
</template>

<script>
export default {
	computed: {
		punkUrl() {
			return `https://phunks.s3.us-east-2.amazonaws.com/images/phunk${this.punkNumber}.png`;
		}
	},
	data() {
		return {
			punkNumber: "000",
			number: 0,
			backgrounds: [
				"#638596",
				"#000000",
				"#565656",
				"#9e9e9e",
				"#9857B7",
				"#FF2800",
				"#00FF00",
				"#E5B80B",
				"#FFF01F",
				"#F7F7F7",
				"#F0A4BB",
				"#FDAC7E",
				"#95554F",
				"#A64E49",
				"#9CF6FB",
				"#318DFD",
				"#373e98",
				"#16123f",
				"#4cbfa6",
				"#32064A",
				"#603084",
				"#FE019A",
				"#FF6700",
				"#fba92c"
			],
			background: ""
		};
	},
	watch: {
		number(newValue) {
			setTimeout(() => {
				if (this.number === newValue) this.view();
			}, 800);
		}
	},
	methods: {
		view() {
			if ((this.number < 0 || this.number > 9999) && this.number != "") {
				alert("Invalid punk number.");
			} else {
				this.punkNumber = this.number.toString().padStart(3, "0");
			}
		},
		setBackground(bg) {
			this.background = bg;
		}
	}
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	text-align: center;
	color: #2c3e50;
	margin: 60px 0;
}

a,
button,
input {
	color: #4fc08d;
}

button {
	background: none;
	border: solid 1px;
	border-radius: 2em;
	font: inherit;
	padding: 0.75em 2em;
}

button:hover {
	cursor: pointer;
}

input,
button {
	display: block;
	margin: 0 auto;
	margin-top: 24px;
}

input {
	height: 40px;
	padding: 0 16px;
	width: 600px;
	border: 1px solid;
}

img {
	height: 600px;
	width: 600px;
	image-rendering: pixelated;
	transition: all 1500ms;
}

.background-choices {
	display: flex;
	margin: 0 auto;
	margin-top: 24px;
	justify-content: center;
}

.background-choice {
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin-right: 16px;
	border: 2px solid transparent;
}

.background-choice:hover {
	border: 2px solid black;
}

@media only screen and (max-width: 480px) {
	img {
		width: 480px;
		height: 480px;
	}

	input {
		width: 480px;
	}
}
</style>