LINUX.ORG.RU

История изменений

Исправление ddidwyll, (текущая версия) :

Разбираться в твоей проблеме было лень, поэтому я запилил свою кукушку, может чем поможет, по ссылке можешь нажать js output.

App.svelte 

<script>
  import timer from "./timer.js"
  import Cuckoo from "./Cuckoo.svelte"
	
  $: isTimeToCooCoo = $timer.second % 5 === 0
</script>

<pre> 
  [ second: {$timer.second} | minute: {$timer.minute} ] 
</pre>

{#if isTimeToCooCoo}
  <Cuckoo />
{/if}

timer.js 

import { readable } from "svelte/store"

const build = () => {
  const now = new Date()

  return { 
    second: now.getSeconds(),
    minute: now.getMinutes() || 60
  } 
}

export default readable(build(), set => {
  const interval = setInterval(() => set(build()), 100)

  return () => clearInterval(interval)
})

Cuckoo.svelte 

<script>
  import timer from "./timer.js"
</script>

<figure>
  <p>Coo-coo,<br>bitches!</p>
  <p>{$timer.minute} times!</p>
</figure>

<style>
figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 150px;
  max-width: 150px;		
  min-height: 150px;
  max-height: 150px;
  background: red;
  border-radius: 75px;
  margin: 20px auto;
}
p {		
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  margin: 5px;
  text-align: center;
}
</style>

Исходная версия ddidwyll, :

Разбираться в твоей проблеме было лень, поэтому я запилил свою кукушку, может чем поможет, по ссылке можешь нажать js output.

App.svelte 

<script>
  import timer from "./timer.js"
  import Cuckoo from "./Cuckoo.svelte"
	
  $: isTimeToCooCoo = $timer.second % 5 === 0
</script>

<pre> 
second: {$timer.second}
minute: {$timer.minute} 
</pre>

{#if isTimeToCooCoo}
  <Cuckoo />
{/if}

timer.js 

import { readable } from "svelte/store"

const build = () => {
  const now = new Date()

  return { 
    second: now.getSeconds(),
    minute: now.getMinutes() || 60
  } 
}

export default readable(build(), set => {
  const interval = setInterval(() => set(build()), 100)

  return () => clearInterval(interval)
})

Cuckoo.svelte 

<script>
  import timer from "./timer.js"
</script>

<figure>
  <p>Coo-coo,<br>bitches!</p>
  <p>{$timer.minute} times!</p>
</figure>

<style>
figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 150px;
  max-width: 150px;		
  min-height: 150px;
  max-height: 150px;
  background: red;
  border-radius: 75px;
  margin: 20px auto;
}
p {		
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  margin: 5px;
  text-align: center;
}
</style>