diff --git a/src/components/ContainerView.vue b/src/components/ContainerView.vue index 4636fab..4067358 100644 --- a/src/components/ContainerView.vue +++ b/src/components/ContainerView.vue @@ -1,13 +1,10 @@ @@ -19,9 +16,24 @@ import { POV } from '@/game/language' import { Stats, Stat } from '@/game/combat' import { Container, VoreContainer, Vore } from '@/game/vore' +function wiggle (contents: HTMLElement) { + setTimeout(() => wiggle(contents), 3000) + const width = contents.clientWidth + const height = contents.clientHeight + contents.querySelectorAll(".container-prey").forEach(elem => { + const prey = elem as HTMLElement + const preyWidth = prey.clientWidth + const preyHeight = prey.clientHeight + setTimeout(() => { + (prey as HTMLElement).style.left = (Math.floor(Math.random() * (width - preyWidth)) + "px"); + (prey as HTMLElement).style.top = (Math.floor(Math.random() * (height - preyHeight)) + "px") + }, Math.random() * 3000) + }) +} + // yoinked from https://jsfiddle.net/yckart/0adfw47y/ -function draw (delta: number, dt: number, total: number, parent: HTMLElement, canvas: HTMLCanvasElement, container: VoreContainer) { +function draw (delta: number, dt: number, total: number, parent: HTMLElement, canvas: HTMLCanvasElement, container: VoreContainer, smoothedFraction: number, smoothedLiveliness: number) { const ctx = canvas.getContext('2d') as CanvasRenderingContext2D canvas.width = parent.clientWidth @@ -32,14 +44,17 @@ function draw (delta: number, dt: number, total: number, parent: HTMLElement, ca const deadFraction = container.digested.reduce((total: number, prey: Vore) => total + prey.voreStats.Bulk, 0) / container.capacity const liveliness = livingFraction + deadFraction * 0.5 - total += dt * liveliness + smoothedFraction = smoothedFraction * 0.995 + fraction * 0.005 + smoothedLiveliness = smoothedLiveliness * 0.995 + liveliness * 0.005 + + total += dt * smoothedLiveliness - requestAnimationFrame((newDelta: number) => draw(newDelta, newDelta - delta, total, parent, canvas, container)) + requestAnimationFrame((newDelta: number) => draw(newDelta, newDelta - delta, total, parent, canvas, container, smoothedFraction, smoothedLiveliness)) - const randomLeft = Math.abs(Math.pow(Math.sin(total / 1000), 2)) * fraction * 100 + (1 - fraction) * canvas.height - const randomRight = Math.abs(Math.pow(Math.sin((total / 1000) + 10), 2)) * fraction * 100 + (1 - fraction) * canvas.height - const randomLeftConstraint = Math.abs(Math.pow(Math.sin((total / 1000) + 2), 2)) * fraction * 100 + (1 - fraction) * canvas.height - const randomRightConstraint = Math.abs(Math.pow(Math.sin((total / 1000) + 1), 2)) * fraction * 100 + (1 - fraction) * canvas.height + const randomLeft = Math.abs(Math.pow(Math.sin(total / 1000), 2)) * smoothedFraction * 100 + (1 - smoothedFraction) * canvas.height + const randomRight = Math.abs(Math.pow(Math.sin((total / 1000) + 10), 2)) * smoothedFraction * 100 + (1 - smoothedFraction) * canvas.height + const randomLeftConstraint = Math.abs(Math.pow(Math.sin((total / 1000) + 2), 2)) * smoothedFraction * 100 + (1 - smoothedFraction) * canvas.height + const randomRightConstraint = Math.abs(Math.pow(Math.sin((total / 1000) + 1), 2)) * smoothedFraction * 100 + (1 - smoothedFraction) * canvas.height ctx.beginPath() ctx.moveTo(0, randomLeft) @@ -65,8 +80,10 @@ export default class ContainerView extends Vue { canvas.width = (this.$el as HTMLElement).clientWidth canvas.height = (this.$el as HTMLElement).clientHeight canvas.width = canvas.width + 0 - requestAnimationFrame((delta: number) => draw(delta, delta, Math.random() * 1000, this.$el as HTMLElement, canvas, (this.container as VoreContainer))) + requestAnimationFrame((delta: number) => draw(delta, delta, Math.random() * 1000, this.$el as HTMLElement, canvas, (this.container as VoreContainer), 0, 0)) } + + wiggle(this.$el.querySelector(".container-contents") as HTMLElement) } } @@ -75,8 +92,11 @@ export default class ContainerView extends Vue { diff --git a/src/components/Explore.vue b/src/components/Explore.vue index e0e2338..725eaec 100644 --- a/src/components/Explore.vue +++ b/src/components/Explore.vue @@ -96,15 +96,17 @@ export default class Explore extends Vue { flex: 10; position: relative; display: grid; - grid-template-areas: "containers containers statblock" - "log log worldinfo" - "log log info " - "log log choices " - "nav nav choices "; - grid-template-rows: fit-content(30%) fit-content(250pt) 2fr 1fr 1fr; - grid-template-columns: 1fr 1fr 1fr; + grid-template-areas: "worldinfo log log statblock" + "worldinfolog log log containers" + "info log log choices " + "info log log choices " + "info nav nav choices "; + grid-template-rows: fit-content(50%) fit-content(30%) 2fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; width: 100%; height: 100%; + max-width: 1500px; + margin: auto; overflow: hidden; } @@ -112,11 +114,15 @@ export default class Explore extends Vue { grid-area: containers; display: flex; flex-direction: row; - flex-wrap: nowrap; - overflow-x: scroll; + flex-wrap: wrap; + overflow-x: hidden; justify-content: flex-end; } +.explore-containers > .vore-container { + flex-basis: 25%; +} + .explore-log { grid-area: log; background: #222; @@ -171,7 +177,6 @@ export default class Explore extends Vue { grid-template-columns: 1fr 1fr 1fr; width: calc(100% - 16px); height: calc(100% - 16px); - max-width: 1000px; justify-self: end; }