first commit
Auric Vente
|
|
@ -0,0 +1,53 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: mordred;
|
||||||
|
src: url(mordred.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: black;
|
||||||
|
background-color: #F0E0D6;
|
||||||
|
font-family: mordred;
|
||||||
|
font-size: 18px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#words {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.6rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word {
|
||||||
|
font-size: 3rem;
|
||||||
|
animation-name: fadein;
|
||||||
|
animation-duration: 0.8s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#card {
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
animation-name: fadein;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadein {
|
||||||
|
0% {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 318 B |
|
|
@ -0,0 +1,24 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Oracle</title>
|
||||||
|
<link rel="shortcut icon" href="favicon.ico?v=1" type="image/x-icon">
|
||||||
|
<script src="js/base.js"></script>
|
||||||
|
<script src="js/words.js"></script>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.onload = () => {
|
||||||
|
App.init()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="words"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<audio preload class="sound" id="atmo" src="audio/atmo.mp3"></audio>
|
||||||
|
<audio preload class="sound" id="pup" src="audio/pup.mp3"></audio>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
const App = {}
|
||||||
|
App.show_delay = 1441
|
||||||
|
|
||||||
|
App.init = () => {
|
||||||
|
App.set_volume()
|
||||||
|
App.play(`atmo`)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
App.show_word()
|
||||||
|
}, App.show_delay)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
App.show_word()
|
||||||
|
}, App.show_delay * 2)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
App.show_word()
|
||||||
|
}, App.show_delay * 3)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
App.show_card()
|
||||||
|
}, App.show_delay * 4)
|
||||||
|
}
|
||||||
|
|
||||||
|
App.show_word = () => {
|
||||||
|
let word = App.words[App.get_random_int(0, App.words.length - 1)]
|
||||||
|
let el = document.createElement(`div`)
|
||||||
|
el.textContent = word
|
||||||
|
el.classList.add(`word`)
|
||||||
|
App.el(`#words`).append(el)
|
||||||
|
el.style.opacity = 1
|
||||||
|
App.play(`pup`)
|
||||||
|
}
|
||||||
|
|
||||||
|
App.show_card = () => {
|
||||||
|
let n = App.get_random_int(1, 22)
|
||||||
|
let fname = `deck/${n}.gif`
|
||||||
|
|
||||||
|
let img = document.createElement(`img`)
|
||||||
|
img.id = `card`
|
||||||
|
img.src = fname
|
||||||
|
|
||||||
|
App.el(`#container`).append(img)
|
||||||
|
img.style.opacity = 1
|
||||||
|
}
|
||||||
|
|
||||||
|
App.play = (what) => {
|
||||||
|
App.el(`#${what}`).pause()
|
||||||
|
App.el(`#${what}`).currentTime = 0
|
||||||
|
App.el(`#${what}`).play()
|
||||||
|
}
|
||||||
|
|
||||||
|
App.set_volume = () => {
|
||||||
|
App.el(`#atmo`).volume = 0.45
|
||||||
|
}
|
||||||
|
|
||||||
|
App.get_random_int = (min, max) => {
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||||
|
}
|
||||||
|
|
||||||
|
App.el = (query, root = document) => {
|
||||||
|
return root.querySelector(query)
|
||||||
|
}
|
||||||