diff --git a/assets/dance-shrimp-dance.gif b/assets/dance-shrimp-dance.gif new file mode 100644 index 0000000..5f450b7 Binary files /dev/null and b/assets/dance-shrimp-dance.gif differ diff --git a/index.html b/index.html index e4571a7..a88556e 100755 --- a/index.html +++ b/index.html @@ -1,9 +1,14 @@ + 🦐🦐🦐 + - - +
@@ -35,7 +40,7 @@
-
this is a cool footer
+
@@ -48,9 +53,9 @@ todo list - style text in game descriptions - more shrimpy font - silly cookie bar (maybe) -- replace photos for htp & website -- htp description - shrimp profiles (about us) - menu i guess - animations +- shirmp cursor for hover +- shrimp rain when button --> \ No newline at end of file diff --git a/shrimpjects.js b/shrimpjects.js new file mode 100644 index 0000000..0269d28 --- /dev/null +++ b/shrimpjects.js @@ -0,0 +1,32 @@ +export const projects = { + "biotama":{ + content: + `Biotama is a game where players attempt to convert wastelands into thriving ecosystems.
+ The player starts with a "Mother Tree" + which acts as the core component of the player's ecosystem. + Trees grow roots that can connect together, + allowing them to communicate and send resources between each other. + Mycelial networks function similarly for fungi.
+ Biotama aims to be educational as well as fun. + It will feature real-world species with tooltips showing fun facts about those species. + We are consulting with experts in biology where necessary to ensure accuracy to the real world. + `, + images: { + left: {src:"biotama2.png",alt:"alt1"}, + right: {src:"biotama3.png",alt:"alt2"}, + central: {src:"biotama1.png",alt:"alt3"}, + }, + }, + "htp":{ + content: `A game by Shrimp Squad Studios made for the Epic MegaJam! + One week to make a game and this is what we made! A game based on the movie Hackers.
+ Your goal is to hack the Gibson computer and collect the garbage file. + Which will then in turn let you HACK THE PLANET!
+ Try it out!`, + images: { + left: {src:"htp1.png",alt:""}, + right: {src:"htp2.png",alt:""}, + central: {src:"htp3.png",alt:""}, + }, + }, +} \ No newline at end of file diff --git a/shrimple-functions.js b/shrimple-functions.js new file mode 100644 index 0000000..bd2f97c --- /dev/null +++ b/shrimple-functions.js @@ -0,0 +1,30 @@ +import { projects } from "./shrimpjects.js"; + +export function getProjectData(project){ + const leftImage = document.getElementById("image-left"); + const rightImage = document.getElementById("image-right"); + const centralImage = document.getElementById("image-central"); + const projectContent = document.getElementById("project-content"); + const projectData = projects[project]; + projectContent.innerHTML = projectData.content; + + const assetPath = "assets/" + + leftImage.src = assetPath + projectData.images.left.src; + leftImage.alt = "altleft"; + rightImage.src = assetPath + projectData.images.right.src; + centralImage.src = assetPath + projectData.images.central.src; + + return; +} + + +export function scrollToProjects(){ + const projects = document.getElementsByClassName("shrimp-projects")[0]; + projects.scrollIntoView({behavior:"smooth"}); +} + +export function createShrimpFooter() { + const footer = document.getElementById("shrimp-gif"); + footer.innerHTML = "".repeat(10); +} \ No newline at end of file diff --git a/shrimply-the-best.js b/shrimply-the-best.js index 0b199ea..1101106 100644 --- a/shrimply-the-best.js +++ b/shrimply-the-best.js @@ -1,62 +1,8 @@ +import {getProjectData, scrollToProjects, createShrimpFooter} from "./shrimple-functions.js"; + document.addEventListener("DOMContentLoaded", function(event) { getProjectData("biotama"); + createShrimpFooter(); }); -function getProjectData(project){ - const leftImage = document.getElementById("image-left"); - const rightImage = document.getElementById("image-right"); - const centralImage = document.getElementById("image-central"); - const projectContent = document.getElementById("project-content"); - projectData = projects[project]; - projectContent.innerHTML = projectData.content; - - const assetPath = "assets/" - - leftImage.src = assetPath + projectData.images.left.src; - leftImage.alt = "altleft"; - rightImage.src = assetPath + projectData.images.right.src; - centralImage.src = assetPath + projectData.images.central.src; - - return; -} - - -function scrollToProjects(){ - const projects = document.getElementsByClassName("shrimp-projects")[0]; - projects.scrollIntoView({behavior:"smooth"}); -} - -//todo move projects object into separate file - -const projects = { - "biotama":{ - content: - `Biotama is a game where players attempt to convert wastelands into thriving ecosystems.
- The player starts with a “Mother Tree” - which acts as the core component of the player’s ecosystem. - Trees grow roots that can connect together, - allowing them to communicate and send resources between each other. - Mycelial networks function similarly for fungi.
- Biotama aims to be educational as well as fun. - It will feature real-world species with tooltips showing fun facts about those species. - We are consulting with experts in biology where necessary to ensure accuracy to the real world. - `, - images: { - left: {src:"biotama2.png",alt:"alt1"}, - right: {src:"biotama3.png",alt:"alt2"}, - central: {src:"biotama1.png",alt:"alt3"}, - }, - }, - "htp":{ - content: `A game by Shrimp Squad Studios made for the Epic MegaJam! - One week to make a game and this is what we made! A game based on the movie Hackers.
- Your goal is to hack the Gibson computer and collect the garbage file. - Which will then in turn let you HACK THE PLANET!
- Try it out!`, - images: { - left: {src:"htp1.png",alt:""}, - right: {src:"htp2.png",alt:""}, - central: {src:"htp3.png",alt:""}, - }, - }, -} \ No newline at end of file +export {getProjectData, scrollToProjects} \ No newline at end of file diff --git a/shrimpy-styles.css b/shrimpy-styles.css index 5c7eff0..f147284 100644 --- a/shrimpy-styles.css +++ b/shrimpy-styles.css @@ -1,7 +1,3 @@ -/* style that shrimp -todo -https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations on button hover but with shrimp -*/ body { cursor: url("assets/shrimp_cursor.png"), auto; --space-shrimp-blue: #2C2C54; @@ -106,6 +102,14 @@ body { margin-top: 15px; } +#shrimp-gif { + display: flex; +} + +#shrimp-gif > * { + width:30%; +} + @media screen and (orientation: portrait) { #shrimp-project-content .upper{ flex-direction: column; diff --git a/ss.ico b/ss.ico new file mode 100644 index 0000000..c102399 Binary files /dev/null and b/ss.ico differ