Skip to content

Instantly share code, notes, and snippets.

@noonworks
Created February 8, 2020 19:53
Show Gist options
  • Save noonworks/7a1f80dc7ce197276b2298fdf72fafdb to your computer and use it in GitHub Desktop.
Save noonworks/7a1f80dc7ce197276b2298fdf72fafdb to your computer and use it in GitHub Desktop.
<template>
<span
:class="$style.actionicon"
:style="{ backgroundImage, width, height, borderRadius: radius + 'px' }"
@mouseover="onMouseover"
@click="onClick"
>
<span :class="$style.highlight" />
</span>
</template>
<style module>
.actionicon {
position: relative;
background-size: cover;
display: inline-block;
box-shadow: 0 0 3px 0 rgba(255, 255, 255, 1) inset,
0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}
.highlight {
width: 92%;
height: 20%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 6px;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.85) 0%,
rgba(255, 255, 255, 0.1) 100%
);
}
</style>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
export enum Events {
IconMouseover = 'icon-mouseover', // iconMouseover(id, event)
IconClick = 'icon-click' // iconClick(id, event)
}
@Component
export default class ActionIcon extends Vue {
@Prop({ type: Number, required: true }) readonly no!: number;
@Prop({ type: Number, required: true }) readonly size!: number;
@Prop({ type: Number, required: false, default: 8 }) readonly radius!: number;
public get width(): string {
return `${this.size}px`;
}
public get height(): string {
return `${this.size}px`;
}
public get backgroundImage(): string {
if (!this.$master.spells.valid(this.no - 1))
return 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)';
return 'url(/images/actions/' + ('0' + this.no).slice(-2) + '.png)';
}
public onMouseover(ev: MouseEvent): void {
this.$emit(Events.IconMouseover, this.no - 1, ev);
}
public onClick(ev: MouseEvent): void {
this.$emit(Events.IconClick, this.no - 1, ev);
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment