Start.vue 1.65 KB
Newer Older
Adam Procter's avatar
init  
Adam Procter committed
1
2
3
4
5
6
<template>
  <header class="header">
    <h1 class="long">nodenogg<span class="highlight">.in</span></h1>
    <h2>a messy mapping tool for multiplayer thinking</h2>
  </header>
  <nav class="nav">
Adam Procter's avatar
Adam Procter committed
7
    <a role="button" class="letsplay" href="#" @click="letsPlay"
Adam Procter's avatar
init  
Adam Procter committed
8
9
      >let's play !</a
    >
Adam Procter's avatar
Adam Procter committed
10
    <a role="button" class="tellmemore" href="#" @click="tellMore"
Adam Procter's avatar
tidy up    
Adam Procter committed
11
12
      >tell me more</a
    >
Adam Procter's avatar
init  
Adam Procter committed
13
  </nav>
Adam Procter's avatar
tidy up    
Adam Procter committed
14

Adam Procter's avatar
Adam Procter committed
15
16
17
  <main v-if="isStart" ref="start">
    <JoinMicrocosm />
  </main>
Adam Procter's avatar
tidy up    
Adam Procter committed
18

Adam Procter's avatar
Adam Procter committed
19
  <aside v-if="isStart == false" ref="moreinfo">
Adam Procter's avatar
tidy up    
Adam Procter committed
20
    <TellmeMore />
Adam Procter's avatar
init  
Adam Procter committed
21
22
23
24
25
  </aside>
</template>

<script>
// @ is an alias to /src
ap2x07's avatar
updates    
ap2x07 committed
26
27
import JoinMicrocosm from '@/components/JoinMicrocosm.vue'
import TellmeMore from '@/components/TellmeMore.vue'
Adam Procter's avatar
init  
Adam Procter committed
28
29

export default {
ap2x07's avatar
updates    
ap2x07 committed
30
  name: 'Start',
Adam Procter's avatar
init  
Adam Procter committed
31
32
  components: {
    JoinMicrocosm,
Adam Procter's avatar
tidy up    
Adam Procter committed
33
    TellmeMore,
Adam Procter's avatar
init  
Adam Procter committed
34
35
36
  },
  data() {
    return {
Adam Procter's avatar
tidy up    
Adam Procter committed
37
      isStart: null,
ap2x07's avatar
updates    
ap2x07 committed
38
    }
Adam Procter's avatar
tidy up    
Adam Procter committed
39
  },
Adam Procter's avatar
Adam Procter committed
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

  methods: {
    letsPlay() {
      this.isStart = true
      setTimeout(() => {
        const el = this.$refs.start
        if (el) {
          el.scrollIntoView({ behavior: 'smooth' })
        }
      }, 100)
    },
    tellMore() {
      this.isStart = false
      setTimeout(() => {
        const el = this.$refs.moreinfo
        if (el) {
          el.scrollIntoView({ behavior: 'smooth' })
        }
      }, 100)
    },
  },
ap2x07's avatar
updates    
ap2x07 committed
61
}
Adam Procter's avatar
init  
Adam Procter committed
62
63
64
65
66
67
68
69
</script>

<style scoped>
aside {
  max-width: 800px;
}
a {
  display: block;
Adam Procter's avatar
Adam Procter committed
70
  font-size: 1em;
Adam Procter's avatar
init  
Adam Procter committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
  color: black;
  text-decoration-line: none;
  margin: 1em 0.8em;
  padding: 1em 1.2em;
}

.tellmemore {
  background-color: rgba(196, 47, 152, 0.4);
}

.letsplay {
  background-color: rgba(37, 194, 194, 0.4);
}

@media only screen and (min-width: 330px) {
  a {
    display: inline-block;
  }
}
</style>